WebBugs: jQuery

Have a lot of internal links on the page? Annoyed of jumping to position by using a and # ?

How about adding a small jQuery code to have a smooth scrolling and create a better effect on the visitors web experience.

jQuery has an animate function that can animate various elements including the scroll.

We can use internal links to jump to various positions on the web page using the below code

    
<a href="#myid">Go to My Div<a/>
<div id="myid">My Div<div/>

The problem with the above stated code is, this will jump to a postion, which does not create a good web experience and the visitor may lose track of the position on the page.

Below is a small jQuery code that will fetch all the anchors [a tag] of the page and add a smooth scroll effect when the user clicks on the anchor and scroll to the different position on the web page and visiton can also keep track on where on page is it positioned

    
$(function(){
 /* Fetch all the anchors having internal links */
 /* bing a click event */
 $("a[href^='#']").click(function(e){
  /* Stop the default action of the link */
  e.preventDefault();
  
  /* Get the target from the link */
  var target = this.hash;
  
  $target = $(target);
  
  $("html, body").animate({ scrollTop: $target.offset().top }, 700,function(){
   window.location.hash = target;
  });
 });
});

Demo

Home | About Us | Contact Us

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor augue, suscipit nec egestas non, consectetur sit amet velit. Morbi adipiscing dolor id ante interdum tristique. Praesent volutpat risus sem, at lobortis massa consequat ut. Cras leo diam, blandit non tellus id, porttitor lacinia metus. In semper suscipit nisl, quis tempus est auctor sed. Sed a convallis felis, laoreet feugiat elit. Pellentesque faucibus ipsum vel erat aliquam laoreet. Quisque fringilla gravida orci. Etiam sodales dolor at molestie dignissim. Donec laoreet vestibulum est non ultrices.

Aenean interdum egestas erat ac hendrerit. Vivamus at vestibulum neque, nec ullamcorper mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae bibendum nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris molestie mattis nulla, eu pharetra nulla mollis posuere. Quisque vestibulum leo eget consequat sagittis. Donec vestibulum imperdiet nisi nec imperdiet. Integer cursus justo nec elementum malesuada. Aliquam tellus odio, faucibus nec tristique nec, mattis eu lorem. Mauris hendrerit pharetra massa eu elementum. In mattis volutpat pulvinar. Duis diam nisl, tincidunt non diam in, vehicula adipiscing massa.

Integer scelerisque nibh ut magna iaculis, sit amet ultrices risus varius. Sed ac congue nisl. Aliquam erat volutpat. Morbi eget cursus erat. Duis volutpat dolor malesuada dignissim congue. Proin dictum quam volutpat iaculis elementum. Aenean sapien magna, rutrum id imperdiet vitae, mattis at quam. In vitae convallis arcu, sed tristique mi. Duis quis ultricies augue. Cras massa erat, iaculis nec sollicitudin vitae, tempus sed metus. Phasellus auctor, lacus in facilisis congue, dui neque bibendum diam, quis pulvinar lorem velit vel odio.

Top

About Us

Top

Contact Us

Top

You can download the demo here.

Jquery Custom Selector

jQuery supports a wide range of selectors out of which :contains() is a selector that returns the containers / elements that contains the given content.

This can be used to search / filter the content using jQuery.

But the :contains() selector is a case sensitive.

Let me demonstrate you the working of the :contains() selector

Case sensitive search using contains :

Apple

Mango

Banana

Grapes

Watermelon

Code used in the demo

     
$("#txtsearch").keyup(function(){
 if($.trim($(this).val()) != "")
 {
  $("div.legends").removeClass("tempselector");
  
  $("div.legends").parent().children(":contains('"+$.trim($(this).val())+"')").each(function(){
   $(this).addClass("tempselector");
  });
  
  $("div.legends.tempselector").show();
  $("div.legends:not('.tempselector')").hide();
  
  $("div.legends").removeClass("tempselector");
 }
 else
 {
  $("div.legends").show();
 }
});

Now if we want a selector which filters the contents but is case insensitive we will need a custom selector say :icontains() that searches the contents of the containter / element but the search is case insensitive.

To create the selector, I am demonstrating two options


$.extend($.expr[":"],{
 icontains: function(obj, index, meta, stack){
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
 }
});


$.expr[':'].icontains = function(obj, index, meta, stack){
 return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

Either of them will do the same work, the first one is created using $.extend and the other is a simple way to create a selector

Below stated is the demo for case insensitive searching

Case sensitive search using custom selector icontains:

Apple

Mango

Banana

Grapes

Watermelon

Code used in the demo

     
$.expr[':'].icontains = function(obj, index, meta, stack){
 return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

$("#itxtsearch").keyup(function(){
 if($.trim($(this).val()) != "")
 {
  $("div.ilegends").removeClass("itempselector");
  
  $("div.ilegends").parent().children(":icontains('"+$.trim($(this).val())+"')").each(function(){
   $(this).addClass("itempselector");
  });
  
  $("div.ilegends.itempselector").show();
  $("div.ilegends:not('.itempselector')").hide();
  
  $("div.ilegends").removeClass("itempselector");
 }
 else
 {
  $("div.ilegends").show();
 }
});

You can download the demo file here

Friday, 17 January 2014

Smooth animated scroll for internal links using jQuery

Home

About Us

Contact Us

Wednesday, 18 September 2013

Creating a custom selector in jQuery for case insensitive search