11540 sujets

JavaScript, DOM et API Web HTML5

Besoin d'un petit script avec des boutons next/prev

Pages :
Bonjour à tous,

J'ai un soucis très simple mais que je n'arrive pas à résoudre depuis tout à l'heure et ça commence sérieusement à me les *****.

J'essaye tout bêtement d'afficher 2 liens, un avec le bouton next, et l'autre avec le bouton prev.
Jusque là rien compliqué.

Ces deux boutons permettent à l'utilisateur d'aller sur l'article du blog en dessous, je veux tout simplement rajouter un "confort" à l'utilisateur qui en appuyant sur le bouton next attérit directement sur l'article. (Les articles sont assez long donc demande du scroll).

J'ai essayé 2/3 scripts trouvé par si par la dont celui de css-trick. Mais rien à faire je n'arrive pas à le faire fonctionner...

Base :

<section id="cycle-1">
<ul id="blog-1">
<li> truc muche</li>
<article>etc...</article>
</ul>
<ul id="blog-2">
<li> truc muche</li>
</ul>
<ul id="blog-3">
<li> truc muche</li>
</ul>
</section>

Je veux que le bouton next fasse descendre la personne sur l'article .blog 1/2/3/4/5/ etc.. et prev l'effet inverse tout en jquery.

Merci d'avance
je comprend toujours pas le rapport. Je demande si qq1 aurait un script pour faire cette effet car je n'arrive pas à le trouver avec moulte essai ?!

Quand j'aide une personne en intégration parce qu'il ne sait pas faire quelque chose je lui balance pas le petit #8 de la FAQ.
merci mais j'étais déjà tombé dessus, rien n'a fonctionné par rapport à mes div.
Je l'ai fais en CSS en attendant avec des liens placés sur des ancres mais bon, c'est pas automatique c'est pénible Smiley decu
Salut,

Grosso merdo, il faut jouer avec le sélecteur parent() (jquery) et le sélecteur CSS enfant > pour arriver à tes fins.

Tu es sur ton premier lien (next), tu vérifie qu'il existe bien un autre bloc après celui ci (tu remontes sur le parent commun, et tu test si il existe un bloc suivant, si le bloc existe, tu récupère sont attribut ID, et tu fait ton lien suivant.

Pareil dans le sens inverse.
Salut,

Merci pour ce guide, mais j'ai déjà testé quelque chose qui ressemble fortement à ce que tu m'as décrit, mais il ne repère rien, j'ai du m'y prendre comme une buse. Il n'y a rien à faire en .js rien ne fonctionne j'ai du me gourer quelque part Smiley ohwell

Je vais rester en .CSS pure tant pis lors que je rajouterai un article faudra le refaire a la mano Smiley decu
Y'a surement bien meilleure, mais rapidement :

http://jsfiddle.net/Super_baloo8/aejwp/

(function($) {
    jQuery.fn.AppendLinks = function() {
        function previous_ul(id) {
            return '<a id="cl_prev" href="#previous">Previous</a>';
        }

        function next_ul(id) {
            return '<a id="cl_next" href="#next">Next</a>';
        }
        var next_id = this.next('ul').attr('id');
        var prev_id = this.prev('ul').attr('id');
        $('#cl_prev, #cl_next').remove();
        if (prev_id) {
            var return_links = previous_ul();
        }
        if (next_id) {
            var return_links = ((!return_links) ? '' : return_links) + next_ul();
        }
        $('ul').removeClass('highlight');
        return this.append(return_links).addClass('highlight');
    };
})(jQuery);

var id_section = 'cycle-1';
$('#' + id_section + ' ul:first-child').AppendLinks();

$('#cl_prev').live('click', function() {
    $(this).parent('ul').prev().AppendLinks();
    return false;
});


$('#cl_next').live('click', function() {
    $(this).parent('ul').next().AppendLinks();
    return false;
});

Modifié par Super_baloo8 (29 Nov 2012 - 19:47)
bon bah rien à faire, je n'arrive pas à le faire fonctionner, j'ai bien mis des ID a mes ul, j'ai bien la section avec l'id cycle-1.

Le jQuery est bien appelé & le script est bien appelé pige pas Smiley ohwell
Peux-tu mettre le code exact (Jquery) que tu as mis, plus un bout précis de ton html ?

Car je pense avoir une idée d'où ça pêche (les sélecteurs next()/prev())
j'ai essayé de pointer directement les ul sur le .blog en mettant ul.blog etc.. rien à faire, il ne me crée pas le lien
Ce que j'ai fais est en dur, dès que je vais rajouter un news va falloir que je le fasse à la mano et c'est **** Smiley decu
Il faut revoir les bases !!!

On n'appelle pas comme ça du code Jquery, il faut lui dire d'attendre que la DOM soit chargée, et donc, il faut plutôt l'inclure comme ceci :

 $(document).ready(function() {
//le code
});


Je t'ai remis le code à jour sur jsFiddle, n'hésite pas à faire un fork, et jouer avec !

P.S: Je voulais regarder si la syntaxe html est bonne, mais depuis chez moi le validateur W3 est inaccessible Smiley decu

P.S²: Je viens de lancer mon code tel quel dans la console de firebug, et ça fonctionne, enfin, je vois un lien next apparaître, mais partout.

Alors pourrais-tu donner ici le squelette de chaque article, car dans le code source c'est le fouilli Smiley cligne
Modifié par Super_baloo8 (29 Nov 2012 - 23:11)
je préfère l'HTML5 / CSS3 que le jQuery !

Mais oui le jQuery vais me pencher dessus quand j'aurais un peu plus le temps. Smiley confused

Le site est entièrement valide en HTML5 sur le W3C hormis la page portfolio.
Je vais voir ça !

Le squelette de chaque article c'est :

<section> je l'ai rajouté car j'ai vu que ton script était basé sur une section avec l'id.

Ensuite :

<div class="container etc.. etc.."> qui englobe le tout pour le positionner et l'id me sert pour l'ancre et faire remonter quand on est a l'article 2

ensuite l'article :
<ul class="blog">
qui me permet de positionner les 2 liens en dehors du bloc sans me taper l'overflow hidden, oui je connais la méthode avec ::after qui imite l'hidden, mais pour un soucis j'ai préféré ne pas l'adopter.

Bref pour résumer : 


<section>
   <div class="container">
      <ul>
         <li>
            <ul>
              <li>
               <article>
                 <aside>
                   le blabla de l'article
                 </on ferme tout>
         </li>

      </ul>
   </div>

</section>
Ah, le next apparait, le previous/next egalement quand on appui dessus. j'ai up sur le ftp.

Tu peux voir les changements

Je vais voir comment le faire fonctionner en bidouillant les classes.
Pages :
Sujet clos
Aller à