21706

Add a class to the image closest to the center of the viewport

Question:

On this page: [link-removed] I have a list of images and when you hover over each one it displays some info on the right, instead of triggering it on hover, how would i automatically trigger the image closest to the center of the screen so you can scroll down and the middle image will always the the selected image.

Thanks.

Answer1:

$(window).scroll(function(){ $($(".portfolio img").sort(function(a,b){ return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top)) })[0]).mouseover() })

man that took forever.... basically I'm sorting the returned node list based on the element's position relative to the current scroll position and then call mouseover on the top result.

and an alternative approach (different position that it highlights it)

$(window).scroll(function(){ $($(".portfolio img").sort(function(a,b){ return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()) / $(a).position().top)) - Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()) / $(b).position().top)) })[0]).mouseover() }) <h2>Explanation</h2>

Here's an explanation of the process of this function. In brief it determines which element is closest to the current scroll position by a sort. It divides the scroll position by the element's physical position, and if the scroll position is equal to the element position, the result (scroll position divided by element position) will be 1. if you subtract that from 1, the desired number will be 0 instead of one. All the other elements will be either greater than 0 or less than 0. If we then get the absolute value of this (make all the numbers positive), we will have a set of positive numbers with the closest one to 0 being the closest to the scroll position. (e.g. a set of -4, -2, 1, 5, 7 will become 4, 2, 1, 5, 7. This can then be sorted to 1, 2, 4, 5, 7. Thus -4 is closer to 0 than +5 and gets sorted higher). Then we just sort it and the one closest to 0 is the one we want.

thus we get this formula

|1 - (scrollX / elementX)|

then we sort it

Array.sort(function(a,b){return a - b}); // simple sort method

and we care only about the first element (one closest to 0), which is the first item in the sorted array as denoted by [0].

Lastly we call the mouseover event for that element.

<h2>Brief Explanation :P</h2>

Sorry for the overly complicated explanation. I guess if I could summarize it, I would say it takes the x value of the scroll position and divides it by the x values of the elements. a result of 1 would mean they are equal, so the one with a value closest to that is the one we want.

<h2>Meaning of the /2 and such</h2>

All we are doing here is setting an offset. if we leave it at the scroll position, it will be relative to the top of the screen, but we want it relative to the middle. Thus we calculate based on the window scrollX + 1/2 of the window height ($(window).scrollTop()+$(window).height()/2). Then we do the same for the element so that we do this relative to the middle of the element rather than the top of it (-$(a).height()/2). That part's all preference as to where it actually goes to the next element.

Sorry for the convoluted explanation... it is really hard to explain <a href="http://geekandpoke.typepad.com/.shared/image.html?/photos/uncategorized/2008/02/04/aop1b.jpg" rel="nofollow">even to myself</a>

Answer2:

Have you considered to use a carousel component?

Have a look at this <a href="http://www.professorcloud.com/mainsite/carousel.htm" rel="nofollow">http://www.professorcloud.com/mainsite/carousel.htm</a>

Recommend

  • VBA: Extract Top 'x' Entries from each category
  • SSRS 2008 - Sorting within a group
  • How to select table rows/complete table?
  • Wait for .each() .getJSON request to finish before executing a callback
  • Simple linked list-C
  • CakePHP ACL tutorial initDB function warnings
  • D3 get axis values on zoom event
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Caching attributes in superclass
  • Blackberry - Custom EditField Cursor
  • Use of this Javascript
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Is it possible to access block's scope in method?
  • C++ Partial template specialization - design simplification
  • Change multiple background-images with jQuery
  • Handling un-mapped Rest path
  • Algorithm for a smudge tool?
  • Body moving without any force applied? (Box2d)
  • Paperclip, set path outside of rails root folder
  • SignalR .NET Client Invoke throws an exception
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • script to move all files from one location to another location
  • How to show dropdown in excel using jrxml (jasper api)?
  • Weird JavaScript statement, what does it mean?
  • How to get next/previous record number?
  • PHP: When would you need the self:: keyword?
  • Python: how to group similar lists together in a list of lists?
  • Android Studio and gradle
  • WPF Applying a trigger on binding failure
  • Acquiring multiple attributes from .xml file in c#
  • Memory offsets in inline assembly
  • Android Google Maps API OnLocationChanged only called once
  • Django query for large number of relationships
  • reshape alternating columns in less time and using less memory
  • How can i traverse a binary tree from right to left in java?
  • How can I use threading to 'tick' a timer to be accessed by other threads?