Tutorial Fix Select Dropdown Cutoff in IE 7

by in , 0

Run (at least the "Usage" part below) after you've loaded jQuery and either at the end of the page or in a DOM ready statement. Note that this fix does create a clone of the select, which will submit itself with the form data, but the name value has been changed to include "-clone" at the end of it, so just be aware of that especially if you are serializing all inputs.

Thanks to Craig Hoover.

// Safely use $
(function($) {

	$.fn._ie_select=function() { 
	
		return $(this).each(function() { 
		
			var a = $(this),
			    p = a.parent();
		
			p.css('position','relative');
		
			var o = a.position(),
			    h = a.outerHeight(),
			    l = o.left,
			    t = o.top;
		
			var c = a.clone(true);
		
			$.data(c,'element',a);
		
			c.css({
				zIndex   : 100,
				height   : h,
				top      : t,
				left     : l,
				position : 'absolute',
				width    : 'auto',
				opacity  : 0
			}).attr({
				id    : this.id + '-clone',
				name  : this.name + '-clone'
			}).change(function() {
				$.data(c,'element')
					.val($(this).val())
					.trigger('change')
			});
				
			a.before(c).click(function() { 
				c.trigger('click');
			});
		
		}); // END RETURN
	
	}; // END PLUGIN
        
        // Usage
	if ($.browser.msie) {
		$('select')._ie_select();
	}

})(jQuery); // END SAFETY

Reference URL

Tutorial Fix Min/Max-Width for Browsers Without Native Support

by in , 0

This script checks all elements with a class of .fixMinMaxwidth and observes the window. It's only applied to browsers without native min/max-width support such as ie6 and below. Window resizing won't be a problem either.

<script type="text/javascript">
//anonymous function to check all elements with class .fixMinMaxwidth
var fixMinMaxwidth=function()
{
       //only apply this fix to browsers without native support
       if (typeof document.body.style.maxHeight !== "undefined" &&
               typeof document.body.style.minHeight !== "undefined") return false;

       //loop through all elements
       $('.fixMinMaxwidth').each(function()
       {
               //get max and minwidth via jquery
               var maxWidth = parseInt($(this).css("max-width"));
               var minWidth = parseInt($(this).css("min-width"));

               //if min-/maxwidth is set, apply the script
               if (maxWidth>0 && $(this).width()>maxWidth) {
                       $(this).width(maxWidth);
               } else if (minWidth>0 && $(this).width()<minWidth) {
                       $(this).width(minWidth);
               }
       });
}

//initialize on domready
$(document).ready(function()
{
       fixMinMaxwidth();
});

//check after every resize
$(window).bind("resize", function()
{
       fixMinMaxwidth();
});
</script>

Reference URL

Tutorial Fire Event When User is Idle

by in , 0

See the two commented lines below, that is where you can insert code for things to do when the user goes idle, and when the user comes back. Set the idle period on the third line, 1000 = 1 second. 

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {
    
        $('*').bind('mousemove keydown scroll', function () {
        
            clearTimeout(idleTimer);
                    
            if (idleState == true) { 
                
                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }
            
            idleState = false;
            
            idleTimer = setTimeout(function () { 
                
                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });
        
        $("body").trigger("mousemove");
    
    });
}) (jQuery)

This works by using a setTimeout function to fire at the end of the specified seconds. If basically anything happens during that time (the mouse moves, the page is scrolled, or a key is pressed) the timeout period is reset.

Reference URL

Tutorial Find and Wrap Ampersands

by in , 0

Load this plugin. Then:

$("body *").replaceText( /&/gi, '<b class="ampersand">' + '&' + '</b>' );

Change the selector as needed. That one is pretty intense.

Now you have a class name you can use to style them specially.

.ampersand {
   font-family: Baskerville, Some Other Cool Font, Serif;
   font-style: italic;
}

Reference URL

Tutorial Find all Internal Links

by in , 0

Find all links that start with the sites domain, a slash, relative file path, or a hashtag.

var siteURL = "http://" + top.location.host.toString();

var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");

Tutorial Fallback for CDN hosted jQuery

by in , 0

Several big companies offer copies of jQuery hosted on their CDN's (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.

There is always that twinge of doubt though, that perhaps something goes wrong with these big companies CDN at the script isn't available (it happens). It's more reliable to use your own website, as hey, if they are loading your webpage, then your server is up and will server the script just fine, albeit with out the benefits of the CDN.

So perhaps the best solution is to use both methods! Use the CDN first, and if it fails, load the local copy. Here is a technique:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Reference URL

Tutorial Fade One Image to Another Menu

by in , 0

Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. As you hover on and off, the span animates between fully transparent and fully opaque, fading one image into another.

HTML:

<ul id="menu">
       <li id="home"><a href="#">home</a></li>
       <li id="about"><a href="#">about</a></li>
       <li id="services"><a href="#">services</a></li>
       <li id="contact"><a href="#">contact</a></li>
</ul>

CSS:

ul#menu li a{float:left;display:block;background:url("images/menu.png")  no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}

ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}

jQuery:

$(function() {
       $("ul#menu li a").wrapInner("<span></span>");
       $("ul#menu li a span").css({"opacity" : 0});

       $("ul#menu li a").hover(function(){
               $(this).children("span").animate({"opacity" : 1}, 400);
       }, function(){
               $(this).children("span").animate({"opacity" : 0}, 400);
       });
});

Reference URL