Jump to content

Scrolling Div With Nested Divs Not Scrolling

geomagnet

By geomagnet
in CSS

Recommended Posts

geomagnet Newbie

geomagnet

Posted
Posted

I was wondering how to have a scrolling div with divs nested inside that scroll with the parent div.Of course, it stays put when the div scrolls. Heres some psuedo code to explain my problem.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><div style="overflow-y:auto; width:350px; height:150px"><div style=" width:220px; border:solid #DDDDDD 1px; padding:10px;"> <div style="color:#666666; font-size:14px; font-weight:bold">Rating:</div><hr size="0" noshade="noshade" /> <table width="220" border="0" cellspacing="0" cellpadding="4"><!--- star graphic --> <tr> <td width="105"> <table width="105" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div style="overflow:auto; display:table"> <div id="stars" style="width:{$stars}; overflow:hidden; top:0px; float:left; position:relative"> <!-- {$stars} = rating value provided by php. --> <img src="images/rated.png" /></div><img src="images/unrated.png" /></div> </td> </tr></table></td> <td width="115" id="rating status" style="font-size:10px; color:#006699">{$res1} </td> <!-- {$res1} = number of votes provided by php --> </tr> <!--- end star --> <tr> <td colspan="2"><form id="rating_form"><table width="220" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#CC3300;"> <tr> <td> <center> <input type="radio" name="rating" value="1" id="rating_0" /> 1 </center> </td> <td><center> <input type="radio" name="rating" value="2" id="rating_1" /> 2 </center> </td> <td><center> <input type="radio" name="rating" value="3" id="rating_2" /> 3 </center> </td> <td><center> <input type="radio" name="rating" value="4" id="rating_3" /> 4 </center> </td> <td><center> <input type="radio" name="rating" value="5" id="rating_4" /> 5 </center> </td> <td width="95"><label> <input type="button" name="rate" id="rate" value="Rate This" style="margin:3px" onclick = "sendRating();"/> </label></td> <td width="20"><img src="images/timer.gif" id="timer" style="visibility:hidden"/></td> </tr></table> </form></td> </tr></table></div>bunch of stuff added to make the<br />page scroll so you can see what <br />I'm trying to avoid <br /></div></body></html>

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
I was wondering how to have a scrolling div with divs nested inside that scroll with the parent div.Of course, it stays put when the div scrolls. Heres some psuedo code to explain my problem.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><div style="overflow-y:auto; width:350px; height:150px"><div style=" width:220px; border:solid #DDDDDD 1px; padding:10px;"> <div style="color:#666666; font-size:14px; font-weight:bold">Rating:</div><hr size="0" noshade="noshade" /> <table width="220" border="0" cellspacing="0" cellpadding="4"><!--- star graphic --> <tr> <td width="105"> <table width="105" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div style="overflow:auto; display:table"> <div id="stars" style="width:{$stars}; overflow:hidden; top:0px; float:left; position:relative"> <!-- {$stars} = rating value provided by php. --> <img src="images/rated.png" /></div><img src="images/unrated.png" /></div> </td> </tr></table></td> <td width="115" id="rating status" style="font-size:10px; color:#006699">{$res1} </td> <!-- {$res1} = number of votes provided by php --> </tr> <!--- end star --> <tr> <td colspan="2"><form id="rating_form"><table width="220" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#CC3300;"> <tr> <td> <center> <input type="radio" name="rating" value="1" id="rating_0" /> 1 </center> </td> <td><center> <input type="radio" name="rating" value="2" id="rating_1" /> 2 </center> </td> <td><center> <input type="radio" name="rating" value="3" id="rating_2" /> 3 </center> </td> <td><center> <input type="radio" name="rating" value="4" id="rating_3" /> 4 </center> </td> <td><center> <input type="radio" name="rating" value="5" id="rating_4" /> 5 </center> </td> <td width="95"><label> <input type="button" name="rate" id="rate" value="Rate This" style="margin:3px" onclick = "sendRating();"/> </label></td> <td width="20"><img src="images/timer.gif" id="timer" style="visibility:hidden"/></td> </tr></table> </form></td> </tr></table></div>bunch of stuff added to make the<br />page scroll so you can see what <br />I'm trying to avoid <br /></div></body></html>
Since you have a cellpadding of 4, shouldn't your nested table be 8 smaller in width? And shouldn't you have units on those sizes?
Link to comment
Share on other sites
geomagnet Newbie

geomagnet

Posted
  • Author
