Graphisme Cat-Life
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment : -17%
SSD interne Crucial SSD P3 1To NVME à ...
Voir le deal
49.99 €

 

 Un tableau pour une 'tite Pierre ? :)

Aller en bas 
2 participants
AuteurMessage
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyLun 06 Aoû 2012, 21:18

Bonjour à tous,

Je voudrais un truc (C'est vrai que 'Truc' c'est très... Bref. tongue )
enfin, une sorte de tableau. Mais comment dire, sur une page blanche, une page du web.
Alors une fiche dans les tons vert avec 3 ou 4 onglets (Les onglets il faut passer le curseur dessus pour que se s'affiche). Ce serais possible ?
Merci beaucoup d'avance. Razz
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyLun 06 Aoû 2012, 21:41

Alors aurais tu moyen de faire un petit schéma pour faire quelque chose qui se rapproche au maximum de ce que tu souhaites ? Déjà savoir si tu préfères les onglets en haut ou en bas ( enfin même droite ou gauche ^^), de quelle taille ? Combien de "pages" ?
Et j'aimerai savoir si tu t'y connais un peu ou pas, si ce n'est pas le cas il faudrait aussi donner le contenu de chaque onglets histoire que tu ne te retrouves pas avec un système d'onglet qui n'affiche finalement rien Smile
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 07:42

Tu me donnes le code et je suis capable de le remplir, aucun problème j'ai les bases. Very Happy
Voilà, en gros avec les onglet en haut & pas coller :
Spoiler:
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 17:13

Donc si tu as déjà commencée fini & je serais super contente, mais si tu ne l'a pas encore fait j'aimerais plutût que tu me face 1 code HTML/CSS, c'est possible ?? (:
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 17:58

Me voilà, évite les doubles postes par contre !

Citation :
Donc pour ma demande de tableau :

Donc si tu as déjà commencée fini & je serais super contente, mais si tu ne l'a pas encore fait j'aimerais plutôt que tu me face 1 code HTML/CSS, c'est possible ?? (:
Si oui, c'est sur cette image avec 3 endroits pour écrire. Celui du staff comme la PA du forum, celui des News comme sur le forum les partenaires && les partenaires qui ne bouge pas. Ensuite, tu pourrais m'expliquer en gros comme remplir ? (: Merci d'avance.

Tu veux du coup seulement la deuxième demande ou les deux ?

Ca peut être assez long à faire donc laisse moi un peu de temps ok ? Smile
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 18:19

Plutôt la deuxième. Mais j'ai édité le MP, retourne voir ! (:
Bien sur, tu peux le faire en combien de temps ? ^^
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 18:38

Ok j'ai vu ! Hésite pas à le mettre directement sur le topic si quelqu'un d'autre que moi est plus rapide ;)
Je peux pas prévoir combien de temps, enfin je finis ce que j'ai en route et je m'y mets ce soir si j'ai le courage, sinon désolé tu devras attendre demain soir n_n
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyMar 07 Aoû 2012, 18:44

D'accord j'espère l'avoir au plus vite, merci beaucoup (:
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 11:50

Bon, voilà ce que je te propose Smile

Code à mettre dans ton CSS ( Affichage, puis Un tableau pour une 'tite Pierre ? :) Images_couleurs Images et Couleurs, Couleurs et enfin Feuille de style CSS )
Code:
#pa_partenaires{
   float:left;
   position:relative;
   width:421px;
   height:106px;
   z-index:1;
   left: 388px;
   top: 74px;
   overflow:auto;
   color:#CEB39F;
   font-size:12px;
     font-family:tahoma;
}
#pa_news {
   float:left;
   position:relative;
   width:288px;
   height:312px;
   z-index:2;
   right: 38px;
   top: 247px;
   overflow:auto;
     color:#CEB39F;
   font-size:12px;
     font-family:tahoma;
}
#pa_staff {
   float:left;
   position:relative;
   width:329px;
   height:208px;
   z-index:3;
   left: 10px;
   top: 275px;
   overflow:auto;
     color:#CEB39F;
   font-size:12px;
     font-family:tahoma;
}

#pa_membre {
   float:left;
   position:relative;
   width:213px;
   height:218px;
   z-index:3;
   left: 457px;
   top: 93px;
   overflow:auto;
       color:#CEB39F;
   font-size:12px;
     font-family:tahoma;
}

#pa_teams {
   float:left;
   position:relative;
   width:393px;
   height:189px;
   z-index:3;
   left: 442px;
   top: 373px;
   overflow:auto;
       color:#CEB39F;
   font-size:12px;
     font-family:tahoma;
}

et le reste à mettre dans le code de ta PA ( Affichage, puis Un tableau pour une 'tite Pierre ? :) Portail Page d'accueil, Généralités)

Code:
<script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>

            <span class="onglet_0 onglet" id="onglet_a" onmouseover="javascript:change_onglet('a');">onglet 1</span>
            <span class="onglet_0 onglet" id="onglet_b" onmouseover="javascript:change_onglet('b');">onglet 2</span>
            <div class="contenu_onglet" id="contenu_onglet_a">
            <!-- 1er ongl --><div style="background: url(http://img15.hostingpics.net/pics/730193736.png) top center; width:1076px; height:588px;">
  <div id="pa_partenaires">Partoches :D </div>
  <div id="pa_news">News ! </div>
  <div id="pa_staff">Staff</div>
  </div>

<!-- Fin 1er -->
            </div>
            <div class="contenu_onglet" id="contenu_onglet_b">
            <!-- 2eme ongl -->
<div style="background: url(http://img15.hostingpics.net/pics/694762769.png) top center; width:1076px; height:588px;">

  <div id="pa_membre">Membre :D </div>
  <div id="pa_teams">Teams</div>
</div>
 </div>


    <script type="text/javascript">
        //<!--
                var anc_onglet = 'a';
                change_onglet(anc_onglet);
        //-->
        </script>

Ensuite tu peux remplir chaque case comme tu le souhaites avec texte, images ... J'ai mis un "overflow:auto;" pour qu'une scrollbar se mette automatiquement si le texte est trop long pour le conteneur.

Comme je n'ai pas tout compris à ton histoire de trucs qui bougent ou qui ne bougent pas je n'en ai pas tenu compte pour le moment ^^"
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 13:25

D'accord, mais je n'arrive pas à coller le code dans Feuilles de styles CSS... :/
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 13:30

