Code JS dans une page HTML

Ranger -  
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

  • Votes
  • Date
  • Date décroissante
  2. Ranger
    j'ai trouver des trucs mais étant vraiment nul je n'y arrive pas ...
    1. ThEBiShOp Contributeur
      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 ;)
    2. Ranger
      j'ai essayer de mettre entre la balise <script type="text/javascript"></script> mais ça ne marche pas
    3. ThEBiShOp Contributeur
      qu'est ce qui ne marche pas ? L'intégration ? Le code javascript en lui même ?
    4. Ranger
      voila mon integration : 
      <a id="toggle" href="#">toggle</a>
<div id="staff">
mon texte
</div>
    5. Ranger
      je l'ai pris ici : http://demos111.mootools.net/Fx.Slide
  3. Lord Zero
    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.
    1. Lord Zero
      à tester ! :)
    2. Ranger
      merci beaucoup, le fichier js je le met à la racine demon word press ou avec mon fichier page du theme ?
    3. Lord Zero
      tu le met où tu veux tant que tu renseigne cette ligne 

      <script type="text/javascript" src="mootools.svn.js"></script>
    4. 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 ...
    5. Lord Zero 
      <!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

Discussions similaires

[référencement] Ne pas être référencé
kij_82

10 réponses
Trouver le code source d'une page internet.
Aline²

9 réponses