CODEWITHSUNDEEP
jquerycsshtmlmenu
Pedro Paulo Amorim
Pedro Paulo Amorim

Reputation: 1949

Dropbox and Menu

It may seem silly that I speak, but I am having difficulties with Jquery. My goal is to apply. "Hide" on a menu and ". Mes" dropbox, and the dropbox will only appear when the screen is less than or equal to 320px (portrait smartphone). The problem is when the phone is in portrait and in I change to Landscape (480px), the menu does not appear and does not hide the dropbox. keeps the dropbox.

I would do anything to alter independende the initial position of the screen.

JSFIDDLE(bugged, but works): http://jsfiddle.net/eJZSd/

$(document).ready(function () {

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

    if(width<400){
          $("#Menu_Drop").show();
          $("aside").hide();
    }
    else{
          $("#Menu_Drop").hide();
          $("aside").show();
    }

    $('img').on('dragstart', function(event) { event.preventDefault(); });

    $('.flexslider').flexslider({
        animation: 'fade',
        slideshow: true,  
        touch: true,  
        keyboard: true,
        slideshowSpeed: 7000, 
        animationSpeed: 500,
        controlNav: false,
        directionNav: false,  

        before: function(){

        $("#Mensagem").animate({ opacity: '0', });

        $(".triangulo").animate({ opacity: '1', });

        $(".triangulo").animate({ borderWidth: '0px', });

        },

        after: function(){
          if(width<500){
          $(".triangulo").animate({ borderWidth: '10px', });
        }
        else{
          $(".triangulo").animate({ borderWidth: '70px', });
        }


          $("#Mensagem").animate({ opacity: '1', });

        }, 


    });
  });

Upvotes: 1

Views: 129

Answers (1)

Mercurybullet
Mercurybullet

Reputation: 889

Looks to me like the issue you are having is that you're not detecting when the "window" size changes due to the screen rotating.

According to this response, the trick is to add an event listener for either resize or orientationchange. Then you would run your 400 check again.

Add this piece outside of your $(document).ready(){...} section

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;

        // orientation changed, do your magic here
        var width = $(window).width();

        if(width<400){
              $("#Menu_Drop").show();
              $("aside").hide();
        }
        else{
              $("#Menu_Drop").hide();
              $("aside").show();
        }
    }
};

Then this piece inside of $(document).ready(){...}

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

Upvotes: 1

Related Questions