Ah ? Le problème est que tu ne trouves pas l'emplacement où se trouve les feuilles de style ? Que tu colles mais que le CSS n'ait aucun effet ?
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 13:33

Non, quand je clique droit sur la page sa m'affiche des chose mais pas copier/coller/couper ! :s
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 13:38

Tu es sûre d'avoir bien copié le CSS ?

Si c'est le cas, alors il y a une autre manière, c'est les raccourcis clavier !

Sur cette page sélectionne tout le code CSS puis clic droit "copier" comme tu fais en général, puis va sur ton forum là où tu colles le CSS et appuies sur tes touche ctrl et la lettre v en même temps ;)

Au fait je viens de me rendre compte qu'il manque un petit bout de CSS, j'avais oublié les propriétés des onlets, donc copie le css suivant :

Code:
.onglet {
     background-color:#CEB39F;
  font-size:16px;
  padding:5px;
  color:#ffffff;
}
           
.onglet_0 {
   background-color:#CEB39F;
   border-top: 3px solid #ffffff;
     border-left: 1px solid #ffffff;
     border-right: 1px solid #ffffff;
   padding-bottom:0;
   -webkit-border-radius: 10px 10px 0 0;
   -o-border-radius: 10px 10px 0 0;
   border-radius: 10px 10px 0 0;
}

.onglet_1 {
   background-color:#847060;
   border-top: 3px solid #ffffff;
     border-left: 1px solid #ffffff;
     border-right: 1px solid #ffffff;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;
   padding: 10px 5px;
}

.contenu_onglet {
   display:none;
}

#pa_partenaires{
  float:left;
  position:relative;
  width:421px;
  height:106px;
  z-index:1;
  left: 388px;
  top: 74px;
  overflow:auto;
  color:#CEB39F;
  font-size:12px;
    font-family:tahoma;
}
#pa_news {
  float:left;
  position:relative;
  width:288px;
  height:312px;
  z-index:2;
  right: 38px;
  top: 247px;
  overflow:auto;
    color:#CEB39F;
  font-size:12px;
    font-family:tahoma;
}
#pa_staff {
  float:left;
  position:relative;
  width:329px;
  height:208px;
  z-index:3;
  left: 10px;
  top: 275px;
  overflow:auto;
    color:#CEB39F;
  font-size:12px;
    font-family:tahoma;
}

#pa_membre {
  float:left;
  position:relative;
  width:213px;
  height:218px;
  z-index:3;
  left: 457px;
  top: 93px;
  overflow:auto;
      color:#CEB39F;
  font-size:12px;
    font-family:tahoma;
}

#pa_teams {
  float:left;
  position:relative;
  width:393px;
  height:189px;
  z-index:3;
  left: 442px;
  top: 373px;
  overflow:auto;
      color:#CEB39F;
  font-size:12px;
    font-family:tahoma;
}
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 13:53

Merci beaucoup, j'y suis. (Sur mac c'est cmd + v ) x)
Bref, donc tu voit sur la PA du forum ça bouge... Donc je voudrais faire pour moi :
Mon Staff : Le texte & les images qui tourne horizontalement.
Mes news : Comme le Staff sur la PA du forum.
Mes partenaires, team & membre en 0r : Bah, rien.. x)

Tu pourrais? =D
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 14:32

En gros le staff un truc comme ça : ? Ou un défilement horizontal du genre :
Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf
?

Ou alors les news comme ça : ?
Si pour les news c'est comme ça, je ne te le conseille pas, c'est quand même plus long à faire que faire simplement défiler du texte Neutral


Dernière édition par Ella' le Jeu 09 Aoû 2012, 14:43, édité 1 fois (Raison : Arg ! Oublié de fermer une balise et ... C'est le drame ! ^^")
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 14:36

Ella' a écrit:
En gros le staff un truc comme ça : ? Ou un défilement horizontal du genre :
Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf Un tableau pour une 'tite Pierre ? :) Nonewsf
?

Ou alors les news comme ça : ?
Si pour les news c'est comme ça, je ne te le conseille pas, c'est quand même plus long à faire que faire simplement défiler du texte Neutral


Pour le staff le défilement. Oui pour les news c'est ça mais juste en plus gros. =D
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyJeu 09 Aoû 2012, 15:00

• Pour le staff : Il faut utiliser la balise marquee

NOM DU MEMBRE 1 NOM DU MEMBRE 2 NOM DU MEMBRE 3


Code:
<marquee class="Scroller" scrollamount="3" direction="left" onmouseover="this.stop()" onmouseout="this.start()" style="height: 100px; text-align:center;"><img src="LIEN DE TON IMAGE" alt="NOM DU MEMBRE 1"/> <img src="LIEN DE TON IMAGE" alt="NOM DU MEMBRE 2 "/><img src="LIEN DE TON IMAGE" alt="NOM DU MEMBRE 3"/>
</marquee>

Si tu veux augmenter la vitesse, ou la diminuer, change le scrollamount="3" par scrollamount="6" ou scrollamount="1" .... En fonction de la vitesse souhaitée .

