0

I am putting in my media queries for my website and would like to change a rule. Currently my rule is this:

<script>
        (function($){
            $(document).on('click', '.container', function(){
                $(this).addClass('active');
                $('.container:not(.active):eq(0)').animate({top: -1258, left: 50});
                $('.container:not(.active):eq(1)').animate({top: 1258, left: -50});
                if (this.id == 'center' || this.id == 'left') {
                  $('.menu').addClass('red');
                }
            });
            $(document).on('click', '.container.active', function(){
                $('.container:not(.active):eq(0)').animate({top: 0, left: 0});
                $('.container:not(.active):eq(1)').animate({top: 0, left: 0});
                $(this).removeClass('active');

                $('.menu').removeClass('red');

            });
        })(jQuery);
</script>

I want to say when my screen has a max width of 400px animate top:50 and left 1258.

Is there a way to do this?

Clarke Cribb
  • 249
  • 2
  • 12
  • `$(window).resize()`? – Downgoat May 16 '15 at 17:06
  • do these help? http://stackoverflow.com/questions/2996431/detect-when-a-window-is-resized-using-javascript http://stackoverflow.com/questions/641857/javascript-window-resize-event http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery – Himanshu Tanwar May 16 '15 at 17:29

1 Answers1

0

You can detect the height and width in Javascript like so:

var height = document.body.clientHeight;
var width = document.body.clientWidth;

or using JQuery (Get the size of the screen, current web page and browser window)

Using this you should be able to determine what values you need and then modify your JQuery .Animate accordingly.

Community
  • 1
  • 1
LiamB
  • 18,243
  • 19
  • 75
  • 116
  • Do i put this at the top of the script? Do i put the values in where you have put 'height' and 'width'? – Clarke Cribb May 16 '15 at 17:27
  • This code only loads the height and width, you will then need to check the dimensions to see if it's higher or lower than you need and then change the animate values. – LiamB May 17 '15 at 10:33