How to stop this jQuery running when screen size changes?

Question

I have made a gallery using jQuery, and I want this to only work on the full view. When the browser changes to tablet or mobile, I would like the jQuery gallery to stop and I only want the images from the gallery to appear, 2 side by size for the tablet and one below each other for the mobile as apposed to the 4 in the browser view - and on top of the images I would like the title of the product.

Example:

</* GALLERY JQUERY */

$(".galleryItem").mouseenter(function() {
var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
height: '200',
marginTop: '-220px'
});
});

$(".galleryItem").mouseleave(function() {
 var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
  height: '30',
  marginTop: '-50px'
 });
});

/* CSS */ 

.wrapper {
 width: 940px;
height: auto;
padding: 10px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 20px;
 margin-top: 0px;
 background: #ffffff;
}

.galleryItem {
  float: left;
  width: 300px;
height: 300px;
 margin-left: 10px;
 overflow: hidden;
 cursor: pointer;
}

.galleryItem:first-child {
 margin-left: 0;
}

.Image {
  width: 300px;
height: 300px;
font-size: 60px;
font-weight: 800;
 text-align: center;
text-transform: uppercase;
 line-height: 280px;
 color: rgba(0, 0, 0, 0.2);
 background: #FFF;
}

.red img{
  width: 80%;
 height: 80%;

}

.green img{
  width: 80%;
 height: 80%;

}

.blue img{
  width: 80%;
  height: 80%;

}

.galleryOverlay {
  position: absolute;
  width: 280px;
  height: 30px;
  padding: 10px;
  margin-top: -50px;
  color: #666;
 background: #FFF;
 overflow: hidden;
 z-index: 10;

 -webkit-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
}

.galleryItemTitel {
 display: block;
 height: 40px;
 font-size: 22px;
line-height: 30px;
 color: #000;
}

.clear {
 clear: both;
}

/* HTML */

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/1.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Detroit Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/2.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/3.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Chore Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
   <img src="images/5.jpg">
</div>
<div class="galleryOverlay">
  <h2 class="galleryItemTitel">Camo Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>

 <div class="galleryItem">
   <div class="fakeImage blue">
  <img src="images/6.jpg">
   </div>
   <div class="galleryOverlay">
    <h2 class="galleryItemTitel">Pender Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>

 </div>
 <div class="galleryItem">
 <div class="fakeImage green">
   <img src="images/4.jpg">
</div>
    <div class="galleryOverlay">
  <h2 class="galleryItemTitel">Ranger Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>
<div class="clear"></div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/7.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sail Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/8.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/9.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Roy Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

Bhojendra Rauniyar · Accepted Answer · 2014-04-09 06:17:55Z

1

You can use noop method like below:

var your_func = function(){
//wrap your gallery function here
};

//run your function
your_func();

//now you want to stop the function from running when resized
$(window).on('resize', function(){
  your_func = $.noop();
});

Or, if you want to do for screen sizes, then do like this:

if($(window).width() <= 1067){
  your_func = $.noop();
}

edited Apr 9, 2014 at 6:17

answered Apr 9, 2014 at 6:12

Bhojendra Rauniyar

86k36 gold badges179 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sefa · Accepted Answer · 2014-04-09 06:13:01Z

0

This code finds device type. Put an If statement in your code, if $.drowser.device is not equal to one of those just stop the execution.

  $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

answered Apr 9, 2014 at 6:13

Sefa

9,00010 gold badges54 silver badges85 bronze badges

1 Comment

Jacob van Lingen Over a year ago

If you want to go that way, use a better regex. Download a great one at: detectmobilebrowsers.com/download/javascript

4dgaurav · Accepted Answer · 2014-04-09 06:36:48Z

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        $(".galleryItem").mouseenter(function() {
        var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
        height: '200',
        marginTop: '-220px'
        });
        });

        $(".galleryItem").mouseleave(function() {
         var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
          height: '30',
          marginTop: '-50px'
         });
        });
      }
   });
});

nilsole · Accepted Answer · 2014-04-09 06:38:43Z

Concerning your window width problem, you can use this function to detect the window width wehnever necessary (for example $(window).on('resize') or $(document).on('ready') ):

var isLowerThan = function(lower_than_width){
var $window = $(window);
return ($window.width() < lower_than_width);
}

Demo

As you seem to be interested in different views for each device class, you should maybe consider using the basic grid system provided by Bootstrap framework. It comes with four different viewport widths and you can adjust your markup accordingly.

Collectives™ on Stack Overflow

How to stop this jQuery running when screen size changes?

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related