• Les news : Plus gros quoi, le texte ? L'image ?
Si c'est juste la taille du block ça pourra le faire, mais si tu as des choses pus complexes à modifier ça va devenir compliqué car je ne sais pas si on ne va pas devoir modifier des choses que ni toi ni moi ne comprenons ( enfin je le suppose pour toi ^^"), du genre :
Code:
/*!
 * jQuery JavaScript Library v1.4.2
 * http://jquery.com/
 *
 * Copyright 2010, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2010, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Sat Feb 13 22:33:48 2010 -0500
 */
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return a}return i?
e(a[0],b):w}function J(){return(new Date).getTime()}function Y(){return false}function Z(){return true}function na(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function oa(a){var b,d=[],f=[],e=arguments,j,i,o,k,n,r;i=c.data(this,"events");if(!(a.liveFired===this||!i||!i.live||a.button&&a.type==="click")){a.liveFired=this;var u=i.live.slice(0);for(k=0;k<u.length;k++){i=u[k];i.origType.replace(O,"")===a.type?f.push(i.selector):u.splice(k--,1)}j=c(a.target).closest(f,a.currentTarget);n=0;for(r=
j.length;n<r;n++)for(k=0;k<u.length;k++){i=u[k];if(j[n].selector===i.selector){o=j[n].elem;f=null;if(i.preType===string"&&a[0].length<512&&b===s&&!ta.test(a[0])&&(c.support.checkClone||!ua.test(a[0]))){e=
true;if(j=c.fragments[a[0]])if(j!==1)f=j}if(!f){f=b.createDocumentFragment();c.clean(a,b,f,d)}if(e)c.fragments[a[0]]=j?f:1;return{fragment:f,cacheable:e}}function K(a,b){var d={};c.each(va.concat.apply([],va.slice(0,b)),function(){d[this]=a});return d}function wa(a){return"scrollTo"in a&&a.document?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var c=function(a,b){return new c.fn.init(a,b)},Ra=A.jQuery,Sa=A.$,s=A.document,T,Ta=/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,Ua=/^.[^:#\[\.,]*$/,Va=/\S/,
Wa=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Xa=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,P=navigator.userAgent,xa=false,Q=[],L,$=Object.prototype.toString,aa=Object.prototype.hasOwnProperty,ba=Array.prototype.push,R=Array.prototype.slice,ya=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var d,f;if(!a)retutor=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a);return c.merge(this,
a)}else return!b||b.jquery?(b||T).find(a):c(b).find(a);else if(c.isFunction(a))return T.ready(a);if(a.selector!==w){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2",length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){var f=c();c.isArray(a)?ba.apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;if(b===
"find")f.selector=this.selector+(this.selector?" ":"")+d;else if(b)f.selector=this.selector+"."+b+"("+d+")";return f},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this,
function(b,d){return a.call(b,d,b)}))},end:function(){return this.prevObject||c(null)},push:ba,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,d=arguments.length,f=false,e,j,i,o;if(typeof a==="boolean"){f=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(d===b){a=this;--b}for(;b<d;b++)if((e=arguments[b])!=null)for(j in e){i=a[j];o=e[j];if(a!==o)if(f&&o&&(c.isPlainObject(o)||c.isArray(o))){i=i&&(c.isPlainObject(i)||
c.isArray(iL,false);A.addEventListener("load",c.ready,false)}else if(s.attachEvent){s.attachEvent("onreadystatechange",L);A.attachEvent("onload",c.ready);var a=false;try{a=A.frameElement==null}catch(b){}s.documentElement.doScroll&&a&&ma()}}},isFunction:function(a){return $.call(a)==="[object Function]"},isArray:function(a){return $.call(a)==="[object Array]"},isPlainObject:function(a){if(!a||$.call(a)!=="[object Object]"||a.nodeType||a.setInterval)return false;if(a.constructor&&!aa.call(a,"constructor")&&!aa.call(a.constructor.prototype,
"isPrototypeOf"))return false;var b;for(b in a);return b===w||aa.call(a,b)},isEmptyObject:function(a){for(var b in a)return false;return true},error:function(a){throw a;},parseJSON:function(a){if(typeof a!=="string"||!a)return null;a=c.trim(a);if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return A.JSON&&A.JSON.parse?A.JSON.parse(a):(new Function("return "+
a))();else c.error("Invalid JSON: "+a)},noop:function(){},globalEval:function(a){if(a&&Va.test(a)){var b=s.getElementsByTagName("head")[0]||s.documentElement,d=s.createElement("script");d.type="text/javascript";if(c.support.scriptEval)d.appendChild(s.createTextNode(a));else d.text=a;b.insertBefore(d,b.firstChild);b.removeChild(d)}},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){var f,e=0,j=a.length,i=j===w||c.isFunction(a);if(d)if(i)for(f in a){
a)return d;return-1},merge:function(a,b){var d=a.length,f=0;if(typeof b.length==="number")for(var e=b.length;f<e;f++)a[d++]=b[f];else for(;b[f]!==w;)a[d++]=b[f++];a.length=d;return a},grep:function(a,b,d){for(var f=[],e=0,j=a.length;e<j;e++)!d!==!b(a[e],e)&&f.push(a[e]);return f},map:function(a,b,d){for(var f=[],e,j=0,i=a.length;j<i;j++){e=b(a[j],j,d);if(e!=null)f[f.length]=e}return f.concat.apply([],f)},guid:1,proxy:function(a,b,d){if(arguments.length===2)if(typeof b==="string"){d=a;a=d[b];b=w}else if(b&&
!c.isFunction(b)){d=b;b=w}if(!b&&a)b=function(){return a.apply(d||this,arguments)};if(a)b.guid=a.guid=a.guid||b.guid||c.guid++;return b},uaMatch:function(a){a=a.toLowerCase();a=/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||!/compatible/.test(a)&&/(mozilla)(?:.*? rv:([\w.]+))?/.exec(a)||[];return{browser:a[1]||"",version:a[2]||"0"}},browser:{}});P=c.uaMatch(P);if(P.browser){c.browser[P.browser]=true;c.browser.version=P.version}if(c.browser.webkit)c.browser.safari=
true;if(ya)c.inArray=function(a,b){return ya.call(b,a)};T=c(s);if(s.addEventListener)L=function(){s.removeEventListener("DOMContentLoaded",L,false);c.ready()};else if(s.attachEvent)L=function(){if(s.readyState==="complete"){s.detachEvent("onreadystatechange",L);c.ready()}};(function(){c.support={};var a=s.documentElement,b=s.createElement("script"),d=s.createElement("div"),f="script"+J();d.style.display="none";d.innerHTML="  <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
var e=d.getElementsByTagName("*"),j=d.getElementsByTagName("a")[0];if(!(!e||!e.length||!j)){c.support={leadingWhitespace:d.firstChild.nodeType===3,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/red/.test(j.getAttribute("style")),hrefNormalized:j.getAttribute("href")==="/a",opacity:/^0.55$/.test(j.style.opacity),cssFloat:!!j.style.cssFloat,checkOn:d.getElementsByTagName("input")[0].value==="on",optSelected:s.createElement("select").appendChild(s.createElement("option")).selected,
s.createElement("div");k="on"+k;var r=k in n;if(!r){n.setAttribute(k,"return;");r=typeof n[k]==="function"}return r};c.support.submitBubbles=a("submit");c.support.changeBubbles=a("change");a=b=d=e=j=null}})();c.props={"for":"htmlFor","class":"className",readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",colspan:"colSpan",tabindex:"tabIndex",usemap:"useMap",frameborder:"frameBorder"};var G="jQuery"+J(),Ya=0,za={};c.extend({cache:{},expando:G,noData:{embed:true,object:true,
applet:true},data:function(a,b,d){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var f=a[G],e=c.cache;if(!f&&typeof b==="string"&&d===w)return null;f||(f=++Ya);if(typeof b==="object"){a[G]=f;e[f]=c.extend(true,{},b)}else if(!e[f]){a[G]=f;e[f]={}}a=e[f];if(d!==w)a[b]=d;return typeof b==="string"?a[b]:a}},removeData:function(a,b){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var d=a[G],f=c.cache,e=f[d];if(b){if(e){delete e[b];c.isEmptyObject(e)&&c.removeData(a)}}else{if(c.support.deleteExpando)delete a[c.expando];
else a.removeAttribute&&a.removeAttribute(c.expando);delete f[d]}}}});c.fn.extend({data:function(a,b){if(typeof a==="undefined"&&this.length)return c.data(this[0]);else if(typeof a==="object")return this.each(function(){c.data(this,a)});var d=a.split(".");d[1]=d[1]?"."+d[1]:"";if(b===w){var f=this.triggerHandler("getData"+d[1]+"!",[d[0]]);if(f===w&&this.length)f=c.data(this[0],a);return f===w&&d[1]?this.data(d[0]):f}else return this.trigger("setData"+d[1]+"!",[d[0],b]).each(function(){c.data(this,
a,b)})},removeData:function(a){return this.each(function(){c.removeData(this,a)})}});c.extend({queue:function(a,b,d){if(a){b=(b||"fx")+"queue";var f=c.data(a,b);if(!d)return f||[];if(!f||c.isArray(d))f=c.data(a,b,c.makeArray(d));else f.push(d);return f}},dequeue:function(a,b){b=b||"fx";var d=c.queue(a,b),f=d.shift();if(f==="inprogress")f=d.shift();if(f){b==="fx"&&d.unshift("inprogress");f.call(a,function(){c.dequeue(a,b)})}}});c.fn.extend({queue:function(a,b){if(typeof a!=="string"){b=a;a="fx"}if(b===
w)return c.queue(this[0],a);return this.each(function(){var d=c.queue(this,a,b);a==="fx"&&d[0]!=="inprogress"&&c.dequeue(this,a)})},dequeue:function(a){return this.each(function(){c.dequeue(this,a)})},delay:function(a,b){a=c.fx?c.fx.speeds[a]||a:a;b=b||"fx";return this.queue(b,function(){var d=this;setTimeout(function(){c.dequeue(d,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])}});var Aa=/[\n\t]/g,ca=/\s+/,Za=/\r/g,$a=/href|src|style/,ab=/(button|input)/i,bb=/(button|input|object|select|textarea)/i,
cb=/^(a|area)$/i,Ba=/radio|checkbox/;c.fn.extend({attr:function(a,b){return X(this,a,b,true,c.attr)},removeAttr:function(a){return this.each(function(){c.attr(this,a,"");this.nodeType===1&&this.removeAttribute(a)})},addClass:function(a){if(c.isFunction(a))return this.each(function(n){var r=c(this);r.addClass(a.call(this,n,r.attr("class")))});if(a&&typeof a==="string")for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1)if(e.className){for(var j=" "+e.className+" ",
i=e.className,o=0,k=b.length;o<k;o++)if(j.indexOf(" "+b[o]+" ")<0)i+=" "+b[o];e.className=c.trim(i)}else e.className=a}return this},removeClass:function(a){if(c.isFunction(a))return this.each(function(k){var n=c(this);n.removeClass(a.call(this,k,n.attr("class")))});if(a&&typeof a==="string"||a===w)for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1&&e.className)if(a){for(var j=(" "+e.className+" ").replace(Aa," "),i=0,o=b.length;i<o;i++)j=j.replace(" "+b[i]+" ",
" ");e.className=c.trim(j)}else e.className=""}return this},toggleClass:function(a,b){var d=typeof a,f=typeof b==="boolean";if(c.isFunction(a))return this.each(function(e){var j=c(this);j.toggleClass(a.call(this,e,j.attr("class"),b),b)});return this.each(function(){if(d==="string")for(var e,j=0,i=c(this),o=b,k=a.split(ca);e=k[j++];){o=f?o:!i.hasClass(e);i[o?"addClass":"removeClass"](e)}else if(d==="undefined"||d==="boolean"){this.className&&c.data(this,"__className__",this.className);this.className=
this.className||a===false?"":c.data(this,"__className__")||""}})},hasClass:function(a){a=" "+a+" ";for(var b=0,d=this.length;b<d;b++)if((" "+this[b].className+" ").replace(Aa," ").indexOf(a)>-1)return true;return false},val:function(a){if(a===w){var b=this[0];if(b){if(c.nodeName(b,"option"))return(b.attributes.value||{}).specified?b.value:b.text;if(c.nodeName(b,"select")){var d=b.selectedIndex,f=[],e=b.options;b=b.type==="select-one";if(d<0)return null;var j=b?d:0;for(d=b?d+1:e.length;j<d;j++){var i=
e[j];if(i.selected){a=c(i).val();if(b)return a;f.push(a)}}return f}if(Ba.test(b.type)&&!c.support.checkOn)return b.getAttribute("value")===null?"on":b.value;return(b.value||"").replace(Za,"")}return w}var o=c.isFunction(a);return this.each(function(k){var n=c(this),r=a;if(this.nodeType===1){if(o)r=a.call(this,k,n.val());if(typeof r==="number")r+="";if(c.isArray(r)&&Ba.test(this.type))this.checked=c.inArray(n.val(),r)>=0;else if(c.nodeName(this,"select")){var u=c.makeArray(r);c("option",this).each(function(){this.selected=
c.inArray(c(this).val(),u)>=0});if(!u.length)this.selectedIndex=-1}else this.value=r}})}});c.extend({attrFn:{val:true,css:true,html:true,text:true,data:true,width:true,height:true,offset:true},attr:function(a,b,d,f){if(!a||a.nodeType===3||a.nodeType===8)return w;if(f&&b in c.attrFn)return c(a)[b](d);f=a.nodeType!==1||!c.isXMLDoc(a);var e=d!==w;b=f&&c.props[b]||b;if(a.nodeType===1){var j=$a.test(b);if(b in a&&f&&!j){if(e){b==="type"&&ab.test(a.nodeName)&&a.parentNode&&c.error("type property can't be changed");
a[b]=d}if(c.nodeName(a,"form")&&a.getAttributeNode(b))return a.getAttributeNode(b).nodeValue;if(b==="tabIndex")return(b=a.getAttributeNode("tabIndex"))&&b.specified?b.value:bb.test(a.nodeName)||cb.test(a.nodeName)&&a.href?0:w;return a[b]}if(!c.support.style&&f&&b==="style"){if(e)a.style.cssText=""+d;return a.style.cssText}e&&a.setAttribute(b,""+d);a=!c.support.hrefNormalized&&f&&j?a.getAttribute(b,2):a.getAttribute(b);return a===null?w:a}return c.style(a,b,d)}});var O=/\.(.*)$/,db=function(a){return a.replace(/[^\w\s\.\|`]/g,
function(b){return"\\"+b})};c.event={add:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){if(a.setInterval&&a!==A&&!a.frameElement)a=A;var e,j;if(d.handler){e=d;d=e.handler}if(!d.guid)d.guid=c.guid++;if(j=c.data(a)){var i=j.events=j.events||{},o=j.handle;if(!o)j.handle=o=function(){return typeof c!=="undefined"&&!c.event.triggered?c.event.handle.apply(o.elem,arguments):w};o.elem=a;b=b.split(" ");for(var k,n=0,r;k=b[n++];){j=e?c.extend({},e):{handler:d,data:f};if(k.indexOf(".")>-1){r=k.split(".");
k=r.shift();j.namespace=r.slice(0).sort().join(".")}else{r=[];j.namespace=""}j.type=k;j.guid=d.guid;var u=i[k],z=c.event.special[k]||{};if(!u){u=i[k]=[];if(!z.setup||z.setup.call(a,f,r,o)===false)if(a.addEventListener)a.addEventListener(k,o,false);else a.attachEvent&&a.attachEvent("on"+k,o)}if(z.add){z.add.call(a,j);if(!j.handler.guid)j.handler.guid=d.guid}u.push(j);c.event.global[k]=true}a=null}}},global:{},remove:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){var e,j=0,i,o,k,n,r,u,z=c.data(a),
C=z&&z.events;if(z&&C){if(b&&b.type){d=b.handler;b=b.type}if(!b||typeof b==="string"&&b.charAt(0)==="."){b=b||"";for(e in C)c.event.remove(a,e+b)}else{for(b=b.split(" ");e=b[j++];){n=e;i=e.indexOf(".")<0;o=[];if(!i){o=e.split(".");e=o.shift();k=new RegExp("(^|\\.)"+c.map(o.slice(0).sort(),db).join("\\.(?:.*\\.)?")+"(\\.|$)")}if(r=C[e])if(d){n=c.event.special[e]||{};for(B=f||0;B<r.length;B++){u=r[B];if(d.guid===u.guid){if(i||k.test(u.namespace)){f==null&&r.splice(B--,1);n.remove&&n.remove.call(a,u)}if(f!=
null)break}}if(r.length===0||f!=null&&r.length===1){if(!n.teardown||n.teardown.call(a,o)===false)Ca(a,e,z.handle);delete C[e]}}else for(var B=0;B<r.length;B++){u=r[B];if(i||k.test(u.namespace)){c.event.remove(a,n,u.handler,B);r.splice(B--,1)}}}if(c.isEmptyObject(C)){if(b=z.handle)b.elem=null;delete z.events;delete z.handle;c.isEmptyObject(z)&&c.removeData(a)}}}}},trigger:function(a,b,d,f){var e=a.type||a;if(!f){a=typeof a==="object"?a[G]?a:c.extend(c.Event(e),a):c.Event(e);if(e.indexOf("!")>=0){a.type=
e=e.slice(0,-1);a.exclusive=true}if(!d){a.stopPropagation();c.event.global[e]&&c.each(c.cache,function(){this.events&&this.events[e]&&c.event.trigger(a,b,this.handle.elem)})}if(!d||d.nodeType===3||d.nodeType===8)return w;a.result=w;a.target=d;b=c.makeArray(b);b.unshift(a)}a.currentTarget=d;(f=c.data(d,"handle"))&&f.apply(d,b);f=d.parentNode||d.ownerDocument;try{if(!(d&&d.nodeName&&c.noData[d.nodeName.toLowerCase()]))if(d["on"+e]&&d["on"+e].apply(d,b)===false)a.result=false}catch(j){}if(!a.isPropagationStopped()&&
f)c.event.trigger(a,b,f,true);else if(!a.isDefaultPrevented()){f=a.target;var i,o=c.nodeName(f,"a")&&e==="click",k=c.event.special[e]||{};if((!k._default||k._default.call(d,a)===false)&&!o&&!(f&&f.nodeName&&c.noData[f.nodeName.toLowerCase()])){try{if(f[e]){if(i=f["on"+e])f["on"+e]=null;c.event.triggered=true;f[e]()}}catch(n){}if(i)f["on"+e]=i;c.event.triggered=false}}},handle:function(a){var b,d,f,e;a=arguments[0]=c.event.fix(a||A.event);a.currentTarget=this;b=a.type.indexOf(".")<0&&!a.exclusive;
if(!b){d=a.type.split(".");a.type=d.shift();f=new RegExp("(^|\\.)"+d.slice(0).sort().join("\\.(?:.*\\.)?")+"(\\.|$)")}e=c.data(this,"events");d=e[a.type];if(e&&d){d=d.slice(0);e=0;for(var j=d.length;e<j;e++){var i=d[e];if(b||f.test(i.namespace)){a.handler=i.handler;a.data=i.data;a.handleObj=i;i=i.handler.apply(this,arguments);if(i!==w){a.result=i;if(i===false){a.preventDefault();a.stopPropagation()}}if(a.isImmediatePropagationStopped())break}}}return a.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
fix:function(a){if(a[G])return a;var b=a;a=c.Event(b);for(var d=this.props.length,f;d;){f=this.props[--d];a[f]=b[f]}if(!a.target)a.target=a.srcElement||s;if(a.target.nodeType===3)a.target=a.target.parentNode;if(!a.relatedTarget&&a.fromElement)a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;if(a.pageX==null&&a.clientX!=null){b=s.documentElement;d=s.body;a.pageX=a.clientX+(b&&b.scrollLeft||d&&d.scrollLeft||0)-(b&&b.clientLeft||d&&d.clientLeft||0);a.pageY=a.clientY+(b&&b.scrollTop||
d&&d.scrollTop||0)-(b&&b.clientTop||d&&d.clientTop||0)}if(!a.which&&(a.charCode||a.charCode===0?a.charCode:a.keyCode))a.which=a.charCode||a.keyCode;if(!a.metaKey&&a.ctrlKey)a.metaKey=a.ctrlKey;if(!a.which&&a.button!==w)a.which=a.button&1?1:a.button&2?3:a.button&4?2:0;return a},guid:1E8,proxy:c.proxy,special:{ready:{setup:c.bindReady,teardown:c.noop},live:{add:function(a){c.event.add(this,a.origType,c.extend({},a,{handler:oa}))},remove:function(a){var b=true,d=a.origType.replace(O,"");c.each(c.data(this,
"events").live||[],function(){if(d===this.origType.replace(O,""))return b=false});b&&c.event.remove(this,a.origType,oa)}},beforeunload:{setup:function(a,b,d){if(this.setInterval)this.onbeforeunload=d;return false},teardown:function(a,b){if(this.onbeforeunload===b)this.onbeforeunload=null}}}};var Ca=s.removeEventListener?function(a,b,d){a.removeEventListener(b,d,false)}:function(a,b,d){a.detachEvent("on"+b,d)};c.Event=function(a){if(!this.preventDefault)return new c.Event(a);if(a&&a.type){this.originalEvent=
a;this.type=a.type}else this.type=a;this.timeStamp=J();this[G]=true};c.Event.prototype={preventDefault:function(){this.isDefaultPrevented=Z;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},stopPropagation:function(){this.isPropagationStopped=Z;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=Z;this.stopPropagation()},isDefaultPrevented:Y,isPropagationStopped:Y,
isImmediatePropagationStopped:Y};var Da=function(a){var b=a.relatedTarget;try{for(;b&&b!==this;)b=b.parentNode;if(b!==this){a.type=a.data;c.event.handle.apply(this,arguments)}}catch(d){}},Ea=function(a){a.type=a.data;c.event.handle.apply(this,arguments)};c.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){c.event.special[a]={setup:function(d){c.event.add(this,b,d&&d.selector?Ea:Da,a)},teardown:function(d){c.event.remove(this,b,d&&d.selector?Ea:Da)}}});if(!c.support.submitBubbles)c.event.special.submit=
{setup:function(){if(this.nodeName.toLowerCase()!=="form"){c.event.add(this,"click.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="submit"||d==="image")&&c(b).closest("form").length)return na("submit",this,arguments)});c.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="text"||d==="password")&&c(b).closest("form").length&&a.keyCode===13)return na("submit",this,arguments)})}else return false},teardown:function(){c.event.remove(this,".specialSubmit")}};
if(!c.support.changeBubbles){var da=/textarea|input|select/i,ea,Fa=function(a){var b=a.type,d=a.value;if(b==="radio"||b==="checkbox")d=a.checked;else if(b==="select-multiple")d=a.selectedIndex>-1?c.map(a.options,function(f){return f.selected}).join("-"):"";else if(a.nodeName.toLowerCase()==="select")d=a.selectedIndex;return d},fa=function(a,b){var d=a.target,f,e;if(!(!da.test(d.nodeName)||d.readOnly)){f=c.data(d,"_change_data");e=Fa(d);if(a.type!=="focusout"||d.type!=="radio")c.data(d,"_change_data",
e);if(!(f===w||e===f))if(f!=null||e){a.type="change";return c.event.trigger(a,b,d)}}};c.event.special.change={filters:{focusout:fa,click:function(a){var b=a.target,d=b.type;if(d==="radio"||d==="checkbox"||b.nodeName.toLowerCase()==="select")return fa.call(this,a)},keydown:function(a){var b=a.target,d=b.type;if(a.keyCode===13&&b.nodeName.toLowerCase()!=="textarea"||a.keyCode===32&&(d==="checkbox"||d==="radio")||d==="select-multiple")return fa.call(this,a)},beforeactivate:function(a){a=a.target;c.data(a,
"_change_data",Fa(a))}},setup:function(){if(this.type==="file")return false;for(var a in ea)c.event.add(this,a+".specialChange",ea[a]);return da.test(this.nodeName)},teardown:function(){c.event.remove(this,".specialChange");return da.test(this.nodeName)}};ea=c.event.special.change.filters}s.addEventListener&&c.each({focus:"focusin",blur:"focusout"},function(a,b){function d(f){f=c.event.fix(f);f.type=b;return c.event.handle.call(this,f)}c.event.special[b]={setup:function(){this.addEventListener(a,
d,true)},teardown:function(){this.removeEventListener(a,d,true)}}});c.each(["bind","one"],function(a,b){c.fn[b]=function(d,f,e){if(typeof d==="object"){for(var j in d)this[b](j,f,d[j],e);return this}if(c.isFunction(f)){e=f;f=w}var i=b==="one"?c.proxy(e,function(k){c(this).unbind(k,i);return e.apply(this,arguments)}):e;if(d==="unload"&&b!=="one")this.one(d,f,e);else{j=0;for(var o=this.length;j<o;j++)c.event.add(this[j],d,i,f)}return this}});c.fn.extend({unbind:function(a,b){if(typeof a==="object"&&
!a.preventDefault)for(var d in a)this.unbind(d,a[d]);else{d=0;for(var f=this.length;d<f;d++)c.event.remove(this[d],a,b)}return this},delegate:function(a,b,d,f){return this.live(b,d,f,a)},undelegate:function(a,b,d){return arguments.length===0?this.unbind("live"):this.die(b,null,d,a)},trigger:function(a,b){return this.each(function(){c.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0]){a=c.Event(a);a.preventDefault();a.stopPropagation();c.event.trigger(a,b,this[0]);return a.result}},
toggle:function(a){for(var b=arguments,d=1;d<b.length;)c.proxy(a,b[d++]);return this.click(c.proxy(a,function(f){var e=(c.data(this,"lastToggle"+a.guid)||0)%d;c.data(this,"lastToggle"+a.guid,e+1);f.preventDefault();return b[e].apply(this,arguments)||false}))},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var Ga={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};c.each(["live","die"],function(a,b){c.fn[b]=function(d,f,e,j){var i,o=0,k,n,r=j||this.selector,
u=j?this:c(this.context);if(c.isFunction(f)){e=f;f=w}for(d=(d||"").split(" ");(i=d[o++])!=null;){j=O.exec(i);k="";if(j){k=j[0];i=i.replace(O,"")}if(i==="hover")d.push("mouseenter"+k,"mouseleave"+k);else{n=i;if(i==="focus"||i==="blur"){d.push(Ga[i]+k);i+=k}else i=(Ga[i]||i)+k;b==="live"?u.each(function(){c.event.add(this,pa(i,r),C=Bb.exec(u),B=z.cur(true)||0;if(C){u=parseFloat(C[2]);var E=C[3]||"px";if(E!=="px"){k.style[r]=(u||1)+E;B=(u||1)/z.cur(true)*B;k.style[r]=B+E}if(C[1])u=(C[1]==="-="?-1:1)*u+B;z.custom(B,u,E)}else z.custom(B,u,"")}});return true})},stop:function(a,b){var d=c.timers;a&&this.queue([]);
this.each(function(){for(var f=d.length-1;f>=0;f--)if(d[f].elem===this){b&&d[f](true);d.splice(f,1)}});b||this.dequeue();return this}});c.each({slideDown:K("show",1),slideUp:K("hide",1),slideToggle:K("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(a,b){c.fn[a]=function(d,f){return this.animate(b,d,f)}});c.extend({speed:function(a,b,d){var f=a&&typeof a==="object"?a:{complete:d||!d&&b||c.isFunction(a)&&a,duration:a,easing:d&&b||b&&!c.isFunction(b)&&b};f.duration=c.fx.off?0:typeof f.duration===
"number"?f.duration:c.fx.speeds[f.duration]||c.fx.speeds._default;f.old=f.complete;f.complete=function(){f.queue!==false&&c(this).dequeue();c.isFunction(f.old)&&f.old.call(this)};return f},easing:{linear:function(a,b,d,f){return d+f*a},swing:function(a,b,d,f){return(-Math.cos(a*Math.PI)/2+0.5)*f+d}},timers:[],fx:function(a,b,d){this.options=b;this.elem=a;this.prop=d;if(!b.orig)b.orig={}}});c.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this);(c.fx.step[this.prop]||
c.fx.step._default)(this);if((this.prop==="height"||this.prop==="width")&&this.elem.style)this.elem.style.display="block"},cur:function(a){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];return(a=parseFloat(c.css(this.elem,this.prop,a)))&&a>-10000?a:parseFloat(c.curCSS(this.elem,this.prop))||0},custom:function(a,b,d){function f(j){return e.step(j)}this.startTime=J();this.start=a;this.end=b;this.unit=d||this.unit||"px";this.now=this.start;
this.pos=this.state=0;var e=this;f.elem=this.elem;if(f()&&c.timers.push(f)&&!W)W=setInterval(c.fx.tick,13)},show:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.show=true;this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur());
e&&e.document?e.document.compatMode==="CSS1Compat"&&e.document.documentElement["client"+b]||e.document.body["client"+b]:e.nodeType===9?Math.max(e.documentElement["client"+b],e.body["scroll"+b],e.documentElement["scroll"+b],e.body["offset"+b],e.documentElement["offset"+b]):f===w?c.css(e,d):this.css(d,typeof f==="string"?f:f+"px")}});A.jQuery=A.$=c})(window);
(j'ai coupé des bouts sinon "La longueur de votre message dépasse la limite autorisée." xD

Enfin si tu veux vraiment, je fouillerai voir si on peut faire ça via le CSS mais ça prendra du temps (et je t'avoue que là sur le coup ça ne me tente pas trop) :/
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyVen 10 Aoû 2012, 14:07

Euh... Je le mais ou ce code ? x)
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyVen 10 Aoû 2012, 18:35

Ah non tu le mets nulle part, mais c'est pour te montrer la complexité du code, que je suis incapable de modifier. C'était pour te montrer que trop modifier notre truc "coulissant" pour le staff m'est impossible ^^

Par contre pour des news sans trop modifier tu peux avoir un truc du genre ( ok, j'ai repris mes images de newsletter n_n), ya juste un changement de taille, assez simple à faire.


C'est ça que tu souhaites ?
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptySam 11 Aoû 2012, 10:25

Ouais c'est bien comme ça. (:
Revenir en haut Aller en bas
Ella'

Ella'


Féminin
Nombre de messages : 4063
Age : 31
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyDim 12 Aoû 2012, 16:16

Oukies nickel alors. J'ai donc des explications à te faire pour que tu puisses comprendre comment ça fonctionne, et aussi savoir comment modifier tout ça sans mon aide ;)

Bon, pour faire ça, mieux vaut le faire sur une page externe, puis l'ajouter à ta PA par un moyen qui s'appelle une iframe.
Une iframe permet d'insérer une page web à l'intérieur même d'une autre page, c'est en gros comme s'il y avait un cadre contenant une autre page. C'est donc cette iframe qui va servir a afficher le contenu de tes news.

Pour mettre le code dans une page externe, je cite une explication que j'ai fait dans un autre sujet :
Ella' a écrit:
Tu vas dans ton panneau d'admin, puis dans Modules, tout en bas du menu de gauche tu auras Un tableau pour une 'tite Pierre ? :) Html HTML & JAVASCRIPT, tu cliques sur Gestion des pages HTML.

Sous Trier et Pages HTML tu verras ce bouton là : Un tableau pour une 'tite Pierre ? :) Pagehtml

Une nouvelle page se charge, tu donnes donc un titre à ta page HTML, à "Voulez-vous utiliser le haut et le bas de page de votre forum ?" tu coches "Non", puis à "Utiliser cette page en tant que page d'accueil ?" tu coches non aussi. Il me semble que les deux non sont mis par défaut.

Pour finir tu colles ton code HTML dans le grand cadre en prenant soin de bien avoir l'image suivante au dessus du cadre Un tableau pour une 'tite Pierre ? :) Act-html.

Une fois ton code collé tu cliques soit sur Un tableau pour une 'tite Pierre ? :) Prvisu si tu veux prévisualiser soit sur Un tableau pour une 'tite Pierre ? :) Validu.

Une fois validé tu reviens sur ta page Gestion des pages HTML, qui ressemblera à quelque chose du genre :
Spoiler:
Il ne te reste plus qu'à copier l'url du lien dans ta liste des pages et à le coller dans le code de l'iframe Very Happy


Donc voilà, pour l'instant je t'ai juste expliqué ce qu'était une iframe, et comment réaliser une page web via le panneau d'administration de ton forum.
Mais il faut maintenant que je te donne le code pour afficher le slider de news ( je vais l’appeler comme ça, parce que le nommer "truc" n'est pas forcément la meilleur idée ^^).

Le code est donc le suivant ( pour mon exemple de news), il n'est pas très long donc il y a moins de chances de se perdre dedans ^^

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adminbox</title>
<link rel="stylesheet" href="http://sd-2.archive-host.com/membres/up/191602539715066248/slidercss.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://sd-2.archive-host.com/membres/up/191602539715066248/styleslid.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://isolation.perso.sfr.fr/jquery.nivo.slider.pack.js" type="text/javascript"></script>

</head>

<body><div id="slider" style="width:150px;height:150px; overflow:hidden;">
         <a href="http://graphismecatlife.actifforum.com/t11030-vote-concours-design" target="_blank"><img src="http://img832.imageshack.us/img832/5593/news1concoursdesign.jpg" title="Concours Design"/></a>
         <a href="http://graphismecatlife.actifforum.com/f21-concours" target="_blank"><img src="http://img526.imageshack.us/img526/8158/news1concourstousniveau.jpg" title="Concours tous niveaux"/></a>
         <a href="http://graphismecatlife.actifforum.com/f113-smashing" target="_blank"><img src="http://img840.imageshack.us/img840/9254/news1smashing.jpg" title="Smashing"/></a>
         <a href="http://graphismecatlife.actifforum.com/f22-versus" target="_blank"><img src="http://img338.imageshack.us/img338/1442/news1duels.jpg" title="Duels"/></a>
        </div>

<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>
</body>
</html>

Déjà tu ne toucheras jamais à ce qui est entre <!DOCTYPE html PUBLIC et </head> <body> et entre </div> <script type="text/javascript"> et </html

Donc, finalement, les seules choses que tu modifieras c'est dans le code suivant :
Code:
<div id="slider" style="width:150px;height:150px; overflow:hidden;">
         <a href="http://graphismecatlife.actifforum.com/t11030-vote-concours-design" target="_blank"><img src="http://img832.imageshack.us/img832/5593/news1concoursdesign.jpg" title="Concours Design"/></a>
         <a href="http://graphismecatlife.actifforum.com/f21-concours" target="_blank"><img src="http://img526.imageshack.us/img526/8158/news1concourstousniveau.jpg" title="Concours tous niveaux"/></a>
         <a href="http://graphismecatlife.actifforum.com/f113-smashing" target="_blank"><img src="http://img840.imageshack.us/img840/9254/news1smashing.jpg" title="Smashing"/></a>
         <a href="http://graphismecatlife.actifforum.com/f22-versus" target="_blank"><img src="http://img338.imageshack.us/img338/1442/news1duels.jpg" title="Duels"/></a>
        </div>

Bon, vu comme ça, ce n'est pas forcément hyper clair, donc petite explication :

<div id="slider" style="width:150px;height:150px; overflow:hidden;"> → là dedans tu peux modifier le width et le height en fonction de la taille de tes images ( c'est la modification que j'ai faite entre mon exemple avec le staff et celui avec les news). Ne touche pas au overflow:hidden; sinon tu auras des soucis pendant son intégration dans ta PA.

• Pour chaque "page de news" tu as donc le code suivant :
<a href="https://graphismecatlife.actifforum.com/t11030-vote-concours-design" target="_blank"><img src="https://2img.net/r/ihimizer/img832/5593/news1concoursdesign.jpg" title="Concours Design"/></a>


On peut le décomposer en deux parties :

    * Le <a href="lelien.html" target="_blank"> renvoie au lien menant à la news. Si tu veux afficher des news sans lien, retire le, et n'oublie pas non plus de retirer le </a> de la fin !

    * Le <img src="liendetonimage.jpg" title="titredelanews"/> est l'élément te permettant d'afficher l'image de la news ainsi que son titre ! Tu mets le lien de ton image dans le src="ici" et n'oublie pas non plus le titre car c'est celui qui s'affichera en bas sur fond blanc ;)



Voilà, tu mets autant de
<a href="https://graphismecatlife.actifforum.com/t11030-vote-concours-design" target="_blank"><img src="https://2img.net/r/ihimizer/img832/5593/news1concoursdesign.jpg" title="Concours Design"/></a>
que tu as de news.

Fait bien attention à avoir exactement la même taille d'image de news pour ne pas tout faire buger n_n

. * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * .

Bon, ça fait déjà pas mal de choses, il restera une dernière étape pour l'intégrer dans ta PA, mais j'attends déjà que tu comprennes tout ce que je viens d'expliquer, et que tu essaies sur une page externe.

J'espère que tu comprendras tout ( hé oui je t'avais prévenu que c'était assez compliqué comme manière de faire ses news ). Hésite pas à relire plusieurs fois mon poste pour tout assimiler, et n'hésite pas non plus à faire des tests pour vraiment être sure que tu comprends. Et dit toi que au moins tu as une explication, j'ai du me débrouiller toute seule pour le comprendre Razz
Revenir en haut Aller en bas
Stone.

Stone.


Féminin
Nombre de messages : 22
Age : 25
Localisation : En France.
Logiciel de Création : Photofiltre Studio X
Date d'inscription : 06/08/2012

Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) EmptyLun 20 Aoû 2012, 15:31

D'accord... Merci beaucoup. =)
Je comprend pour l'instant. x]
Revenir en haut Aller en bas
Contenu sponsorisé





Un tableau pour une 'tite Pierre ? :) Empty
MessageSujet: Re: Un tableau pour une 'tite Pierre ? :)   Un tableau pour une 'tite Pierre ? :) Empty

Revenir en haut Aller en bas
 
Un tableau pour une 'tite Pierre ? :)
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» P'tite Galerie de Che-v-aux : )
» •oO°La tite Myu°Oo• (ton élève que tu n'aimes xD)
» La propagande des Pierre de Lune (:
» Titres de Fiches + tableau
» Faire un tableau html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphisme Cat-Life ::  :: Vieux Sujets :: Cours-
Sauter vers: