איך מוצאים אלמנט שחורג מהמסך? טריק קטן לבוני אתרים

Warning: Use of undefined constant get_the_title - assumed 'get_the_title' (this will throw an Error in a future version of PHP) in /home/customer/www/sagive.co.il/public_html/wp-content/themes/sagive/functions/misc-functions.php on line 305

אם אתם בונים אתרים המאמר הזה בשבילכם! ישנם הרבה דברים שיכולים להשתבש כאשר בונים אתר וDebugging הוא חלק טבעי מהתהליך של בניית אתרים מוצלחים שנראים טוב בכל המסכים.

בעידן המודרני (דהיינו החל מלפני שלוש שנים) אנחנו בונים אתרים רספונסיביים! ויתרה מכך, הרבה בוחרים לבנות אתרים אשר נמתחים לכל אורך המסך – זה באופנה, זה יפה וזה פופולרי.

למה האתר חורג מרוחב המסך?!

הרבה פעמים אתם עשויים להיתקל באלמנט אחד אשר גורם לזליגה מרוחב המסך ויוצר גלילה אופקית מיותרת שהיינו שמחים להפטר ממנו… ישנם כמובן טריקים למנוע גלילה צידית של האתר וכך למעשה להביא את הזליגה אבל תמיד מומלץ פשוט לפתור את הבעיה!

זה עשוי להיות מתסכל!

זה יכול להיות ממש מייאש לנסות למצוא את אותו DIV או אלמנט אשר גורם לגלילה אופקית ולכן החלטנו לשתף אתכם פתרון קל ומהיר שנועד במיוחד לבוני אתרים שמבינים דבר או שניים ויעזור לנו למצוא איזה אלמנט גורם לחריגה מרוחב המסך ולכן ליצירה אותו גולל אופקי.

דוגמה מתוך אתר שאנו בונים (ממש עכשיו)

להלן תמונה מתוך אתר שאנו בונים עכשיו בשם Hawaiian Moving (למתעניינים: אנו מספקים שירותי בניית אתרי וורדפרס חכמים, מותאמים לסלולרי, שמנועי חיפוש אוהבים וכאלה שקל לנהל בעצמכם… בקרו בתיק העבודות שלנו למידע נוסף)

איך מוצאים איזה מיכל חורג מרוחב המסך

בכדי לתקן את הבעיה אנחנו צריכים למצוא את ראשית כל למצוא את האלמנט – הDIV או המיכל אשר גורם לתופעה הזאת… המיכל ש"לא מקשיב" לכללי האתר וגורם לOverFlow. אז איך עושים את זה? הנה כמה שיטות

שיטה 1: Javascript

אנחנו יכולים להשתמש בjavascript כדי לבדוק איזה אלמנט חורג (גורם לOverflow) מתג ה document. זה יחסית קל להטמעה ו.. הקוד ישחק את תפקיד הבלש אשר יחזיר לנו את שם האלמנט או האלמנטים אשר חורגים מהדף.

פונקציה שתחזיר את שם (ID וClass) של המיכל אשר חורג

• יש להטמיע בדף הרצוי בתוך תגיות script

jQuery(function($){
	var docWidth 	= document.documentElement.offsetWidth;
	var resData  	= '';
	resData			= '<li>Doc Width: '+docWidth+'</li>';
	
	[].forEach.call(
		document.querySelectorAll('*'),
		function(el) {
			if (el.offsetWidth > docWidth) {
				
				var ele_name	= 'div';
				var ele_id		= el.attributes[0].ownerElement.id;
				var ele_cls		= el.attributes[0].ownerElement.className;
				
				if(ele_id) {ele_name = ele_name + '#' + ele_id;}
				if(ele_cls) {ele_name = ele_name + '.' + ele_cls;}
				
				console.log(el.ownerElement);
				console.log(el.attributes[0].ownerElement);
				
				resData = resData + '<li>'+ele_name+'</li>';
			}
		}
	);	
	
	$('<div style="margin: 30px auto; border: 2px solid #ddd; padding: 20px; width: 60%; position: fixed; bottom: -25px;left: 0;right: 0;background: #fff; z-index: 999;"><ul>'+resData+'</ul></div>').prependTo('body');
})

שיטה 2: Css

אם נחשוב על זה אנחנו בסה"כ צריכים קצת עזרה "לראות" מה בולט החוצה מהאתר שלנו ולכן אפשר לעשות את זה בקלות עם CSS פשוט נוסיף את הפקודה הבאה לקובץ הCSS שלנו באופן זמני או פשוט נוסיף את הכלל הזה בקוד אינספקטור של כרום (או פיירבאג בפיירפוקס)

הכלל הבא יסמן הכל עם מסגרת אדומה וכך יעזור לנו לזהות אלמנטים חורגים

• זכרו, זהו כלל זמני שנסיר לאחר מכן

* {
    outline: 1px solid red;
}

שיטה 3: נשלב את שתי השיטות

עכשיו שיש לנו שתי שיטות מעולות לזהות איזה אלמנט שובר לנו את התצוגה באתר וזולג החוצה נשלב אותן ביחד כדי שנוכל לזהות את אותו אלמנט בקלות. גם נקבל את הID והקלאס של הDIV וגם נסמן אותו עם גבול אדום שיעזור לנו לזהות אותו בעין.

שילוב זריז של שתי השיטות יחדיו

• יש להטמיע בדף הרצוי בתוך תגיות script

jQuery(function($){
	var docWidth 	= document.documentElement.offsetWidth;
	var resData  	= '';
	resData			= '<li>Doc Width: '+docWidth+'</li>';
	
	[].forEach.call(
		document.querySelectorAll('*'),
		function(el) {
			if (el.offsetWidth > docWidth) {
				
				el.style.border = "1px solid red";
				
				var ele_name	= 'div';
				var ele_id		= el.attributes[0].ownerElement.id;
				var ele_cls		= el.attributes[0].ownerElement.className;
				
				if(ele_id) {ele_name = ele_name + '#' + ele_id;}
				if(ele_cls) {ele_name = ele_name + '.' + ele_cls;}
				
				
				resData = resData + '<li>'+ele_name+'</li>';
			}
		}
	);	
	
	$('<div style="margin: 0 auto; border: 2px solid #ddd; padding: 20px; width: 60%; position: fixed; bottom: 20px;left: 0;right: 0;background: #fff; z-index: 999;"><ul>'+resData+'</ul></div>').prependTo('body');
})

מצאתי וסימנתי את האלמנט שמפריע

עזרתי? בהצלחה

אני יודע שהמיני מדריך הזה מכוונן לקהל יעד מאוד מאוד מסוים – רק אלו ביניכם אשר בונים אתרים למחייתכם אבל מכיוון שמדובר בבעיה שהטרידה אותי לפחות שעה / שעתיים החלטתי להרים את הכפפה ולמצוא פתרון. מקווה שעזרתי למי שנתקל באותו נושא והמון בהצלחה.