Sujet Précédent Sujet Suivant

Problème de meta ou de script

Fermé
hockey07 Messages postés 16 Date d'inscription jeudi 24 mars 2011 Statut Membre Dernière intervention 22 juillet 2012 - 6 avril 2011 à 17:01
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 - 8 avril 2011 à 01:52
Bonjour,

Je sais que ce que je vous demande est assez GROS comme problème mais le voici tout de même.
J'ai créé une page avec différentes données jquery.

Celle-ci, dont je ne retrouve pas le nom mais qui est utilisé sur ce site: http://www.concepteurmultimedia.ch/~dlimat/

Et celle-ci: https://ryanseddon.com/css/accordian-effect-using-css/




Le problème est, lorsque j'insère une donnée, le code ne sait pas où piocher l'information, ce qui fait que lorsque j'aimerais avoir un "lien" du DEUXIEME JQUERY, il va chercher dans le premier...
ps: j'ai remarqué que les deux utilisaient une coordonnée "#section". Y aurait-il un lien? Peut-être que je pourrais utiliser un code similaire à "section" si vous en connaissez un?

Voici mon code HTML, suivi de mon CSS: 

<!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=ISO-8859-1" />
<link href="photos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
	hs.graphicsDir = 'graphics/';
	hs.wrapperClassName = 'wide-border';
</script>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="The CSS Ninja" />
	<meta name="keywords" content="Css, CSS Ninja, The CSS Ninja, Javascript, Web, xhtml, html, browsers, javascript, jquery, cascading style sheets, extensible markup language" />
	<meta name="description" content="CSS based accordion effect that uses the target pseudo class and webkit transitions to animate the showing and hiding" />
	<meta name="robots" content="all" />
	<meta name="copyright" content="The CSS Ninja" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">


<title>Page photos</title>

</head>

<body>
	<div id="all">
		 
		 <ul id="menu">
    	 	<li><a href="#home">HOME</a></li>
         	<li><a href="#presentation">VAUD</a></li>
         	<li><a href="#cv">GENEVE</a></li>
         	<li><a href="#travaux">NEUCHATEL</a></li>
         	<li><a href="#contact">JURA</a></li>
    	 </ul><!--menu-->
		 
		 
		 
		 
		 
		 <div class="section" id="top">
 	   	 	
         	<p>Cliquez sur le canton désiré</p>
      	    
		 </div> <!--/section-->
		 
		 
		 
		 
		 
		 
		 
		  <a name="presentation">
    	  <div class="section"> <!-- /Présentation -->
    	  	<div id="vaud">
        		
				
				
				<h3>Canton de Vaud</h3>
				
				
				<dl>
		<dt><a href="#Section1">Section 1</a></dt>
		<dd id="Section1">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
		<dt><a href="#Section2">Section 2</a></dt>
		<dd id="Section2">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
		<dt><a href="#Section3">Section 3</a></dt>
		<dd id="Section3">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
		<dt><a href="#Section4">Section 4</a></dt>
		<dd id="Section4">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
			</p>
		</dd>
	</dl>
            	
            	
        	
			
			
			
			
			
			
			
			
			</div> <!-- /vaud -->
    	  </div> <!-- /section -->
    
   		</a> <!-- A name -->
	</div><!--all-->
	
	
		

</body>
</html>






/* CSS Document */
body {
		
		margin:0;
		width:1200px;
		height:8000px;
	
	}
	 
a:link {
text-decoration: none;
border: 0;

}

a:visited {
text-decoration: none;
border: 0;

}

a:hover {
text-decoration:underline;
border: 0;

}

a:active {
text-decoration: none;
border: 0;

}

div#all		{	
				width:900px;
				height:8000px;
				background-color:#d0d0d0;
				position:absolute;
				
				
			}



ul#menu 	{
		 	position:fixed;
			
			}
			
ul#menu li	{
		 	font-family: Times;
			font-size:17px;
			margin:20px;
			margin-left:30px;
			display:inline;
			
			}
			
