How have a script load as soon as page is displayed

heretolearn · January 14, 2015, 3:18am

I may not be very clear in explaining what I want so be patient with me please.

I’m working on a responsive menu. I would like the list to be centered within its’ div container when the width of the viewport is greater than 480 pixels as soon as the page loads. I can get javascript/jquery to do this when I resize the page but when the page is initially loaded.

HTML


<section id="nav">

<div id="menuToggle">&#9776;</div>

<ul class="menu">
    <li><a href="http://google.com/">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul>
            <li><a href="http://google.com/">Computers</a></li>
            <li><a href="http://google.com/">Phones</a></li>
            <li><a href="http://google.com/">Tablets</a></li>
            <li><a href="http://google.com/">Beepers</a></li>
        </ul>
    </li>
    <li><a href="http://google.com/">About</a></li>
    <li>
        <a href="#">Contact</a>
        <ul>
            <li><a href="http://google.com/">Advertise</a></li>
            <li><a href="http://google.com/">Affiliate</a></li>
        </ul>
    </li>
    <li><a href="http://google.com/">Design</a></li>
</ul>

</section>

CSS


#menuToggle{
display: none;
}
#nav{
position: relative;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #000;
}
ul.menu{
width: 100%;
height: 30px;
background: #333;
}
ul.menu > li{
position: relative; 
float: left; 
}
ul.menu ul{
display: none; 
position: absolute;
left: 0;
top: 100%;
margin: 0;
padding: 0 0 0 15px;
background: #ccc;
}
ul.menu a{
cursor: pointer;
display: block;
padding: 0 10px;
line-height: 30px;
color: white;
}
ul.menu li{
list-style: none;
}
ul.menu li:hover{
background: #555;
}
ul.menu li:hover ul{
display: block;
}
#test{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#test h1{
color: black;
}
@media all and (max-width: 480px) {
    #nav{
    }
    #menuToggle{
        display: block;
        font-size: 35px;
        color: #fff;
        cursor: pointer;
    }
    #nav{
        height: 40px;
    }
    ul.menu{
        display: none;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;
    }
    ul.menu > li{
        float: none;
        width: 100%;
    }
    ul.menu a{
        line-height: 40px;
    }
    ul.menu ul{
        position: relative;
    }
    ul.menu li{
        background: #555;
    }
    ul.menu li ul{
        display: block;
    }
}
@media all and (min-width: 481px){
    ul.menu li:hover{
        background: #555;
    }
    ul.menu li:hover ul{
        display: block;
    }
}

javascript/jQuery


$(document).ready(function(){

    myFunction();
    
function myFunction(){
    $(window).resize(function(){
        if($(window).width() > 480){
            $("ul.menu").removeAttr("style");
            
            var $liW = 0;
            var $li = $('ul.menu li').each(function(){
                $liW += $(this).width();
                $('#mw').html($liW);
                $('ul.menu').css({
                                    'background' : 'red',
                                    'margin' : '0px auto',
                                    'width' : $liW + "px"
                                  });
                                        });
        } else if($(window).width() < 481){
            $('ul.menu').css('width', "100%");
        }
    });
}

    $('#menuToggle').click(function(e){
        e.preventDefault();
        $('ul.menu').toggle();
    });
    
});

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

James_Hibbard · January 14, 2015, 6:11am

Is there any reason you are using JS to do this?
Wouldn’t it be easier to use media queries?

heretolearn · January 14, 2015, 9:01am

Yes I it can be done using CSS and it would be easier but I’m trying to learn how create a responsive navigation menu where someone can add or remove list items and still have the menu be centered when the viewport width is greater than a given size without having to concern themselves with anything else.

Thanks

PaulOB · January 14, 2015, 9:44am

You can still do that in CSS (if I understand correctly).

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none}
#menuToggle {
    display: none;
}
#nav {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #000;
    text-align:center;
}
ul.menu {
    display:inline-block;
    vertical-align:top;
    height: 30px;
    background: #333;
    text-align:left;
}
ul.menu > li {
    position: relative;
    float: left;
}
ul.menu ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 0 0 0 15px;
    background: #ccc;
}
ul.menu a {
    cursor: pointer;
    display: block;
    padding: 0 10px;
    line-height: 30px;
    color: white;
}
ul.menu li {
    list-style: none;
}
ul.menu li:hover {
    background: #555;
}
ul.menu li:hover ul {
    display: block;
}
#test {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
#test h1 {
    color: black;
}
@media all and (max-width: 480px) {
#nav {
    text-align:left;
}
#menuToggle {
    display: block;
    font-size: 35px;
    color: #fff;
    cursor: pointer;
}
#nav {
    height: 40px;
    display:block;
}
ul.menu {
    display: none;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
}
ul.menu > li {
    float: none;
    width: 100%;
}
ul.menu a {
    line-height: 40px;
}
ul.menu ul {
    position: relative;
}
ul.menu li {
    background: #555;
}
ul.menu li ul {
    display: block;
}
}
@media all and (min-width: 481px) {
ul.menu{display:inline-block!important}
ul.menu li:hover {
    background: #555;
}
ul.menu li:hover ul {
    display: block;
}
}
</style>
</head>

<body>
<section id="nav">
        <div id="menuToggle">&#9776;</div>
        <ul class="menu">
                <li><a href="http://google.com/">Home</a></li>
                <li> <a href="#">Products</a>
                        <ul>
                                <li><a href="http://google.com/">Computers</a></li>
                                <li><a href="http://google.com/">Phones</a></li>
                                <li><a href="http://google.com/">Tablets</a></li>
                                <li><a href="http://google.com/">Beepers</a></li>
                        </ul>
                </li>
                <li><a href="http://google.com/">About</a></li>
                <li> <a href="#">Contact</a>
                        <ul>
                                <li><a href="http://google.com/">Advertise</a></li>
                                <li><a href="http://google.com/">Affiliate</a></li>
                        </ul>
                </li>
                <li><a href="http://google.com/">Design</a></li>
        </ul>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(document).ready(function(){
    $('#menuToggle').click(function(e){
        e.preventDefault();
        $('ul.menu').toggle();
    });    
});
</script>
</body>
</html>

You can add or remove items and it will still be centred.

James_Hibbard · January 14, 2015, 9:44am

Ah, so you mean that the width of the menu can vary and you want it to behave one way when it is under 400px (for example) and another way when it is above 400px.

Did I get that right?

**Edit**: beaten to it by Paul

heretolearn · January 14, 2015, 9:52am

Yes.

James_Hibbard · January 14, 2015, 10:07am

I believe Paul has given you your answer (post#4 in case you missed it).

heretolearn · January 14, 2015, 10:27am

I see that now. Thanks to both of you.

system · April 15, 2015, 5:34pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.