Question

I’m working on project where I want to modified #screen width to closest width of other (div.snapcord)

My DOM is something like this…

HTML :

<div id="iphone3" class="snapcord"></div>
<div id="iphone4" class="snapcord"></div>
<div id="ipad" class="snapcord"></div>

<div id="screen"></div>

CSS

#iphone3 { width: 320px }
#iphone4 { width: 480px }
#ipad { width: 768px }

#screen has dynamic width anything between 300px to 780px. I want #screen width snapTo closest width of other (div.snapcord) with snapTolerance of 5px;

Say,

#screen width is 315px OR 325px then I want to modify it to 320px

#screen width is 475px OR 485px then I want to modify it to 480px

#screen width is 763px OR 773px then I want to modify it to 768px (snapTolerance of 5px only )

Else, leave #screen width to its original value.

I’m learning jQuery & have managed to get width of each div.snapcord using following snippet.

$('.snapcord').each(function() {
   var getWidth = $(this).width();
   alert(getWidth);
});

But I’m not clear about how to move further..

Here is Fiddle

Any help would be highly appreciated.

Answer 1

Something like this:

var sW = $('#screen').width();
    sW = sW>=315 && sW<=325 ? 320 : sW;
    sW = sW>=375 && sW<=385 ? 480 : sW;
    sW = sW>=763 && sW<=773 ? 768 : sW;

FIDDLE

EDIT:
something like this would be more dynamic

var sW = $("#screen").width(),

$('.snapcord').each(function() {
 var W = $(this).width();
    sW = sW>=W-5 && sW<=W+5 ? W : sW;
});