div#top		{	
				margin-top:50px;
				width:auto;
				height:500px;
				background-color:#FFCC33;
				
				
				
			}			
			
			
			
			
div#vaud		{	
				margin-top:50px;
				width:900px;
				height:800px;
				background-color:#006633;
				
				
				
			}
			
			
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
}
body { background-color: #606061; }

img { border: none; }
p
{
	font-size: 1em;
	margin: 0 0 1em 0;
}

html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }

input, select, textarea, th, td { font-size:1em; }

/* CSS Accordion styles */
dl
{
	padding: 10px;
	min-width: 960px;
}
	dl dt
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 1px solid #cccccc;
		margin: 0;
	}
		dl dt a
		{
			color: #ffffff;
			font-weight: bold;
			text-decoration: none;
			padding: 10px;
			display: block;
		}
	dl dd
	{
		color: #cccccc;
		margin: 0;
		overflow: hidden;
		-webkit-transition: height 1s ease;
		-moz-transition: height 1s ease;
		-o-transition: height 1s ease;
	}
		dl dd p
		{
			padding: 10px;
			margin: 0;
		}
	dl dd:not(:target) { height: 0; }
	dl dd:target { height: 6.667em; }
	dl a.ie:hover dd,
	dl a.ie:focus dd
	{
		height: auto;
		color: #cccccc !important;
	}










A voir également:

3 réponses

Réponse 1 / 3
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
7 avril 2011 à 00:34
Sympa ton portfolio ^^

Par contre, ta question est peu claire...

Quel est ton objectif ? Quel problème rencontres-tu ?
0
hockey07 Messages postés 16 Date d'inscription jeudi 24 mars 2011 Statut Membre Dernière intervention 22 juillet 2012
7 avril 2011 à 09:22
^^ nn c'est pas le mien, ce que j'aimerais, c'est trouver un code capable d'annuler un script dans un DIV... ou modifier le script JQUERY en lui donnant une limite...ca ne m'étonnerait pas que ce soit impossible mais j'essaie quand meme.
Sinon est-ce possible de controler un script? Ou comment faire lorsque 2 scripts quasi identiques sont utilisés sur la meme page? Comment font les grands webmasters?
Merci de ta réponse ;)
0
Réponse 2 / 3
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
7 avril 2011 à 10:51
Pour utiliser le même script sur plusieurs pages, il suffit d'appeler ledit script avec la balise <script type="text/javascript" src="monscript.js"></script>, et ce sur chacune des pages.

En ce qui concerne l'"annulation" du script... de quoi s'agit-il ? Des événements ?
0
hockey07 Messages postés 16 Date d'inscription jeudi 24 mars 2011 Statut Membre Dernière intervention 22 juillet 2012
7 avril 2011 à 11:17
c'est ca, le problème c'est que j'ai DEUX scripts différents dans la meme page et tout deux ont la "meme technique", c'est à dire qu'ils fonctionnent tout les deux sur les liens
ce qui fait qu'il y a une confrontation entre les 2! C'est normal et logique mais il faudrait que je puisse dire à un lien: "Non, tu ne fonctionnes pas avec script1 mais avec script2"
Tu comprends?
0
Réponse 3 / 3
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
8 avril 2011 à 01:52
Oui. Mais quand on utilise des scripts, il faut savoir RÉELLEMENT de quelle façon ils agissent. Réutiliser des scripts tout faits ne prend du sens que quand on est capable de les réécrire soi-même, autrement dit quand on en comprend le fonctionnement.

Sinon, le seul type de solution que je peux proposer est du type "essaie de n'inclure que le script qui donne l'effet voulu". Surtout que les informations données sont relativement faiblardes.
0

Discussions similaires

recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
Table des matières dont les titres n'apparaissent pas..
Synua -
ggg -

10 réponses
images seulement le cadre sans images dans word
Martine1969 -
m@rina -

2 réponses
"Meta mode"
Athéna1949 -
Yass -

3 réponses