Function not being updated correctly

[xvilo]

Hello,

I have been busy implementing the Dynamic page reload tutorial into my own web project. But I have a little CSS done in Javascript. Unfortunately the function is not being called correctly.

this is my code now:

$(function() {

    if(Modernizr.history){

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("ul.mainnav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(href + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("ul.mainnav a").removeClass("current");
                        $("ul.mainnav a[href$='"+href+"']").addClass("current");
                    });
                });
    }

    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, '');
       loadContent(_link);
    });

    console.log('begin function');
    calcLeftWrapper();
    console.log('end function');

}


});

$( document ).ready(calcLeftWrapper());

$(window).resize(function(){
    calcLeftWrapper();
});

function calcLeftWrapper(){
    var divWidth = $('.original-width').width(); 
    var divPosit = $('.original-width').offset();
    var vph      = $(window).height();
    var element  = '.leftwrapper';
    var height   = vph - divPosit.top - 15;
    console.log(divWidth+'px en '+divPosit.left+'px');
    $(element).css("width", divWidth );
    $(element).css("left", divPosit.left );
    $(element).css("top", divPosit.top );
    $(element).css("height", height);
    $(element).css("display", "block" );
}

As you can see I added calcLeftWrapper(); to the bottom and its being called on a window.resize and a document.ready but at the end of the original js part i have again added calcLeftWrapper(); within to console.log’s for debugging. I can see both console.log’s and also console.log(divWidth+'px en '+divPosit.left+'px'); is visible. But the CSS properties are not updated. As soon as I resize it’s there…

What is going or am I doing wrong?

//xvilo

[Alen]

@xvilo

/* $( document ).ready(calcLeftWrapper()); */
/* should be */

$( document ).on('ready', function(){
  calcLeftWrapper();
});

/* or */

$( document ).ready(function(){
  calcLeftWrapper();
});

[Shikkediel]

I don’t think ready can be used in combination with .on though. But this is an option as well :

$(document).ready(calcLeftWrapper);

Or even :

$(function() {calcLeftWrapper()});

And for the subsequent event listener this is a bit shorter :

$(window).resize(calcLeftWrapper);

[xvilo]

Well the resize and document.ready are working fine. The 3rd call between console.log(‘Begin function’); and end function. At that one the css is not being updated….

[Shikkediel]

Could you post a demo maybe then? Syntax looks correct, apart from some possible optimisations.

[xvilo]

http://cp.thisisd3.com. It handles the left banner with lorem ipsum. But once you navigate it is not working

[Shikkediel]

Link seems to be a dud…

[xvilo]

Ah, changed DNS settings yesterday! Should be all working now, at least it works here. Dont know how long DNS changes take at your end to propagate

[Shikkediel]

Not yet, I guess. I’ll have another look later.

Edit – that doesn’t really make sense though, the main page is apparently there… any DNS changes should be globally simultaneous.

[Alen]

$(document).ready(); is a shorthand for $(document).on('ready', fn);

@xvilo in the demo you linked to, it looks like it’s doing what its suppose to do. No? In addition, you can pass an object to CSS instead of reaching for the DOM every single time.

$(element).css({
      'width': divWidth,
      'left': divPosit.left,
      'top': divPosit.top,
      'height': height,
      'display': 'block',
});

[xvilo]

Ah i did not know that, but it is not working correctly. The element .leftwrapper has a standard display:none just to hide weird placement. After the page has been loaded and when its is resized it is being prepared with the right CSS. This explains:

`$( document ).ready(calcLeftWrapper());

$(window).resize(function(){
calcLeftWrapper();
});

`

But when you navigate, click on “Domein & Hosting” or “Contact” the same div should be recalculated and made visible, which does not happen.

[Shikkediel]

$(document).ready(); is a shorthand for $(document).on('ready', fn);

I think it’s a bit more subtle than that, although I guess it would generally work (even if deprecated).

http://stackoverflow.com/q/13589307/3168107

One doesn’t really need to add quotes around the properties in the chained CSS by the way…

P.S. I can see the page now, strange.

[Shikkediel]

Looks to me that it’s related to synchronicity. You could try putting the calcLeftWrapper function inside the callback of the fadeIn.

There are superfluous body and html tags in the markup by the way.

[Alen]

@shikkediel didn’t know that was being removed. Just shows how much I’ve been working with jQuery, mostly using VueJS.

@xvilo I’ve replicated your issue by creating locally:

1. index.html and copy your markup
2. demo.html so I can navigate between pages (same markup)
3. added following JavaScript (re-wrote some parts)

$(document).ready(function() {
    calcLeftWrapper();
});
$(window).resize(function() {
    calcLeftWrapper();
});

function calcLeftWrapper() {
    var $original = $('.original-width');
    var $divWidth = $original.width();
    var $divPosit = $original.offset();
    var $vph = $(window).height();
    var $element = $('.leftwrapper');
    var $height = $vph - $divPosit.top - 15;
    $element.css({
        'width': $divWidth,
        'left': $divPosit.left,
        'top': $divPosit.top,
        'height': $height,
        'display': 'block',
    });
}

Everything is working as expected.

Hope that helps,
Alen

[Shikkediel]

Tricky bit is that he seems to be using an Ajax call to replace the content again after doc ready – including the relevant element.

[Author]

Posts