Problème Script jQuery Safari

Sujet résolu

Anonyme

14 juillet 2010 à 10:12:06

Bonjour tout le monde,

voila j'ai fait un script pour mon site -> un slider en jQuery pour ma page réalisation.

Il marche tout bien dans Firefox mais l'ennui c'est que dans Safari et Google Chrome, le slider ne s'initialise pas correctement ... Je m'explique Quand je vais dans ma page Réalisation en cliquant sur le menu le slider ne fonctionne pas, en revanche si je recharge la page en RECLIQUANT sur le bouton Réalisation et non en fesant cmd+R ... Miracle le slider fonctionne correctement.

Je pense que c'est un problème lié à mon évènement click de jQuery ou alors je me trompe complètement.

Merci pour votre aide je vous copie mon script

// JavaScript Document

$(document).ready(function() {
s = new slider("#galerie");
});

var slider = function(id) {
var self = this;
	this.div = $(id);
	this.slider=this.div.find(".slider");
	this.largeurCache = this.div.width();
	this.largeur = 0;	
	this.div.find('a').each(function(){
	self.largeur+=$(this).width();
	self.largeur+=parseInt($(this).css("padding-left"));
	self.largeur+=parseInt($(this).css("padding-right"));
	self.largeur+=parseInt($(this).css("margin-left"));
	self.largeur+=parseInt($(this).css("margin-right"));
	});
	this.last = this.div.find(".last");
	this.next = this.div.find(".next");
	this.saut = this.largeurCache/2;
	this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut - this.largeurCache/this.saut);
	this.courant=0;
	$('.last').hide();
	$("#debord_gauche").hide();
	
	this.next.click(function(){
		if(self.courant<=self.nbEtapes) {
			$('.last').fadeIn('slow', function() {});
			$('#debord_gauche').fadeIn('slow', function() {});
			self.courant++;
			self.slider.animate({
				left:-self.courant*self.saut
			},750);
		} else {
			self.courant=0;
			self.slider.animate({
				left:-self.courant*self.saut
			},750);
			$('.last').fadeOut('slow', function() {});
			$('#debord_gauche').fadeOut('slow', function() {});
		}

	});
	
	this.last.click(function(){
		if(self.courant>0) {
			self.courant--;
			self.slider.animate({
				left:-self.courant*self.saut
			},750);
		}
		
		if(self.courant==0) {
			$('.last').fadeOut('slow', function() {});
			$('#debord_gauche').fadeOut('slow', function() {});
		}
	});
}

Anonyme

14 juillet 2010 à 10:21:42

La question c'est pourquoi faire un slider perso quand jquery en propose déjà un ?

En plus il y a tout plein de callbacks pour faire les différents trucs perso que t'as là :
http://jqueryui.com/demos/slider/#tabs

Anonyme

14 juillet 2010 à 10:27:39

On s'est mal compris ... Mon slider est utilisé pour faire défiler mes travaux...

Je me suis aidé de ce tuto pour le faire http://www.grafikart.fr/tutoriels/slid [...] ipt-jquery-54

je préfère le faire moi même pour mieux comprendre les scripts et ainsi me perfectionner.

Anonyme

14 juillet 2010 à 10:30:18

C'est une bonne raison

T'as une page en ligne et/ou le html qui va avec ? j'veux pas me taper le tuto a regarder, surtout que j'ai pas flash.

Anonyme

14 juillet 2010 à 10:39:05

Oui j'ai le PHP de la page travaux.

Merci pour ton aide.

Je me demande si ce n'est pas juste le JS qui ne se charge pas correctement tout simplement parce que une fois chargé le scipt marche parfaitement

<?php
// on se connecte à MySQL
$db = mysql_connect('localhost', 'root', 'root');

// on sélectionne la base
mysql_select_db('sky_graphics',$db);

// on crée la requête SQL
$sql = 'SELECT image FROM portfolio';

