Aujourd’hui, voilà pour vous une nouvelle ressource pour pouvoir servir vos vidéos YouTube, Dailymotion, Vimeo, etc. avec une largeur « responsive », s’adaptant à la taille de la fenêtre. Vous n’avez plus d’excuse pour passer au RWD !

<div class="notify">
	<span class="icon"></span>
	<p>Je suis une notification. Je vais dispara&icirc;tre! Phasellus elit nunc, tristique sed sodales sit amet, tincidunt sed.</p>
</div>

$(document).ready(function(){
	$(".notify").css('display','none').delay(500).fadeIn(400).delay(5500).fadeOut(400);
	$(".notify").hover(function(){
		$(this).stop(true,true).fadeIn();
	},function(){
		$(this).stop(true,true).delay(500).fadeIn(400).delay(5500).fadeOut(400);
	});
});

.notify {
	position: absolute;
	top: 8; right: 8px;
	max-width: 246px;
	background: rgba(0,0,0,0.7); padding: 25px;
	font-size: 0.8em; color: #fff;
	border: 2px solid #222;
	border-radius: 8px;
	box-shadow: 0 3px 5px rgba(0,0,0,0.4);
}
.notify:hover {
	border: 2px solid #eee;
}
.notify p {
	margin: 0;
	cursor: default;
}
.notify span.icon {
	display: block;
	width: 40px; height: 40px;
	background: url(notify_icon.png) no-repeat;
	position: absolute;
	top: 10px; left: -30px;
}

$(document).ready(function(){
	$.getJSON('http://instagram.heroku.com/users/45195.json',function(data){
		var instagram = new Array();
		$.each(data.items, function(i,item){
			var str = '<li><a href="http://intagr.am/p/' + item.code + '">
			<img src="' + item.image_versions[1].url + '"
			title="' + item.comments[0].text + '" />
			<div>' + item.comments[0].text + '</div>
			</a></li>';
			instagram.push(str);
		});
		$('<ul/>', {html: instagram.join('')}).appendTo('#instagram');
	});
});

Pré requis

Le marquage HTML

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

Le code Javascript

$(document).ready(function(){
    //notre code jQuery
});

$(function() {
    $("#menu").lavaLamp({
        fx: "backout",
        speed: 700,
        click: function(event, menuItem) {
            return false;
        }
    });
});

La feuille de style

#menu {
    position: relative;
    height: 29px;
    width: 421px;
    background: url("images/bg.gif") no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
}
#menu li {
    float: left;
    list-style: none;
}
#menu li.back {
    background: url("images/lava.gif") no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
}
#menu li.back .left {
    background: url("images/lava.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}
#menu li a {
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
    margin: auto 10px;
}
#menu li a:hover, #menu li a:active, #menu li a:visited {
    border: none;
}

Conclusion

$(window).resize(function(){
      //on récupère la taille de la fenêtre
      var w = $(window).width();
      //on stock la valeur de l'attribut href de notre css actuelle
      var default_css = $("link[rel='stylsheet']").attr("href");
      //adresse de la nouvelle css
      var new_css =   "http://monsite.com/chemin/vers/la_nouvelle.css";
      //on test si la fenêtre à une largeur inférieur à 1024px
      if(w < 1024){
           $("link[rel='stylesheet"=']").attr({href: new_css});
      } else {
           $("link[rel='stylesheet']").attr({href: default_css});
      }
});

Comment l'implémenter sur votre site?

$('a').tipsy();

Aller plus loin avec Tipsy

Utilisation

$(document).ready(function () {
	$('.timestamp').cuteTime();
});

<div class="timestamp">
	2009/10/12 22:11:19
</div>

Le marquage HTML

<div id="login_panel">
	<form name="login_form" id="login_form" method="post" action="" >
		<label for="username">Nom d'utilisateur:</label>
		<input type="text" name="username" id="username" />
		<label for="password">Mot de passe:</label>
		<input type="password" name="password" id="password" />
		<input type="submit" name="submit" id="submit" value="Connexion" />
	</form>
</div><!-- #login_panel -->
<p class="slide"><a href="#" class="slide_btn">Se connecter</a></p>

Les styles CSS

#login_panel {
	width: 400px;
	margin: 0 auto;
	padding: 30px;
	background: #cccccc;
	display: none; //état initial du panneau : caché
}
.slide_btn {
	width: 140px;
	height: 15px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	background: #ff0000;
	display: block;
}
.slide {
	margin: 0;
	padding: 0;
}

Le script jQuery

$(document).ready(function(){
	$(".slide_btn").click(function(){
		$("#login_panel").slideToggle("slow");
		return false;
	});
});

Télécharger les sources