Tutorial Select Element Only if Children are Not Animated

by in , 0 

var myChildrenBehave =  $(".element").filter(function() {
  var filtered = $(this).children().not(":animated");
  return filtered;
 });

This selects the element only if its children behave (not being animated). Very helpful on a drop down menu (on hover or click)

Tutorial Search/Replace

by in , 0 

jQuery(function () { 
    jQuery(":contains(FIND)").not(":has(:contains(FIND))").each(function () { 
        var that = $(this), 
            html = that.html(); 
         
        html = html.replace(/(\(FIND:.*?\))/g, "REPLACE-WITH"); 
        that.html(html); 
    }); 
});

Reference URL

Tutorial Scroll Page Horizontally With Mouse Wheel

by in , 0

1) Load jQuery and the Mouse Wheel plugin

Mouse Wheel plugin is here.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

2) Attach mousewheel event to body

The "30" represents speed. preventDefault ensures the page won't scroll down.

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

View Demo

Tutorial Run JavaScript Only After Entire Page Has Loaded

by in , 0 

$(window).bind("load", function() {
   // code here
});

Tutorial Resize iFrame to Fit Content (Same Domain Only)

by in , 0

Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads. 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
    
    $(function(){
    
        var iFrames = $('iframe');
      
    	function iResize() {
    	
    		for (var i = 0, j = iFrames.length; i < j; i++) {
    		  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
    	    }
    	    
        	if ($.browser.safari || $.browser.opera) { 
        	
        	   iFrames.load(function(){
        	       setTimeout(iResize, 0);
               });
            
        	   for (var i = 0, j = iFrames.length; i < j; i++) {
        			var iSource = iFrames[i].src;
        			iFrames[i].src = '';
        			iFrames[i].src = iSource;
               }
               
        	} else {
        	   iFrames.load(function() { 
        	       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
        	   });
        	}
        
        });

</script>

Will resize an iframe like this:

<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>

 

View Demo

Still problematic...

The source of the iframe content must reside on the same domain if the content inside the iframe changes height, this won't adapt I left Google Analytics code off the demo above, as when I added it in it seems to interfere and not resize the iframe, despite seemingly generating no errors.

Tutorial Remove Specific Value from Array

by in , 0 

var arr = [1, 2, 3, 4, 5];
var removeItem = 2;   
 
arr = $.grep(arr, function(value) {
  return value != removeItem;
});

Tutorial Persistant Headers on Tables

by in , 0

When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you have scrolled beyond it, and disappears when you have scrolled past the table.

View Demo

function UpdateTableHeaders() {
   $("div.divTableWithFloatingHeader").each(function() {
       offset = $(this).offset();
       scrollTop = $(window).scrollTop();
       if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
           $(".tableFloatingHeader", this).css("visibility", "visible");
           $(".tableFloatingHeader", this).css("top", Math.min(scrollTop - offset.top, $(this).height() - $(".tableFloatingHeader", this).height()) + "px");
       }
       else {
           $(".tableFloatingHeader", this).css("visibility", "hidden");
           $(".tableFloatingHeader", this).css("top", "0px");
       }
   })
}

$(document).ready(function() {
   $("table.tableWithFloatingHeader").each(function() {
       $(this).wrap("<div class="divTableWithFloatingHeader" style="position:relative"></div>");
       $("tr:first", this).before($("tr:first", this).clone());
       clonedHeaderRow = $("tr:first", this)
       clonedHeaderRow.addClass("tableFloatingHeader");
       clonedHeaderRow.css("position", "absolute");
       clonedHeaderRow.css("top", "0px");
       clonedHeaderRow.css("left", "0px");
       clonedHeaderRow.css("visibility", "hidden");
   });
   UpdateTableHeaders();
   $(window).scroll(UpdateTableHeaders);
});

Reference URL