11540 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
(reprise du message précédent)

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.
j'ai rajouté une span class="testy" pour faire pointer les éléments lors du défilement à cette endroit pour voir le blog.

J'ai donc modifié la class de l'ul en span pour le faire mettre en remplaçant :

var next_id = this.next('ul').attr('id');

mais pas moyen non plus Smiley decu
Re, alors voici le lien sur lequel j'ai avancé un peu ce que tu cherches, ça devrait mieux aller (ça reprends normalement ta structure d'article)

http://jsfiddle.net/Super_baloo8/RMLym/

(function($) {
    jQuery.fn.AppendLinks = function() {
        $('#tbr').fadeOut(150, function() {
            $(this).remove();
        });
        $('article').removeClass('highlight');
        if (this.prev('li').length) {
            var return_links = '<a href="#prev">&#8657;</a>';
        }
        if (this.next('li').length) {
            var return_links = ((!return_links) ? '' : return_links) + '<a href="#next">&#8659;</a>';
        }
        $('article', this).append('<span id="tbr">' + return_links + '</span>').addClass('highlight');
        return this;
    };
})(jQuery);

$(document).ready(function() {
    $('div.container ul>li>ul>li:first-child').AppendLinks();

    $('a[href="#prev"]').live('click', function() {
        $(this).parents('li').prev().AppendLinks();
        return false;
    });


    $('a[href="#next"]').live('click', function() {
        $(this).parents('li').next().AppendLinks();
        return false;
    });
});


Comment ça fonctionne ?

- Première étape, je définis mon premier article par ce sélecteur : div.container ul>li>ul>li:first-child (c'est un sélecteur classique CSS)
- la fonction "AppendLinks()" va chercher si il existe un LI frangin supérieur à celui défini à la précèdente étape
- Si il existe, ça signifie qu'il faut créer un lien "Précèdent"
- Il va aussi chercher si un LI frangin inférieur existe
- S'il existe, ça signifie qu'il faut créer un lien "Suivant"
- Après ces vérifications, il va ajouter au sélecteur définit à la première étape les bons liens, plus la class highlight.

Deuxième partie, on va gérer les clics sur ces liens générés, en cliquant sur le lien, on fait de nouveau appel à la fonction AppendLinks(), mais il faut dans un premier temps, changer le selecteur sur lequel sera appliqué la fonction, c'est pour cela que si:

- Le lien est "Précèdent", on cible le précèdent LI, et on applique la fonction
- Le lien est "Suivant", on cible le LI suivant, et on applique la fonction

Dans la fonction, on viendra bien sur supprimer tous les anciens liens créés, supprimer les class "highlight" de tous les "article", et j'ai rajouté une toute petite transition (fadeOut de 150 ms qui va jouer sur l'opacité pour les faire disparaitre, une fois les liens cachés, je les supprimes de la DOM (remove en callback)).

J'espère qu'avec ces explications tu y vois plus clair dans le fonctionnement, et que tu arriveras à tes fins Smiley cligne
Merci !
Je t'ai répondu par e-mail quand tu m'as envoyé le msg. Je ne sais pas si tu as reçu !

Je vais de ce pas essayer ce que tu viens de faire, merci pour les explications ca me sera très utile !

Encore merci !
J'ai bien reçu ton mail, mais si les explications peuvent servir à d'autre, autant les mettres sur le forum, c'est d'autant plus simple pour voir l'historique de la discussion Smiley cligne
bon je sais pas, ça fait 3hrs que je suis dessus, j'ai pourtant bien compris comment faire marcher le script mais rien à faire, je ne sais plus quoi faire, le 1er next apparait en cacher, qd je vérifie avec firebug il est bien la mais il ne s'affiche pas.

J'ai placé une span id/class="viensici" pour qu'il aille ici a chaque fois qu'on appui mais rien à faire. Le lien ne s'active pas, j'ai du faire une connerie :s

il apparait bien dans le code la span + le lien mais le lien est inactif il ne se passe rien.. Je deviens barge surtout quand on sait que ton code marche parfaitement !
je viens de regarder rapidement, attention, first-child point le selecteur, donc je pense que tu souhaite plutôt :

.blog>li:first-child (sélectionner le premier LI de ton UL.blog ?)

Ensuite, tu as un peu trop toucher le code de base, je m'y perds moi même.

Essaye de produire sur ce forum, le squelette de 3 articles.

Une fois les bases posées ça sera plus simple !

Ton squelette ressemble à un truc comme ça :

