jquery screen.width and slideToggle

colak · 2015-05-14 11:02:31

I have the script below paired with the site menu but $(".menu-items").slideToggle('slow'); is not working. Can anybody spot why?

<script>
$(document).ready(function(){
// change class
$('body').removeClass('no-js').addClass('js');
// bxslider 
if(window.innerWidth < 960) {
$('.slider').bxSlider({
slideWidth: 600,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideMargin: 10
});
}
else {
$('.slider').bxSlider({
slideWidth: 340,
minSlides: 2,
maxSlides: 2,
moveSlides: 2,
slideMargin: 10
});
}
// toggle menu
if (screen.width <= 960) {
$("#menu-toggle-primary").on("click", function(){
$(".menu-items").slideToggle('slow');
}
else if (screen.width >960) {
$(".menu-items").show();
});
// slides
$(".rslides").responsiveSlides({
auto: true,
speed: 500,
timeout: 5000,
pause: true,
pauseControls: true,
namespace: "rslides",
});
});
</script>

Edited to add the whole script just in case the bug is somewhere else.

Last edited by colak (2015-05-14 11:32:22)

jakob · 2015-05-14 11:40:32

My guess is there’s nothing watching the screen.width. Try wrapping it in an resize event listener. Also check you are closing your functions correctly – I added blank lines below to make it clearer where each { … } and each .on( … { … }); starts and ends:

$(window).on("resize", function () {

  if (screen.width <= 960) {

    $("#menu-toggle-primary").on("click", function() {
      $(".menu-items").slideToggle('slow');
    });

  } else {

    $(".menu-items").show();

  }

});

If you find it’s not working correctly on the first instance but is working on resize, try an arrangement like Pat64’s in this thread.

PS: How do you get the pretty code to show in the forum?

colak · 2015-05-14 11:53:55

Interestingly, if I remove the screen.width functions the menu works fine but if I resize the browser (from small to large) when the menu is closed, the menu remains invisible. Also I’m wondering if instead of using screen.width I could combine the functions with boxslider’s window.innerWidth.

Edited to add, thanks Julian but it does not work:(

2nd edit.

For pretty code I use js, txp, css or php after bc.

bc.
txp
<txp:code />

Last edited by colak (2015-05-14 12:05:29)

jakob · 2015-05-14 12:47:17

In Pat64’s code that I linked to, he uses $(window).width() instead of screen.width. You can add a line to output what the javascript is producing to the console – open the developer tools in safari/chrome/firefox and then open the console pane (often a “>_” prompt sign or cogwheel button) to see what the output is:

console.log('screen width: ' + screen.width);

You can also use the dev tools to see what the css properties of .menu-items are. I can’t remember exactly what slideToggle does. IIRC it sets the height to 0 and display to invisible. If show() restores display:block; but not the height, then it may be there but 0 tall. You can use the developer tools in conjunction with the “computed” view of the styles in the sidebar to see that.

PS: Yes, it would probably be a good idea to handle the menu and the slider in the same width detection…

colak · 2015-05-14 13:26:16

OK,

this is what I just tested

var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize < 960) {
$("#menu-toggle-primary").on("click", function(){
$(".menu-items").slideToggle('slow');
} else if (windowsize > 960) { 
$(".menu-items").show().height(auto);
}
});

The ff dev tools complains that I have an error

Error: SyntaxError: missing ) after argument list

} else if (windowsize > 960) {

Bloke · 2015-05-14 13:35:44

This might be closer to what you intended: your braces/brackets were out of kilter. But the success of the event handler will depend on whether the menu-toggle-primary element exists in the markup on page load or if it’s added dynamically afterwards.

var $window = $(window);
function checkWidth() {
   var windowsize = $window.width();

   if (windowsize < 960) {
      $("#menu-toggle-primary").on("click", function() {
         $(".menu-items").slideToggle('slow');
      });
   } else if (windowsize > 960) { 
      $(".menu-items").show().height(auto);
   }
}

EDIT: that’s probably not the best way to go about it either. Unless I’ve misunderstood what you’re doing, that’ll attach a new event handler each time the checkWidth() function is called. If it’s only being called once, fine. But if it’s called from another event, you’re going to slow the browser down with a zillion handlers each time the browser is resized. Might be wrong: jQuery may be clever about it and overwrite the handler.

colak · 2015-05-14 13:51:08

Bloke wrote #290767:

This might be closer to what you intended: your braces/brackets were out of kilter. But the success of the event handler will depend on whether the menu-toggle-primary element exists in the markup on page load or if it’s added dynamically afterwards.

var $window = $(window);...

hmmm. the errors disappeared but $(".menu-items").slideToggle('slow'); does not work. … menu-toggle-primary element does exist in the markup.

jakob · 2015-05-14 14:58:29

Stef’s probably right :-) If #menu-toggle-primary already exists (style it to be hidden to begin with), attach the on-click to it outside of the window.resizing and then hide the button when it’s not needed at certain screen sizes.

Perhaps this gets you there:

