Conflit de javascript
Kalmirew
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
Anoen Messages postés 196 Date d'inscription Statut Membre Dernière intervention -
Anoen Messages postés 196 Date d'inscription Statut Membre Dernière intervention -
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>
<!-- Demo CSS -->
<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>
<!-- jQuery -->
<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>
<!-- FlexSlider -->
<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>
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>
<!-- Demo CSS -->
<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>
<!-- jQuery -->
<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>
<!-- FlexSlider -->
<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
- Javascript echo ✓ - Forum PHP
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- L'application n'a pas été installée car le package est en conflit avec un package déjà présent - Forum Téléphones & tablettes Android
1 réponse
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 :
Et ensuit là (2 fois) :
Retire les deux derniers et ça devrait rouler.
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.
