Home/ Questions/Q 6616939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:38:37+00:00

My intent is to add a class to the header when a div is

  • 0

My intent is to add a class to the header when a div is clicked. I have included the website I’m working with, just to make thing’s easier:

URL – http://itsmontoya.com/work/iM/

I have added a class ‘expanded’ to the header. This is to show how the navigation should look after the button has been pressed. I created a simple Javascript which is supposed to provide an alert when I click the button. I can’t seem to get this to work. Any ideas of what I did wrong?

Thanks!

EDIT – I was able to get the alert to properly work when clicking the button div. I’m very close to having this complete! 🙂 Now I’m getting stuck with the variable not passing correctly. 

<script type= "text/javascript">
var expanded = false;
function btnClick(){
    alert('The variable expanded is '+expanded);
    if(expanded === false) {
        document.getElementById("header").className = "expanded";
        var expanded = true;
    } else {
        document.getElementById("header").className.replace(/\bexpanded\b/,'');
        var expanded = false;
    }
};
</script>

I’m updating the ftp server now 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When using jQuery, you have to bind your events in such a way that the elements have already loaded.

    You have:

    <script type= "text/javascript">
$("#expandBtn").click(function(){
   alert('hello');
});
</script>

    I think what you want is:

    <script type= "text/javascript">
$(document).ready(function(){
  $("#expandBtn").click(function(){
     alert('hello');
     $('header').addClass('expanded');
  });
});
</script>

    The API documentation is going to be your friend here. First step — ready().

    UPDATE

    You have this call to jQuery:

    $j('#header').addClass('expanded');

    But your markup is for the HTML5 element <header>. In that case your jQuery needs to change to:

    $j('header').addClass('expanded');

    Where $j is your jQuery object. More typically you would use $ or jQuery.

    Time to bone up on jQuery Selectors!

    UPDATE

    Here’s your updated page:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>itsMontoya</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type= "text/javascript">
    $(document).ready(function(){
        $('.expandBtn').bind('click', function(){
            $('header').toggleClass('expanded');
        });
    });
    </script>
</head>
<body>
    <div class="wrap">
        <header id="header" class="">
            <div class="blackBG transparent"></div>
            <nav>
                <ul>
                    <li>
                        Home<img src="images/home.png">
                    </li>
                    <li>
                        Pictures<img src="images/pictures.png">
                    </li>
                    <li>
                        Music<img src="images/mymusic.png">
                    </li>
                    <li>
                        About Me<img src="images/aboutme.png">
                        </li>
                    <li>
                        Resume<img src="images/resume.png">
                    </li>
                </ul>
            </nav>
            <div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
        </header>
        <section class="content">
            <article class="blogEntry"></article>
        </section>
        <footer class="anchor">
            <div class="over anchor"><p>2011 itsMontoya.com</p></div>
            <div class="blackBG transparent anchor under"></div>
        </footer>
    </div>
</body>
</html>
    • 0