DCSIMG
אתגר חדש בנושא CSS ו DIV - הצצה לחיים של טכנובלוגר

הצצה לחיים של טכנובלוגר

ברוכים הבאים לבלוג שלי, הבלוג מתעדכן בתדירות קבועה, אז שיהיה לכולנו קריאה מהנה

אתגר חדש בנושא CSS ו DIV


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

לדוגמא בהסתמך על תמונת מסך מההבלוג שלי כאשר אני נמצא בראש העמוד, החלק הירוק שהוא ה DIV מופיע בתחתית העמוד.

 

image

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


שימו לב: אני לא רוצה פיתרון IFRAME סטייל THE MARKER או גלובס, זה לא מה שאני מחפש. כמו כן, אי אפשר להסתמך על קבלת הגובה מ TOP של העמוד מהכפתור שעליו לחצנו בגלל שכבר אמרתי שאי אפשר להסתמך על מיקומו של הכפתור.

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

פורסם: Mar 14 2008, 03:23 PM by DrorEngel | with 10 comment(s)
תגים:

תוכן התגובה

akalter כתב/ה:

יש לי פיתרון - איך אני מוסר אותו?

# March 14, 2008 3:57 PM

DrorEngel כתב/ה:

אתה יכול פה ואם זה ארוך מדי אז במייל

droren בגוגל מייל

# March 14, 2008 5:01 PM

Ken Egozi כתב/ה:

בשישי בערב?

בחייך - הצ'ולנט עוד לא ירד

# March 14, 2008 10:41 PM

איתמר כתב/ה:

מה החידה בזה?

www.cssplay.co.uk/.../fixit.html

אפשר בקלות להשתמש ב-javascript כדי לשנות את ה-display שלו מ-block ל-none.

איתמר.

# March 15, 2008 10:42 PM

DrorEngel כתב/ה:

איתמר,

איך אתה קובע לו את המיקום <?

# March 16, 2008 12:24 AM

ronifu כתב/ה:

"לצערי" עשיתי את זה בעבר.

מחר בבוקר אני אחפש לך קוד.

# March 16, 2008 1:10 AM

ronifu כתב/ה:

בבקשה

<!-- (Javascript) -->

<script language="Javascript">

<!--

var JH = 0;

var SH = 0;

var JW = 0;

var JX = 0;

var JY = 0;

var image_width = 95;

var image_height = 17;

var left = image_width;

var up = image_height;

var wm = document.all.divid;

JH = document.body.clientHeight;

SH = document.body.scrollHeight;

JW = document.body.clientWidth;

JX = document.body.scrollLeft;

JY = document.body.scrollTop;

wm.style.top = (JH+JY-up);

wm.style.left =(JW+JX-left);

wm.style.display = "";

function funWinChange() {

wm.style.display = "none";

JH = document.body.clientHeight;

SH = document.body.scrollHeight;

JW = document.body.clientWidth;

JX = document.body.scrollLeft;

JY = document.body.scrollTop;

var iEndOfPage= JY + JH;

if(iEndOfPage == SH) {

wm.style.display = "none";

}

else{

wm.style.top = (JH+JY-up);

wm.style.left =(JW+JX-left);

wm.style.display = "";

}

}

//-->

</script>

<!-- (BODY) -->

<body onresize="funWinChange()" onscroll="funWinChange()">

<!-- (DIV) -->

<DIV ID="divid" STYLE="MARGIN-TOP: 0px; POSITION: absolute; TOP: 1px; BACKGROUND-COLOR: #790619" zIndex="1000" ALIGN="right"><img src="images/ScrollArrow.gif"></DIV>

# March 16, 2008 11:42 AM

Avi Pinto כתב/ה:

@איתמר - זה לא בדיוק מה שדרור ביקש (למרות שהתוצאה נראית יפה ומספקת)

בפתרון שצירפת כל ה content נמצאת בתוך DIV אשר מקבל גודל שונה כאשר עושים resize לעמוד,

לפי תצלומי המסך של דרור - הוא רוצה שע"י לחיצץ כפתור תגרום ל DIV לרחף בתחתית העמוד ללא קשר לscroll של העמוד

# March 16, 2008 6:34 PM

DrorEngel כתב/ה:

איתמר,

אבי פינטו צודק...

עדיין מחכה לפתרון

# March 16, 2008 9:24 PM

איתמר כתב/ה:

דרור,

סורי אני לא מקבל עדכונים במייל על תגובות חדשות פה...

אני לא בטוח שאני מבין מה אתה מחפש בדיוק... div ש"מרחף" בתחתית המסך - קיבלת (אלא אם כן אתה מתכוון לריחוף עם אנימציה כמו בפרסומות באתרי תוכן כמו וויינט?).

כבר ציינתי בפוסט המקורי שניתן להעלים/להציג את ה-div המדובר באמצעות javascript - לשנות את התכונה display מ-block ל-none וחוזר חלילה. בנוגע לשינוי מיקום וגודל - ניתן לשנות גם תכונות אלה באמצעות javascript במידה ויש בכך צורך.

אשמח להיות לעזר נוסף אם צריך.

איתמר.

# March 19, 2008 10:05 PM
שלח תגובה

(שדה חובה)  

(שדה חובה)  

(אופציונלי)

(שדה חובה) 

Please add 5 and 7 and type the answer here:


Enter the numbers above: