SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Set element to display:block if it exists... Please help

    I need a short script which will do the following:

    I want it to initiate when the page loads (So i assume I will put it on the <body> onload attribute?):

    I want it to look for a particular element (id="box1") and if this element exists on the page then I want the script to set this element's style to display:block;

    I think it's quite simple but I am a total JS newbie so if anyone has time to quickly do this I would be very grateful!!!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have this logic in the window.onload event handler.

    You can access the element in the onload function using document.getElementById to see if it exists. It will return null if it doesn't exist.

    Apply the display:block setting the elements reference style object. For example:
    Code:
    myElement.style.display = "block";

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script type="text/javascript">
    window.onload = function showDiv() {
    var box1 = document.getElementById("box1");
    if (box1) {
    box1.style.display = "block";
    box1.style.border = "1px solid red";
    box1.style.padding = 12 + "px";
    }

    else alert("nothing to see here");
    };
    </script>

    <div id="box1" style="display:none;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et nisl. Vivamus pellentesque volutpat tortor. Aliquam erat volutpat. Sed dignissim magna eget eros. Nulla ornare, tortor nonummy pulvinar iaculis, nulla mauris tempor risus, vitae aliquam odio arcu et quam. Aenean a nunc eu metus tincidunt aliquam. Pellentesque augue. Curabitur auctor, lectus eget tempus semper, risus orci porta metus, ut aliquam dolor quam egestas ipsum. Sed ac urna in justo placerat consectetuer. Nulla iaculis lectus et augue. Pellentesque sapien. Vestibulum sed dui vel arcu volutpat vehicula. Nunc luctus, purus quis pellentesque ullamcorper, sem erat lacinia dui, ut faucibus augue urna ac dolor. Etiam nibh velit, iaculis eu, facilisis sit amet, hendrerit ac, ante. Aenean tempor. Vivamus a dolor pretium turpis sodales sollicitudin.
    </div>

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both... It works great now
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

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