View Full Version : Expand div with javascript generated content

09-21-2007, 11:35 AM
Hi guys....

Have a strange situation with a site im developing. Basically I have a div that has a javascript generated form that searches and returns results.

the problem i am having is that my div is not expanding so the resulting search is spilling down the page.

If I put content into the div normall (ie not via javascript) the div expans fine and by background is ok.

Please review here (http://cherrysite.u119.hosting.davidbutt.com/job-search.htm). Just press search to see what I mean!

Any ideas how to get the div to expan based on what the javascript throws back?


09-21-2007, 12:07 PM
If you are using Javascript to fill in content can you use DOM to overwrite the style on the div and make it overflow: auto?

Don't know much else to do.

I had a similar problem where my CSS elements were not being used when I had DOM on the page. I had to use inline styles to get it to work.

Try putting style="overflow: auto;" on the div where the javascript is being inserted and see if that works.


09-21-2007, 12:20 PM
I think my problem is I dont have any control over the javascript. I can't over ride the style as I would need to do this once the search function is finished and the results are about to be returned?

I think the problem is the absolute position on the div returned to me.

09-21-2007, 12:49 PM
Do you not have control over where the div is displayed?


09-21-2007, 01:15 PM
I think the problem is the absolute position on the div returned to me.

Yeah, most likely itís the absolute position because that takes it out of the regular flow. Hereís the respective line in the script:

document.write('<DIV ID="search_div" STYLE="position: absolute; visibility=visible; z-index: 10;">');

And this is what it looks like in the generated source code:

<quickedit:content></quickedit:content><div id="arithon_search_div" style="overflow: auto;">

<script language="JavaScript" src="http://www.arithon.com/website_search/jobsearch.php?config=cherry">
</script><div id="search_div" style="position: absolute; z-index: 10; visibility: hidden;"><div id="arithon_search">Ö

Youíll have to somehow override this position style, though I donít know whether this is possible in an external or internal stylesheet and without accessing the script since inline styles have the highest priority (maybe with some !important after the value).

Also Iíve gotta say that the script and the implementation thereof is a little poor. document.write is deprecated and you should access/apply elements through the DOM. Secondly if I disable JavaScript guess what I see? Nothing. I canít even search and thatís not good.
JavaScript should only be an enhancement of existing HTML, i.e. a website should work completely without JS as well and JS will only add/replace features and functions, not make the funcionality of the site rely on it.

09-21-2007, 03:39 PM
Hi guys,

Thanks for the replys. Yeah I can control where the div is displayed, but I cannot make changes to the output.
First this is third party. I have no control over the output at all. I totally agree that not having a javascript fallback is madness!

Basically where ever I put::

<script language="JavaScript" src="http://www.arithon.com/website_search/jobsearch.php?config=cherry">

The js will either spit out a search form or a list of results.
Can I hack the div that is returned I wonder?

09-21-2007, 06:12 PM
Wouldn't this work?

#search_div {
position: static!important;

09-24-2007, 10:42 AM
Its no so much the fix for the problem.....the problem now id I cant add the fix!

I have no control over the code that the js writes, so I think my only hope of to get the thing to work is get them to remove the absolute pos.

09-24-2007, 01:33 PM
Well, as rmedek correctly said (and as I assumed already and confirmed now through a test) you would add that fix in an internal or external stylesheet, overwriting the existing inline rule through the addition of the !important command/declaration.

09-25-2007, 02:14 PM
Hi there,

I did not know that the !important replaced inline styling.
As it turns out an iframe was the solution.

But I guess I could have replaced the inline styling with the !important