[thelist] Javascript DOM Injection overflow
Jay Turley
jayturley at gmail.com
Wed Apr 15 16:36:41 CDT 2009
Hi!
No meaty SQL queries or PHP wizardry today. Instead it's a javascript
question!
Here's the situation. I pull some content (tags) from the database in JSON
format, and then I format them and inject it into the DOM into a
pre-existing DIV by using createDocumentFragment() and appendChild().
The content is formatted as a series of anchors. Post-DOM injection, Firebug
reveals the following structure:
<div id="tag-cloud"> <a class="tagSearchTrigger" href="javascript:void(0)"
rel="1" style="font-size: 24pt;">sketchy</a>
<a class="tagSearchTrigger" href="javascript:void(0)" rel="2" style="font-size:
14.0075pt;">chicken</a>
<a class="tagSearchTrigger" href="javascript:void(0)" rel="5" style="font-size:
14.0075pt;">home</a>
</div>
The above sits in a sidebar with a width of 300px.
It has the following CSS:
#sidebar div#tag-cloud {
margin: 2px 10px;
min-height: 40px;
text-align: center;
width: 280px;
}
However, the PROBLEM is that the series of anchors consistently overflows
the right side of its container div (tag-cloud) thus adding a horizontal
scrollbar at the bottom of the browser and generally making things look
ucky.
Using overflow:auto or overflow:scroll simply adds scrollbars to the
container div. When what I obviously want is for the content to break.
Any ideas?
The reason I give so much detail is that this would be VERY difficult to put
out on a public site. :/
Thanks-
-Jay
More information about the thelist
mailing list