Partage
  • Partager sur Facebook
  • Partager sur Twitter

jQuery soucis de style qui se rajoute je ne sais comment

Sujet résolu
Anonyme
    7 octobre 2009 à 20:47:14

    Bonjour,

    j'ai un petit script pour faire un défilement des images avec le rajout des boutons Suivant et précédent que voici :

    (function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {
			prevId: 		'prevBtn',
			prevText: 		'Précédent',
			nextId: 		'nextBtn',	
			nextText: 		'Suivant',
			orientation:	'', //  'vertical' is optional;
			speed: 			800			
		}; 
		
		var options = $.extend(defaults, options);  
		
		return this.each(function() {  
			obj = $(this); 				
			var s = $("li", obj).length;
			var w = obj.width(); 
			var h = obj.height(); 
			var ts = s-1;
			var t = 0;
			var vertical = (options.orientation == 'vertical');
			$("ul", obj).css('width',s*w);			
			if(!vertical) $("li", obj).css('float','left');
			$(obj).before('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> - <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');		
			$("a","#"+options.prevId).hide();
			$("a","#"+options.nextId).hide();
			$("a","#"+options.nextId).click(function(){		
				animate("next");
				if (t>=ts) $(this).fadeOut();
				$("a","#"+options.prevId).fadeIn();
			});
			$("a","#"+options.prevId).click(function(){		
				animate("prev");
				if (t<=0) $(this).fadeOut();
				$("a","#"+options.nextId).fadeIn();
			});	
			function animate(dir){
				if(dir == "next"){
					t = (t>=ts) ? ts : t+1;	
				} else {
					t = (t<=0) ? 0 : t-1;
				};								
				if(!vertical) {
					p = (t*w*-1);
					$("ul",obj).animate(
						{ marginLeft: p }, 
						options.speed
					);				
				} else {
					p = (t*h*-1);
					$("ul",obj).animate(
						{ marginTop: p }, 
						options.speed
					);					
				}
			};
			if(s>1) $("a","#"+options.nextId).fadeIn();	
		});
	  
	};

})(jQuery);


    le seul problème c'est que mes boutons précédent et suivant apparaissent ainsi :
    <span id="prevBtn">
<a href="javascript:void(0);" style="overflow: visible; opacity: 0.9999; display: block;">Précédent</a>
</span>


    vous voyez le display block....

    je ne sais pas pourquoi il s'est rajouté et comment le virer...

    j'ai essayé de rajouter style="display:inline;" directement dans le jquery mais ça change rien
    j'ai essayé de rajouter une propriété css avec display:block; et il me le prend pas en compte "barré dans firebug"

    et donc quand je regarde le style associé à ce bouton avec firebug je vois apparaitre :
    element.style {
display:block;
opacity:0.9999;
overflow-x:visible;
overflow-y:visible;
}


    mais je ne sais pas d'où sort ce element.style

    c'est pourquoi je viens réclamer votre aide...

    merci d'avance pour ceux qui me lisent et s'attèlent à mon soucis
    • Partager sur Facebook
    • Partager sur Twitter
    Tillertan
      8 octobre 2009 à 12:22:10

      Fait voir ton css
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        8 octobre 2009 à 12:23:49

        le voici :

        body{
width: 99%;
background-color: #DDE3C6;
margin: 0px;
}

/*La page tout*/
.tout{
overflow: hidden;
}

.header{
width: 985px;
height: 73px;
margin: 0px 0 0 0;
padding: 0px;
}

.logo{
float: left;
width: 200px;
height: 73px;
margin: 0px;
}

.corps{
margin: 0 10px 0 210px;
padding: 0 0 5px 5px;
text-align: justify;
}

/*Le menu de gauche*/
.menu_gauche{
float: left;
width: 200px;
margin-top: 0px;
}

.top_gauche{
width: 200px;
height: 17px;
margin: 0px;
padding: 0px;
background-image: url('images_design/haut_gauche.png');
background-repeat: no-repeat;
}

.content_gauche{
width: 200px;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url('images_design/fond_gauche.png');
background-repeat: repeat-y;
}

.content_gauche p{
margin: 0px;
}

.content_gauche h3{
text-align: center;
margin: 0px;
padding: 0px;
color: #751F11;
font-size: 14px;
}

.bottom_gauche{
width: 200px;
height: 30px;
margin: 0px;
padding: 0px;
background-image: url('images_design/bas_gauche.png');
background-repeat: no-repeat;
}

#menu_accordeon{
width: 98%;
font-size: 14px;
text-align: center;
list-style-type: none;
margin: auto;
padding: 0px;
margin-top: 0px;
}

.menu_acc_titre{
display: block;
height: 20px;
width: 100%;
margin: auto;
margin-top: 5px;
background-image: url('images_design/fond_acc_titre.png');
background-repeat: no-repeat;
color: white;
font-weight: bold;
}
  
