SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing div ID value

    I'm creatign a script that changes the ID of a div tag depending on the Screen Res... Here's the code:

    HTML Code:
    if (document.body.clientWidth <= 800) {
    document.getElementById('header-logo').id = 'header-logo2';
    }
    The HTML...

    HTML Code:
    <div id="header-logo">Logo
    What am I doing wrong? It isn't working....

  2. #2
    SitePoint Guru mattymcg's Avatar
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible you're calling your JavaScript code before the page has been rendered? If this is the case then it wouldn't find the element with that ID because it doesn't exist yet! This works for me:

    Code:
    <html>
    <head>
      <title>test</title>
      <script type="text/javascript">
      function changeid() {
        if (document.body.clientWidth <= 800) {
          document.getElementById('headerlogo').id = 'headerlogo2';
        }
      }
      </script>
      <style>
      #headerlogo {
        background-color: red;
      }
      #headerlogo2 {
        background-color: yellow;
      }
      </style>
    </head>
    <body>
      <div id="headerlogo">Logo</div>
      <script type="text/javascript">
        changeid();
      </script>
    </body>
    </html>
    I design beautiful, usable interfaces. Oh, and I wrote a kids' book.
    Follow me on Twitter.
    Read my blog.
    Buy my book, Charlie Weatherburn and the Flying Machine.


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
  •