Jquery css is not working on document.ready

Question

There is one line in my jquery code not working after the document.ready function. The others do work.

The same line does work in a window.resize function. I hop you can help me: I added a comment after the line that is not working

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Made in 030
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet" media="all" type="text/css" />
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                        // hover
            $(function() {

                var $el, leftPos, newWidth,
                    $mainNav = $("menu ul");

                $mainNav.append("<li id='magic-line'></li>");
                var $magicLine = $("#magic-line");

                $magicLine
                    .width($("menu ul li.active").width())
                    .css("left", $("menu ul li.active a").position().left)
                    .data("origLeft", $magicLine.position().left)
                    .data("origWidth", $magicLine.width());

                $("menu ul li a").hover(function() {
                    $el = $(this);
                    leftPos = $el.position().left;
                    newWidth = $el.parent().width();
                    $magicLine.stop().animate({
                        left: leftPos,
                        width: newWidth
                    },500);
                }, function() {
                    $magicLine.stop().animate({
                        left: $magicLine.data("origLeft"),
                        width: $magicLine.data("origWidth")
                    },500);    
                });
            });

            $('.menu_container').css('height',$('body').width()/11);
            $('menu ul li a').css('font-size',$('body').width()/85);
            $('#magic-line').css('margin-top',$('body').width()/11 - 10);//This line is not working
            $('.logo img').css('height',$('body').width()/11-15);
            $('.logo').css('height',$('body').width()/11);

            var outerHeight = $('menu ul li').height();
            var innerHeight = $('menu ul li a').height();
            $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

            var outerWidth = $('menu').width();
            var innerWidth = $('.logo').width();
            $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);



        })
        $(window).resize(function(){
            $('.menu_container').css('height',$('body').width()/11);
            $('menu ul li a').css('font-size',$('body').width()/85);
            $('#magic-line').css('top',$('body').width()/11 - 10);
            $('.logo img').css('height',$('body').width()/11-15);
            $('.logo').css('height',$('body').width()/11);

            var outerHeight = $('menu ul li').height();
            var innerHeight = $('menu ul li a').height();
            $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

            var outerWidth = $('menu').width();
            var innerWidth = $('.logo').width();
            $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);
        })

        </script>
    </head>
    <body>
        <header>
            <div class="menu_container">
                <menu>
                    <ul class="left_menu" >
                        <li class="left" ><a href="#">Home</a></li>
                        <li class="left" ><a href="#">Over</a></li>
                        <li class="left"><a href="#">Probeerlijst</a></li>
                        <li class="logo_container">
                            <div class="logo">
                                <img src="img/logo.png" alt=""/>
                            </div>
                        </li>
                        <li class="right active"><a href="#">Contact</a></li>
                        <li class="right"><a href="#">Shop</a></li>
                        <li class="right"><a href="#">Blog</a></li>
                    </ul>
                </menu>
            </div>
        </header>
    </body>
</html>

haven't tested it, but what line doesn't work? did you leave that out or did I miss it? — Todd, Dec 03 '14 at 09:59
@Benjamin I did load the library, but i didn't show it here. But now i did. — Jesse Uilenreef, Dec 03 '14 at 10:01
@Todd There is a comment after the line. It is: $('#magic-line').css('margin-top',$('body').width()/11 - 10); — Jesse Uilenreef, Dec 03 '14 at 10:03
You should ***really*** consider to use CSS media queries... — A. Wolff, Dec 03 '14 at 10:03
Yep, I see the whole file when I try to edit it. Will remove -1. — sidneydobber, Dec 03 '14 at 10:03
two doc ready nested, is it required? also you have a wrong DTD at top. — Jai, Dec 03 '14 at 10:04
@JesseUilenreef So just use percentage in some CSS rules. Seriously, you are just asking for trouble with this kind of unmaintainable code — A. Wolff, Dec 03 '14 at 10:07
@JesseUilenreef Why not? e.g: http://stackoverflow.com/a/1622097/1414562 — A. Wolff, Dec 03 '14 at 10:14
Regarding your issue, this is because you are nesting ready handler twice for adding `magic_line` element, `$(function() {...});` is shorthand for ready handler, so just remove it if you want still to deal with so much unreadable kind of code — A. Wolff, Dec 03 '14 at 10:17
@A.Wolff Oh Thank you, i really never heard of that vh an vw option. Thanks! — Jesse Uilenreef, Dec 03 '14 at 10:21
@JesseUilenreef so I feel like you should add `#magic-line` directly to markup rather than through script; as it is, I haven't found any reason to add it programmatically. — Todd, Dec 03 '14 at 11:05

score 1 · Answer 1 · answered Dec 03 '14 at 10:04

Your problem is, that the $('#magic-line') is empty at your not working line.

You need to add some window.setTimeout to your code to make sure, that it runs at the right time. (after you append it)

Watch this:

window.setTimeout(function(){
    $('.menu_container').css('height',$('body').width()/11);
    $('menu ul li a').css('font-size',$('body').width()/85);
    console.log($('#magic-line'));
    $('#magic-line').css('margin-top',$('body').width()/11 - 10); // this one is not working
    $('.logo img').css('height',$('body').width()/11-15);
    $('.logo').css('height',$('body').width()/11);

    var outerHeight = $('menu ul li').height();
    var innerHeight = $('menu ul li a').height();
    $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);

    var outerWidth = $('menu').width();
    var innerWidth = $('.logo').width();
    $('.logo_container').css('margin-left', (outerWidth - innerWidth)/2);
}, 1);

I just added the first and last line. And a console.log. With the window.setTimeout the log gets the wanted element, without the window.setTimeout the log is empty.

sidneydobber · Accepted Answer · 2014-12-03T11:54:41.490

0

You might want to save the value in a variable first. Then add parentheses to get the right order of precedence. This will work.

var value = $('body').width() / (11 - 10);
$('#magic-line').css('margin-top', value); //This line is not working

console.log(value);

edited Dec 03 '14 at 11:54

answered Dec 03 '14 at 10:11

sidneydobber

2,790
1
23
32

He has the `id=magic-line` in his code. Check this line from his post: > `$mainNav.append("

Der Vampyr

Dec 03 '14 at 10:19

Jquery css is not working on document.ready

2 Answers2