Sujet Précédent Sujet Suivant

Code JS dans une page HTML

Fermé
Ranger - 11 déc. 2013 à 15:37
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 - 13 déc. 2013 à 14:45
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 ?
A voir également:

3 réponses

Réponse 1 / 3
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
11 déc. 2013 à 15:39
Salut,

https://lmgtfy.app/?q=int%C3%A9grer+code+javascript+dans+page+html
0
Réponse 2 / 3
Ranger
11 déc. 2013 à 15:43
j'ai trouver des trucs mais étant vraiment nul je n'y arrive pas ...
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
11 déc. 2013 à 15:44
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
11 déc. 2013 à 15:54
j'ai essayer de mettre entre la balise <script type="text/javascript"></script> mais ça ne marche pas
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
11 déc. 2013 à 15:56
qu'est ce qui ne marche pas ? L'intégration ? Le code javascript en lui même ?
0
Ranger
11 déc. 2013 à 15:59
voila mon integration : 
<a id="toggle" href="#">toggle</a>
<div id="staff">
mon texte
</div>
0
Ranger
11 déc. 2013 à 16:00
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 lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 11/12/2013 à 16:30
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 lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
11 déc. 2013 à 16:36
à tester ! :)
0
Ranger
11 déc. 2013 à 16:49
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 lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 11/12/2013 à 16:55
tu le met où tu veux tant que tu renseigne cette ligne 

<script type="text/javascript" src="mootools.svn.js"></script>
0
Ranger
11 déc. 2013 à 16:57
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 lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
11 déc. 2013 à 16:59 
<!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