Discussion :

[arnlig3550]

Bonjour,

Je viens vers vous suite à un problème de code ...

J'ai actuellement un site créé sous Wordpress. Sur quelques pages du site, j'aimerai ajouter une flèche gauche sur la partie gauche de l'écran et une flèche droite, sur la partie droite de l'écran.
Ces flèches serviraient pour naviguer d'une section à une autre sans repasser à chaque fois par le menu du site.

J'ai donc créé mes boutons gauche et droite sur mes pages dont la div à pour CSS "position: fixed;" de façon à voir tout le temps les boutons sous les yeuc.
Et c'est là que je rencontre un soucis. J'aimerais que lors du scroll vers le bas, mon bouton s'arrête à 50px du bottom d'une div qui se trouve plus bas dans la page.

J'ai compris que le seul moyen était de passer par du JS, j'ai donc trouvé le code ci-dessous sur internet, mais il est apparemment adapté pour que la div en position fixed, s'arrête par rapport au top du footer, dans mon cas il faudrait qu'elle s'arrête par rapport au bottom d'une div. Donc il y a surement des modifs à faire mais j'ai du mal à voir quoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').offset().top-150) { 
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});

Peut-on m'aider s'il vous plait ?

Merci !

[Toufik83]

bonjour,

peut-on voir ton code html?

est ce que tu es obliger d'utiliser position:fixed en Css ? regarde un peu ICI, je l'ai fais sans position:fixed et je ne comprends pas pourquoi tu veux le faire.
dis moi si j'ai raté quelques choses...

[arnlig3550]

Bonjour et merci pour votre aide !

Etant sous Wordpress, je n'ai pas de fichier HTML "pur", c'est Wordpress qui le génère. Donc au pire je peux vous donner "le code source de la page" mais je pense qu'avec JSFiddle ça devrait aller.

Sinon pour la position fixed, non je ne suis pas obliger de l'utiliser si une autre méthode est mieux, c'est juste que la position fixed était pour moi, au vu de ma connaissance, la seule méthode.

J'ai donc regardé votre lien. J'ai modifié un peu le code HTML dont voici le lien pour se rapprocher un peu plus de ce que je recherche. En fait j'ai juste modifier l'emplacement de la cible, elle se trouve entre le 3ème et le 4ème élément, donc je voudrais que les flèches de navigation s'arrête à ce niveau là même si on continue de scroller plus bas, donc faut modifier le JS mais là ce n'est plus dans mes compétences .

Autre détail, au lieu que les flèches soit centrée sur la hauteur de l'écran, j'aimerais qu'elles soient plutôt à une distance définie du haut de l'écran, par exemple "top:500px;", est-ce possible ?

Merci

[Toufik83]

pour que les boutons de navigation s'arrêtent exactement a notre div cible, voilà le code ICI

en ce qui concerne la fixation des boutons a 500px du Top, n'oublie pas que lorsque tu redimensionne ton navigateur, les dimensions seront changés, alors que si tu met top:500px, le Css gardera cette valeur même si tu as redimensionné ton navigateur, ce qui va te provoquer une déformation de ta page.

je te conseil d'utiliser les pourcentages dans ce cas.

[arnlig3550]

Merci pour ce code !

Je vais essayer de le mettre en oeuvre dans Wordpress et je vous tiens au courant

[arnlig3550]

Bon, les nouvelles ne sont pas bonnes ...

Je n'arrive pas à faire fonctionner la position absolute sur les flèches, il doit y avoir quelque chose qui bloque dans mon thème Wordpress mais je vois pas quoi ... Quand j'inspecte la page, c'est bien marqué "position: absolute" mais les flèches restes là où je les aies mises, elles ne montent pas à 50%. Par contre la position fixed fonctionne ! Donc est-il possible de revoir le code avec la position fixed ?

[Toufik83]

bonsoir,
si tu veux utiliser position fixed il y'auras quelques changements au niveau du css, la class conteneur sera défini ainsi :

Code Css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.conteneur{
      text-align:center;width:90%;
      position:fixed;overflow-y: auto;max-height:90%;
}

https://jsfiddle.net/1nb3vdwb/

[arnlig3550]

Bonjour,

Bon, j'ai toujours le même soucis puisque les boutons gauche et droite ont toujours la position absolute (je ne sais toujours pas pourquoi elle ne fonctionne pas).
Quand je disais que la position fixed fonctionnait, c'était sur les boutons et non sur le conteneur. Donc j'ai modifié le CSS de cette façon, mais le problème c'est que les boutons ne s'arrête plus à la cible.
Faudrait revoir le script en fonction de mon CSS pour que les boutons s'arrête à la cible, est-ce réalisable ?

[Toufik83]

oui, en jquery et Css tout est réalisable, il faut juste comprendre ce qu'on fait avant de réaliser quoi que se soit.
si tu insiste de mettre les boutons en position fixed, le script doit être comme ça : https://jsfiddle.net/8keom405/

[arnlig3550]

Bonjour,

Pour la position fixed sur les boutons, si "j'insiste" c'est juste par obligation car je n'arrive pas à faire autrement. Mais sache qu'en aucun cas je ne mets en doute ta solution.

Pour ce qui es du code, c'est bon j'ai réussi à le faire fonctionner ! Cela dis, j'ai 2 petits soucis :