.menu_acc_titre:hover{
color: #000000;
}

.menu_acc_titre_selected{
background-image: url('images_design/fond_acc_titre_selected.png');
background-repeat: no-repeat;
}

.menu_acc_fond{
background-image: url('images_design/fond_acc_corps.png');
background-repeat: repeat-x;
}

.menu_acc_bouton{
display: block;
width: 135px;
height: 28px;
text-align: center;
font-weight: bold;
color: #ffffff;
margin: auto;
padding-top: 3px;
background-image: url('images_design/fond_acc_bouton.png');
background-repeat: no-repeat;
}

.menu_acc_bouton:hover{
color: #000000;
}

.menu_droite{
float: right;
width: 200px;
margin-top: 5px;
margin-left: 5px;
}

	/*Les blocs*/
	.bloc_pub, .bloc_classement, .bloc_calendrier{
	width: 90%;
	padding: 0px;
	margin: auto;
	margin-bottom: 0px;
	font-size: 14px;
	text-align: center;
	}
	
	.bloc_lien, .bloc_match, .bloc_sondage, .bloc_partenaire, .bloc_panier{
	width: 100%;
	margin: 0px;
	margin-bottom: 5px;
	font-size: 14px;
	padding: 0px;
	padding-bottom: 5px;
	text-align: center;
	border: 1px dashed #009966;
	background-image: url(images_design/fond_corps.png);
	background-repeat: repeat-y;
	}
	
	.bloc_match{
	height: 65px;
	}
	
	.bloc_calendrier h3, .bloc_classement h3, .bloc_partenaire h3, .bloc_pub h3, .bloc_lien h3, .bloc_sondage h3, .bloc_match h3, .bloc_panier h3{
	text-align: center;
	margin: 0px;
	padding: 0px;
	color: #751F11;
	}
	
	.bloc_sondage p, .bloc_lien p, .bloc_match p, .bloc_partenaire p, .bloc_panier p{
	margin: 0px;
	}

/* Les menus horizontaux */
/* Liste */
#menu, #menu ul{
padding: 0px;
margin: 0px;
list-style: none;
line-height: 21px; /* on définit une hauteur pour chaque élément */
text-align: center;
}

/* Ensemble du menu */
#menu{
font-family: Arial;
font-size: 12px;
/*width: 990px;*/
}

/* Contenu des listes */
#menu a{
display: block;
padding: 0px;   
color: #ffffff;
text-decoration: none;
text-align: left;
width: 186px;
margin: 0 0 0 10px;
}

/* Elements des listes */
#menu li{
float: left; 
/* pour IE qui ne reconnaît pas "transparent" */
}

a.menu_dunky{
display: block;
height: 73px;
width: 186px;
text-indent: -1000px;
background-image: url(images_design/menu_dunky.png);
background-repeat: no-repeat;
}

a:hover.menu_dunky{
display: block;
background-image: url(images_design/menu_dunky_over.png);
background-repeat: no-repeat;
}

a.menu_jsfn{
display: block;
height: 73px;
width: 186px;
text-indent: -1000px;
background-image: url(images_design/menu_jsfn.png);
background-repeat: no-repeat;
}

a:hover.menu_jsfn{
display: block;
background-image: url(images_design/menu_jsfn_over.png);
background-repeat: no-repeat;
}

a.menu_dunkers{
display: block;
height: 73px;
width: 186px;
text-indent: -1000px;
background-image: url(images_design/menu_dunkers.png);
background-repeat: no-repeat;
}

a:hover.menu_dunkers{
display: block;
background-image: url(images_design/menu_dunkers_over.png);
background-repeat: no-repeat;
}

a.menu_assos{
display: block;
height: 73px;
width: 186px;
text-indent: -1000px;
background-image: url(images_design/menu_assos.png);
background-repeat: no-repeat;
}

a:hover.menu_assos{
display: block;
background-image: url(images_design/menu_assos_over.png);
background-repeat: no-repeat;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li{
}

/* Sous-listes */
#menu li ul{
position: absolute;
width: 162px;
margin: 0 0 0 23px;
background : #000000;
left: -999em;
}

/* Éléments de sous-listes */
#menu li ul li{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #ffffff;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li{
border-top : 1px solid transparent;
}

#menu li ul ul {
margin: -22px 0 0 193px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */   
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul{
}

#menu a:hover{
color: #019F62;
}

#menu li:hover ul ul, #menu li.sfhover ul ul{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}

.pied{
width: 990px;
text-align: center;
color: #000000;
background-color: #BBC88F;
border: 1px solid black;
overflow: hidden;
margin: auto;
margin-top: 10px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

/* Les textes */
.centrer{
text-align: center;
}

.float_left{
float: left;
width: 370px;
border-right: 2px outset green;
padding-right: 5px;
margin-right: 10px;
}

.titre{
font-size: 30px;
color: #1634a3;
margin-top: 0px;
margin-bottom: 5px;
padding-left: 15px;
text-decoration: underline;
background-image: url(images_design/ballon_news.png);
background-repeat: no-repeat;
background-position: top left;
}

.date_news{
margin: 0px;
padding: 0px;
font-size: 12px;
color: #666666;
}

.nanterre{
color: #009966;
font-weight: bold;
}

.erreur{
color: red;
}

.info{
color: green;
}

/* Les titres */
h1{
margin: 5px 0 5px 0;
text-align: center;
color: #121983;
}

h2{
height: 30px;
padding-left: 30px;
font-size: 22px;
color: #677AE8;
background-image: url('images_design/titre_h2.png');
background-repeat: no-repeat;
text-decoration: underline;
}

/* Les tableaux */
.equipe{
width: 95%;
margin: auto;
text-align: center;
border-collapse: collapse;
border: 3px ridge #022D17;
}

.equipe td, th{
border: 1px dotted #E36241;
padding: 5px;
}

.equipe th{
color: #174894;
font-size: 15px;
}

.fond_1{
background-color: #ffffff;
}

.fond_2{
background-color: #D5D5D5;
}

.tab_rouge{
background-color: red;
}

.tab_noborder{
width: 100%;
border-collapse: collapse;
}

.tab_noborder td{
border: none;
}

.tab_calendrier{
width: 99%;
margin: auto;
text-align: center;
border-collapse: collapse;
margin-bottom: 0px;
}

.tab_calendrier tr{
height: 20px;
}

.tab_calendrier td{
width: 20px;
height: 20px;
empty-cells: show; /* révèle les cellules vide */
border: 1px solid #BFE5D9;
color: #121983;
font-size: 13px;
text-align: center;
background-color: #84C1A0;
}

.tab_calendrier th{
width: 20px;
padding: 0px;
border: none;
color: #c1702e;
}

.lienCalendrier{
}

.tab_calendrier .lienCalendrierJour {
font-weight: bold;
background-color: #74A713;
text-align: center;
width: 20px;
height: 20px;
}

.tab_calendrier .lienCalendrierEvenement {
font-weight: bold;
color: #ffffff;
text-align: center;
background-image: url(images_design/triangleCalendrier.png);
background-repeat: no-repeat;
background-position: top left;
width: 20px;
height: 20px;
}

.tab_eve{
width: 99%;
margin: auto;
text-align: center;
border-collapse: collapse;
margin-bottom: 0px;
}

.tab_eve tr{
height: 20px;
}

.tab_eve td{
width: 20px;
height: 20px;
empty-cells: show; /* révèle les cellules vide */
border: 1px solid #BFE5D9;
color: #121983;
font-size: 13px;
text-align: center;
}

.tab_eve th{
width: 20px;
border: none;
color: #c1702e;
}

.tab_classement{
width: 99%;
margin: auto;
text-align: center;
border-collapse: collapse;
margin-bottom: 0px;
}

.tab_classement tr{
height: 20px;
}

.tab_classement td{
height: 20px;
empty-cells: show; /* révèle les cellules vide */
border: 1px solid #BFE5D9;
color: #121983;
font-size: 13px;
text-align: center;
}

.tab_classement th{
border: none;
color: #c1702e;
}

.tab_bloc_match{
width: 100%;
}

.tab_bloc_match tr td{
border: none;
}

/* Tableau ordre classement */
.sortable_itemEquipe, .sortable_itemPartenaire{
cursor:move;
}

.order{
border-collapse: collapse;
margin: auto;
border: 3px ridge #022D17;
text-align: center;
}

table tr td{
border: 1px dotted #E36241;
}

.edit{
width: 75px;
}
.delete{
width: 75px;
}
.pt{
width: 95px;
}
.section{
width: 55px;
}
.nom{
width: 135px;
}
.adresse{
width: 245px;
}
.place{
width: 40px;
}

.mev{
width: 120px;
}
.description{
width: 210px;
}
.aide{
width: 210px;
}

/* Les liens */
a{
color: rgb(229,101,56);
text-decoration: none;
}

a:hover{
color: rgb(1,159,98);
text-decoration: none;
}

a:visited{
text-decoration: none;
}

a img{
border: none;
}

a.infoeve{
position: relative;
text-decoration: none;
}

a.infoeve span{
display: none; /* on masque l'infobulle */
}

a.infoeve:hover{
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}

a.infoeve:hover span{
display: inline; /* on affiche l'infobulle */
position: absolute;
font-weight: normal;
white-space: nowrap;
padding: 10px;
background-color: rgb(244,249,253);
border: 2px ridge black;
color: #000000;
top: 15px; /* on positionne notre infobulle */
left: -10px;
}

.smiley{
float: left;
}

/* N'est lu que par IE grâce à html */
*html body, .bloc_sondage{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images_design/fond_corps.png', sizingMethod='scale');
}

/* Formulaires */
input, textarea{
font-family: "Times New Roman", Times, serif;
}
 
input:focus, textarea:focus{
background-color: #FFFF99;
}
 
legend{
color: #0F6026;
font-weight: bold;
}
 
fieldset{
background-image: url(images_design/fond_corps.png);
background-repeat: repeat-y;
}

/* Bbcode */
.orange { color: rgb(236, 118, 0); }
.noir { color: black; }
.marron { color: maroon; }
.vertf { color: green; }
.olive { color: olive; }
.marine { color: navy; }
.violet { color: purple; }
.bleugris { color: teal; }
.argent { color: silver; }
.gris { color: rgb(100, 100, 100); }
.rouge { color: red; }
.vertc { color: lime; }
.jaune { color: yellow; }
.bleu { color: blue; }
.rose { color: fuchsia; }
.turquoise { color: aqua; }
.blanc { color: white; }

.forange { background-color: rgb(236, 118, 0); }
.fnoir { background-color: black; }
.fmarron { background-color: maroon; }
.fvertf { background-color: green; }
.folive { background-color: olive; }
.fmarine { background-color: navy; }
.fviolet { background-color: purple; }
.fbleugris { background-color: teal; }
.fargent { background-color: silver; }
.fgris { background-color: rgb(100, 100, 100); }
.frouge { background-color: red; }
.fvertc { background-color: lime; }
.fjaune { background-color: yellow; }
.fbleu { background-color: blue; }
.frose { background-color: fuchsia; }
.fturquoise { background-color: aqua; }
.fblanc { background-color: white; }

.arial { font-family: Arial, serif; }
.times { font-family: Times, serif; }
.courrier { font-family: Courier, serif; }
.impact { font-family: Impact, serif; }
.geneva { font-family: Geneva, serif; }
.optima { font-family: Optima, serif; }

.ttpetit { font-size: xx-small; }
.tpetit { font-size: x-small; }
.petit { font-size: small; }
.gros { font-size: large; }
.tgros { font-size: x-large; }
.ttgros { font-size: xx-large; }

.flot_gauche { float: left; }
.flot_droite { float: right; }
.flot_gauche, .flot_droite { margin: 1em; }

.pos_centrer { display: block; text-align: center; }
.pos_droite { display: block; text-align: right; }
.pos_gauche { display: block; text-align: left; }









#slider ul, #slider li{
	margin: 0;
	padding: 0;
	list-style: none;
}

#slider li{ 
	width: 150px;
	height: 100px;
	margin: 0 5px 0 0;
	text-align: center;
	overflow: hidden; 
}

#slider{
	width: 650px;
	height: 100px;
	margin: auto;
	overflow: hidden; 
}

span#prevBtn{
	float: left;
	font-weight: bold;
	margin: 40px 0 0 0;
}

span#nextBtn{
	float: right;
	font-weight: bold;
	margin: 40px 0 0 0;
}
        • Partager sur Facebook
        • Partager sur Twitter
        Tillertan
          8 octobre 2009 à 12:41:31

          1. Ton truc apparait-il dans le #menu (ou un enfant) ?
          2. a:hover.menu_dunky, il me semble que c'est l'inverse: a.menu_dunky:hover (Pareil pour tout les hovers)
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            8 octobre 2009 à 12:44:31

            non mon truc apparait dans

            .corps

            mais dans firebug je vois bien que le style element.style provient de javascript et non d'une feuille de style...

            j'ai d'autres script JS j'ai essayé en les enlevants ça ne change rien donc ça ne provient pas de mes autres scripts
            • Partager sur Facebook
            • Partager sur Twitter
            Tillertan
              8 octobre 2009 à 12:47:24

              Dans ce cas, la seule possibilité que je vois, c'est fadeIn/Out de JQuery qui met en block
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                8 octobre 2009 à 12:50:21

                il y a pas moyen de repasser en inline si c'est ça ?
                • Partager sur Facebook
                • Partager sur Twitter
                birdy42
                  8 octobre 2009 à 13:06:57

                  à moins de modifier le code de jquery toi-même ^^
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Tillertan
                    8 octobre 2009 à 13:34:58

                    Citation


                    Some jQuery animations convert stuff to block-level. If you want to avoid that effect, you can apply a callback that converts back to inline.

                    $(expr).fadeIn(500, function() { $(this).css("display", "inline") })

                    -- Yehuda

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Anonyme

                    jQuery soucis de style qui se rajoute je ne sais comment

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur ●
                    • Markdown