0

Trying to move my logo image back to its original position on window resize. I have used .prepend to move the logo originally, however it won't move back to the original position after the first prepend.

function moveLogo() {
var logo = $(".logo-wrapper");
var navTile $(".nav-tile");
var mobileBar = $(".mobile-nav-bar");
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth, //gets precise browser width
    y = w.innerHeight || e.clientHeight || g.clientHeight; //gets precise height



    if (x <= 587) {

        logo.prependTo(mobileBar);

    } else {

        logo.prependTo(navTile);

    }



}
window.onload = moveLogo;
window.onresize = moveLogo;

Wow, so the the post mplungjan sent me to and Vlad's recommendation made me realise what I was doing wrong. I added:

var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(moveLogo, 50);
};

This worked! I see that the way I used the javascript wasn't actually calling my function at the end of the resize event.

Will Busby
  • 38
  • 2
  • 7
  • 1
    Please read this http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac - you are not actually using jQuery where it matters – mplungjan Jun 03 '15 at 11:59
  • 1
    check if your function is triggered on resize, add a console.log to your function for that, and add one different one in your if to see if it goes inside. – Vlad Pintea Jun 03 '15 at 12:01
  • You two helped me understand the problem much more. Thank you! – Will Busby Jun 03 '15 at 12:15

1 Answers1

1

Using JS for this is unnecessary. You can use pure css by placing the logo in both the .mobile-nav-bar and the .nav-title.

Then use the following css:

.mobile-nav-bar .logo-wrapper{
    display:block;
}
.nav-title .logo-wrapper
    display:none;
}

@media (min-width: 587px){
    .mobile-nav-bar .logo-wrapper{
        display:none;
    }
    .nav-title .logo-wrapper{
        display:block;
    }
}
Okku
  • 7,468
  • 4
  • 30
  • 43
  • This is definitely an option, although I would rather try and avoid using the same image for the same job on the page. I found a nice solution above to keep the same image. – Will Busby Jun 03 '15 at 12:11