CODEWITHSUNDEEP
jquery
nsilva
nsilva

Reputation: 5622

jQuery, window width and append

I have the following code:-

if(jQuery(window).width() <= 992) {

    $('#menu-main-menu').prepend('<a id="book-now-menu" href="https://bookings.planetbouncetrampolinepark.com/JumpBookings/BookSession.aspx?site=1&group=1">BOOK NOW</a>');

    var social_menu =  '<div id="social-menu">';
        social_menu += '<a href="" target="_blank"><span class="icon-social icon-facebook"></span></a>';
        social_menu += '<a href="" target="_blank"><span class="icon-social icon-instagram"></span></a>';
        social_menu += '<a href="" target="_blank"><span class="icon-social icon-twitter"></span></a>';
        social_menu += '<a href="" target="_blank"><span class="icon-social icon-youtube"></span></a>';
        social_menu += '</div>';

    $('#menu-main-menu').append(social_menu);

}

This works fine when you refresh the page at below 992px or greater than than 992px. But in terms of responsiveness, it will either attach the code based on what your initial browser width is. Is there a way to get round this so that it detects the browser width on change and will either add/remove the above code?

Thanks in advance.

Upvotes: 0

Views: 120

Answers (2)

miqueloi
miqueloi

Reputation: 698

Why dont you use:

@media all(max-width: 992){
.social_menu{
display: none; 
}

That way you take up less browser ressources on calculating on every resize..

Upvotes: 1

Alex Todef
Alex Todef

Reputation: 370

I think listener for a $(window).resize(function(){...}) should solve your problem. Just insert your code inside it, and function will apply every time your resize the window.

Upvotes: 0

Related Questions