Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - flèche de scrolling
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

flèche de scrolling

 Répondre Répondre
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9856
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: flèche de scrolling
    Envoyé : Oct 07 2015 à 8:30am
Bonjour,

Voila ma problématique.
Toujours sur le modèle onepage de Larsène, avec mes blocs panels dedans (dont 2 hors dimensions mais spécifiés dans le code js), j'ai mis quelques flèches pour effectuer un scrolling en douceur avec la fonction scrollto.
Tout roule.
Sauf sur 2 partie, ou justement le panel ne s'adapte pas (volontairement) à l'écran, du fait que j'ai spécifié sur le bas du panel un panneau d'éléments avec une image en parallax.
Un peu comme le modèle d'origine responsive d'OE, j'aurais aimé pouvoir ne mettre ma flèche qu'une seule fois, et que celle ci est comme fonction de descendre au panel suivant. J'ai regardé le modèle responsive mais je n'ai pas encore réussi à reproduire avec succès le même phénomène. Des erreurs bloquant le parallax.

Le site en question. Suis je assez clair?
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 8:38am
Bonjour,

Apres des nuis pareils, je ne suis pas sur d'avoir compris.. Vous voulez un element en position:fixed qui est toujours visible (sauf si on arrive au but) et qui detecte automatiquement la prochaine "section" pour y defiler? Vous n'avez pas peur que pour certains tailles d'ecran la fleche empietinera sur le design de facon aleatoire et le gachera?

Sinon, j'ecrirai le code un peu plus tard (sauf si quelqu'un veut d'amuser a ma place).

Cordialement
D
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9856
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 8:44am
non, car j'ai fait en sorte (pour l'instant) que les éléments intérieurs s'adaptent à une résolution de 1020 * 650. Donc, cela devrait rouler. Pour plus petit, le temps de finaliser le modèle responsive, on cachera par query cette flèche. Wink
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5384
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 9:08am
par du css plutôt que du jQuery Wink
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9856
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 9:11am
Message posté par Larsene Larsene a écrit:

par du css plutôt que du jQuery Wink

les 2 pour être exact Big smile
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 10:10am
Voici la solution.

 - Assurer qu'il y a le Classe Perso "bigpanel" sur le panneau principal (c'est le cas sur le site)

 - Ajouter un element a cliquer (une fleche), avec le Classe Perso "arrow"

 - Ajouter un Bloc de Code Source type CSS:

.arrow {
position: fixed !important;
top: auto !important;
bottom: 40px !important;
left: auto !important;
right: 40px !important;
}

@media (max-width: 1023px) {
.arrow { display: none !important; }
}

 - Ajouter un Bloc de Code Source type Javascript:

$(function(){
var $sections = $('.bigpanel  .OECT_Content').children('.OERelLine');
var $lastSection = $sections.last();
var ignoreDist = 40; // in px, ignorer la section s'il est si pres de la haut de la fenetre
$('.arrow').click(function(){
// hauteur et position du scroll de la fenetre:
var windowTop = $(window).scrollTop();
// tous les sections de la page:
$sections.each(function(){
var sectionTop = $(this).offset().top;
if (sectionTop > windowTop+ignoreDist) { // on a trouve la "prochaine" section
$('html, body').animate({ scrollTop: sectionTop }, 800);
return false; // arreter la boucle
}
});
});
$(window).scroll(function(){
var windowHeight = $(window).height();
var windowTop = $(window).scrollTop(), 
windowBottom = windowTop + windowHeight;
var lastSectionTop = $lastSection.offset().top;
var lastSectionBottom = lastSectionTop + $lastSection.height();
$('.arrow').toggle(lastSectionBottom > windowBottom+ignoreDist); // desider s'il faut cacher la fleshe si on est sur la derniere section
})
.scroll();// appeller la fonction au debut
});


Edité par Dmit OE - Oct 07 2015 à 10:11am
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9856
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Oct 07 2015 à 10:13am
super Dmit Clap

Je vais tester ca de suite. Sinon, sur l'autre topic, avec le code que tu m'as donné pour le bloc réservation, il n’apparaît pas sous Safari Mac. Une idée??

J'ai un peu regardé et trouvé ce topic qui en parle.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,029 secondes.
Acheter votre vélo en ligne