search

CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

Link to specific panel #5

Closed dlopez2000 closed 14 years ago

dlopez2000 commented 14 years ago

You're going to like this one. It's important for sliders to allow users to link to a specific panel. Here's some not-fully-tested code for doing this with Moving Boxes:

function updateHash(a,n){ var s = a + "=" + n; var href = window.location.href; var url = href.substr(0,href.indexOf("#")); var h = window.location.hash.substr(1); var re = new RegExp(a+"=\d+"); if(h.match(re)!=null){ var n = h.replace(re, s); window.location.replace(url+"#"+n); } else{ n = window.location.replace(url + "#" + h + "&" + s); } } function getPanelNumFromHash(a){ var h = window.location.hash.substr(1); var re = new RegExp(a+"=(\d+)"); var m = h.match(re);
if(m) return m[1]; else return null; }

You might want to integrate these functions into MovingBoxes directly.

then add this to the top of base.growBigger function: updateHash(base.el.id, num);

and then where you initialize the slider, do something like this:

$(function(){ myStartPanel = getPanelNumFromHash("featuresCore") || 2; $('#slider1').movingBoxes({ startPanel : myStartPanel, // start with this panel ...

If you integrate the hash functions into movingboxes, you might simply want to make it so that any hash set will override the default value provided in the init.

This approach maintains the state of multiple movingboxes within the url hash (ie- you can have more than one slider on a page and it will track for all of them). The hash will look something like mypage.php#&slider1=3&slider2=5

Also, I used location.replace so that the browser history doesn't have entries for every change of the slider--just the most recent one... otherwise the user might have to click the back button an annoying number of times to get to whatever the previous page was. This way, too, I didn't have to write anything that monitors the hash for changes--it just checks the hash upon init.

Mottie commented 14 years ago

Very nice! Have you thought about forking the plugin here on github? I'll look into these enhancements when I get some time in the next few days.

dlopez2000 commented 14 years ago

I've never used github before--though I'd like to learn soon, I'm in the middle of a project, so don't think I can take the time right now. But I wanted to give back with the new code I wrote, so I hope you and others can use it.

Mottie commented 14 years ago

I just pushed v1.5 with these enhancements! I appreciate the code! :)

drawsprocket commented 13 years ago

I am having difficulties getting this feature to work. I am having the same problem as this person: http://css-tricks.com/forums/discussion/10593/moving-boxes-startpanel-options/p1

Mottie commented 13 years ago

@drawsprocket! Ooops! I guess I broke it in the last version... it's fixed now in version 2.0.4