// on envoie la requête
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

// on ferme la connexion à mysql
mysql_close();
?>
    <div id="chapeau"><img src="images/layout/intro_works.png" /></div>
    <div id="galerie">
    	<div class="slider">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
<?php 
while($data = mysql_fetch_array($req)) { 
					echo '<td width="498" align="right"><a href="#"><img src="images/content/'. $data['image'].'.jpg"/></a></td>'; 
}
?>
                </tr>
            </table>
        </div>
        <div class="last"></div>
        <div class="next"></div>
    </div>
    <div id="debord_gauche"></div>
    <div id="debord_droite"></div>
    <div id="filtre"></div>
</div>

Anonyme

14 juillet 2010 à 10:45:01

file la source html de la page complète, le php me sert a rien je peux pas générer le html de ma machine, donc je peux pas tester

Anonyme

14 juillet 2010 à 10:48:59

Ok alors voila le code généré de la page

<!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" />
<title>Sky Graphics - Creative web design and development</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script> 
</head>   	
<body>
<div id="conteneur">
    <ul>
        <li><a href="index.php?page=home" onFocus="this.blur();" class="padding_bouton">Accueil</a></li>

        <li class="padding_li">&nbsp;</li>
        <li><a href="index.php?page=works" onFocus="this.blur();" class="padding_bouton">R&eacute;f&eacute;rences</a></li>
        <li class="padding_li">&nbsp;</li>
        <li><a href="#" onFocus="this.blur();" class="padding_bouton">Services</a></li>
        <li class="padding_li">&nbsp;</li>
        <li><a href="#" onFocus="this.blur();" class="padding_bouton">Contact/Devis</a></li>

    </ul>
    <div id="logo"><img src="images/layout/logo.png" alt="Sky Graphics" /></div>
    <div id="chapeau"><img src="images/layout/intro_works.png" /></div>
    <div id="galerie">
    	<div class="slider">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
<td width="498" align="right"><a href="#"><img src="images/content/ibeats.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/hf.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/3d.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/tpi.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/horloge.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/mediatique.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/gp.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/artionet.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/ibeats.jpg"/></a></td><td width="498" align="right"><a href="#"><img src="images/content/ibeats.jpg"/></a></td>                </tr>
            </table>

        </div>
        <div class="last"></div>
        <div class="next"></div>
    </div>
    <div id="debord_gauche"></div>
    <div id="debord_droite"></div>
    <div id="filtre"></div>
</div>
<div id="fond_menu"></div>
<div id="traits"></div>

<div id="Background">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="degrade" align="middle">
        <param name="movie" value="flash/degrade.swf" />
        <param name="quality" value="best" />
        <param name="bgcolor" value="#ffffff" />
        <param name="play" value="true" />
        <param name="loop" value="true" />
        <param name="wmode" value="window" />
        <param name="scale" value="exactfit" />

        <param name="menu" value="true" />
        <param name="devicefont" value="false" />
        <param name="salign" value="" />
        <param name="allowScriptAccess" value="sameDomain" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash/degrade.swf" width="100%" height="100%">
        <param name="movie" value="flash/degrade.swf" />
        <param name="quality" value="best" />
        <param name="bgcolor" value="#ffffff" />

        <param name="play" value="true" />
        <param name="loop" value="true" />
        <param name="wmode" value="window" />
        <param name="scale" value="exactfit" />
        <param name="menu" value="true" />
        <param name="devicefont" value="false" />
        <param name="salign" value="" />
        <param name="allowScriptAccess" value="sameDomain" />
    <!--<![endif]-->

        <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir Adobe Flash Player" />
        </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>
</div>
<div id="footer">
    <p>&copy; Sky Graphics 2010 - All rights reserved - Valide XHTML & CSS</p>

</div>
</body>
</html>

Designarca

23 mars 2011 à 17:11:17

Pas de solution ? moi aussi j'ai ce problème !!!