I have a selector attached to an image element that provides the function of a magnifier glass for the image. I need to remove the selector, so it no longer initiates the magnifier, and then re-add it, depending on screen size. So for instance, when accessed in a mobile screen, I would like the class removed. If screen size adjusts upward of 480px, then I would like the class re-added. What is the best, and most efficient way to approach this? Any help is appreciated.
4
-
4What have you tried?Joseph Silber– Joseph Silber2013-09-01 19:51:31 +00:00Commented Sep 1, 2013 at 19:51
-
Show some code and the let them be revised...ErickBest– ErickBest2013-09-01 20:08:06 +00:00Commented Sep 1, 2013 at 20:08
-
So far, I have used innerWidth and resize() to try to ascertain the window size, and using an if statement to create the action depending on the window size. So something like this - though I am not sure this is the best way to do it(?): $(window).resize(function() { if (window.innerWidth ==< 480) { // add selector code } else if (window.innerWidth > 480) { // remove selector code } }).resize();Lea– Lea2013-09-01 20:11:14 +00:00Commented Sep 1, 2013 at 20:11
-
Did you see my answer bellow?... similar to what you have tried... Then it should work.ErickBest– ErickBest2013-09-01 20:29:26 +00:00Commented Sep 1, 2013 at 20:29
Add a comment
|
4 Answers
If you don't mind jQuery, a simple Example might do the trick:
CSS:
.red{
background:red;
}
.yellow{
background:yellow;
}
HTML:
<div style="width:300px; height:100px;" class="yellow"></div>
jQuery:
$(function(){
$(window).bind("resize",function(){
console.log($(this).width())
if($(this).width() <500){
$('div').removeClass('yellow').addClass('red')
}
else{
$('div').removeClass('red').addClass('yellow')
}
})
})
This will change the color of the div element whenever you resize the containing window.
See fiddle: http://jsfiddle.net/6v7GE/
NOTE: In fiddle resizing is sliding the holders of the containing window.
Some Suggestions I would have is @media Queries Using multiple style sheets (They apply different css based on the screen size) OR to apply either java-script or a java-script library.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Comments
You should try this code:
$(window).resize(function() {
if ($(this).width() < 1024) {
$('.div').hide();
} else {
$('.divNew').show();
}
});
With this code you can hide the div depending on the width.
Comments
Why not use media queries?
http://en.wikipedia.org/wiki/Media_queries
They were designed to handle such situations.
3 Comments
ErickBest
Should you wish to have a post downVoted, Please explain the reason why you are downvoting.
Lea
I don't think media queries can remove/re-add a selector from an element. Can they? BTW I didn't down-vote your answer, I'm not sure who did?
Hans
@Lea : it doesn't matter who downvoted :). Media queries can't remove or add selectors, but they allow you to have different set of values/dimensions depending on the device, so that in many situations less JavaScript code is needed to handle the differences.