JavaScript doesn't seem to activate HTML elements

Question

I'm trying to make my HTML body move left when I click on the menu logo, but that doesn't seem to work through jQuery... I have played with the scripts' locations in the top of the page, and that doesn't seem to be the problem.

This is my HTML:

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>final project</title>

<link rel="stylesheet" type="text/css" href="css/final-fix.css">
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<script src="js/final.js"></script>     

</head>

<body>
    <div class="container-box">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="navigation"><a href="#">Home</a></li>
                <li role="navigation"><a href="#">About Us</a></li>
                <li role="navigation"><a href="#">Contact Us</a></li>
            </ul>
            <ul ul class="nav nav-pills pull-left">
                <li role="menu"><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></li>   
            </ul>   
        </nav>

        <header></header>

                <div class="main" id="grad"><h1>Welcome to ducati</h1>

            <div class="cover-div">

                <div class="box"  id="box1">
                <span class="glyphicon glyphicon-headphones"></span>
                <p>Lorem ipsum </p>
                </div>

                <div class="box"  id="box2">
                <span class="glyphicon glyphicon-music"></span>
                <p>Lorem ipsum </p>
                </div>
                <div class="box"  id="box3">
                <span class="glyphicon glyphicon-download-alt"></span>
                <p>Lorem ipsum   </p>
                </div>
                <div class=" box"  id="box4">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                <p>Lorem ipsum </p>
                </div> 
            </div>

        </div>

        <footer> &copy; All right belong to me :) </footer>
    </div>
</body>
</html>

This is my CSS:

* {
    margin: 0;
    padding: 0;
    font-family: arial;
}
.container-box{
position:relative;
        margin: 0 auto; 
        width:600px;
        height:570px;
        border:2px solid black; 
}
.pull-right {
    /* font-weight:bold;  */

}
header {

    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
    height:30%; 
    width:100%;
    background-position: center center;

}
.main h1{
    text-align:center;
    margin:auto;
}
.main span{
    text-align:center;
    font-size:30px;
    margin-top:10px;
}
 .main{
    position: relative;
    height: 60%;
    border-bottom:2px solid black;
    text-align:center;  
}
#grad {
  background: -webkit-linear-gradient(left top, gray,gray,red,gray,white ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */
} 


footer {
    background-color:gray;


}
.box{

    width: 20%;
    border: 1px solid black;
    margin:2.5%;
    height: 50%;
    border-radius:15px;
    color:purple;
    font-weight:bold;
}
.cover-div{

    width:100%;
    margin:0 auto;

}

#box1{
float:right;
/* margin-left:170px; */
background-image:linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1)
    ),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg');
}

#box2{
float:right;
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
float:right;
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}

.glyphicon{
color: red;
}

And this is my JavaScript:

var main = function () {

    $('.glyphicon-menu-hamburger').click(function () {
        $('.container-box').animate({
            left: "285px"
        }, 200);
    });


    $(document).ready(main);
};

Answer 1

Put a comment inside of main, you'll see it's not getting called most likely.

It looks like you are making the call to document ready inside of the declaration for main. Meaning it will never get called.

JavaScript doesn't seem to activate HTML elements

Question

1 answers

solution1
0 ACCPTED 2015-05-25 22:58:31

JavaScript doesn't seem to activate HTML elements

Question

1 answers

solution1 0 ACCPTED 2015-05-25 22:58:31

solution1
0 ACCPTED 2015-05-25 22:58:31