Horizontally scroll page with mouse move -


i have simple list of images here floated horizontally off right of page.

http://www.ttmt.org.uk/forum/gallery/

i can view image mouse scrolling left , right.

how can scroll page moving mouse left , right without scrolling.

so gallery position determined position of mouse on page.

 <!doctype html> <html> <head> <title>title of document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> <style type="text/css"> ul#gallery { margin:100px 0 0 0; float:left; height:500px; margin-right:-20000px; } ul#gallery li{ display:inline; } ul#gallery li img{ float:left; height:100%; } #header{ position:fixed; margin:20px 0 0 20px; } #header img, #header ul#info{ float:left; } #header ul#info{ margin:5px 0 0 50px; } #header ul#info li{ color:#aaa; font:.95em/1.5em helvetica, sans-serif; } #header ul#info li a{ color:#aaa; text-decoration:none; } #header ul#info li a:hover{ color:#333; } #header select{ margin:20px 0 0 50px; } #lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:url(overlay.png) repeat; text-align:center; } #lightbox p { text-align:right; color:#fff; margin-right:20px; font-size:12px; } #lightbox img { box-shadow:0 0 15px #111; -webkit-box-shadow:0 0 15px #111; -moz-box-shadow:0 0 15px #111; max-width:940px; } #content img{ height:90%; max-width:100%; } </style> </head> <body> <ul id="gallery"> <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li> <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li> <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li> <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li> <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li> <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li> <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li> <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li> <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li> <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li> <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li> <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li> <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li> <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li> <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li> </ul> <script> jquery(document).ready(function($) { $('.lightbox_trigger').click(function(e) { e.preventdefault(); var image_href = $(this).attr("href"); if ($('#lightbox').length > 0) { // #lightbox exists $('#content').html('<img src="' + image_href + '" />'); //$('#lightbox').show(); $('#lightbox').fadein('2000'); } else { var lightbox = '<div id="lightbox">' + '<p>click close</p>' + '<div id="content">' + '<img src="' + image_href +'" />' + '</div>' + '</div>'; $('body').append(lightbox); } }); $('#lightbox').live('click', function() { $('#lightbox').hide(); }); }); </script> </body> </html>

a simple pure javascript dom manipulation solution here : http://jsfiddle.net/ztgs9/4/

 var _lis = document.getelementsbytagname('li'); (var = 0; < _lis.length; ++i) { _lis[i].addeventlistener('mousedown', function(e) { if (e.clientx < (this.offsetwidth >> 1)) { this.appendchild(this.removechild(this.firstelementchild)); } else { this.insertbefore(this.lastelementchild, this.firstelementchild); } }); }

Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

c++ - Accessing inactive union member and undefined behavior? -

i under impression accessing union member other last 1 set ub, can't seem find solid reference (other answers claiming it's ub without support standard). so, undefined behavior? the confusion c explicitly permits type-punning through union, whereas c++ ( c++11 ) has no such permission. c11 6.5.2.3 structure , union members 95) if member used read contents of union object not same member last used store value in object, appropriate part of object representation of value reinterpreted object representation in new type described in 6.2.6 (a process called ‘‘type punning’’). might trap representation. the situation c++: c++11 9.5 unions [class.union] in union, @ 1 of non-static data members can active @ time, is, value of @ 1 of non-static data members can stored in union @ time. c++ later has language permitting use of unions containing struct s common initial sequences; doesn't permit type-punning. to determine whether union type-punning is allowe...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more