JavaScript
Jump to navigation
Jump to search
Basics
Drupal
DOM
- Gecko DOM Reference - MDN
- document
- window
- window.setTimeout - executes a code snippet or a function after specified delay.
jQuery
News
Plugins
- http://archive.plugins.jquery.com/ - new one is being rebuilt
Easing
Scroll to anchor
$('body').plusAnchor({
easing: 'swing',
// The easing method, defaults are 'swing' and 'linear'.
// Anything else requires the easing.js plugin
speed: 1000
// The amount of time, in milisecons, it takes to complete a transition
});
$("#someDiv").slideto({
highlight_color: 'blue',
highlight_duration: 'slow',
slide_duration: 500
});
- http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery [2]
- https://github.com/litera/jquery-scrollintoview
$("some_selector").scrollintoview({
duration: 2500,
direction: "vertical",
complete: function() {
// highlight the element so user's focus gets where it needs to be
}
});
$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });
$('a').smoothScroll();
$('#container a').smoothScroll();
$('#container a').smoothScroll({excludeWithin: ['.container2']});
exclude links if they are within a containing element:
$('a').smoothScroll({exclude: ['.rough','#chunky']});
exclude links if they match certain conditions
$('.backtotop').smoothScroll({offset: -100});
adjust where the scrolling stops
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});
add a callback function that is triggered after the scroll is complete
{
offset: 0,
direction: 'top', // one of 'top' or 'left'
scrollTarget: null, // only use if you want to override default behavior
afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element
easing: 'swing',
speed: 400
}
Roundabout
Slick carousel.
$("ul#roundabout").roundabout({
autoplay: true,
autoplayInitialDelay: 2000
});
The above works only for the first instance. Use window.setTimeout to alter further IDs. [4]