Jquery lightbox onload
Voici un petit script qui permet d'ouvrir une fenêtre style facebox au chargement d'une page, et également la possibilité de la refermer automatiquement après un temps donné.
Tout d'abord dans la section head de votre page :
<!-- load the jQuery library --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!-- ALL jQuery Tools. No jQuery library --> <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
Puis le style de la lightbox :
<style>
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
display:none;
}
#facebox .popup {
position:relative;
border:3px solid rgba(0,0,0,0);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
display:table;
width: 370px;
background: #fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
</style>
Maintenant créons notre div#facebox juste après la balise body
<div id="facebox">
<div class="content">
<button class="close" style="border:none; background:#3E1A0B; color:white; text-align:center; font-weight:bold; position:absolute; top:-25px; left:300px; margin:0px; padding:0 2px; width:70px; height:20px; line-height:20px"> X FERMER </button>
<div style="padding:20px;">
<h1>Une belle facebox</h1>
<div class="resume">resume</div>
</div>
</div>
</div>
et pour finir l'appel juste avant la balise de fin du body
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
// select the overlay element - and "make it an overlay"
$("#facebox").overlay({
// custom top position
top: 160,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#3e1a0a',
// load mask a little faster
loadSpeed: 1000,
// very transparent
opacity: 0.7
},
// disable this for modal dialog-type of overlays
closeOnClick: true,
// we want to use the programming API
api: true
// load it after delay
})
var ol = $("#facebox").overlay({api: true});
// wait 5 seconds, then load the overlay
setTimeout(function() {
ol.load();
}, 500);
setTimeout(function() {
ol.close();
}, 7000);
});
</script>
bouton +1 de Google
A la manière du bouton j'aime de Facebook google va instaurer un bouton +1, c'est donc un autre système de vote, un clone du bouton j'aime de Facebook ? L'avenir nous le dira, mais il est vrai que si sur une recherche donné à côté de chaque résultat on peux voir le nombre de vote cela peux devenir plus qu'un gadget...
Il semblerait également que Google va prendre de plus en plus compte dans le référencement naturel les réseaux sociaux (twitter, facebook etc...).
A nous de voter...pourtant il paraitrait que le taux d'abstention est en hausse !!!
Nous vous tiendrons au courant de l'évolution de ce nouveau service, vous pouvez vous inscrire ici pour être notifier par email de la mise en place du projet.
Coins arrondis
Après multiple recherche cette méthode semble être la plus simple pour créer des coins arrondis en CSS et compatible IE grâce à un fichier HTC qui n'est autre qu'un script qui sera uniquement interprété par IE.
Voici la démarche à suivre :
1) Télécharger le petit script nommé border-radius.htc à cette adresse.
2) Créer une class par exemple .coin_arrondi avec les propriétés suivantes.
<style>
.coin_arrondi {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc); // liens vers le petit script .htc, ce qui permettra à IE d'interpréter les propriétés CSS ci dessus.
}
</style>
3) et appliquer cette class à tous les éléments ou l'on veut voir des coins arrondis.
Statistique navigateur web
Doit on vérifier comptabilité de l'affichage sur IE6, IE7, safari...?
Voilà une question récurrente que tout webmaster doit se poser un jour ou l'autre...
Je me décide donc de regrouper toutes les visites de mes 13 sites ayant chacun un marqueur Google Analytics.
(j'ai omis volontairement opéra et autres navigateur générant très peu de visites)
Voici les résultats :
- VISITES TOTALES : 32281
- IE6 : 1472 soit 4,6%
- IE7 : 3685 soit 11,4%
- IE8 : 11419 soit 35,3%
- IE9 : 132 soit 0,4%
- TOTAL VERSION IE : 16708 soit 51,7%
- FIREFOX : 9401 soit 29,2%
- CHROME : 2709 soit 8,4%
- SAFARI : 3463 soit 10,7%
Il en ressort qu'actuellement Internet explorer toute version confondue a encore 50% du marché, Firefox est maintenant solidement installé, Chrome grignote et Safari (navigateur implanté par défaut dans toutes les machines apple) est un navigateur à ne peut être pas négliger.
Il y a encore 4,6% d'internaute utilisant IE6 ... Je ne m'imagine même pas comment certains sites pourraient s'afficher via ce navigateur obsolète.
La suite l'année prochaine...
.PNG fixer les problèmes d’affichage sur IE6
A ma connaissance voici un des seuls scripts qui permet d'afficher sans problème les images au format .png (fonctionne aussi pour les images en background ), et cela pour notre navigateur préféré IE6..
Vous le trouverez ici si le lien n'est plus à jour une simple recherche dans google.
Exemple d'intégration :
<head>
<!--[if IE 6]>
<script src="Scripts/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.toto, img');
</script>
<![endif]-->
</head>
Dans cet exemple toutes les images au format .png seront affichées correctement, et les éléments ayant la class .toto seront aussi traités par le script. (par exemple imaginons une div ayant un background avec une image au format png il suffira de lui attribuer la class .toto et le tour est joué)
Polices différentes sur votre site !
Cufón est une solution alternative pour afficher des polices peu courantes sur votre site internet, fini les titres en images !
Le site génère en ligne un javascript avec la police que vous avez choisie (différentes options sont possibles ce qui permet au final de réduire pas mal le poids du script), vous pouvez intégrer autant de polices souhaitées sur un même site.
Voici un exemple d'intégration :
Tous les éléments qui auront la classe .fontTrajan seront de la police TRAJAN.
<html>
<body>
<head>
<script src="Scripts/cufon.js" type="text/javascript"></script> // fichier commun
<script src="Scripts/TRAJAN.font.js" type="text/javascript"></script> //fichier généré avec votre police
<script type="text/javascript"> // déclaration de la class .fontTrajan
Cufon.replace('.fontTrajan', { fontFamily: 'Trajan Pro' });
</script>
</head>
<body>
<h1 class="fontTrajan">Titre en police TRAJAN</h1>
<p class="fontTrajan">paragraphe en police TRAJAN</p>
</body>
</html>
Rank Checker
Ronk Checker est un addon pour Firefox qui une fois installé permet à l'utilisateur de connaître le positionnement de son site sur des mots ou expressions.
On peut sauvegarder les résultats, enregistrer plusieurs nom de domaines.
Un outil donc presque indispensable et pratique pour suivre l'évolution de son référencement dans les principaux moteurs de recherche.
