Using jQuery UI's Droppable I have made a shelf type thing where the items contained on it can be moved. Here's the code: http://jsfiddle.net/JoeyMorani/7LWj4/
Is it possible to actually change the HTML of the shelf, so when the '.boxArt' divs are moved, they are also moved in the HTML. At the moment it seems to only change the position of the div and not actually move it.
I want to do this so I can detect where the divs are. (What their parent div is)
Thanks for the help! :)
I made some changes to the HTML and CSS from your demo but I have something working. The HTML is simpler and has not affected the result, although if you need the previous layout my answer might not be totally right for you.
The full code is duplicated below as well as in a jsFddle demo. The code actually becomes a lot simpler after detaching the .boxArt and moving it in the DOM, since the animation just needs to change the top and left back to 0. The only difficult part was calculating the correct position to set the .boxArt to before animating. This is due to the draggable being relatively positioned to the element it was dragged from. As soon as it is moved in the DOM, this position is now completely incorrect. So the code works out and sets the draggable relative position to the new parent first (after moving it in the DOM) and then animates back to top:0,left:0.
This is working for me in Chrome but I have not tested in any other browsers. console.log left in to show what's going on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.shelfRow {
width:1865px;
height:280px;
}
#shelves {
position:relative;
width:950px;
height:566px;
background:#CCC;
border:1px solid #333;
overflow-y:hidden;
overflow-x:auto;
}
.drop {
width:155px;
height:200px;
padding:2px;
margin-top:30px;
margin-left:25px;
float:left;
position:relative;
}
.dropHover {
padding:0px;
border:2px solid #0C5F8B;
-webkit-box-shadow: 0 0 3px 1px #0C5F8B;
box-shadow: 0 0 3px 1px #0C5F8B;
-moz-box-shadow: 0 0 20px #0C5F8B;
}
.boxArt {
width:155px;
height:200px;
-webkit-box-shadow: 0 0 8px 1px #1F1F1F;
box-shadow: 0 0 8px 1px #1F1F1F;
-moz-box-shadow: 0 0 20px #1F1F1F;
color:#000;
background:#FFF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));
$('.drop').droppable({
accept: function(el) {
return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
},
tolerance: 'intersect',
hoverClass: 'dropHover',
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
var originalOffset = ui.draggable.data('originalOffset');
console.log('originalOffset', originalOffset.top, originalOffset.left);
var boxArt = $(this).children('div');
var boxPosition = boxArt.position();
console.log('boxArt position', boxPosition.top, boxPosition.left);
var container = $(this);
var containerPosition = container.position();
console.log(container, containerPosition.top, containerPosition.left);
var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;
console.log('new offset', newTop, newLeft);
boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
}
});
$('.boxArt').draggable({
start: function(event, ui) {
$(this).data('originalOffset', ui.offset);
},
revert: 'invalid'
});
});
</script>
</head>
<body>
<div id="shelves">
<div class="shelfRow">
<div class="drop"></div>
<div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div id="drop15"></div>
</div>
<div class="shelfRow">
<div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</div>
</body>
</html>
Related
I have created a contenteditable div that has a sticky menu toolbar (sticks at top of browser if scrolling reaches top of page) and a content area with text and an image. Clicking the image brings up a pop-up toolbox to allow for image manipulation.
The pop-up toolbox is supposed to appear next to the cursor pointer, hower:
With the CSS sticky configuration it does NOT work - it is offset by over 100 pixels in both X and Y and gets more/less offset when at different page zoom factors.
When I remove the sticky configuration (position:sticky, top:0), it works and pops up right at the cursor pointer
Why does this happen? How can I keep the sticky menu toolbar and have it work as intended?
Code below:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
/* EDITOR */
.qr_editor {
max-width: 100%;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
z-index:10;
/*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
position: sticky;
top: 0;
}
</style>
<div id="position"></div>
<br>
<div class="container">
<div class="qr_editor">
<div class="toolbar sticky">
<div class="line">
<span class="box">
<span>Example Sticky Tool Bar Goes Here</span>
</span>
<div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
Sample Image Tools Popup Box
</div>
</div>
</div>
<div class="content-area">
<div contenteditable="true">
<div>Sample Text</div>
<img class="qr_editor_img" src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//to display coordinates
$( document ).on( "mousemove", function( event ) {
$( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
//pops up toolbar for image manipulation
var img_src = '';
$(document).on("click", "img", function(e) {
console.log(e.pageX);
console.log(e.pageY);
//position the popup toolbar where the mouse click is
e.preventDefault();
$('#popup_toolbar').css( 'position', 'absolute' );
$('#popup_toolbar').css( 'top', e.pageY );
$('#popup_toolbar').css( 'left', e.pageX );
$('#popup_toolbar').show();
});
});
</script>
</body>
try this:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
/* EDITOR */
.qr_editor {
max-width: 100%;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
margin: 2rem;
}
/* TOOLBAR */
.qr_editor .toolbar {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
background-color: white;
z-index:10;
/*when this sticky part is removed, the pop-up toolbar pops up in the right place*/
position: sticky;
top: 0;
}
#popup_toolbar {
position: fixed;
}
</style>
<div id="position"></div>
<br>
<div class="container">
<div class="qr_editor">
<div class="toolbar sticky">
<div class="line">
<span class="box">
<span>Example Sticky Tool Bar Goes Here</span>
</span>
<div class="box" id="popup_toolbar" style="display:none;background-color:white;border:solid black;">
Sample Image Tools Popup Box
</div>
</div>
</div>
<div class="content-area">
<div contenteditable="true">
<div>Sample Text</div>
<img class="qr_editor_img" src="http://www.google.com.br/images/srpr/logo3w.png" style="width:100%;cursor:pointer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//to display coordinates
$( document ).on( "mousemove", function( event ) {
$( "#position" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
//pops up toolbar for image manipulation
var img_src = '';
$(document).on("click", "img", function(e) {
console.log(e.pageX);
console.log(e.pageY);
//position the popup toolbar where the mouse click is
e.preventDefault();
$('#popup_toolbar').css( 'top', e.pageY );
$('#popup_toolbar').css( 'left', e.pageX );
$('#popup_toolbar').show();
});
});
</script>
</body>
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I developed a HTML5 drag and drop based on tutorial from html5rocks
It work ok on desktops browsers, but does not work on touch devices (I am testing on iPad).
Someone know how can I handle the drag events on touch devices?
Some HTML5 native events work in WebKit eg touchstart, touchmove, touchend, touchcancel but not all of them.
Generally, drag/drop and touch do not really play nicely together.
Better to look at the various touch frameworks and use the built-in gestures.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/OEBPS" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
<head>
<title>Demo 2: Drag and drop</title>
<meta charset="utf-8"/>
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}
#capitals{
width:200px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#countries{
width:300px;
float:right;
margin: 4px 61px 3px -8px;
height:400px;
}
#labels{
width: 120px;
float:right;
margin: -403px 116px 3px -8px;
height:400px;
/*border: 1px solid red;*/
}
.dragableBox,.dragableBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dragableBox,.labelBoxRight{
width:80px;
height: 10px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
div.dragableBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#D3D3D3;
border: 1px dashed;
}
div.labelBoxRight{
height: 31px;
width:110px;
/*float:left;*/
margin-right:5px;
padding:5px;
background-color:#E2EBED;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="capitals">
<div id="dropContent">
<div class="dragableBox" id="box1">Br<sup>+</sup></div>
<div class="dragableBox" id="box2">Br<sup>−</sup></div>
<div class="dragableBox" id="box3">CN<sup>−</sup></div>
<div class="dragableBox" id="box4">NO<sub>2</sub><sup>+</sup></div>
<div class="dragableBox" id="box5">NO<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box6">NH<sub>2</sub><sup>−</sup></div>
<div class="dragableBox" id="box7">RC=C<sup>−</sup></div>
<div class="dragableBox" id="box8">MeCO<sup>+</sup></div>
</div>
</div>
<div id="countries">
<div id="box106" class="dragableBoxRight"></div>
<div id="box107" class="dragableBoxRight"></div>
<div id="box101" class="dragableBoxRight"></div>
<div id="box104" class="dragableBoxRight"></div>
<div id="box105" class="dragableBoxRight"></div>
<div id="box102" class="dragableBoxRight"></div>
<div id="box103" class="dragableBoxRight"></div>
<div id="box108" class="dragableBoxRight"></div>
</div>
<div id="labels">
<div id="boxl106" class="labelBoxRight">nucleophiles</div>
<div id="boxl107" class="labelBoxRight">Electrophiles</div>
<div id="boxl101" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">Electrophiles</div>
<div id="boxl105" class="labelBoxRight">nucleophiles</div>
<div id="boxl102" class="labelBoxRight">Electrophiles</div>
<div id="boxl103" class="labelBoxRight">nucleophiles</div>
<div id="boxl104" class="labelBoxRight">nucleophiles</div>
</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>
<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<!-- <link href="css/jquery-ui.css" rel="stylesheet"
type="text/css" />-->
<script type="text/javascript">
<![CDATA[
// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('div'); // Number of subdivs
if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='capitals'){
// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
targetObj = targetObj.getElementsByTagName('div')[0];
}
targetObj.appendChild(sourceObj); // Append
}
function r1()
{
}
var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object
// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true);
// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init(); // Initizlizing drag and drop object
]]>
</script>
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!
I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...
The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.
The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.
I wanted to combine these two but it's not really straight forward for me :/
It would be nice if someone could point me how to do this. Thanks
Best regards,
Billy Beach
Dear lalibi,
Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:
<head>
<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script>
<style type="text/css">
<!--
div {
border: 1px solid black;
height: 50px;
}
div.current {
background-color: orange;
}
-->
</style>
<script type="text/javascript">
var current
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>
EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.
This seems to work fine: http://jsfiddle.net/9Amdx/1707/
var current;
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});