Posted
Since you have a cellpadding of 4, shouldn't your nested table be 8 smaller in width? And shouldn't you have units on those sizes?
It could be, but the interior table (and cells) will force open the exterior table to whatever need be and still give a padding of the outer table.Admittedly, poor coding...nevertheless it renders properly on all browsers and is not the point of the example or the problem.FYI, the rating stars images are pngs with transparency. The idea is one set of stars (5 stars) is just the outline with everything else transparent. this set of stars is the foreground and fixed position. The second set is yellow stars inside a overflow hidden div which ispositioned directly beneath the outline. The width of this div shows color relative to the rating value. Since the width of the image is100px and a rating of 2.5 (out of 5) then the width of the div turns out to be 50px, and displays perfectly 5 stars with outlines and the first 2.5 arefilled with color. Works like a champ until my customer wanted them placed inside a scrolling div. Then it wasn't so cool. Upon scrolling theparent div, the outlines move with the div, but the color stars stay relative to the window. Anyhow, I had to abort it and have php dynamicallygenerate the image just to get the guy out of my hair. The only reason I rehashed it was due to a current project where the same problem occured but this time with a sliding indicator bar. Fortunately for this current problem, I devised a work around where the position attribute is eliminated all together and used padding-left tomove the slider arrow to the appropriate position. I'm sure there are 10 different ways to get it to work. move.style.paddingLeft=movement+"px"; :) Anyhow, Thanks for yours and Deirdre's Dad feedback. If I come up with a better solution I'll post it.As for future postings, I'll make sure the width of the elements add up properly so readers are not distracted by superfluous syntax defects.James
Link to comment
Share on other sites
geomagnet Newbie

geomagnet

Posted
  • Author
Posted
It could be, but the interior table (and cells) will force open the exterior table to whatever need be and still give a padding of the outer table.Admittedly, poor coding...nevertheless it renders properly on all browsers and is not the point of the example or the problem.FYI, the rating stars images are pngs with transparency. The idea is one set of stars (5 stars) is just the outline with everything else transparent. this set of stars is the foreground and fixed position. The second set is yellow stars inside a overflow hidden div which ispositioned directly beneath the outline. The width of this div shows color relative to the rating value. Since the width of the image is100px and a rating of 2.5 (out of 5) then the width of the div turns out to be 50px, and displays perfectly 5 stars with outlines and the first 2.5 arefilled with color. Works like a champ until my customer wanted them placed inside a scrolling div. Then it wasn't so cool. Upon scrolling theparent div, the outlines move with the div, but the color stars stay relative to the window. Anyhow, I had to abort it and have php dynamicallygenerate the image just to get the guy out of my hair. The only reason I rehashed it was due to a current project where the same problem occured but this time with a sliding indicator bar. Fortunately for this current problem, I devised a work around where the position attribute is eliminated all together and used padding-left tomove the slider arrow to the appropriate position. I'm sure there are 10 different ways to get it to work. move.style.paddingLeft=movement+"px"; :) Anyhow, Thanks for yours and Deirdre's Dad feedback. If I come up with a better solution I'll post it.As for future postings, I'll make sure the width of the elements add up properly so readers are not distracted by superfluous syntax defects.James
I figured it out.Just for clearity. Let's say you have a scrolling div. Inside that div, you have other divs you want to "float" over content...for instance, a list of options in a menu that appear or disappear onclick. Using position:anything doesn't work. The nested div(s) will either stay fixed to the position of the browser window, or will force the other elements out of placement. It took many hours of kicking this around, but here's the solution.The first snippet of code shows the problem, the next shows the solution. If anyone knows of a better way, please share.//----------Problem ----------------------//<div id="scrolling_div" style="width:350px; overflow-y:scroll; height:150px; color:#FF3333"><div id="floating_div" style="position:absolute; float:right; width:150px; background:#eee; border:1px solid #000; color:#000099; padding:3px"> Heres a div I want to float on the right side of the red text without pushing the other text down. Also, I want the text to scroll with the outer div.</div>Here's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoid</div>//---------- Solution ----------------------//<div id="scrolling_div" style="width:350px; overflow-y:scroll; height:150px; color:#FF3333"><div id="fixing_div" style="width:150px; height:1px; float:right"><div id="floating_div" style="width:150px; background:#eee; border:1px solid #000; color:#000099; padding:3px"> Heres a div I want to float on the right side of the red text without pushing the other text down. Also, I want the text to scroll with the outer div.</div></div>Here's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoidHere's a bunch of text to getthe div to scrollso you can see whatI'm trying to avoid</div>The trick is to give it a div with a height attribute (any size). In this example, I'm referring to id="fixing_div". You could use the "fixing_div", for your content if you don't have backgrounds. If you do, you'll need to nest a div ("floating_div") inside the "fixing_div" to allow for dynamic content. Otherwise the background will be fixed to the height value.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...