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

Custom Hashtag #78

Closed Alfazo closed 12 years ago

Alfazo commented 12 years ago

Hi,

I'm looking for a way to build a custom hash for the URL, like in anythingSlider (https://github.com/ProLoser/AnythingSlider/wiki/Navigation-options#wiki-hashtags).

What I'd like to do, is set each Hash to a dynamically generated H6 tag — or alternatively, the li/div panel name.

Mottie commented 12 years ago

This is already part of MovingBoxes... I don't have a demo, but if say I add an ID to the h2 tag:

<li>
    <img src="demo/3.jpg" alt="picture">
    <h2 id="news-3">News Heading</h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</li>

Then added a #news-3 hash to the URL, it will make that panel visible on page initialization.

Alfazo commented 12 years ago

Thanks for the reply!

I understand how that works (similar to the #astronaut demo), but I need to get the hash working so that it updates the URL to the new hash when using navigation arrows. Also, using this method, the browser automatically scrolls to the top of the slideshow, which is a problem as I'm using ScrollTop to set the page to a specific place on load/refresh/next/previous arrow.

Mottie commented 12 years ago

When you set the hash the browsers automatically changes the scrollTop, so I'm not sure what you are trying to do. But, I did make a demo for AnythingSlider for this StackOverflow question which adds a prefix to the hash tag name so the browser won't scroll... it should be relatively easy to modify it to work with MovingBoxes by just changing the callback function names.

If the above doesn't work, could you please share a demo... it would make it easier for me to modify it than to start from scratch.

Alfazo commented 12 years ago

Thanks, I've tried implementing that code into movingBoxes before, and again just now, but couldn't get it to work… I'm still getting the default hashtags. What You have posted is exactly what I need to achieve, I just can't work out how to do it.

(as a side note, I have got that above demo working in anythingSlider before, but unfortunately I can't use it for this project).

Mottie commented 12 years ago

Ok, I've made a MovingBoxes demo for you that renames the id's so the page won't jump. Try the link below to see it jump to Yin's panel

http://jsfiddle.net/Mottie/jMXx3/1401/show/#yin .

Alfazo commented 12 years ago

Perfect! Thanks Mottie, you absolute legend.