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

Jquery - Bug script perso- style Jcarousel (très très basique!!) - HTML/CSS - Programmation

Marsh Posté le 26-07-2008 à 14:46:45    

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.

Reply

Marsh Posté le 26-07-2008 à 14:46:45   

Reply

Marsh Posté le 27-07-2008 à 08:05:06    

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

Code :
  1. $(document).ready(function(){
  2.     $(".down .up" ).click(function () {
  3.       var direction = this.className == "up" ? -1 : 1;
  4.       var top=parseInt($("#news_items_bloc" ).css("margin-top" ));
  5.       if (top<0) 
  6.           $(".up" ).hide();
  7.       else if (top>xxx)  
  8.           $(".down" ).hide();
  9.       else $(".up .down" ).show();
  10.         $("#news_bloc_move" ).animate({
  11.             marginTop: "+="+direction*210+"px"
  12.         }, "slow" );
  13.     });
  14.  });


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
Reply

Marsh Posté le 27-07-2008 à 23:49:58    

Salut
%

Reply

Marsh Posté le 27-07-2008 à 23:50:09    

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 :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.                     "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. #news {
  7.         width:300px;
  8.         height:300px;
  9.         margin: 0 auto 0 auto;
  10.         background-color:aqua;
  11.         padding:10px;
  12.         }
  13. #news_in {
  14.         width:260px;
  15.         height:205px;
  16.         background-color:yellow;
  17.         margin:10px;
  18.         overflow:hidden;
  20. }
  21. #news_bloc_move {
  22.         position:relative;
  23.         top:0px;
  24.         width:260px;
  25.         height:205px;
  26.         }
  27. .news_bloc_item {
  28.         height:100px;
  29.         background-color:pink;
  30.         margin-bottom:5px;
  31. }
  32. .news_bloc_item p{
  33.         margin:0;
  35. }
  36. </style>
  37. <script src="http://code.jquery.com/jquery-latest.js"></script>
  38. <script type="text/javascript">
  39. $(document).ready(function(){
  40.         $(".prev" ).hide();
  41.         $(".next" ).click(function()
  42.                 {
  43.                 $(".prev" ).show();
  44.                 $("#news_bloc_move" ).animate({ "top": "+=-210px" }, "slow" );
  45.                 if (parseInt($("#news_bloc_move" ).css("top" )) <=-630) { $(".next" ).hide(); }
  46.                 });
  47.         $(".prev" ).click(function()
  48.                 {
  49.                 $(".next" ).show();
  50.                 $("#news_bloc_move" ).animate({"top": "+=210px"},  "slow" );
  51.                 if (parseInt($("#news_bloc_move" ).css("top" )) >=-210) { $(".prev" ).hide(); }
  52.         });
  53. });
  54. </script>
  55. </head>
  56. <body>
  57. <div id="news">
  58. <a href="#" class="next">Next</a>
  59. <a href="#" class="prev">Prev</a>
  60. <div id="news_in">
  61. <div id="news_bloc_move">
  62. <?php
  63. for ($i=1;$i<11;$i++) {
  64. echo "<div class=\"news_bloc_item\">\n";
  65. echo "<p>Bloc".$i."</p>\n";
  66. echo "</div>\n";
  67. }
  68. ?>
  69. </div>
  70. </div>
  71. </div>
  72. </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 !!

Reply

Marsh Posté le 28-07-2008 à 00:16:18    

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 :
  1. $(document).ready(function(){
  2.     $(".prev",".next" ).click(function () {
  3.       var direction = this.className == "up" ? -1 : 1;
  4.       var top=parseInt($("#news_items_bloc" ).css("margin-top" ));
  5.       var transParams = {marginTop: "+="+direction*210+"px"};
  6.       function testHeight() {
  7.             if (top<0) 
  8.                 $(".prev" ).hide()
  9.             else if (top>xxx)  
  10.                 $(".next" ).hide()
  11.             else 
  12.                 $(".prev",".next" ).show();
  13.       }
  14.       $("#news_bloc_move" ).animate(transParams, "slow", testHeight());
  15.     });
  16.  });


bon voila c ets un peu moins crade :D 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 :D


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed