Tagged: Development

Sometimes, within a website, you see variables that are passed through the URL. The variable part of the URL usually looks something like this:
“?tab=mo&authuser=0”

In the above example, ‘tab’ is equal to ‘mo’ and ‘authuser’ is equal to ‘0’.

This snippet below with let you extract the values of variables by parsing the URL. It specifically looks for the & and = symbols so you’ll need to make some changes to the regex part (/[?&]+([^=&]+)=([^&]*)/gi) if you’re using symbols other than that.

function getUrlVar() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars; 
}
var tab = getUrlVar()["tab"];
var user = getUrlVar()["authuser"];

We’ve probably all seen the little “back to top” buttons that appear on sites once you scroll past the menu or if you at the bottom of a page. This snippet will show you how to slide that out from the right after scrolling down the page.

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('.totop').stop().animate({ right: '0px' });
    } else {
        $('.totop').stop().animate({ right: '-300px' });
    }
});
[/cc]

Obviously, you'll need to tell the browser window to "listen" for scrolling.
[cc lang="javascript"]
$(window).scroll(function() {});
[/cc]

Then you'll tell the browser windows, after you scroll 100 pixels down the page, you want to do something.
[cc lang="javascript"]
if ($(this).scrollTop() > 100) {}
[/cc]

The actual animation is next. We're just going to slide this out from the right, but really you could fade it in and out, or side it from the bottom. Any kind of animation would work.
[cc lang="javascript"]
$('.totop').stop().animate({ right: '0px' });

Over the past year I’ve recieved a lot of emails thanking me for going through the steps of adding a fixed header region to a drupal website. The post seems fairly popular as well. So now, I’ll introduce another way to create a fixed header using strictly jQuery.  This is also called a “sticky header”, but I prefer to call it fixed since the positioning is changed to “fixed”.

There may be lots of other ways to do this, however, this one is the simplest I’ve found so far.

The previous post about fixed header regions really only applied to Drupal 7. With these instructions, you’ll be able to create a fixed header in any CMS as well as flat HTML sites.

First Things First

Before you do anything else, add the Jquery plugin to your website if you don’t have it already. I let Google host my jQuery plugins because they do a very good job of maintaining it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Next you’re gonna want to create a new javascript file with the jquery inside that will power the fixed header.

Jquery Fixed Header

Doesn’t matter if you want the navigation or something else to stick to the top, it will all work the same way. Here’s the code.

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}
jQuery(window).scroll(fixDiv);
fixDiv();

Let’s break it down…

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)

This part of the code is running a function called fixDiv, but this could be named anything really. Now, the next line is important. The various sites that I’ve used this on I’m usually using the header div or the navigation div. Either way, you’ll use the div you want to make fixed to the top of the browser here where ‘#header’ is. The next line is where the magic takes place. This is “listening” for scrolling action. Right now this is set to zero. That means that immediately when you scroll down, the header div is fixed. You can change this zero to 100, or 120, or anything really. If you change it to 100, that will tell the function not to make the header fixed until you scroll down the page 100 pixels. Now for the next part of the code….

     
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}

This is the really cool part. At least it is to me. The first line here says “ok browser, when you fix the header, I want all of these stylings to be given to it.” Notice the “position: fixed, top: 0px” part. That is really what you need to make this work. The rest is additional styling I’ve used to make the header look better. The position needs to be fixed, and top needs to be set to zero. Next I’ve given it a display of ‘block’, a z-index of 2 (so that it will go over all elements as you scroll down), and I’ve added a box shadow so that it looks more apparent that the div is fixed and everything is going under it. Lastly…

jQuery(window).scroll(fixDiv);
fixDiv();

This last section just tells the window to execute the script on scrolling. That’s it. Email me if you have questions at all!