Bonjour,

J'ai une page actu.php avec entre autres ce bout de code, faisant appel à une page.js :

<script type="text/javascript" src="js/mootools.js"></script> 
 <script type="text/javascript" src="js/slide_effet.js"></script>

Une seconde page, bloc.php, fait également appel à un bout de code .js :

<script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.innerfade.js"></script>
  <script type="text/javascript"> 
	   $(document).ready(
				function(){
					$('ul#portfolio').innerfade({
						speed: 1000,
						timeout: 2500,
						type: 'random', 
						containerheight: '80px'
						
					});
				
 
			});
  	</script>

Indépendemment, les deux pages fonctionnent très bien, avec ce qu'il faut de javascript.

J'ai une page index.php qui fait appel à :
actu.php au centre
et sur la droite:
bloc.php

De la sorte, seule le bloc.php fait bien le diapo d'images comme je le souhaitais, mais l'autre bout de js ne fonctionne pas en ce qui concerne actu.php.

Je ne sais pas si je me fais bien comprendre, mais qui ne tente rien n'a rien !
Des pistes ?

Merci

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Pense à mettre ton sujet en résolu à l'aide du bouton approprié

J'ai essayé, et quand je vais sur mon site, il n'affiche plus rien !

Et là, avec si peu d'informations, dis-moi comment je suis censé t'aider...



Donne au moins l'adresse de ton site, que je constate.

Oui euh effectivement.
En fait ma question c'est surtout comment je fais pour utiliser ce code, j'ai pas vraiment réussi jusqu'ici!
Mon soucis c'est que j'ai plusieurs pages, comme je l'ai dis au dessus...

Où et comment dois je me servir de ce code ?

Bah tout d'abord, tu t'assures que Mootools est chargé avant jQuery.

Donc que l'include de actu.php est fait avec celui de bloc.php



Et ensuite, tu remplace le code actuel de bloc.php par :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript"> 
(function( $ ) {
  $(document).ready(function(){
      $('ul#portfolio').innerfade({
        speed: 1000,
        timeout: 2500,
        type: 'random', 
        containerheight: '80px'
      });
  });
}(jQuery));
</script>

Enfin il faudrait s'assurer que le contenu du fichier innerfade soit ok aussi.

Citation : Golmote

Enfin il faudrait s'assurer que le contenu du fichier innerfade soit ok aussi.

C'est à dire ? Dois je remplacer les "$" par "jQuery" ?

Montre moi à quoi il ressemble.

S'il est bien fait, il utilise normalement une closure comme celle du code de mon post précédent...

Effectivement il y a bien une closure :

(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
        		'animationtype':    'fade',
            'speed':            'normal',
            'type':             'sequence',
            'timeout':          2000,
            'containerheight':  'auto',
            'runningclass':     'innerfade',
            'children':         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
            };
            if (settings.type == "sequence") {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == "random") {
            		var last = Math.floor ( Math.random () * ( elements.length ) );
                setTimeout(function() {
                    do { 
												current = Math.floor ( Math.random ( ) * ( elements.length ) );
										} while (last == current );             
										$.innerfade.next(elements, settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
						} else if ( settings.type == 'random_start' ) {
								settings.type = 'sequence';
								var current = Math.floor ( Math.random () * ( elements.length ) );
								setTimeout(function(){
									$.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
								}, settings.timeout);
								$(elements[current]).show();
						}	else {
							alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
						}
				}
    };

    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == 'slide') {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
							removeFilter($(this)[0]);
						});
        } else
            alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
        if (settings.type == "sequence") {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
        } else if (settings.type == "random") {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() * elements.length);
        } else
            alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}

Bon bah donc normalement y'a plus de conflit ?

Ben si... Il n'y a que le diaporama (portfolio) qui fonctionne...

Donne un lien vers la page online.

Euh c'est un peu compliqué je pense. En fait, j'ai changé un peu le code, donc je me dis que c'est peut être pour ca. En gros j'ai un index.php dans lequel il y a plusieurs div et include:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript" src="js/mootools.js"></script> 
 <script type="text/javascript" src="js/slide_effet.js"></script> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript"> 
(function( $ ) {
  $(document).ready(function(){
      $('ul#portfolio').innerfade({
        speed: 1000,
        timeout: 2500,
        type: 'random', 
        containerheight: '80px'
      });
  });
}(jQuery));
</script>
<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff
</script>

<style type="text/css"> 
.fieldset4
{
	border:1px solid grey; 
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
	border-radius:8px;	
	background-color: #FFFFFF;
}
</style> 
<style type="text/css"> 
.fieldset1
{
	border:1px solid grey; 
	-moz-border-radius:8px;
	-webkit-border-radius:8px;	
	border-radius:8px;	

}
</style> 

<link rel="stylesheet" type="text/css" href="styles3.css">

<title>Bienvenue sur le site </title>
</head>
<body>
	<div id="haut">
		<div id="logo">	
			<a href="index.php?page=accueil"><img src="tn_logo.png" width="100%" height="100%" border="0" alt="logo"></a>
		</div>
	
		<div id="header">
			<center><img src="essai1.png" width="80%" height="100%" alt="bandeau"></center>
		</div>
	</div>	

	<div id="menuhaut">
		<? include('inc/menu.php'); ?>
	</div>

	<div id="contenu">

			<div id="blocnews">
				<fieldset class="fieldset4">
					<? include("inc/inc.php");?>
				</fieldset>
			</div>
	
			<div id="blocagenda">
				<fieldset class="fieldset4">
					<? include("inc/agenda.php");?>
				</fieldset>
			</div>
	
			<div id="blocrmih"> 
				<fieldset class="fieldset4">
					<? include("inc/bloc1.php");?>
				</fieldset>
			</div>	 
		
			<div id="blocdroite">
				<fieldset class="fieldset4">
					<? include("inc/bloc2.php");?>
				</fieldset>
			</div>

			<div id="blocanniv">
				<fieldset class="fieldset4">
					<? include("inc/anniversaire.php");?>		
				</fieldset>
			</div>
	</div>

	<div id="footer">
		<? include('inc/footer.php');?>
	</div>

</body>
</html>

Et j'ai mis tous les codes javascript dans l'index.php

Peut être ai je fais une erreur ?

Essaye dans cet ordre là :

Inclusion de Mootools
Inclusion de slideEffet
Inclusion de jQuery
jQuery noConflict()
Inclusion de innerfade


ou cet ordre là :

Inclusion de Mootools
Inclusion de jQuery
jQuery noConflict()
Inclusion de slideEffet
Inclusion de innerfade


Si ça ne change rien je demande toujours un lien vers la page online.


EDIT : Hum...

La méthode slide() n'existe pas dans le fichier slideEffet. Donc t'as droit à une belle erreur.

Et poste le lien ici, que je sois pas le seul à être en mesure de t'aider.

EDIT 2 : Et tu mélanges jQuery et Mootools dans ce fichier...