11548 sujets

JavaScript, DOM et API Web HTML5

Deux scripts en conflit Scrollbar et Load

Bonjour à tous!

deux de mes scripts sont en conflit : il s'agit d'un script général de navigation avec une fonction load et d'un script pour afficher une scrollbar. Le probleme est que la scrollbar ne se charge pas avec le load, et donc le seul moyen que j'ai trouvé pour l'instant pour faire apparaitre la scrollbar est de ne pas utiliser la fonction load....

Voici les deux bouts de code.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.click').click(function() {
        var $periph = $('#periph');
        var url = $(this).data('url');
        $periph.fadeOut(1200, function() {
            $periph.load(url, function() {
                $periph.fadeIn(1600, function() {
                    if (this.style.removeAttribute) {
                        this.style.removeAttribute('filter');
                    }
                });
            });
        });
    });
}); 

</script>


et


<script type="text/javascript">
$(function()
{
	$('#page').jScrollPane();
});
</script>


si quelqu'un a idée qui pour m'aider... merci d'avance!
Pour info 
$(function()
et 
jQuery(document).ready(function($) {

sont identique (le premier étant le raccourci du second).

Le noConflict étant fait pour une utilisation de plusieurs librairies différentes (jquery et mootools par exemple).

Si tu utilises la même librairie (c'est à dire jquery), ce n'est pas nécessaire.

Donc déjà tu peux placer 
$('#page').jScrollPane();
dans le (document).ready


jQuery(document).ready(function($) {

    $('#page').jScrollPane();  

    $('.click').click(function() {
...


Maintenant, je ne vois pas en quoi le load() du premier script bloquerai le second. Dans tous les cas, si réellement le soucis vient de là, on ne peut pas t'aider avec les infos que tu as fournis.
Modifié par kenor (17 Dec 2011 - 13:15)
Merci pour ta réponse!

Ce que tu me conseille, placer 

$('#page').jScrollPane();


dans le (document).ready

Cela a pour effet de bloquer le load...

Voici toute mon entête (header.php). Le reste suit dans page.php. 


<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>

<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

<head>

<title>K</title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<script src="/wordpress/script/bgMax.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/wordpress/script/jquery.js"></script>



<!-- styles needed by jScrollPane -->
<link type="text/css" href="/wordpress/script/vitch-jScrollPane-ef5b8be/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="/wordpress/script/vitch-jScrollPane-ef5b8be/script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="/wordpress/script/vitch-jScrollPane-ef5b8be/script/jquery.jscrollpane.min.js"></script>



<?php
   mp3j_addscripts(); 
 ?>


<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>



<link rel="shortcut icon" href="images/favicon.ico" />

<body <?php body_class(); ?>>


<SCRIPT LANGUAGE="JavaScript">
i1 = new Image;
i1.src = "images/menu.png";
i2 = new Image;
i2.src = "images/blog.png";
i3 = new Image;
i3.src = "images/musique.png";
i4 = new Image;
i4.src = "images/bio.png";
i5 = new Image;
i5.src = "images/lacase.png";
i6 = new Image;
i6.src = "images/liens.png";
i7 = new Image;
i7.src = "images/contact.png";

</SCRIPT>


<script type="text/javascript">
$(document).ready(function(){
$('#page').jScrollPane();
});
</script>


</head>



<?php if ( is_page('273') ) { ?>
<div id="player">
<?php 
   mp3j_put( '[mp3-jplayer tracks="FEED:/wordpress/player/r" width="300px" list="n"]' );
 ?>


</div>

 <?php } else { ?>

<?php if ( is_page('267') ) { ?>
<div id="player">
<?php 
   mp3j_put( '[mp3-jplayer tracks="FEED:/wordpress/player/3" width="300px" list="n"]' );
 ?>

</div>


 <?php } else { ?>
<?php if ( is_page('138') ) { ?>
<div id="player">

<?php 

   mp3j_put( '[mp3-jplayer tracks="FEED:/wordpress/player/e" width="300px" list="n"]' );
 ?>
</div>


 <?php } else { ?>

<script type="text/javascript">
var options = { mode : "full", position:"fixed", fadeAfter : 0}; bgMax.init("images/image_fond.jpg", options);

</script>

<script type="text/javascript">
/**

* On traite d'abord le chargement du DOM

**/
$(document).ready(function(){
$("#marge2").hide(); //on cache le contenu
$("body").append('<div id="wait"><img src="images/preloader.gif" alt="chargement..."/></div>')
});
/**
* Notre page est chargée on la rétablit
* cette partie du code n'est pas modifiée.
**/
$(window).load(function(){
$("#wait").hide();
$("#marge2").fadeIn();
});
</script>





<div id = "marge">
<img src="images/menu.png" name="imagefond"  border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$- [langue]lease do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:nico -->





<area shape="rect" coords="80,0,159,25" onmouseover="imagefond.src='images/lacase.png'" onmouseout="imagefond.src='images/menu.png'" id="lacase" class="click" data-url="/wordpress #page"/>

<area shape="rect" coords="193,1,252,25" onmouseover="imagefond.src='images/bio.png'" onmouseout="imagefond.src='images/menu.png'"   id="bio"  class="click" data-url="/wordpress/?page_id=18 #page"/>

<area shape="rect" coords="264,2,362,24" onmouseover="imagefond.src='images/musique.png'" onmouseout="imagefond.src='images/menu.png'"  id="musique" class="click"data-url="/wordpress/?page_id=13 #page" />

<area shape="rect" coords="380,1,480,26" onmouseover="imagefond.src='images/contact.png'" onmouseout="imagefond.src='images/menu.png'" id="contact" class="click" data-url="/wordpress/?page_id=23 #page" />

<area shape="rect" coords="503,0,584,26" onmouseover="imagefond.src='images/blog.png'" onmouseout="imagefond.src='images/menu.png'" id="blog" href="/wordpress/?page_id=127"/>

<area shape="rect" coords="606,1,691,27" onmouseover="imagefond.src='images/liens.png'" onmouseout="imagefond.src='images/menu.png'" id="liens" class="click" data-url="/wordpress/?page_id=21 #page"/>


</map>





<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.click').click(function() {
        var $periph = $('#periph');
        var url = $(this).data('url');
        $periph.fadeOut(1200, function() {
            $periph.load(url, function() {
                $periph.fadeIn(1600, function() {
                    if (this.style.removeAttribute) {
                        this.style.removeAttribute('filter');
                    }
                });
            });
        });
    });
}); 

</script>



<script type="text/javascript">
$("#croix").live('click', function() 
{
$("#page").fadeOut(1600);
    });
</script>
</div>



<div id ="marge2">
<img src="images/test_barre.jpg" width="200px">
</div>




<script type="text/javascript">
var J = jQuery.noConflict();
</script>



<script type="text/javascript">
J(function()
{
	J('#page').jScrollPane();
});
</script>





<?php } ?>
<?php } ?>
<?php } ?>


<div id="periph">
<div id="page">
<div id="main">
Essai de regrouper un peu ton JS, là c'est un sacré bordel.

D'ailleurs tu appelles 2 fois jScrollPane sur #page (une fois au milieu, une fois à la fin).

Tu utilises également 2 fois noConflict alors que tu n'utilises à priori que jQuery (donc tu devrais pas l'utiliser du tout, mais utiliser 2 fois noConflict n'a absolument aucune logique) ?

Si tu pouvais déjà mettre tous le JS dans un seul $(function() { ... }); histoire de retirer les éléments parasites qui pourraient bloquer quelque chose.
merci pour ta réponse, effectivement mon JS est bordelique...

dès que j'insere 

$('#page').jScrollPane();


dans le document ready

ça coince, plus rien ne se charge, derrière; le click n'opère plus rien.

Par contre, si j'y insere un autre événement, ça marche, donc c'est bien avec scrollbar que ça coince...


<script type="text/javascript">

jQuery(document).ready(function($) { 

    $('.click').click(function() {
        var $periph = $('#periph');
        var url = $(this).data('url');
        $periph.fadeOut(300, function() {
	            $periph.load(url, function() {
                $periph.fadeIn(800, function() {
                    if (this.style.removeAttribute) {
                        this.style.removeAttribute('filter');
                    } 
                });
            });
        });
  
});

}); 

</script>
Et l'action que ce jScrollPane effectue est belle et bien effectué ?

Il ne provoquerai pas une erreur JS qui bloquerai les autres scripts ?
ni ce que jscrollpane provoque (l'apparition d'une scrollbar) ni les autres scripts (grossomodo un fadein /fadeout sur une balise) ne fonctionnent

quand j'insère 

$('#page').jScrollPane();

dans le document ready
en fait le problème vient bien du fait que je n'arrive pas à faire en sorte que plusieurs actions (load et appel de la scrollbar...) s'appliquent sur la balise #page
Sujet clos
Aller à