Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Expand div with javascript generated content

    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. Just press search to see what I mean!

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

    Cheers.
    Last edited by jusmeig; 09-21-2007 at 11:38 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Do you not have control over where the div is displayed?

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by jusmeig View Post
    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:

    Code:
    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:
    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.

  • #6
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">
    </script>
    The js will either spit out a search form or a list of results.
    Can I hack the div that is returned I wonder?
    Last edited by jusmeig; 09-21-2007 at 03:42 PM.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Wouldn't this work?

    Code:
    #search_div {
     position: static!important;
    }

  • #8
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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.

  • #10
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    cheers,

    Justin


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •