שינוי style לפי גובה חלון - תכנות - HWzone פורומים
עבור לתוכן
  • צור חשבון

שינוי style לפי גובה חלון

IlanF

נוצר על ידי IlanF
ב תכנות

Recommended Posts

IlanF Zone Master

IlanF

פורסם
פורסם

אני רוצה לשנות את העיצוב של div לפי גובה החלון וגובה טבלה מסויימת.

אם גובה הטבלה > גובה החלון, אז יהיה עיצוב מסויים, אחרת יהיה העיצוב שנקבע בקובץ העיצוב.

ניסיתי לעשות את זה עם javascript, מצאתי קוד שבודק גובה ורוחב של החלון וניסיתי ליישם את זה..

לא ממש הצלחתי.

זה הקוד שלי:

	if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
 } else if( document.documentElement &&
   ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
 }

	if(document.getElementById("t_content").style.height > myHeight)
		document.getElementById("footer").style.position = "relative";

מה אני עושה פה לא נכון?

קישור לתוכן
שתף באתרים אחרים
shuki142 Zone Freak

shuki142

פורסם
פורסם

זה מה שאמור להיות רשום ב If שלך.

זה שזה לא עובד זה משום שאין לי מושג למה אתה נותן position: relative שם.

אולי תסביר קצת יותר אודות הקוד שלך ומה אתה מנסה לעשות שם.

תעשה ניסיון, ובמקום מה שרשמת בתוך ה IF תרשום איזה alert תראה אם זה עובד

קישור לתוכן
שתף באתרים אחרים
IlanF Zone Master

IlanF

פורסם
  • מחבר
פורסם

יש לי footer שבקובץ עיצוב שמתי לו שיהיה על תחתית המסך (position: fixed;).

אבל אם יש לי תוכן בדף שגבוה יותר מהעמוד, יוצא שה footer עומד מעל התוכן.

כשאני נותן לו position: relative ה footer יורד עד הסוף למטה, מתחת לתוכן.

אבל הבעיה שאם אני אשאיר אותו ככה תמיד, כשיש לי פחות תוכן מהגובה של העמוד, הfooter עולה למעלה (לכיוון אמצע העמוד).

התוכן בדף הוא דינמי, אז אני לא יכול לקבוע מתי יהיה יותר תוכן מהגובה של העמוד, או מתי יש פחות.

זה בערך הבעיה שלי...

קישור לתוכן
שתף באתרים אחרים
shuki142 Zone Freak

shuki142

פורסם
פורסם

כבר אומר לך מראש, שהשיטה הזאת שאתה משתמש באה לפתור לך בעיה אחרת שנתקלת בה ותיארת אותה פה.

הפיתרון שהצעת פה זה ממש לא הפיתרון הנכון אלא אילתור של פיתרון שלא הכי מומלץ.

בכל מקרה אתה מוזמן להראות לנו דוגמא של הקוד שלך אולי נוכל לפתור לך את הבעיה בדרך הנכונה ולא בדרך שאתה הולך כרגע.

במידה ואינך מעוניין בכך אז פשוט אתה צריך לעשות את הדבר הבא.

דבר ראשון תזהה את השטח שיש לגולש בדף (זאת אומרת האורך של הדף שהגולש יכול לראות).

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

אם תצרף את הקוד של הדף נוכל לעזור לך יותר.

תן קישור לדף שבנית או תעלה את כל קבצי ה HTML והקוד שמסביב לפה כידי שנוכל לעזור לך.

קישור לתוכן
שתף באתרים אחרים
IlanF Zone Master

IlanF

פורסם
  • מחבר
פורסם

אני יודע שזה אילתור... נראה שהמוח שלי לא עובד היום מספיק טוב לחשוב על פתרון יותר טוב :silly:

אם יש דרך אחרת לעשות דבר כזה אני אשמח לדעת (שה footer ירד עם התוכן, אבל אם התוכן קצר יותר מגובה העמוד, שה footer יהיה נעול בתחתית העמוד)

מה שיש לי בדף זה משהו כזה (את התוכן אני מוסיף לדף בעזרת PHP מתוך מסד נתונים באיזור שמסומן כ- CONTENT ):

<html>
<head>
	<style>
		#footer
		{
			position: fixed;
			bottom: 20px;
		}
	</style>
</head>
<body>
	<table id="t_wrapper" align="center" valign="top">
		<tr><td>
			<? include('header.inc'); ?> <!--// LOGO/MENU //-->
		</td></tr>
		<tr><td>
			<table id="t_content" align="right" valign="top" height="300">
				<tr>
					<td>
						<!--// CONTENT //-->
					</td>
				</tr>
			</table>
		</td></tr>
		<tr><td>
			<?php include('footer.inc'); ?> <!--// FOOTER //-->
		</td></tr>
	</table>
</body>
</html>

ובפוטר:

<div id="footer">
		<a href="">בלה בלה</a> © כל הזכויות שמורות בלה בלה<br />
		<a href="">לינק</a> | <a href="">לינק</a> | <a href="">לינק</a><br />
</div>

קישור לתוכן
שתף באתרים אחרים
shuki142 Zone Freak

shuki142

פורסם
פורסם

דבר ראשון תעיף את הגדרות ה CSS שהוספת ל Div של החלק התחתון.

לאחר מכן, תוסיף את הפונקציה הזאת אליך לקוד שלך


function funHeight() {
      var contentHeight = document.getElementById("t_wrapper").offsetHeight;

      if (myHeight > contentHeight) {
        document.getElementById("footer").style.position = "absolute";
        document.getElementById("footer").style.bottom = "20px";
      }
    }

לסיום תפעיל את הפונקציה funHeight בעת טעינת הדף.

זה אמור לענות לבקשות שביקשת פה.

קישור לתוכן
שתף באתרים אחרים

ארכיון

דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

עבור לרשימת הדיונים
×
  • צור חדש...