jquery - Making vertical list scroll on mouse over -


i have vertical list in navigation longer screens height. when start hover on list list start in move when mouse around half way down list.

any advice on appreciated.

thank in advance.

one approach, below:

var ul = $('ul:first'), ulheight = ul.outerheight(); ul.on('mousemove', function(e){ var win = $(window), cst = win.scrolltop(); if (e.pagey>=(ulheight/2)){ win.scrolltop(cst + 20); } else { win.scrolltop(cst - 20); } });​

js fiddle demo.

this based upon halfway point of list itself, , therefore relies on halfway point being visible on page itself.

to make more functional, ul within containing element, , scrolling based upon being past halfway point of containing element:

var div = $('#wrap'), wrapheight = div.height(), listheight = div.find('ul').outerheight(); div.on('mousemove', function(e){ var cpointy = e.pagey, cst = div.scrolltop(); if (cpointy >= (wrapheight/2)) { div.scrolltop(cst + 15); } else { div.scrolltop(cst - 15); } });​

js fiddle demo.

edited add further option scrolls list element or down depending on position of cursor within containing element:

var div = $('#wrap'), wrapscreenheight = div.height(), wrapheight = div.outerheight(), listheight = div.find('ul').outerheight(); div.on('mousemove', function(e) { var cpointy = e.pagey, dp = ((cpointy / wrapheight)); div.scrolltop((listheight * dp) - wrapscreenheight); });

js fiddle demo. ​ references:


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

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

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more