www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Javascript to change CSS style on window.load

  1. #1
    Join Date
    Sep 2008
    Posts
    8

    resolved [RESOLVED] Javascript to change CSS style on window.load

    Hello -
    I have a dynamic page that loads different content depending on the url parameter "id". What I would like to do is simply have javascript load the url parameter "id" via php then run through an if, else if statement and depending on which url parameter (which content the page is displaying) highlight the link text (in a ul li) as a way of reassuring the visitor that they are on the page the intended to be on. I want to do this by simply adding a backgroundColor style to the element by its id.

    In this code my page loads and properly displays the document.write text. That text is only there for debugging...... The script does not, however, alter the backgroundColor of the element.

    Does anyone see the error in this code that is preventing this from working?

    <script type="text/javascript">

    function currentGallery() {
    var gallery = "<?php echo $_GET['id'] ?>";

    if (gallery == 4)
    {
    document.write("kitchen");
    document.getElementById('kitchensGallery').style.backgroundColor = "yellow";
    }
    else if (gallery == 3)
    {
    document.write("bathrooms");
    document.getElementById('bathroomsGallery').style.backgroundColor = "green";
    }
    else if (gallery == 2)
    {
    document.write("beforeAfter");
    document.getElementById('beforeAfterGallery').style.backgroundColor = "blue";
    }

    }
    window.onload = currentGallery();
    </script>

    // ..................................... below is my ul containing the id elements that the javaScript should change the backgroundColor of.

    ***** DO I HAVE TO HAVE A CURRENT CSS BACKGROUND COLOR DEFINED IN ORDER TO CHANGE IT? OR CAN I GO FROM NOTHING TO SOMETHING?

    <ul>
    <li><a href="index.html">Home</a></li>
    <li>|</li>
    <li><a href="portfolio.php">Portfolio</a></li>
    <li>|</li>
    <li id="kitchensGallery" style="background-color: #CCFFFF"><a href="gallery.php?id=4">Kitchens</a></li>
    <li>|</li>
    <li id="bathroomsGallery"><a href="gallery.php?id=3">Bathrooms</a></li>
    <li>|</li>
    <li id="beforeAfterGallery"><a href="gallery.php?id=2">Before &amp; After</a></li>
    </ul>


    Thank you for reviewing this code...

    Adam

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function currentGallery() {
    var gallery = <?php echo $_GET['id'] ?>; //integer not a string
    
    if (gallery == 4)
    { // never use document.write after document has loaded
    document.getElementById('kitchensGallery').style.backgroundColor = "yellow";
    }
    else if (gallery == 3)
    {
    document.getElementById('bathroomsGallery').style.backgroundColor = "green";
    }
    else if (gallery == 2)
    {
    document.getElementById('beforeAfterGallery').style.backgroundColor = "blue";
    }
    
    }
    window.onload = currentGallery;
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2008
    Posts
    8
    Thank you.... Ill make those changes and see if it works...

    Adam

  4. #4
    Join Date
    Sep 2008
    Posts
    8
    Still not working. The background color of the li is not changing when the page loads with a different url parameter.

    Is it best to use an inline style? Do I need a style to exist before javascript can change it? Or, will javaScript create the style from nothing? Its a simple script.....I cant figure out why it wont work..

    Thanks again for the help

    Adam

  5. #5
    Join Date
    Sep 2008
    Posts
    8
    SCRATCH THAT!!!! It works. Thanks for the help. I had moved the script to an external file and that must have disabled the php's ability to get the url parameter....

    But, it is working.... Hot damn!!

    Adam

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles