Tag Archives: javascript

Homepage Featured Events Display Using DOM

The featured events on the Mason Law homepage is pulled from the master calendar’s RSS. To get the dates and times separated from the titles, accessing the DOM is needed. The following codes, which requires jQuery, make the magic happened:

$('.rssItemLink').each(
function(){
$this = $(this);
$this.
html('<em>' +
$this.
html().
replace(/((\d{1,2}\/){2}\d{2,4}\s*[0-9]{1,2}:[0-9]{1,2}\s*[apAP][mM]\s*to\s*[0-9]{1,2}:[0-9]{1,2}\s*[apAP][mM])/,
'</em><b>$1</b>'
)
);
}
);

Sticky Nav on Scroll

Here’s a little JavaScript function to make your site’s header or navigation stick to the top of the window when users scroll the page:

HTML:

<div id="navigation">
  <!-- your navigation code -->
</div>

CSS:

#navigation{
  position:absolute;
  top:120px;
  left:0;
}
#navigation.fixed{
  position:fixed;
  top:16px;
}

JavaScript:

// Handles the page being scrolled by ensuring the navigation is always in view.
function handleScroll(){
  // check that this is a relatively modern browser
  if (window.XMLHttpRequest){
    // determine the distance scrolled down the page
    var offset = window.pageYOffset
               ? window.pageYOffset
               : document.documentElement.scrollTop;
    // set the appropriate class on the navigation
    document.getElementById('navigation').className =
        (offset > 104 ? 'fixed' : '');
  }
}
// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

Source: “Detachable navigation using JavaScript