1

I'm having problems with JQuery. The thing is that i want the height of a (div) header as margin-top of a div which its class is "content", because otherwise, the div appears under the header.

Here you have the code:

Part of the HTML

<head>
    /*whatever it's inside*/
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<script>
    $(document).ready(function(){
        var 1 = $(".header").height() + "px");
        $(".content").css ('margin-top', 1);
    });
    </script>
<body>

    <div class="header">

        <div class="container">
            <div class="logo">
                <h1><a href="#">Web</a></h1>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="container">

        <div class="content">


    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
</body>
</html>

Part of CSS

 body {
    width: 100%;
    margin: auto;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.header {
    background: #6396bc;
    width: 100%;
    top: 0;
    position: fixed;
}
.content {
    margin-top: 200px;
}

I just put what is useful.

You have the JS in the HTML. Thanks in advance.

luismiguelss
  • 155
  • 2
  • 16
  • 4
    `var 1 =` a number cannot be a variable [Variable name in JS](http://stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-variable-names). `$(".header").height() + "px")` the last `)` is a syntax error. – GillesC Apr 12 '17 at 10:43
  • Try simply `$(".content").css('margin-top', $(".header").height());` – GillesC Apr 12 '17 at 10:44
  • Maybe the problem is that the javascript var 1 is incorrect. See http://stackoverflow.com/questions/342152/why-cant-variable-names-start-with-numbers for more detaiils, but basiclly is NOT START VARIABLES WITH NUMBERS. – Roy Bogado Apr 12 '17 at 10:44
  • Please update the question title to be more specific. – evolutionxbox Apr 12 '17 at 10:44
  • Problem solved, I did what "Sahil" told, I just changed the 1 for an "x". – luismiguelss Apr 12 '17 at 10:49
  • Pete, I know, I just wanted to put that in there so you knew that there was much stuff. – luismiguelss Apr 12 '17 at 10:50
  • Just post here to answer you : nope & nope, I use an IDE since the beginningI started Java about 5 years ago, when there is an error I just learn the rule or get detail on internet, take a look at my SO profile if you think I don't learn Java. The IDE just help you going faster to learn, it tells you the error, then you turn to understand it, without IDE you stay stuck so much time just to know the error :D – azro Nov 04 '18 at 17:08
  • @azro I'm also using an IDE, "Geany", I often use Netbeans or Eclipse, but this time i need to use that one and didn't tell me anything actually. It's been a while using it and i'm not pretty happy with it because it helps only in syntax. I appreciate your kindness but let this post be for what it is :) – luismiguelss Nov 04 '18 at 17:12

3 Answers3

2

Variable cannot be a number so here is the fixed code.. 

 $(document).ready(function(){
        var x =  $(".header").height();
        $(".content").css ('margin-top', x);
    });
 body {
    width: 100%;
    margin: auto;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.header {
    background: #6396bc;
    width: 100%;
    top: 0;
    position: fixed;
}
.content {
    margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

        <div class="container">
            <div class="logo">
                <h1><a href="#">Web</a></h1>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="container">

        <div class="content">


    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33
2

    $(document).ready(function(){
        var l = $(".header").height() + "px";
    $(".content").css ('margin-top', l);
    });
        body {
            width: 100%;
            margin: auto;
        }

        .container {
            width: 70%;
            margin: 0 auto;
        }

        .header {
            background: #6396bc;
            width: 100%;
            top: 0;
            position: fixed;
        }
        .content {
            margin-top: 200px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

    <div class="container">
        <div class="logo">
            <h1><a href="#">Web</a></h1>
        </div>

        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container">

    <div class="content">


        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        </p>
    </div>
</div>
Bragadeeswaran
  • 278
  • 1
  • 10
0

Variables names must start with letter or underscore or dollar sign.

Refer to this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).

please try this code

 $(document).ready(function(){
        var one = $(".header").height() + "px";
        $(".content").css ('margin-top', one);
    });
 body {
    width: 100%;
    margin: auto;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.header {
    background: #6396bc;
    width: 100%;
    top: 0;
    position: fixed;
}
.content {
    margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

        <div class="container">
            <div class="logo">
                <h1><a href="#">Web</a></h1>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="container">

        <div class="content">


    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</p>
</div>
</div>
vijay
  • 232
  • 2
  • 12