Smooth Scrolling naar een ID

Geschreven door Kevin van der Peet. Posted in Code snippets

$(function($) {
    $(".scroll a, .top-btn").click(function(event) {
        event.preventDefault();
        $('html,body').animate({
            scrollTop: $(this.hash).offset().top
        }, 500);
    });
});

//usage

<a href="#Content">Scroll naar content</a>


<div id="Content">
   blah blah blah
</div>

.

Lightbox - Modalbox

Geschreven door Kevin van der Peet. Posted in Code snippets

//==========================================================================================
// the jQuery code
//==========================================================================================

//creating the lightbox
    var lightbox = function() {
        var lH = $('#wrapper').outerHeight();
        var lW = $('#wrapper').outerWidth();
        $('#lightbox').css({'width' : lW, 'height' : lH});
        $('#lightbox').fadeIn();
        $('#ltb-cnt div').hide();
    }
    
    var ltbCnt = function(){
        var ltbW = $('#ltb-cnt').outerWidth();
        var ltbH = $('#ltb-cnt').outerHeight();
        $('#ltb-cnt').css({'margin-top' : -ltbH/2, 'margin-left' : -ltbW/2});
    }
    
// lightbox fadeout on escape        
    $(document).bind('keydown', function(e) {//use keydown instead of keypress because keypress doesn't work in Chrome and Opera
        if(e.keyCode==27){
                $("#lightbox").fadeOut();
        }
    });    
    
    var closeLtb = function() { //the close button function
        $('#lightbox').fadeOut(); 
    }
    
    $('#lightbox').click(function(){ //fade out on .blur event
        $(this).fadeOut();
    });
    
    $('#ltb-cnt').click(function(e){ //stop the fade out event propagation when clic on the container info
        e.stopPropagation();
    });
    
    $('.close-ltb').click(function(){ // the close button click
        closeLtb();
    });
// show different content depending on which button was clicked    
    $('#rules-l').click(function(){
        lightbox();
        $('#rules').fadeIn();
        ltbCnt();
    });
    $('#winner-l').click(function(){
        lightbox();
        $('#winner').fadeIn();
        ltbCnt();
    });
    $('.enter').click(function(){
        lightbox();
        $('#succes').fadeIn();
        ltbCnt();
    });

//==========================================================================================
// the CSS code
//==========================================================================================
#lightbox {
    position: absolute;
    top: 0;
    left: 0;
    background:url(images/lightbox-bg.png) repeat;
    display: none;
}
.

Lijst van veilige Webfonts CSS

Geschreven door Kevin van der Peet. Posted in Code snippets

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

.

Youtube Download Video Script

Geschreven door Kevin van der Peet. Posted in Code snippets

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	$url = (isset($_POST['url']) && !empty($_POST['url'])) ? $_POST['url'] : false;
	if (!$url) {
		echo "Please enter a URL.";
	} else {
		$source = file_get_contents($url);
		$source = urldecode($source);
		
		// Extract video title.
		$vTitle_results_1 = explode('<title>', $source);
		$vTitle_results_2 = explode('</title>', $vTitle_results_1[1]);
		
		$title = trim(str_replace(' - YouTube', '', trim($vTitle_results_2[0])));
		.

CSS 3: Spreek Balonnen

Geschreven door Kevin van der Peet. Posted in Code snippets

/*
   Spreek balon
   Howto: Pas een class toe .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hallo</div>
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
 
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
 
  color: white;
  text-align: center;
  border-radius: 10px;
 
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
 
  width: 0;
  height: 0;
 
  border: 15px solid;
}
 .

Gzip CSS

Geschreven door Kevin van der Peet. Posted in Code snippets

 

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

 

.

ClearFix

Geschreven door Kevin van der Peet. Posted in Code snippets

 

.ClearFix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* WinIE7 only */
*:first-child+html .ClearFix{
	height:1%;
}.

CSS Sticky Footer

Geschreven door Kevin van der Peet. Posted in Code snippets

 

html, body, #contents {
	min-height: 100%;
	width: 100%;
	height: 100%;
}

/*
 * The "height" above is a hack for IE5+/Win.  Below we adjust
 * it using the child selector to hide from IE5+/Win
 */

html>body, html>body #contents {
	height: auto;
}.

Scroll naar Top van de pagina

Geschreven door Kevin van der Peet. Posted in Code snippets

Scroll naar de bovenkant van de pagina als er op een anker tag/link is geklikt.

 

$('#someAnchor').click(function() {
	$('html, body').animate({ scrollTop:0 }, 'fast');
	return false;
});

 

.