Learn how to use jQuery at the Blog

Matthias Kretschmann « visit

  • Added 10 months ago
  • 153 Lines of Code shown
  • 1 Links of Interest
http://matthiaskretschmann.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 Matthias Kretschmann - http://matthiaskretschmann.com

/**
 * main JS Document for matthiaskretschmann.com
 * Copyright (c) 2009 Matthias Kretschmann | krema@jpberlin.de
 * http://matthiaskretschmann.com
 * http://kremalicious.com
 */

$(function () { //DOMdiDOM

	//First hide some main stuff to reveal it later smooooooooothly
	$('#main,#colophon').hide();
	$('.panel').css("opacity","0");
	$('#backshine').css("opacity","0");
	
	//In with the text-size and print buttons, and some lines
	$('#navigation').append("<div class='line'></div>");
	$('h3,h2,#colophon').append("<div class='line'></div>");
	$('#matthiaskretschmann').append("<div id='action-menu'><div id='text-size'><img id='large' src='images/text+.png' alt='text+' width='13' height='14'/><img id='small' src='images/text-.png' alt='text-' width='13' height='14'/></div><div id='print'></div></div>");
	$('#print').click(function() {
		window.print();
	return false;  
	});
	
	//Basic Navigation
	//First, make the button corners a bit round; CSS3-style for the good browsers
	$('#navigation span, #navigation a').css({'border-radius' : '5px', '-moz-border-radius' : '5px', '-webkit-border-radius' : '5px', '-khtml-border-radius' : '5px' });

	//Now start the clicking, tabbing fun
	$('ul#navigation a').click(function() {		
		var currentChild = $(this).parent().prevAll().length + 1;
		$(this).parent().parent().children('.active').removeClass('active');
		$(this).parent().addClass('active');
		$('#colophon').slideUp('slow');
		$('#backshine').animate ({ opacity: 0}, {queue: false}, 'slow');
		$(this).parent().parent().next('#main').children('.active')
			.animate({ opacity: 0 }, {queue:false}, 'slow')
			.slideUp('slow', function() {
				$(this).removeClass('active');
				$(this).parent().children('div:nth-child('+currentChild+')').slideDown('slow', function() {
					$(this).addClass('active');
			});
		$(this).animate({ opacity: 1 }, {queue:false}, 'slow');
		$('#backshine').animate ({ opacity: 1}, {queue: false}, 'slow');
		});
		return false;
	});
	    
    //Hover Glow Effects
	$("#navigation span, a#headvcard span, .popup span, a.contact-about span").css("opacity","0").hover(function () {
		$(this).stop().animate({ opacity: 1 }, 'slow');
	},
	function () {
		$(this).stop().animate({ opacity: 0	}, 'slow');
	});
    
    //The Stalking Hover Effects
    $('#stalking a').hover(function () {
    	$(this).stop().animate({ marginLeft: '10px' }, 300);  
    	}, function() { 
        $(this).stop().animate({ marginLeft: 0 }, 300);
    });
    
    //The Colophon Slide
   	$('a#toggle').click(function() {
    	$('#colophon').slideToggle(500);
    	$('html,body').scrollTo('p#last', 1000);
    	return false;
    });
    
	//The Smooooooooth vCard Popup, Idea and Code by http://jqueryfordesigners.com/coda-popup-bubbles/
  	$('#header').each(function () {
	    var distance = 10;
	    var time = 500;
	    var hideDelay = 300;
	    var hideDelayTimer = null;   
	    var trigger = $('a#headvcard', this);
	    var popup = $('#popup', this).css('opacity', 0);
	    $([trigger.get(0), popup.get(0)]).mouseover(function () {
	      if (hideDelayTimer) clearTimeout(hideDelayTimer);
	      if (popup.is(':animated,:visible')) {
	        return;
	      } else {
	        beingShown = true;
	        popup.css({
	          top: -35,
	          left: 150,
	          display: 'block'
	        })
	        .animate({
	          top: '-=' + distance + 'px',
	          opacity: 1
	        }, time, 'swing', function() {
	          beingShown = false;
	          shown = true;
	        });
	      }
	    }).mouseout(function () {
	      if (hideDelayTimer) clearTimeout(hideDelayTimer);
	      hideDelayTimer = setTimeout(function () {
	        hideDelayTimer = null;
	        popup.animate({
	          top: '-=' + distance + 'px',
	          opacity: 0
	        }, time, 'swing', function () {
	          shown = false;
	          popup.css('display', 'none');
	        });
	      }, hideDelay);
	    });
	  });
	  
	 //Text-Resizing, Idea and Code by http://dev-tips.com/featured/jquery-tip-font-resizing-with-animation-effects
    $('#text-size img').click(function(){ 
        var ourText = $('.panel,#footer,#colophon'); 
        var currFontSize = ourText.css('fontSize'); 
        var finalNum = parseFloat(currFontSize, 10); 
        var stringEnding = currFontSize.slice(-2); 
        if(this.id == 'large') { 
            finalNum *= 1.2; 
        }
        else if (this.id == 'small'){ 
            finalNum /=1.2; 
        } 
        ourText.animate({fontSize: finalNum + stringEnding},300);
        return false;  
    });
    
    //IEwarning stuff
    $('a#warning-toggle').click(function() {
    	$('#iewarning').slideUp(500);
    	$('a#warning-toggle').fadeOut('normal')
    	return false;  
    });

});//don't delete me or the DOM will collaps

//Finally SlideDown and fade in the main content when everything has loaded
$(window).load(function() {
	$('#backshine').animate ({ opacity: 1}, {queue: false}, 'slow');
	$('#main').slideDown('slow');
	$('.panel').animate({ opacity: 1 }, 1000);
	$('#colophon').css({'background-color' : 'rgba(0,0,0,0.1)'});
});

//try to hide the URL bar on iPhone
if (navigator.userAgent.indexOf('iPhone') != -1) {
        addEventListener("load", function() {
                setTimeout(hideURLbar, 0);
        }, false);
}
function hideURLbar() {
        window.scrollTo(0, 1);
}