I've tried if else statements and it should be fairly simple but I cant seem to reverse the wrap after resizing above 650px.
Basically, I'm trying to get the boxes wrapped in a div when window is below 650 width and then unwrapped after resizing above 650px.
How can I do that?
$(window).resize(function() {
if ($(window).width() < 650)
$('.box').wrap("<div class='boxwrap'><div/>")
});
$(window).resize(function() {
if ($(window).width() > 650)
$('.box').unwrap("<div class='boxwrap'><div/>")
});
#cat-area {
width: 100%;
display: inline-block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: yellow;
width: 92.5%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.box {
display: inline-block;
width: 20%;
height: 20%;
max-height: 300px;
max-width: 300px;
min-height: 100px;
min-width: 100px;
padding: 1%;
background-color: #d7d7d7;
}
#media only screen and (max-width: 650px) {
#cat-area {
width: 100%;
display: block;
text-align: center;
background-color: red;
}
#cat-container {
background-color: blue;
width: 92.5%;
display: block;
}
.box {
position: relative;
display: block;
margin: 4px 0px;
}
.boxwrap {
background-color: #d7d7d7;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cat-area">
<div id="cat-container">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
</div>
</div>
I have faced a similar problem to this myself. Here is a simple demonstration of how you can do this:
Note the page width initially
On resize, after a brief timeout (after resizing has stopped), note the new width
Compare the two values to determine whether we should take action or not
Reset our width for comparison to the new width, for the next time we resize
Run the following snippet, expand it to full screen, and adjust the browser size to see it working.
$(function() {
var resizeTimer;
var initialSize = $(window).width();
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var delayedSize = $(window).width();
// if we resize the page but we don't cross the 650 threshold, do nothing
if ((initialSize > 650 && delayedSize > 650) || (initialSize < 650 && delayedSize < 650)) {
return
}
// else if we resize the page and cross the 650 threshold, do something
else {
if (delayedSize > 650) {
$('#cat-container').unwrap('#cat-area');
} else if (delayedSize <= 650) {
$('#cat-container').wrap('<div id="cat-area"></div>');
}
}
initialSize = delayedSize;
}, 250);
});
});
#cat-area {
background-color: gold;
padding: 10px;
}
#cat-container {
background-color: slategray;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cat-area">
<div id="cat-container">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
<img class="box" src="http://via.placeholder.com/200x200">
</div>
</div>
Related
I'm trying to add height to original value in CSS.
But so far I had no luck.
html,
body {
width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
overflow: hidden;
background-color: #FFF;
}
#Header1 {
background-color: green;
width: 100vw;
height: 10vh;
margin-bottom: 0%;
z-index: 100;
}
#Header2 {
background-color: blue;
width: 100%;
height: 4vh;
margin-bottom: 0%;
z-index: 100;
}
#Main {
height: 82vh;
width: 100%;
}
if (Header1Check == 1) {
document.getElementById("Header1").style.display = "block";
} else {
document.getElementById("Header1").style.display = "none";
document.querySelector('#Main').style.height = "initial" + "10vh";
}
if (Header2Check == 1) {
document.getElementById("Header2").style.display = "block";
} else {
document.getElementById("Header2").style.display = "none";
document.querySelector('#Main').style.height = "initial" + "4vh";
}
Basicly if the check = 0 it stops showing HEADER1/Header2, but the Main content (center) does not auto size to this.
To counteract this I just tried to add that value to the CSS but it does not appear to work.
Is there a way to achieve this?
edit:
<body>
<div id="wrapper">
<div id="Header1">
</div>
<div id="Header2">
</div>
<div id="portraitContent">
</div>
<div id="landscapeContent">
</div>
<div id="Footer">
</div>
</div>
</body>
You can use display:flex on the #wrapper element, and then set the content divs with flex:1 which means they will take up the remaining space
(see more about flexbox at: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
Something like
*{box-sizing:border-box;}
html,
body {
width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
overflow: hidden;
background-color: #FFF;
}
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
#wrapper > * {
border: 1px solid black;
}
#Header1 {
background-color: green;
height: 10vh;
z-index: 100;
}
#Header2 {
background-color: blue;
height: 4vh;
}
#Footer {
background-color: tomato;
height: 4vh;
}
#portraitContent,
#landscapeContent {
flex: 1;
background: teal;
}
#media (orientation: landscape) {
#portraitContent {
display: none
}
}
#media (orientation: portrait) {
#landscapeContent {
display: none
}
}
<div id="wrapper">
<div id="Header1"> header 1
</div>
<div id="Header2">header 2
</div>
<div id="portraitContent">
portrait
</div>
<div id="landscapeContent">
landscape
</div>
<div id="Footer">footer
</div>
</div>
Assuming you want to change size of an image for example you can do this simple example below
Also the property you added for height is incorrect syntax
The correct property values are from
https://www.w3schools.com/jsref/prop_style_height.asp
Property Values
Value Description
auto The browser sets the height. This is default
length Defines the height in length units
% Defines the height in % of the parent element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
#HaoWu comment is correct you cannot use both properties together either or
you can assign another
//Syntax : object.style.height("")
appImg.style.height = "inital";
Refernces
prop style height w3schools
js-conventions w3schools
I have prepared a simple Example answer for your question .
const appImg = document.getElementById("appImg");
//console.log(appImg);
function minimizeImage(){
const hideImgBtn = document.getElementById("hideImgBtn");
if(!hideImgBtn){
appImg.style.display = "block";
}else {
appImg.style.height = "10vh";
};
};
.app__img{
max-width: 10vw;
max-height: 150px;
width: 100%;
height: 100%;
}
<div>
<img
src ="https://images.pexels.com/photos/12999041/pexels-photo-12999041.jpeg?auto=compress&cs=tinysrgb&w=300&lazy=load" class="app__img" id="appImg" alt="appImage"/>
</div>
<button onclick="minimizeImage()" id="hideImgBtn">
Min image size with js
</button>
html,
body {
width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
overflow: hidden;
background-color: #FFF;
}
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
#wrapper > * {
border: 1px solid black;
}
#Header1 {
background-color: green;
height: 10vh;
z-index: 100;
}
#Header2 {
background-color: blue;
height: 4vh;
}
#Footer {
background-color: tomato;
height: 4vh;
}
#portraitContent,
#landscapeContent {
flex: 1;
background: teal;
}
#media (orientation: landscape) {
#portraitContent {
display: none
}
}
#media (orientation: portrait) {
#landscapeContent {
display: none
}
}
<div id="wrapper">
<div id="Header1"> header 1
</div>
<div id="Header2">header 2
</div>
<div id="portraitContent">
portrait
</div>
<div id="landscapeContent">
landscape
</div>
<div id="Footer">footer
</div>
</div>
document.querySelector('#Main').style.height = "initial" + "10vh";
"initial" + "10vh" is not valid. You can do it like this:
document.querySelector('#Main').style.height += "10vh";
Good luck!
I am trying to set up a JS/jQuery/CSS solution to select images larger than 400px and set them to be the full width of the container (min-width: 100%).
However, it should not apply to images smaller than 400px to avoid selecting really small ones or thumbnails. Normally, I'd just use classes, but the markup is generated by an old wiki intranet system which doesn't give users the ability to set classes.
Any help would be appreciated.
.container {
width: 700px;
border: solid 1px red;
}
.container img {
border: solid 1px green;
max-width: 100%;
height: auto;
display: block;
margin: auto auto;
}
<div class="container">
<img src="https://via.placeholder.com/140x100" />
<img src="https://via.placeholder.com/500x100?text=Should_be_full_width" />
</div>
You can use the naturalWidth property after the images are loaded (use the window load event) and manually add a class (use classList).
window.addEventListener('load', () => {
const images = document.querySelectorAll('img');
for (let image of images) {
if (image.naturalWidth >= 400) {
image.classList.add('full-width');
// or set the style directly if you have to
// image.style.minWidth = '100%';
}
}
});
.container {
width: 700px;
border: solid 1px red;
}
.container img {
border: solid 1px green;
max-width: 100%;
height: auto;
display: block;
margin: auto auto;
}
.full-width {
min-width: 100%;
}
<div class="container">
<img src="https://via.placeholder.com/140x100" />
<img src="https://via.placeholder.com/500x100?text=Should_be_full_width" />
</div>
$(function() {
$('img').each((i, img) => {
let width = parseInt($(img).css('width'));
if (width > 400) {
$(img).css('width', '100%');
}
});
});
.container {
width: 700px;
border: solid 1px red;
}
.container img {
border: solid 1px green;
max-width: 100%;
height: auto;
display: block;
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<img src="https://via.placeholder.com/140x100" />
<img src="https://via.placeholder.com/500x100?text=Should_be_full_width" />
</div>
This would work
var images = $("img")
for (let i = 0; i < images.length; i++) {
if (images[i].width >= 400) {
images[i].style.minWidth = "100%";
}
}
I miss 1% to finish my script, I just don't know how to do it :D
When you hover over the target to the left, you can see the image will scroll. But after clicking on a new image it won't. I then have to resize the window to make it work again. How to fix that? Below is my code but for a working example, here's a CodePen
(function($) {
// virables
var layoutContainer = '.container';
var layoutTarget = '#target';
var layoutTargetIMG = '#target img';
var layoutIMG = '.container .gallery .item img';
var layoutIMGFirst = '.container .gallery .item:first-child img';
// Add first image to target
$(layoutIMGFirst).clone().appendTo(layoutTarget);
// Add image to target when click on gallery image
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
// Image scroll on hover
// This won't work after clicking on an image unless resizing the browser
$(window).resize(function() {
// If i remove this it won't work on the start image.
// Any other solution?
setTimeout(function() {
$('#target img').each(function() {
var itemHeight = $('#target').outerHeight();
var imgHeight = $(this).outerHeight();
// Work out what percentage the image is of the item and remove 100% from that
var topHeight = (imgHeight / itemHeight) * 100 - 100;
//Make the animation speed proptional to that ratio
var animationSpeed = (imgHeight / itemHeight) / 1; //change 2 to tweak the speed
$(this).css({
transition: 'all ease ' + animationSpeed + 's'
});
$(this).mouseleave(function() {
$(this).css({
top: '0'
});
})
// The 'top' property of the image needs
// to be set as as a percentage of the parent
$(this).mouseenter(function(e) {
$(this).css({
top: '-' + topHeight + '%',
});
})
});
}, 200);
});
$(document).ready(function() {
setTimeout(function() { // Add delay after resize so function will load
$(window).triggerHandler('resize');
}, 200);
});
})(jQuery);
.container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-left: -40px;
max-width: 1000px;
background: lightblue;
padding: 20px;
.column {
flex: 1;
min-width: 30%;
margin-left: 40px;
.target {
height: 400px;
background: pink;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.cta {
display: flex;
a {
background: lightgreen;
width: 50%;
padding: 16px 8px;
;
text-align: center;
justify-content: center;
text-decoration: none;
&:last-child {
background: orange;
}
}
}
.gallery {
display: flex;
flex-flow: row wrap;
margin-left: -4px;
.item {
flex: 1;
margin-left: 4px;
position: relative;
overflow: hidden;
&::before {
content: '';
padding-top: 80%;
display: block;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="column">
<div id="target" class="target"></div>
<div class="cta">
SE DEMO
KØB LAYOUT
</div>
</div>
<div class="column">
<div class="gallery">
<div class="item">
<img src="https://picsum.photos/600/1200" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/500/1600" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/400/2000" alt="">
</div>
</div>
</div>
</div>
Just change this
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
});
to
$(layoutIMG).click(function() {
$(this).closest(layoutContainer).find(layoutTarget).empty();
$(this).clone().appendTo(
$(this).closest(layoutContainer).find(layoutTarget)
);
$(window).triggerHandler('resize'); // added this line
});
I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Please take a look at the snippet below. Notice how the overflow property is used.
You have to scroll mock-body-container to keep its scrolling position.
You're scrolling body instead, so when you scale mock-body-container there is nothing to scroll in body and you loose the scrolling position.
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
overflow:auto;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Once you know the element that was in focus it should be relatively easy. If you need to find which element was last in focus, you can do that with a scroll function. If you need this as well let me know and I will update my answer.
If you know that #mock-body is the last element in focus, just scroll back to it after the resize.
In this example I've used jQuery as it makes this interaction easier, but this can be done (albeit more verbosely) with vanilla JS as well.
$('html, body').animate({
scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number
A simple way to do it is to remember the position of the document scroll and reapply it when you getting back to "normal" view:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
Check it out:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
body {
margin: 0;
background: #000;
}
.body-on-burger {
max-width: 100%;
overflow-x: hidden;
}
.mock-body-container {
height: 100vh;
}
.mock-body-container-on-burger {
height: 100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change {
overflow: scroll;
}
.mock-body {
position: relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height: 50px;
width: 50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height: 500px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Legend: _s(el) returns first match of el and s_(d) checks if d has class body-on-burger.
The simple way to do this is to determine the change in height during the resize, and scroll that much.
const heightChange = newHeight - initialHeight;
scrollableDiv.scrollTop = scrollableDiv.scrollTop - heightChange;
In my case I am using a resize method I wrote, so I do this work inside of a window.addEventListener("mousemove", handleResize); when I know the div in actively being resized by the user.
This will still work fine with native html resizable elements, you just need to figure out how/when to listen for resize/drag events accordingly.
I have two divs with same class. If I scroll one div the other divs scroll comes to 0. I am able to achieve this with .prop() property easily. But when I use .animate() the occurrence just happens once and then it stops working(Commented the code in my example snippet) . What I want is the scroll when comes to zero should animate i.e the scroll comes to 0 with a animation like its showing with .animate().
Note: Classes of divs will be same and there can be more divs too.
Here is the code I have tried, please tell me where I am wrong.
$(document).ready(function() {
$('.swipe_div').scroll(function() {
// $(this).siblings(".swipe_div").animate({scrollLeft: 0},100);
$(this).siblings(".swipe_div").prop({
scrollLeft: 0
});
});
});
body,
html {
width: 100%;
height: 100%;
background-color: green;
padding: 0;
margin: 0;
}
.swipe_div {
display: block;
float: left;
width: 100%;
height: 100px;
overflow-x: scroll;
background-color: white;
}
.content,
.operation,
.swipe_container {
display: block;
float: left;
height: 100%;
}
.swipe_container {
width: 150%;
}
.content {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
text-align: right;
font-size: 30pt;
width: 67%;
background-color: grey;
}
.operation {
width: 33%;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swipe_div">
<div class="swipe_container">
<div class="content">
>
</div>
<div class="operation">
</div>
</div>
</div>
<div class="swipe_div">
<div class="swipe_container">
<div class="content">
>
</div>
<div class="operation">
</div>
</div>
</div>
When you're animating scrollLeft you're activating scroll() on the sibling, which is trying to animate scroll on the div you're actively scrolling. So you need to mark when you start scrolling and throttle() all subsequent calls on scroll() until you're done scrolling.
trailing:true calls it one more time after it hasn't been called for throttle_interval (250 in this example), turning scrolling marker back to false:
$(document).ready(function() {
var scrolling;
$('.swipe_div').scroll(_.throttle(function() {
if (!scrolling) {
scrolling = true;
$(this).siblings(".swipe_div").animate({scrollLeft: 0},150);
} else {
scrolling = false;
}
}, 250, {leading:true,trailing:true}));
});
body,
html {
width: 100%;
height: 100%;
background-color: green;
padding: 0;
margin: 0;
}
.swipe_div {
display: block;
float: left;
width: 100%;
height: 100px;
overflow-x: scroll;
background-color: white;
}
.content,
.operation,
.swipe_container {
display: block;
float: left;
height: 100%;
}
.swipe_container {
width: 150%;
}
.content {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
text-align: right;
font-size: 30pt;
width: 67%;
background-color: grey;
}
.operation {
width: 33%;
background-color: red;
}
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swipe_div">
<div class="swipe_container">
<div class="content">
>
</div>
<div class="operation">
</div>
</div>
</div>
<div class="swipe_div">
<div class="swipe_container">
<div class="content">
>
</div>
<div class="operation">
</div>
</div>
</div>
I tested it for a bit and actually discovered a small glitch/limitation: the throttle interval has to be smaller than the animation time. If it is not, the animation will outlast the throttle interval and trigger, in turn, the closing animation for the original scrolled element.
But this is web (impossible is nothing): if and when your animation has to be longer than the throttle interval, you will have to mark the initial element with a class that will exclude it from being animated. The class will be removed using a timeout on completion of animate, equal to the throttle interval:
$(document).ready(function() {
var scrolling;
$('.swipe_div').scroll(_.throttle(function() {
if (!scrolling) {
scrolling = true;
$(this).addClass('original');
$(this).siblings(".swipe_div:not(.original)").animate(
{scrollLeft:0},
250,
function(){
setTimeout(function() {
$('.swipe_div').removeClass('original')
}, 150)
}
);
} else {
scrolling = false;
}
}, 150, {leading:true,trailing:true}));
});