1- L'idéal serait que le bottom des boutons s'arrêtent à 50px par rapport au top de la cible. Dans le cas actuel c'est le top des boutons qui est pris en compte.
2- Sur écran de petite résolution, les boutons se trouvent cachés derrière mon header (j'ai une image de 400px de haut à chaque page) donc faudrait que les boutons démarrent qu'après le header. Je pense qu'en mettant une cible de départ et une d'arrivée, les boutons se déplaceraient uniquement entre ces 2 cibles, c'est faisable ?

[Toufik83]

supposons que ton header est le div ayant la classe "header" en haut de la page.
https://jsfiddle.net/refw25td/

[arnlig3550]

Bonjour,

Encore un petit soucis (qui apparait aussi d'ailleurs sur le dernier lien JSFiddle).
Arrivé à la cible, les boutons vont dessous comme avant puis remonte à l'endroit voulu en faisant un saut (plutôt que s'arrêter directement à l'endroit voulu). Ca fait pas très beau ^^.

Pouvez-vous revoir ce petit "bug" ?

Merci

[Toufik83]

https://jsfiddle.net/4d68bu6j/
oui, c'est vrai, nous avons oublié d'ajouter "+100" a la condition Top=scrollTop+entete.height()<cible.offset().top, maintenant je crois que le bug à disparu.

[arnlig3550]

Suite à votre modification du code, c'était mieux mais j'ai dû jouer avec les "+100" et "-100" et c'était bon, les boutons fonctionnent comme je veux !

Par contre, j'ai un petit problème au niveau du chargement. Mes pages se chargent en AJAX et mes boutons ne s'affichent pas ! Pour qu'ils s'affichent, je dois commencer à scroller. Saurez vous résoudre ce problème ?

[Toufik83]

Par contre, j'ai un petit problème au niveau du chargement. Mes pages se chargent en AJAX et mes boutons ne s'affichent pas ! Pour qu'ils s'affichent, je dois commencer à scroller. Saurez vous résoudre ce problème ?

tu peux nous montrer ta fonction ajax et ce qu'elle fait au moment du chargement de tes pages?

[arnlig3550]

Bonjour

Je viens de trouver un fichier nommé "ajax.js" mais il y a tellement de code à l'intérieur que je ne sais pas quelle partie vous donner !
Ce que je peut vous dire c'est que j'ai une transition "fade" entre chaque page.
Ci-dessous une partie de code du fichier, je ne sais pas si ça vous sera suffisant ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function balanceNavArrows () {
	"use strict";
 
	var navLinks;
	if($j('.vertical_menu a').length){
		navLinks = $j('.vertical_menu a');
	} else {
		navLinks = $j('.main_menu a');
	}
 
	var seenCurrent = false;
	navLinks.each(function (link) {
		var me = $j(link);
		if (me.hasClass('current')) {
			seenCurrent = true;
			return;
		}
		if (seenCurrent) {
			me.removeClass('up');
			me.removeClass('left');
			me.addClass('down');
			me.addClass('right');
		} else {
			me.removeClass('down');
			me.removeClass('right');
			me.addClass('up');
			me.addClass('left');
		}
	});
}

En parallèle, j'ai informé l'assistance de mon thème Wordpress pour ce problème de chargement, j'attends leur réponse ...

[Toufik83]

Bonjour,as-tu mis la fonction Css dans une fonction $(document).ready() ?
$(document).ready() est la fonction qui s’exécute quand le document est prêt.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(document).ready(function(){
$(".gauche,.droite").css("top",$(".header").offset().top+$(".header").height()+10);
....
});

[arnlig3550]

Oui car j'ai fais un copier/coller du code JSFiddle, donc c'est bien marqué. j'ai adapté mon code après.

[Toufik83]

si c'est la transition fade qui cache les boutons, il faut alors chercher la fonction qui traite la transition, et tu ajoute l'exception des boutons dans le selecteur avec :not(.gauche,.droite).
sinon, essai de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".gauche,.droite").css("top",$(".header").offset().top+$(".header").height()+10).fadeIn(100);

après la fonction qui traite la transition.

[arnlig3550]

Bonjour,

Je crois avoir trouvé la bonne partie du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
else if(animation === "ajax_fade"){
 
            $j('header.page_header.ajax_header_animation .drop_down > ul > li').mouseout(); // remove hover event from menu elements
            $j('header.page_header.ajax_header_animation').stop().fadeTo(animationTime, 1);
 
			newContent.css({visibility: 'visible', display:'none'}).stop().fadeTo(animationTime, 1, function(){
				initElementsAnimation();
				initFullScreenTemplate();
				initPortfolioSingleInfo();
				initTitleAreaAnimation();
				initSmallImageBlogHeight();
				$j('.blog_holder.masonry').isotope( 'layout');
				$j('.blog_holder.masonry_full_width').isotope( 'layout');
				$j('.q_masonry_blog').isotope( 'layout');
				$j('.content').css('min-height',$j(window).height()-$j('header.page_header').height()-$j('footer:not(.uncover)').height()); // min height for content to cover side menu bar
				if($j('nav.content_menu').length > 0){
					content_menu_position = $j('nav.content_menu').offset().top;
					contentMenuPosition();
				}
                initParallax(); //has to be here on last place since some function is interfering with parallax
				callCallback(callbacks,"oncomplete", null, []);
                $j(document).trigger( "qodeAjaxPageLoad");
			});

Si je rajoute cette ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$j(".gauche,.droite").css("top",$j(".header").offset().top+$j(".header").height()+10);

juste avant la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$j(document).trigger( "qodeAjaxPageLoad");

par exemple, le problème du chargement est résolu mais il manque l'effet fade ! Tout le reste bénificie du fade sauf mes boutons, pourquoi ? Le code n'est pas à la bonne place ?