Jquery - Bug script perso- style Jcarousel (très très basique!!)

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Jquery - Bug script perso- style Jcarousel (très très basique!!)

bizzard85

Salut
je me mets à Jquery (et à Javascript) et je tente un petit script.
Je vous donne le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#news {
width:300px;
height:300px;
margin: 0 auto 0 auto;
background-color:aqua;
padding:10px;
}
#news_in {
width:260px;
height:205px;
background-color:yellow;
margin:10px;
overflow:hidden;

}
#news_bloc_move {
width:260px;
height:205px;
}
.news_bloc_item {
height:100px;
background-color:pink;
margin-bottom:5px;
}
.news_bloc_item p{
margin:0;

}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".down" ).click(function(){

var top=parseInt($("#news_items_bloc" ).css("margin-top" ));

$("#news_bloc_move" ).animate({
marginTop: "+=210px"
}, "slow" );
});
$(".up" ).click(function(){
$("#news_bloc_move" ).animate({
marginTop: "+=-210px"
}, "slow" );
});
});
</script>
</head>
<body>
<div id="news">
<a href="#" class="up">Up
<a href="#" class="down">Down
<div id="news_in">
<div id="news_bloc_move">
<?php
for ($i=1;$i<10;$i++) {
echo "<div class=\"news_bloc_item\">\n";
echo "Bloc".$i." \n";
echo "</div>\n";
}
?>
</div>
</div>
</div>
</body>

Bon c'est classique. Vous remarquerez tout de suite mon soucis.
Si dès le début je "monte" ou si tout à la fin je "descends" trop, je n'ai plus rien à afficher et ça continu toujours à descendre.
Je voudrais donc cacher (avec hide) une des flèches au début ou tout à la fin avec une structure conditonnelle du style:
if ( top<0 ) {je cache la flèche vers le haut }

ou

if ( top> un certain nombre de pixel(multiple de 210) ) {je cache la flèche vers le bas}

J'espère avoir été assez clair.
Si vous avez une idée, je suis preneur !

Merci.

Publicité

mIRROR

Chevreuillobolchévik

bon deja tu crées deux fois la meme fonction pour rien
apres je connais pas trop jQuery mais ca devrait marcher

Code :

$(document).ready(function(){
    $(".down .up" ).click(function () {
      var direction = this.className == "up" ? -1 : 1;
      var top=parseInt($("#news_items_bloc" ).css("margin-top" ));
      if (top<0) 
          $(".up" ).hide();
      else if (top>xxx)  
          $(".down" ).hide();
      else $(".up .down" ).show();
        $("#news_bloc_move" ).animate({
            marginTop: "+="+direction*210+"px"
        }, "slow" );
    });
 });

Message édité par mIRROR le 27-07-2008 à 08:05:24

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

bizzard85

Salut
%

bizzard85

Salut

Merci pour ta réponse. Effectivement il y a encore du boulot.

En copier coller et presque tel quel (sans les xxx) ton code ne marche pas...mais je précise faut que je vérifie tout ça.
Tu me proposes de bonnes idées (ça m'a même fait marrer tellement je suis con).J'aime bien le +direction.Bon j'ai fait basique pour ma défense !!

J'ai trouvé une (sale) solution.

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#news {
width:300px;
height:300px;
margin: 0 auto 0 auto;
background-color:aqua;
padding:10px;
}
#news_in {
width:260px;
height:205px;
background-color:yellow;
margin:10px;
overflow:hidden;
}
#news_bloc_move {
position:relative;
top:0px;
width:260px;
height:205px;
}
.news_bloc_item {
height:100px;
background-color:pink;
margin-bottom:5px;
}
.news_bloc_item p{
margin:0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".prev" ).hide();
$(".next" ).click(function()
{
$(".prev" ).show();
$("#news_bloc_move" ).animate({ "top": "+=-210px" }, "slow" );
if (parseInt($("#news_bloc_move" ).css("top" )) <=-630) { $(".next" ).hide(); }
});
$(".prev" ).click(function()
{
$(".next" ).show();
$("#news_bloc_move" ).animate({"top": "+=210px"}, "slow" );
if (parseInt($("#news_bloc_move" ).css("top" )) >=-210) { $(".prev" ).hide(); }
});
});
</script>
</head>
<body>
<div id="news">
<a href="#" class="next">Next</a>
<a href="#" class="prev">Prev</a>
<div id="news_in">
<div id="news_bloc_move">
<?php
for ($i=1;$i<11;$i++) {
echo "<div class=\"news_bloc_item\">\n";
echo "<p>Bloc".$i."</p>\n";
echo "</div>\n";
}
?>
</div>
</div>
</div>
</body>

Ce script marche, mais je te l'accorde, il est pas très joli, j'essaierai de le rectifier, promis.
Donc il marche mais ...
Il marche quand tu cliques tranquillement sur les next et prev (j'ai changé les up et down).
Mais si tu décides de cliquez très rapidement sur les next, par exemple, (plus de 5 fois) et bien le bouton next ne disparait pas et on continue à descendre.

Vraiment...

Bon je continue !

Merci !!

mIRROR

Chevreuillobolchévik

ok bon sur mon script je me suis planté sur les slecteurs je pense
au lieu de $('.up .down') c est tout simplement $('.up, .down') ou $('.up','.down') faut tester
mais ensuite mon script risque d avoir le meme probleme que le tien
comme la transition est asynchrone si tu cliques 5 fois tres vite top sera encore a zero pendant que le script gere la transition vers 1000
animate peut prendre une callback en parametre qui sera éxécutée seulement à la fin de la transition

Code :

$(document).ready(function(){
    $(".prev",".next" ).click(function () {
      var direction = this.className == "up" ? -1 : 1;
      var top=parseInt($("#news_items_bloc" ).css("margin-top" ));
      var transParams = {marginTop: "+="+direction*210+"px"};
      function testHeight() {
            if (top<0) 
                $(".prev" ).hide()
            else if (top>xxx)  
                $(".next" ).hide()
            else 
                $(".prev",".next" ).show();
      }
      $("#news_bloc_move" ).animate(transParams, "slow", testHeight());
    });
 });

bon voila c ets un peu moins crade et ca devrait marcher
mais vu que t as pas capté pourquoi mon script marchait pas c est que t as pas de debugger
installe firebug pour firefox tu vas voir ca change la vie

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

FORUM HardWare.fr

Programmation

HTML/CSS

Jquery - Bug script perso- style Jcarousel (très très basique!!)

Sujets relatifs
Comment insérer un script et un code htlm sur un site?	Afficher le pic de charge dédiée via un script WMI ou VBS (BGInfo)
Insérer une condition VB dans Microsoft Script Editor	Script pr bloquer laffichage de mon site à partir d'un autre site web?
Script longs sur Pages Free -> Proc stockée ou php ?	Script SFTP entre 2 serveur windows
Script PHP sous UNIX	besoin d aide script de protection allopass
filezilla question très noob	Upload script PHP => serveur FTP
Plus de sujets relatifs à : Jquery - Bug script perso- style Jcarousel (très très basique!!)

Page générée en 0.077 secondes