jQuery(function($){ // -------------------- petits tests entre amis --------------------- /*$("*").click(function(){ a = $(this).css("border-top-width"); alert(a);});*/ // -------------------- FONCTIONS GENERALISTES --------------------- jQuery.fn.extend({ scrollTo : function(speed, easing) { return this.each(function() { var targetOffset = $(this).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); // ci dessous interressante approche /* $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000, 'easeOutQuad'); location.hash = this.hash; return false; } } });*/ // --------------------------- EN TETE ----------------------------- //$("#logo h1 a").contents().replaceWith("www.websigns.fr"); //$("#logo h1 a").contents().replaceWith("www.websigns.fr"); //$("#sstitre h2").contents().replaceWith("du design, des signes, de l"); //$("#logo").css({"text-align":"center","vertical-align":"middle"}); // --------------------------- ROUNDED ----------------------------- /*$(".rounded").each(function(){ var $t = $(this); if((($t.css("border-width"))== null)||(($t.css("border-width"))== "0px")||!($t.css("border-width"))){ var $tow = ($t.width())-8; var $toh = ($t.height())-8; $t.width($tow); $t.height($toh); var $tbc = $t.css("border-color"); var $tpbc = $t.css("background-color"); if($tbc!=null){$t.css("border-color",$tbc)} else { if ($tpbc == "transparent") $tpbc = $t.parent().css("background-color"); $t.css("border-color",$tpbc); }; $t.css({"border-width":"4px","border-style":"solid"}); } //$t.click(function(){alert($tow +" \n"+ $toh +" \n"+ $tbc +" \n"+ $tpbc)}); }).prepend("");*/ /* Arrondissement des coins d'un fond : ajout d'un coin blanc Attention : l'ordre des trois blocs suivants est impératif pour que ca fonctionne. On attribut la class, on créer la class, on modifie la class. */ /* CSS de référence pour la class "rounded" .bl,.tr,.br,.tl{position:absolute!important;padding:0!important;margin:0!important;} .bl{bottom:-4px;left:-4px;} .tr{top:-4px;right:-4px;} .br{bottom:-4px;right:-4px;} .tl{top:-4px;left:-4px;} */ $("#a1,#b1,#c1,#footer,#sstitre").addClass("rounded"); $(".sec,.menu,.content .a-2,.content .b-2,.content .c-2").addClass("rounded"); $(".rounded").prepend("\"décoration\"\"décoration\"\"décoration\"\"décoration\""); // -> Ne fonctionne pas ... var $a = null; coin = function(a){ //$a = a; $(".bl",this).css("bottom",a).css("left",a); $(".tr",this).css("top",a).css("right",a); $(".br",this).css("bottom",a).css("right",a); $(".tl",this).css("top",a).css("left",a); }; $("#a1,#b1,#c1,#a2,#b2,#c2,#footer,#sstitre").each(function(){ $(".bl",this).css({"bottom":"-4px","left":"-4px"}); $(".tr",this).css({"top":"-4px","right":"-4px"}); $(".br",this).css({"bottom":"-4px","right":"-4px"}); $(".tl",this).css({"top":"-4px","left":"-4px"}); //coin("-4px"); }); $(".sec,.menu,.a-2,.b-2,.c-2").css({"position":"relative"}).each(function(){ $(".bl",this).css({"bottom":"0","left":"0"}); $(".tr",this).css({"top":"0","right":"0"}); $(".br",this).css({"bottom":"0","right":"0"}); $(".tl",this).css({"top":"0","left":"0"}); }); //création d'une class "corner" utilisant le plugin "jQuerycurvycorner" $(".corner").corner(); // -------------------- Fonctions de SLIDE --------------------- /* ajout d'une fonction d'apparition de tout les éléments suivant celui ayant la class "opener" l'important avec le type de fonction qui suit est de construire une arborescence qui permette de travailler. En l'occurence pour maintenir une indépendance de fonctionnement entre chaque groupe d'éléments concernés (ici les éléments "opener" comme déclencheur et ceux qui suivent comme cibles) on isole chaque groupe déclencheur/cibles dans un contener (s'il ne les pas déjà bien sûr). Si on veut garder une continuité visuelle (comme si les éléments était frères, au même niveau de l'arborescence) on englobe le groupe dans un span. L'intéret est que l'on peut utiliser tout type d'élément HTML pour le formatage attention : Firefox (ou jquery AVEC Firefox ?) est trés pointilleux. Une erreur dans la feuille de style empéchait le script de fonctionner La variable suivante regroupe les éléments servant uniquement à la décoration du texte. cela reste subjectif. on peut ainsi fermer les blocks et garder du texte même formaté */ var $n = "b,strong,i,u,em,s,sub,br,.opener"; //var $m = $(this).nextAll().not($n);//éléments a masquer var $l = "\   ▼ "; function openAnim(x){ $("i",x).animate({opacity:'hide'},400); //$("i",this).replaceWith("   "); $(x).nextAll().not($n).show(800); }; function closeAnim(x){ //$(this).append($l); $("i",x).animate({opacity:'show'},800); //$("i",this).replaceWith("▼ "); $(x).nextAll().not($n).hide(400); }; function togl(x){ var xx = $(x); xx.css("border","1px red solid"); /*xx.toggle(function(){ xx.css("border","1px blue solid") openAnim(xx); },function(){ xx.css("border","1px green solid") closeAnim(xx); }).nextAll().not($n).css("border","0px white solid").hide();*/ return false; }; $(".opener").toggle(function(){ openAnim(this); },function(){ closeAnim(this); }).nextAll().not($n).hide(); $(".opener").append($l); xLim = $("#main").width(); yLim = $(document).height(); contentH = ""; /*var $f = $(".text *:header"); $f.innerHTML.backgroundColor="#f8f8f8";*/ // -------------------- ONGLETS affichage principal --------------------- //ce qui suit sera a transformer en fonction pour usage multiple /*masquage des blocs sauf du premier. suppose que l'on utilise toujours une structure en ".text>ul>li" pour ce type de formatage des blocks de texte on ne prend en compte que les enfant li d'un bloc de class "text", l'affichage principal. on exclue le premier enfant li, ainsi que les éléments d'une classe "menu"*/ $(".text>ul>li").not(":first-child,.menu *").hide(); /*$(".menuH a,.switcher").click(function(){ $(this.hash).parent().children("li:visible").hide(400); $(this.hash).show(800,"linear"); });*/ //affichage principal, menu principal : apparition du block ciblé + disparition des autres. A noter le "return false" /*$("a[href^='#']").click(function(){ var truc = $(this.href); truc.parent().children("li:visible").hide(400); truc.show(800,"linear"); return false; });*/ function showsel(a){ a = $(a.hash); a.parent().children("li:visible").hide(400); a.show(800,"linear"); }; $("a[href^='#']").click(function(){// si le lien COMMENCE par '#' il s'agit d'un lien local showsel(this);return false; }); if((document.referrer!=window.self.location)&&(window.location.hash)){ $(window).load(function(){ $(window.location.hash).parent().children("li:visible").hide(400); $(window.location.hash).show(800,"linear"); window.location.replace("#main");//retour vers le div principale, donc le haut de la page }); }; // -------------------- affichage litebox style --------------------- $("a[href='formcontact.html']").colorbox({width:"680px",height:"600px",iframe:true}); /*$(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); */ cbinline = function(a,b){ $.colorbox({inline:true,href:a,width:b,height:b}); }; // -------------------- Intro : menu globale --------------------- /* intro : menu designé, offrant un résumé de l'ensemble des liens me concernant A terme accesible sur l'ensemble de mes sites via un graphisme en trèfle (design actuel) */ $('#intro_1').corner({ tl: { radius: 25 }, tr: { radius: 25 }, bl: { radius: 25 }, br: { radius: 0 }, antiAlias: true}); $('#intro_2').corner({ tl: { radius: 25 }, tr: { radius: 25 }, bl: { radius: 0 }, br: { radius: 25 }, antiAlias: true}); $('#intro_3').corner({ tl: { radius: 25 }, tr: { radius: 0 }, bl: { radius: 25 }, br: { radius: 25 }, antiAlias: true}); $('#intro_4').corner({ tl: { radius: 0 }, tr: { radius: 25 }, bl: { radius: 25 }, br: { radius: 25 }, antiAlias: true}); });