Learn how to use jQuery at the Blog

Flywheel Design « visit

  • Added 7 months ago
  • 155 Lines of Code shown
  • 8 Links of Interest
http://flywheeldesign.com
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to Flywheel Design - http://flywheeldesign.com

	$(document).ready(function(){
				
		preloadImages = function() { 
			for(var i = 0; i<arguments.length; i++) {
				$("<img />").attr("src", arguments[i]); 
			}
		}
		
		preloadImages("/images/home_defaults/default1.jpg");
		
		// Email protection. Use a link like so:
		// <a href="/user_name|example:com" rel="mail" class="email_one">User Name</a> 
		el = $('.email_one');
		el.each(function(){
			el.attr('href','mailto:' + el.attr('href').replace('|','@').replace('/','').replace(':','.'));
 		});	
		
		// Nav hover effect	
		$("#navigation li").hover( 
			function(){ $(this).addClass('nav_hover'); }, 
			function(){ $(this).removeClass('nav_hover');
		});

		// fix for the IE6 background image flicker bug. 
		// http://www.mister-pixel.com/
		try { document.execCommand("BackgroundImageCache", false, true); } catch(err) {};
		
		function backgroundHeight() {
			var winHigh = $(window).height();
	   			if(winHigh > '800') {
					$('html,body').css({height:'100%',width:'100%'});
					$('#dots').height('100%');
				} else {
					$('#dots').css({height:'800px'});
				};
		};
		backgroundHeight();
		$(window).resize(function(){
			backgroundHeight();
		});
		
				$("#header, .work_nav a, .contact_nav a").click(function(){ $('#modal_window1').jqmHide(); return false;});
		$("#header, .about_nav a, .contact_nav a").click(function(){ $('#modal_window2').jqmHide(); return false;});
		$("#header, .about_nav a, .work_nav a").click(function(){ $('#modal_window3').jqmHide(); return false;});
		$('h1 a').click(function(){ 
			$('#content_cover div div').css({"background": "url(/images/home_defaults/default1.jpg)"}).fadeTo(300, 1);
			$('#modal_window1').jqmHide();
			$('#modal_window2').jqmHide();
			$('#modal_window3').jqmHide();
		return false; 
		});
				
		
		$('#modal_window1').jqm({
			ajax: '@href',
			trigger: 'a.ex1trigger',
			overlay: 40,
			onShow: function(h) { h.w.fadeIn(400)
				$(".contact_nav a, .work_nav a, .modal_close").css({color:'white',cursor:'pointer'})
				$('.about_nav a').css({color:'#B5B3B3',cursor:'default'})
				$(".ex1trigger").addClass('modal_close')
			},
			onHide: function(h) { h.w.fadeOut(400,function() { if(h.o) h.o.fadeOut(200); })
				$('.about_nav a').css({color:'white',cursor:'pointer'})
				$('#s1').cycle('stop')
				$(".ex2trigger").removeClass('modal_close')
				$('#modal_window1').animate({opacity: 1}, 1000, function() { $(this).empty(); })
			}  
		});
		
		$('#modal_window2').jqm({
			ajax: '@href',
			trigger: 'a.ex2trigger',
			overlay: 40,
			onShow: function(h) { h.w.fadeIn(400)
				$(".about_nav a, .contact_nav a, .modal_close").css({color:'white',cursor:'pointer'})
				$('.work_nav a').css({color:'#B5B3B3',cursor:'default'})
				$(".ex2trigger").addClass('modal_close')
			},
			onHide: function(h) { h.w.fadeOut(400,function() { if(h.o) h.o.fadeOut(200); })
				$('.work_nav a').css({color:'white',cursor:'pointer'})
				$('#s1').cycle('stop')
				$(".ex2trigger").removeClass('modal_close')
				$('#modal_window2').animate({opacity: 1}, 1000, function() { $(this).empty(); })
			}  
		});		
		
		$('#modal_window3').jqm({
			ajax: '@href',
			trigger: 'a.ex3trigger',
			overlay: 40,
			onShow: function(h) { h.w.fadeIn(400)
				$(".about_nav a, .work_nav a, .modal_close").css({color:'white',cursor:'pointer'})
				$('.contact_nav a').css({color:'#B5B3B3',cursor:'default'})
				$(".ex3trigger").addClass('modal_close')
			 },
			onHide: function(h) { h.w.fadeOut(400,function() { if(h.o) h.o.fadeOut(200); })
				$('.contact_nav a').css({color:'white',cursor:'pointer'})
				$('#s1').cycle('stop')
				$(".ex3trigger").removeClass('modal_close')
				$('#modal_window3').animate({opacity: 1}, 1000, function() { $(this).empty(); })
			}  
		});
		
		
		
		// Homepage overlay code
		$("#c_1_1 span, #c_2_2 span, #c_2_4 span, #c_3_1 span, #c_3_3 span, #c_4_2 span, #c_4_3 span").replaceWith('<img src="/images/home_overlays/print.gif" width="238" height="142" alt="Print">');
		$("#c_3_2 span, #c_4_1 span").replaceWith('<img src="/images/home_overlays/web.gif" width="238" height="142" alt="Web">');
		$("#c_1_2 span, #c_2_3 span, #c_3_4 span").replaceWith('<img src="/images/home_overlays/identity.gif" width="238" height="142" alt="Identity">');
		$("#c_1_4 span").replaceWith('<img src="/images/home_overlays/blog.gif" width="238" height="142" alt="Blog">');
		$("#c_4_4 span").replaceWith('<img src="/images/home_overlays/studio.gif" width="238" height="142" alt="Studio">');
		$("#c_2_1 span, #c_1_3 span").replaceWith('<img src="/images/home_overlays/experimental.gif" width="238" height="142" alt="Experimental">');
		
		$('#content_cover div div img').css({"visibility":"hidden"});
		$('#content_cover div div').fadeTo(1, 0.01);
		$('#content_cover div div').bind("mouseenter", function() { 
			$(this).css({"background": "url(/images/home_defaults/default1.jpg)"}).fadeTo(300, 1);
			$("img", this).css({visibility:'visible'}); 
			$("img", this).fadeTo(200, 1);
		});
		$('#content_cover div div').bind("mouseleave", function() { 
			$("img", this).fadeTo(200, .01);
		});

		// For the non-js crowd
		$('.about_nav a').attr({ href: "/about/about_inside.php" });
		$('.contact_nav a').attr({ href: "/contact/contact_inside.php" });
		$('.work_nav a').attr({ href: "/work/print_inside.php" });
		
		$('#c_1_1 a').attr({ href: "/work/print_inside.php?selection=print_nccu_dispute_resolution_inst.jpg" });
		$('#c_1_2 a').attr({ href: "/work/identity_inside.php?selection=identity_watts_grocery.jpg" });
		$('#c_1_3 a').attr({ href: "/work/experimental_inside.php?selection=experimental_parking_deck.jpg" });
		$('#c_1_4 a').attr({ href: "/about/blog_inside.php" });
		
		$('#c_2_1 a').attr({ href: "/work/experimental_inside.php?selection=experimental_ok_desktop_2.jpg" });
		$('#c_2_2 a').attr({ href: "/work/print_inside.php?selection=print_nccu_law_school.jpg" });
		$('#c_2_3 a').attr({ href: "/work/identity_inside.php?selection=identity_moxie_kids.jpg" });
		$('#c_2_4 a').attr({ href: "/work/print_inside.php?selection=print_durham_chamber_of_commerce.jpg" });
		
		$('#c_3_1 a').attr({ href: "/work/print_inside.php?selection=print_wine_bottles.jpg" });
		$('#c_3_2 a').attr({ href: "/work/web_inside.php?selection=web_winter_custom_yachts.jpg" });
		$('#c_3_3 a').attr({ href: "/work/print_inside.php?selection=print_thrombo_targets.jpg" });
		$('#c_3_4 a').attr({ href: "/work/identity_inside.php?selection=identity_logos.jpg" });
		
		$('#c_4_1 a').attr({ href: "/work/web_inside.php?selection=web_gathering_in_the_stories.jpg" });
		$('#c_4_2 a').attr({ href: "/work/print_inside.php?selection=print_rail_inc.jpg" });
		$('#c_4_3 a').attr({ href: "/work/print_inside.php?selection=print_obama_posters.jpg" });
		$('#c_4_4 a').attr({ href: "/about/about_inside.php" });
		
		$('#wrapper_hover a').click(function(){ $("#content_cover div div").fadeTo(300, 0);	return false; });
		
		$('#introductory_text').css({"display":"none"})
		
	});