CODEWITHSUNDEEP
javascriptcssmedia-queries
Rob
Rob

Reputation: 1495

applying a style with javascript media query

Im trying to set different 'margin-top' values to the '.copy' based on screen width. Think it will need to be set with JS variables but open to hear the best solution.

Hover blue block to see js effect

Existing example:

JS Fiddle

JS

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':'80px'});
}, function () { //Frame 3
    $('.copy').animate({'margin-top':'140px'});
});

Ideally I would like to set a margin-top for screen widths, >768px, >1024px, + 1281px

Upvotes: 0

Views: 238

Answers (2)

Chad
Chad

Reputation: 5408

You can do this purely with CSS using media queries and transitions. No JS needed. http://jsfiddle.net/h6dT2/2/

.thumb {
    background: blue;
    position: absolute;
    height: 200px;
    width: 100%;
}
.copy {
    margin: 0 auto;
    margin-top: 140px;
    opacity: 0;
    width: 200px;
    -webkit-transition: .5s all ease;
}
.thumb:hover .copy {
    margin-top: 80px;
    opacity: 1;
}
body {
    margin: 0px;
    color: #fff;
}
@media (max-width: 1024px) {
    .copy { 
        margin-top: 20px;
    }
}

This doesn't solve every part of your problem, but it gives you a good idea of where to go.

Upvotes: 1

Hanna
Hanna

Reputation: 10753

Did you mean screen height or screen width?

if you want to do height, you could just use a percentage value like:

'margin-top': '25%'

That will adjust to the height.

If you want to do a calculation based on width you'll need to call the width() method on the window

$(window).width();

So you could say:

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

'margin-top': width

To get more with your example of certain screen widths, you could do something like:

var windowWidth = $(window).width();
var margin= 0; //default value
if(windowWidth > 1281) {
  margin = 100;
}
else if(windowWidth > 1024) {
  margin = 75;
}
else if (windowWidth > 768) {
  margin = 50;
}
else margin = 25;

then in your JQuery you could say:

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':margin});
}, function () { //Frame 3
    $('.copy').animate({'margin-top': (margin+60) }); //or whatever calculation you want to do for the other value, it's up to you.
});

Upvotes: 1

Related Questions