On a site I’m currently building I need to do some JavaScript scrolling on every page load, except for the first on (to scroll beyond a huge image slider that I don’t want to be in the way on succeeding page loads.

Note: this example makes use of jquery.cookie Plugin by Klaus Hartl, so make sure you include it, too.

(function ($) {
  $( document ).ready(function() {
    var cookieName = 'firstPageLoad';
    var cookieValue = 1;
    // if the cookie doesn't exist we're on the first page load...
    if (!$.cookie(cookieName)) {
      // and set a cookie that is valid for the entire domain
      $.cookie(cookieName, cookieValue, { path: '/'});      
    } 
    // if the cookie does exist, its (most probably) a succeeding page load...
    else {
      // ... so we want to scroll to the navigation
      $('html, body').animate({
          scrollTop: $("#navigation").offset().top
      }, 1000);    
    }
  }); // document ready
})(jQuery);

I was a bit confused when first using Superslides to find out it doesn’t come with touch support out of the box. Here’s what I did to enable it, maybe it of use for somebody who’s wondering, too.

Continue reading →

jQuery-One-Page-Nav is a nice script that enables you to scroll smoothly to anchors anywhere on a page while and while it does so it sets a current class for your currently active navigation item.

As this is often combined with a fixed or sticky navigation design there’s an option to set an offset to define how far scrolling takes you. With Responsive Webdesign your sticky element (header in my example) might have a different height depending on the viewport the page is being displayed on.

So I thought it’s a good idea to set this offset dynamically so I scrolling never takes me accidentally under my fixed header:

var top_offset = $('header').height() - 1;

$('.active-parent .dropdown ul').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollOffset: top_offset,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
}); 

Say you want to tack younav bar fixed at the top of the browser’s viewport after a user has scrolled to a certain element in the DOM. In my example this is the menu itself. This snippet checks the vertical position of my main menu and adds a class to it after a visitor has been scrolling that far that it reached the top of the page.

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  console.log(navpos.top);
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
        $('#mainnav').addClass('fixed');
       }
       else {
         $('#mainnav').removeClass('fixed');
       }
    });
});

Source

Today, when I quickly needed a solution to smoothly scroll to another position on the same page I was hesitant to just throw another jQuery plugin into my site so I started looking for a more lightweight solution. Here’s what I found:

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

It can just be put inside any callback function, e.g. click(). The following example will scroll to an ID called page-title upon clicking a link with the class scroll-to-title (in 500 ms):

$("a.scroll-to-title").click(function() {
  $('html, body').animate({
    scrollTop: $("#page-title").offset().top
  }, 500);
});

Thanks to A Beautiful Site for sharing!

Using jQuery to determine if there’s any element with a certain class on the current page:

    // check if an element with class 'footable' exists, then call footable() on it
    if($('.footable')[0]) {
      $('.footable').footable();
    }

Source: http://stackoverflow.com/a/5783355/93261

jQuerymobile ist toll, aber die Ajaxifizierung von Links nervt mich gelegentlich. Mit folgender Anweisung kann man dieses Verhalten global ausschalten und bekommt klassische http-Links!

// disable jquerymobile ajax 
jQuery.mobile.ajaxEnabled=false