jQuery, window width and append

Question

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.

Why don't you added it always to your page and control the visibility using css media queries? — t.niese
– t.niese, Commented Feb 26, 2016 at 13:37

miqueloi · Accepted Answer · 2016-02-26 13:39:58Z

1

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..

answered Feb 26, 2016 at 13:39

miqueloi

6984 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nsilva Over a year ago

Don't know why I didn't think if doing this. I basically removed if(jQuery(window).width() <= 992) { so it appends the content regardless, then added .social_menu { display: none; } , and used media queries as above to display them for mobile devices. Thanks

Alex Todef · Accepted Answer · 2016-02-26 13:34:31Z

0

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.

answered Feb 26, 2016 at 13:34

Alex Todef

3702 silver badges7 bronze badges

1 Comment

nsilva Over a year ago

I have added this and added an else clause; jQuery('#book-now-menu, #social-menu').remove(); - but say you change the browser size from 800px to 500px, it is adding 6 rows of the social-menu, is there a way to only trigger the change once when it goes below or greater than 992px?

Collectives™ on Stack Overflow

jQuery, window width and append

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related