11548 sujets

JavaScript, DOM et API Web HTML5

Salut a tous
Voici mon probleme. sur ma page il y a plusieurs code javascript.

sur certaines je voudrais r'ajouter encore un petit bout de code (lightbox)
mais quand je le mets cela ne fonctionne pas et en plus les autres non plus !

voici le 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" />
<link href="css/style_general.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css"/>
<link href="css/contactable.css" rel="stylesheet" type="text/css" />
<link href="css/scroll.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#content {
	background-color:#FDFDFD;
	border-left:2px solid #333333;
	border-right:2px solid #333333;
	margin:0 auto 0;
	padding:10px;
	position:relative;
	width:930px;
	height:100%;
}
#topcontrol {
	opacity: 3;
	z-index: 9000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/index.js" ></script>
<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.contactable.js"></script>
<script type="text/javascript" src="scripts/scroll.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">     

//<![CDATA[     
		   
		   $(document).ready(function($){         
			$.noConflict();          
			
			$('#contact').contactable({         
			subject: 'A Feeback Message'         
			});          
			
			$('div#footerBt').click(function() {         
			$('#footerContent').animate({"marginBottom": "-45px"}, "slow");         
			$(this).animate({"marginBottom": "-45px"}, "slow").animate({"marginBottom": "+5px"}, "fast");         
			$('#fotplug').hide('slow');         
			});          
			
			
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({bottom:'0px'},{queue:false,duration:350});
				}, function() {
					$(".cover", this).stop().animate({bottom:'-60px'},{queue:false,duration:600});
				});
				
				$(function() {
				$('#gal1 a').lightBox(); 
				$('#gal2 a').lightBox(); 
				$('#gal3 a').lightBox(); 
				$('#gal4 a').lightBox(); 
    		$('#galleryArtsVieGroupes a').lightBox(); 
				$('#gal6 a').lightBox(); 

			});
			});     
		   //]]>     
           </script>
<title>Studio Design</title>
<link href="css/style_projet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contact" title="Formulaire de contact"> </div>
<div class="fond_haut">
  <div class="centrage_haut">
    <div id="coté_gauche"> <a href="#"><img src="images/drapeau_fr.gif" width="23" height="23" border="0"  title="Français"/></a> <a href="#"><img src="images/drapeau_uk.gif" width="23" height="23" border="0"  title="English"/></a><a href="#"><img src="images/drapeau_ru.gif" width="23" height="23" border="0"  title="&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;"/></a></div>
    <div id="coté_droit"> <a href="index.html"><img src="images/house.png" width="16" height="16" border="0"  title="Retour accueil"/></a> <a href="#"><img src="images/phone_sound.png" width="16" height="16" border="0"  title="Nous contacter par téléphone"/></a>
    </div>
  </div>
</div>
<!--header début -->
<div id="header-m">
  <div id="header"> <a href="#"><img src="images/logo.gif" alt="design" class="logo" /></a>
    <img src="images/nos_packs.gif" title="Nos differents packs" width="188" height="38" class="top" />
    <ul class="lien_haut">
      <li class="lien"><a href="pack_.html" class="com"></a></li>
      <li class="lien"><a href="pack_.html" class="expo"></a></li>
      <li class="lien"><a href="pack_.html" class="premium"></a></li>
      <li class="lien"><a href="devis.html" class="devis"></a></li>
    </ul>
  </div>
</div>
<!--header fin -->
<!--body debut -->
<div id="body-m">
  <div id="body">

    <!--coté droit début -->
    <div id="right">
      <h2>Portfolio</h2>
 
      <div class="services_cont" style="border-bottom:1px; border-bottom-style:solid; border-bottom-color:#B2A88D; width: 377px; float: left; padding: 0 0 10px 0; margin: 13px 0 0 0;">
        <div class="services_img"><img src="images/img2.jpg" alt="" width="149" height="149" /> 
        <div id="galleryArtsVieGroupes"> <a href="images/nwl_groupe.jpg" class="lien_corpo" title="Création d'une newsletter pour le secteur Groupes. Arts et vie." $('#galleryArtsVieGroupes a').lightBox();> Voir la galerie</a> </div></div>
              </div>
    </div>
    <!--coté droit fin -->
  
    </div>
</div>
<!--body fin -->

</body>
</html>



si quelqu'n peut m'aider ce serait cool.

de plus sous ie quand je scroll mon contact(figer coté gauche de l'ecran en haut) ne descend pas en même temps que mon scroll !! ca c'est un autre souci!
si quelqu'un a une idée aussi ?

merci a vous
lyon a écrit :
c'est a dire ??


C'est à dire ça:
<!-- Appel de jQuery depuis serveurs de Google -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- Plein d'autres scripts sur le serveur du site
  ...
-->
<!-- Appel de jQuery hébergé sur le serveur du site -->
<script type="text/javascript" src="scripts/jquery.js"></script>

Donc tu appelles deux fois jQuery. Ça fait une fois de trop.

De plus l'ordre des autres scripts semble mauvais. Il faut appeler d'abord jQuery, puis les plugins jQuery que tu utilises, puis tes propres scripts JS.

Bien sûr, dans l'idéal on va limiter au maximum le nombre de scripts utilisés et leur poids, utiliser des versions minifiées autant que possible, concaténer les scripts qui peuvent l'être (tous les plugins jQuery utilisés par exemple), et appeler tous ces scripts à la fin du BODY plutôt que dans le HEAD.
ok si tu peux me faire un ewemple stp ??
par contre il y a different son de cloche car la derniere fosi on me dis de mettre dans le head ?? que faire ??
je dis etre fou mais je ne comprend pas du tout ton explication !!

quelle est la difference entre jquery et plugin jquery ???

(sachant que ce ne sont pas les mêmes puisque j'ai plusieurs truc java sur la page!)

????

merci
lyon a écrit :
ok si tu peux me faire un exemple stp ??

À part réécrire une partie de ta page pour que tu puisses faire un copier-coller, je peux difficilement faire plus que ce que j'ai déjà écrit, en fait.

lyon a écrit :
par contre il y a différents sons de cloche car la dernière fois on m'a dis de mettre dans le head ?? que faire ??

Dans 99% des cas, mieux vaut les placer à la fin de body. Voir ici:
http://developer.yahoo.com/performance/rules.html#js_bottom

lyon a écrit :
quelle est la difference entre jquery et plugin jquery ???

jQuery est une bibliothèque de fonctions JavaScript. Elle crée dans l'espace de nom global un objet nommé "jQuery" qui a de nombreuses méthodes (des fonctions). C'est une boite à outils, en quelque sorte.
On appelle «plugin jQuery» des scripts JavaScript qui utilisent les fonctions de jQuery pour réaliser diverses choses.

Le fichier http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js contient une version de jQuery (voir le contenu du fichier). Ton fichier dont le chemin est 'scripts/jquery.js' aussi, probablement.
Les fichiers dont les chemins sont 'scripts/jquery.validate.pack.js', 'scripts/jquery.contactable.js' et 'scripts/jquery.lightbox-0.5.js' contiennent à priori des plugins jQuery.

lyon a écrit :
j'ai plusieurs truc java sur la page!

JavaScript, et non pas Java:
http://fr.wikipedia.org/wiki/JavaScript
http://fr.wikipedia.org/wiki/Java_%28langage%29