changing animation for different screen sizes

0
votes

I am working on an animation in which when user clicks on an element i am showing a div with animation from left:700px

$("#maharashtra").click(function(){


    $("#mainbg").hide();
    $("#divmaha").animate({left:"800px"});
    $("#divmaha").show() ;

it works well for screen size 1280 x 800, the problem is when the screen size increases the animated text comes over the left column div. any help would be grateful.

2
jqueryhtmlcss
can u show your html code or css in jsfiddle with link - Rohit Azad Malik
you can first check screen size and then use apply style accordingly this. or you can give left in % so that will adjust itself. - shyammakwana.me

2 Answers

0
votes

Media Query with Modernizr - 

if (Modernizr.mq('(max-width: 800px)')) {
    //your code
}

More here: http://modernizr.com/docs/#mq

0
votes

I'd try something like this using jQuery:

var aniParams = [{'max':1000, 'left':600},{'max':800, 'left':400}]; //big > small

$('#elem')
.on('click', function(){
    for(var i = 0; i < aniParams.length; ++i){
        if($(window).width() <= aniParams[i].max){
            $('#aniElem')
            .animate({
                'left':aniParams[i].left + 'px'
            }, 1000);
        }
    }
});