Conflit de javascript

Fermé

Kalmirew Messages postés 17 Date d'inscription jeudi 13 septembre 2007 Statut Membre Dernière intervention 13 juin 2015 - Modifié par Kalmirew le 30/07/2013 à 20:30
Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 - 11 août 2013 à 19:21

Bonjour à la communauté,

Je suis une bidouilleuse de site web. Je m'en sort pas mal en HTML, CSS et PHP mais le javascript est bien trop complexe pour moi (je mets le nez dedans, croyez-moi, je suis pas fainéante). J'ai donc tendance à utiliser des codes tout prêts.

Le problème c'est que j'ai fait un site sans prétention pour un ami avec un effet de toggle (vous savez, quand on clique sur du texte, une boite s'ouvre en glissant et se referme quand on clique sur le texte) qui révèle un formulaire pour communiquer la page à un ami par mail. Tout fonctionnait très bien jusqu'à que je décide de changer de slider d'image (l'autre faisait des effets 3D trop kitsh à mon goût).

Et à partir de là mon effet de toggle s'est mis à ne plus fonctionner ... J'ai tenté de retirer complètement le slider et, surprise, le toggle s'est remis à marcher ...

De même, mon effet de smooth scrolling qui scroll jusqu'à des ancres s'est aussi arrêté de fonctionner après l'ajout de ce nouveau slider.

Comme j'étais démunie face à la situation, j'ai commencé par retirer tous les codes de js que l'on retrouvait dans ma page pour les mettre dans des documents externes appelés par la fonction script. Mais ça n'a rien changé, sauf bien sûr quand je revenais à l'ancien slider ...

Aussi, je m'en remet à vous pour savoir ce qui fait conflit.

Je vous met, dans un premier temps, une partie de mon index. Si vous avez besoin de fichiers js pour en savoir plus, n'hésitez pas à me le dire.

ET UN GRAND MERCI !

P.S. : Je m'excuse pour le manque de lisibilité, mon copier-coller n'a pas, je ne sais pas pourquoi, respecté les alinéas.

<!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" />
<meta name="keywords" content="immobilier, marseille, château gombert, maison, villa, vente, achat, à vendre, banlieue, 13013, bouches-du-rhône, jardin, acheter, médecins, T5, 100m carrés, terraces, 4 chambres, particulier" />
<meta name="description" content="Immobilier : Maisons / villa 100m2 et + à vendre à Château-Gombert (Marseille, 13ème). Aucun frais d'agence, vente de particulier à particulier. Consultation d'annonce et contact avec le vendeur 100% gratuits. A venir découvrir." />
<title>Marseille Immo - Maisons à vendre à Château-Gombert</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<link rel="stylesheet" href="css/demoslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
</head>
<body bgcolor="#f3f3f3">
<a id="top">
<div class="header" style="width:100%; height:70px; background:#d6d2cf; position:float;"> </a>
[...]
<BR>
<div class='partager'>
<div class='toggleHolder'>
<span class='toggler'> envoyer par e-mail à un ami <img src="icones/v.png" style="vertical-align:middle;"> </span>
<span class='toggler' style='display:none;'> envoyer par e-mail à un ami <img src="icones/v.png"></span>
</div>
<BR>
<div class='toggle_parent'>
<div class='toggled_content' style='display:none;'>
<div class="tellafriend1">
<form action="tellck.php" method="post">
<pre>
Votre nom
<input type="text" name="y_name" value=""><br>
Votre adresse e-mail
<input type="text" name="y_email" value=""><br>
Nom de votre ami
<input type="text" name="f_name" value=""><br>
Adresse e-mail de votre ami
<input type="text" name="f_email" value=""><br>
</div>
<div class="tellafriendctnr">
<div class="tellafriend2">
Message<BR />
<textarea name="y_msg" cols="60Ã¢â?¬Â³ rows="6Ã¢â?¬Â³ style="height:125px;"></textarea><br><br>
</div>
<div class="tellafriend3">
<input type="Submit" name="Envoyer" value="Envoyer" style="width:40%; background-color:#fa471c; color:#fff; font-family:'Source Sans Pro', sans-serif; font-weight:400; border:none;">
</form>
</div>
</div>
</div>
<BR>
</div>
</div>
</div>
</div>
<a id="photos"><div class="slidercontainer" style="visibility: visible; background-image: url(texture.gif); background-repeat: repeat;"></a>
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/1.JPG" />
</li>
<li>
<img src="images/2.JPG" />
</li>
<li>
<img src="images/3.JPG" />
</li>
<li>
<img src="images/4.JPG" />
</li>
<li>
<img src="images/5.JPG" />
</li>
<li>
<img src="images/6.JPG" />
</li>
<li>
<img src="images/7.JPG" />
</li>
<li>
<img src="images/8.JPG" />
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
[...]
<script>
$(document).ready(function(){

$('.toggler').live('click',function(){
$(this).parent().children().toggle(); //swaps the display:none between the two spans
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action

});

});
</script>
<script>
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});

// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>


<script defer src="js/jquery.flexslider.js"></script>

<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>

A voir également:

Conflit de javascript
Telecharger javascript - Télécharger - Langages
Table de multiplication javascript ✓ - Forum Javascript
Node.js javascript runtime virus ✓ - Forum Virus
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP

1 réponse

Réponse 1 / 1

Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 25
11 août 2013 à 19:21

Bonjour,

Je pense que ton conflit vient du fait que tu charges plusieurs fois jQuery, si les versions sont un peu différentes ça casse tout.

En premier ici :

<script type="text/javascript" src="js/modernizr.custom.46884.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<!-- Demo CSS -->

Et ensuit là (2 fois) :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

Retire les deux derniers et ça devrait rouler.

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

le package est en conflit avec un autre package ayant le même nom

Message d'erreur : ce paramètre source rentre en conflit...

java script error in the main process

Conflit d'adresse IP

Discussions similaires

Newsletters