<ul>
<li>
<ul>
<li><article>article1</article>
</li>
</ul>
</li>
</ul>

			<ul class="blog">
				<li>
					<ul>
						<li>
							<article>
								<aside>
									<h2><?php echo $articles->titre; ?></h2>
                                    <time datetime="<?php echo date("Y-m-d",strtotime($articles->date)); ?>"><span class="icon-heure"></span><?php echo date("d M Y",strtotime($articles->date)); ?></time><span class="auteur">Par <a rel="author" href="https://plus.google.com/106329878949359854417/posts" target="_blank">Arthur Badalian</a></span>
								<?php echo $articles->contenu; ?>	
								</aside><span id="<?php echo $articles->id; ?>"></span>
                                <ul class="lb-album-blog sizeimg">
                                	<li>
                                        <a href="../assets/images/<?php echo $articles->image; ?>.jpg" class="blackbox" title="<?php echo $articles->titre; ?>"><img src="../assets/images/<?php echo $articles->image; ?>.png" alt="<?php echo $articles->titre; ?>"><div class="openup"><div class="bouton-blog"></div></div></a>
                                    </li>
                                </ul>
							</article>
						</li>
					</ul>
				</li>
             </ul>


C'est le squelette de base, j'ai essayé de faire en sorte que le lien next/prev soit crée juste après l'ul .blog avant le li.

Ensuite j'ai besoin qui me pointe sur l'article suivant.
J'ai placé une span qui fait pointer tous les éléments de l'article mais sans résultat
Alors je fait un vrai squelette pour bien pointer mes sélecteurs :

<li>
				<article>
					<aside>
						<h2>Titre</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id1">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
			</li>


Par contre, chaque article est un LI ? Ou tout les ARTICLE sont à la suite ?

Est-ce comme ceci (tous les article dans le même LI)

<ul class="blog">
	<li>
		<ul>
			<li>
				<article>
					<aside>
						<h2>Article1</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id1">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
				<article>
					<aside>
						<h2>Article 2</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id2">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
			</li>
		</ul>
	</li>
</ul>


Ou un LI par article ?

<ul class="blog">
	<li>
		<ul>
			<li>
				<article>
					<aside>
						<h2>Article 1</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id1">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
			</li>
			<li>
				<article>
					<aside>
						<h2>Article 2</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id1">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
			</li>
			<li>
				<article>
					<aside>
						<h2>Article 3</h2>
						<time datetime="date">
							<span class="icon-heure">Icone</span>
							Date
						</time>
						<span class="auteur">
							Par <a rel="author" href="#" target="_blank">Auteur</a>
						</span>
					Texte de l'article  
					</aside>
					<span id="#id1">ID</span>
					<ul class="lb-album-blog sizeimg">
						<li>
							<a href="#">
								<div class="openup">
									<div class="bouton-blog">
									</div>
								</div>
							</a>
						</li>
					</ul>
				</article>
			</li>
		</ul>
	</li>
</ul>


Tant que je ne suis pas sur de ta structure, le code n'est pas faisable !
Si c'est le premier cas, voici le code : http://jsfiddle.net/Super_baloo8/E9DHc/

Si c'est le deuxième cas, voici le code : http://jsfiddle.net/Super_baloo8/8D87z/

Attention, il n'y a aucune ancre de définis dans ton code, donc je ne peux diriger nulle part.

Le top, serait que l'ID de l'ancre soit défini sur ARTICLE

Donc avec l'ID sur ARTICLE on obtient de bon liens comme :

Si c'est le premier cas, voici le code : http://jsfiddle.net/Super_baloo8/vFxbK/

Si c'est le deuxième cas, voici le code : http://jsfiddle.net/Super_baloo8/WKqL9/

Voilà, normalement tu as toutes les billes pour y arriver !
J'oubliais, ta structure est vraiment lourde, pourquoi avoir fait aussi compliqué pour une simple suite d'article ?

Autant rester sobre, une suite de "<article>" les uns en dessous des autres est bon.

Même sémantiquement parlant, je ne vois pas vraiment ce qu'apporte le fait de mettre une liste là dedans.

Mais ceci est un autre sujet, mais je voulais t'en parler quand même !
Pour la sémantique on est d'accord, j'ai repris et repris du code et j'ai allourdi à la longue, va falloir que je retape dedans mais ça implique bcp de changement .css et à l'heure actuel j'ai la flemme... Mais je vais devoir retaper c'est sur.

Pour information le code que j'ai donné c'est pour un seul article, chaque bloc d'article à ce code la.

Il commence par : <ul class="blog">
et ce fini par </ul>

Merci pour ton aide en tout cas !
oui je vais me débrouiller maintenant !
Tu m'as déjà grandement aidé !

Merci beaucoup !
Pages :
Sujet clos
Aller à