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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div expansion with multiple JS objects

    How do I insert one JS object after another and have the containing DIV automatically expand to fit?

    Right now, my DIV has this but only one of the inserted objects is appearing. The other, I assume is directly on top of the first.
    Code:
    <div id="center">
    <script language="javascript" type="text/javascript" src="page1.js"></script>
    <script language="javascript" type="text/javascript" src="page2.js"></script>
    </div>
    The current CSS for the DIV is as follows:
    Code:
    #center { position: absolute; top: 171px; margin-left: 166px; background:#000000; width: 789px; 
    }
    Any help would be appreciated.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Help how? You told us why it's not showing up. You can see from the CSS that one is being placed over the other.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My knowledge of CSS is limited.
    What I would like help with is getting the second (and eventually third, fouth, fifth etc.) JS object to appear below the first, not directly on top of the first. I would also like the DIV to automatically expand to fit these additional objects.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    <div id="center">
    <script language="javascript" type="text/javascript" src="page1.js"></script><br />
    <script language="javascript" type="text/javascript" src="page2.js"></script><br />
    </div>

    or:

    <div id="center">
    <p><script language="javascript" type="text/javascript" src="page1.js"></script></p>
    <p><script language="javascript" type="text/javascript" src="page2.js"></script></p>
    </div>

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just tried both of those options but nothing changed. I can still only see 1 of the objects drawing.

    The JS object is a bunch of HTML that I am loading into a DIV (Thanks HarbingerOTV). The HTML is styled using an external CSS. Perhaps the positioning in the CSS is forcing it to draw at the top of the DIV. Both JS objects are using the same CSS.

    Is there a way that the CSS could be modified so that each object is drawn below the previous object rather than at the top of the DIV each time?

    If not, what else could I try?

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Well it does work. It's probally a CSS problem with the files your importing with the javascript.

    Does the CSS that styles the imported files have position:absolute in it anywhere? If it does change it to position:relative

    if that doesn't apply post the CSS and the java files

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the CSS was using position:absolute exclusively. When I changed it to relative, both objects were drawn (one after the other) but the elements within them are now all over the place, because of the relative positioning. I will have to change all the positioning values so that everything lines up again.

    Thanks for your help


  •  

    Posting Permissions

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