Code JS dans une page HTML

Ranger -  
Lord Zero Messages postés 459 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai ce code JS : 
var staff = new Fx.Slide('staff', {mode: 'horizontal'});
 
$('slidein').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideIn();
	e.stop();
});
 
$('slideout').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.slideOut();
	e.stop();
});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 
$('hide').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.hide();
	e.stop();
});


Je dois l'intègrer dans ma page html mais je sais pas comment ...

Pourriez-vous m'aider ?

3 réponses

Réponse 1 / 3
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Salut,

https://lmgtfy.app/?q=int%C3%A9grer+code+javascript+dans+page+html
0
Réponse 2 / 3
Ranger
 
j'ai trouver des trucs mais étant vraiment nul je n'y arrive pas ...
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
tu prends le premier lien dans google, tu arrives sur ce site, qui explique comment intégrer un code javascript dans une page HTML, je vois pas trop quoi faire de plus ;)
0
Ranger
 
j'ai essayer de mettre entre la balise <script type="text/javascript"></script> mais ça ne marche pas
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
qu'est ce qui ne marche pas ? L'intégration ? Le code javascript en lui même ?
0
Ranger
 
voila mon integration : 
<a id="toggle" href="#">toggle</a>
<div id="staff">
mon texte
</div>
0
Ranger
 
je l'ai pris ici : http://demos111.mootools.net/Fx.Slide
0
Réponse 3 / 3
Lord Zero Messages postés 459 Date d'inscription   Statut Membre Dernière intervention   115
 
En fait il manque un script 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  
 <script type="text/javascript" src="mootools.svn.js"></script>
<style>
#test {
 background: #222;
 color: #fff;
 padding: 10px;
 margin: 20px;
 border: 10px solid pink;
}
 
#test2 {
 background: #222;
 color: #fff;
 padding: 10px;
 margin: 20px;
 border: 10px solid pink;
}
</style>
 
 <script type="text/javascript">
  window.addEvent('domready', function(){
   //-vertical
   
   var mySlide = new Fx.Slide('test');
   
   $('slidein').addEvent('click', function(e){
    e = new Event(e);
    mySlide.slideIn();
    e.stop();
   });
   
   $('slideout').addEvent('click', function(e){
    e = new Event(e);
    mySlide.slideOut();
    e.stop();
   });
   
   $('toggle').addEvent('click', function(e){
    e = new Event(e);
    mySlide.toggle();
    e.stop();
   });
   
   $('hide').addEvent('click', function(e){
    e = new Event(e);
    mySlide.hide();
    e.stop();
   });
   
   
   //--horizontal
   
   var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
   
   $('slidein2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.slideIn();
    e.stop();
   });
   
   $('slideout2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.slideOut();
    e.stop();
   });
   
   $('toggle2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.toggle();
    e.stop();
   });
   
   $('hide2').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.hide();
    e.stop();
   });
  }); 
 </script>
 
</head>

<body>
 

   <div id="demo">
    <h3 class="section">Fx.Slide Vertical</h3>

<a id="slideout" href="#">slideout</a> | <a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">toggle</a> | <a id="hide" href="#">hide</a>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<h3 class="section">Fx.Slide Horizontal</h3>

<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>   </div>
 
  </div>
  <span class="clr"></span>
 </div>
</div>


</body>
</html>



Le script mootools.svn.js est dispo ici :
https://demos111.mootools.net/demos/mootools.svn.js

Tout fonctionne chez moi !
Concepteur Développeur Informatique VB6, VBS, VBA, VB.NET, C#, xHTML, PHP, JavaScript, SQL.
0
Lord Zero Messages postés 459 Date d'inscription   Statut Membre Dernière intervention   115
 
à tester ! :)
0
Ranger
 
merci beaucoup, le fichier js je le met à la racine demon word press ou avec mon fichier page du theme ?
0
Lord Zero Messages postés 459 Date d'inscription   Statut Membre Dernière intervention   115
 
tu le met où tu veux tant que tu renseigne cette ligne 

<script type="text/javascript" src="mootools.svn.js"></script>
0
Ranger
 
ok merci je viens de colé exactement ton code sur une page test, ça marche, par contre quand j'essaye d'enlever la partie du slide vertical op ça marche plus ...
0
Lord Zero Messages postés 459 Date d'inscription   Statut Membre Dernière intervention   115
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		
	<script type="text/javascript" src="mootools.svn.js"></script>
<style>
 
#test2 {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}
</style>
	
	<script type="text/javascript">
		window.addEvent('domready', function(){
			
			//--horizontal
			
			var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
			
			$('slidein2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.slideIn();
				e.stop();
			});
			
			$('slideout2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.slideOut();
				e.stop();
			});
			
			$('toggle2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.toggle();
				e.stop();
			});
			
			$('hide2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.hide();
				e.stop();
			});
		}); 
	</script>
	
</head>

<body>
	

			<div id="demo">


<h3 class="section">Fx.Slide Horizontal</h3>

<a id="slideout2" href="#">slideout</a> | <a id="slidein2" href="#">slidein</a> | <a id="toggle2" href="#">toggle</a> | <a id="hide2" href="#">hide</a>

<div id="test2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>			</div>
	
		</div>
		<span class="clr"></span>
	</div>
</div>


</body>
</html>

Et voila
0