<script>
  $(document).ready(function(){

    // set javascript body class
    $('body').removeClass('no-js').addClass('js');

    // set re-usable variables
    var $window     = $(window),
        $slider     = $('.slider'),
        $menu       = $('.menu-items'),
        $menuswitch = $('#menu-toggle-primary');

    // attach clickhandler to toggle button
    $menuswitch.on('click', function() {
       $menu.slideToggle('slow');
    });

    function checkWidth() {
       var windowsize = $window.width();

       if (windowsize <= 960) {

         // set slider to use a single slide
         $slider.bxSlider({
           slideWidth: 600,
           minSlides: 1,
           maxSlides: 1,
           moveSlides: 1,
           slideMargin: 10
         });

         // show menu toggle button
         $menuswitch.show();

       } else {

          // set slider to use two slides
          $slider.bxSlider({
            slideWidth: 340,
            minSlides: 2,
            maxSlides: 2,
            moveSlides: 2,
            slideMargin: 10
          });

          // show menu and hide toggle button
          $menu.show().height(auto);
          $menuswitch.hide();

       }
    }

    // execute check width function on first load
    checkWidth();

    // Recheck width on window resize
    $window.resize( function() {
      checkWidth();
    });

    // initiate responsive slides

    $('.rslides').responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 5000,
      pause: true,
      pauseControls: true,
      namespace: 'rslides'
    });

  });
</script>

Gocom · 2015-05-14 15:47:31

jakob wrote #290774:

$menu.show().height(auto);

I don’t think auto is valid variable; it should be a string 'auto' instead.

$slider.bxSlider({

Looking at the slider’s source, I believe that method should be called only once; on subsequent calls on the same node, you should use $.fn.reloadSlider().

function checkWidth() {

As you are using jQuery, you could also use trigger('resize') to execute the handler instead of a sandalone named function…

$window.resize( function() { ...

…or this you could simply pass the reference instead of wrapping it to a lambda:

$window.resize(checkWidth);

colak · 2015-05-14 15:49:40

whoa!!! That actually kind of worked. All I needed to do was to move the responsive slides to the top as the transition would not initiate. There is a glitch with the video slides container but I think that I can fix that one. Thanks soo much Julian. Below is the final working script just in case anyone needs it No, doesn’t matter wgat I do it does not work. I am officially giving up! Thank you Stef, Julian, Jukka. I have to say that javascript really frustrates me so I’ll once again try to go the css way which should work be that in modern browsers only.

<script>
  $(document).ready(function(){

    // set javascript body class
    $('body').removeClass('no-js').addClass('js');


    // initiate responsive slides

    $('.rslides').responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 5000,
      pause: true,
      pauseControls: true,
      namespace: 'rslides'
    });


    // set re-usable variables
    var $window     = $(window),
        $slider     = $('.slider'),
        $menu       = $('.menu-items'),
        $menuswitch = $('#menu-toggle-primary');

    // attach clickhandler to toggle button
    $menuswitch.on('click', function() {
       $menu.slideToggle('slow');
    });

    function checkWidth() {
       var windowsize = $window.width();

       if (windowsize <= 960) {

         // set video slider to use a single slide
         $slider.bxSlider({
           slideWidth: 600,
           minSlides: 1,
           maxSlides: 1,
           moveSlides: 1,
           slideMargin: 10
         });

         // show menu toggle button
         $menuswitch.show();

       } else {

          // set video slider to use two slides
          $slider.bxSlider({
            slideWidth: 340,
            minSlides: 2,
            maxSlides: 2,
            moveSlides: 2,
            slideMargin: 10
          });

          // show menu and hide toggle button
          $menu.show().height(1em);
          $menuswitch.hide();

       }
    }

    // execute check width function on first load
    checkWidth();

    // Recheck width on window resize
    $window.resize( function() {
      checkWidth();
    });

  });
</script>

> Edit. I just saw Jukka’s advice which I am working on!!!

Last edited by colak (2015-05-14 16:01:35)

jakob · 2015-05-14 20:23:48

Don’t give up, you’re so close.

If I understood Jukka’s tips correctly, then it should be:

<script>
  $(document).ready(function(){

    // set javascript body class
    $('body').removeClass('no-js').addClass('js');


    // initiate responsive slides
    $('.rslides').responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 5000,
      pause: true,
      pauseControls: true,
      namespace: 'rslides'
    });

    // initiate bxslider   
    var $slider = $('.slider').bxSlider({
      slideWidth: 340,
      minSlides: 2,
      maxSlides: 2,
      moveSlides: 2,
      slideMargin: 10
    });

    // set re-usable variables
    var $window     = $(window),
        $menu       = $('.menu-items'),
        $menuswitch = $('#menu-toggle-primary');

    // attach clickhandler to toggle button
    $menuswitch.on('click', function() {
       $menu.slideToggle('slow');
    });

    // On window resize, check width and change menu + slider
    $window.resize( function() {

       var windowsize = $window.width();

       if (windowsize <= 960) {

         // set video slider to use a single slide
         $slider.reloadSlider({
           slideWidth: 600,
           minSlides: 1,
           maxSlides: 1,
           moveSlides: 1
         });

         // show menu toggle button
         $menuswitch.show();

       } else {

          // resize video slider to two slides
          $slider.reloadSlider({
            slideWidth: 340,
            minSlides: 2,
            maxSlides: 2,
            moveSlides: 2
          });

          // show menu and hide toggle button
          $menu.show().height('auto');
          $menuswitch.hide();

       }

    });

    // trigger resize event on page load 
    trigger('resize');

  });
</script>

And if something’s not working quite as you want, add console.log( 'label: ' + varname ); at points in the code to find out if widths are being triggered correctly and what the variables contain. That usually helps in narrowing down what the problem is.

Textpattern CMS

Textpattern CMS support forum

#1 2015-05-14 11:02:31