PDA

View Full Version : Slick Custom Scrollbar | How to jump automatically to defined paragraph?



lucioperca
07-01-2012, 09:03 AM
Slick Custom Scrollbar script v1.1
http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

Thanks for this wonderful script.

But I have Question: How is it possible to jump onload (instead of clicking a link) to a paragraph?

Thanks a lot for massive Feedback.

lucioperca

jscheuer1
07-01-2012, 09:36 AM
You can do it in the normal manner by making a link - say:


<a href="#" rel="paragraph-B" parent="scrollcontent1" onClick="return false">Go to Paragraph B within Demo #1</a>

If you like you can hide it:


<a style="display: none;" href="#" rel="paragraph-B" parent="scrollcontent1" onClick="return false">Go to Paragraph B within Demo #1</a>

Then here in the head of the page, in the init, add the highlighted:


$( document ).ready( function() {
$( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
$( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce:0 } );
$('[rel=paragraph-B]').trigger('click');
});

Or if you want to activate a given paragraph via a link from another page. Say the page with scroller on it is scroller.htm - then keep the on page link, hidden or shown, use this as the init:


$( document ).ready( function() {
$( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
$( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce:0 } );
var m = /[?&;]rel=([^&;#]*)/.exec(location.search);
m? $('[rel=' + unescape(m[1]) + ']').trigger('click') : null;
});

And the link on the other page would be:


<a href="scroller.htm?rel=paragraph-B">Go to B on the Scroller Page</a>

lucioperca
07-01-2012, 09:52 AM
That works fantastic!

Thanks a lot for this really fast solution!

lucioperca