PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

Accueil  |  Messages récents  | Connexion  |   | Français  FR
Accueil → WEBDEV 2024 → Changer la taille de l'entête au scroll vertical
Changer la taille de l'entête au scroll vertical
Débuté par Alan, 03 mai 2019 11:31 - 1 réponse
#1
Posté le 03 mai 2019 - 11:31
Bonjour, je reviens vers la communauté Webdev car j'ai un soucis:
Je souhaite lorsque la page s'affiche que l'entête (d'une image et d'une zone de texte riche) ait une taille de 200px
Mais un fois que l'on commence à scroller vers le bas, dès que le scroll est supérieur à 200 j'aimerais que l'entête voit sa taille diminuée à 100px

Comme on ne peut initialiser du code navigateur au lancement de la page sur une cellule, j'ai pensé à affecter ce code à l'image (ce qui n'est possible sur la zone de texte)

J'ai essayé de faire quelque chose comme ça :*
//Déclaration variable
ScrollY est un entier
ImageHauteur est un entier

//Affectation des valeurs
ImageHauteur=IMG_Logo..Hauteur
ScrollY=AscenseurPosition(PAGE_IdBerry,ascVert)

//Traitement
SI ScrollY >= 200 ALORS
ImageHauteur -= 100
IMG_Logo..Hauteur=ImageHauteur
SINON
ImageHauteur = 200
IMG_Logo..Hauteur=ImageHauteur
FIN


Problème : Impossible de modifier la propriété Hauteur à cause de l'ancrage (j'ai fait d'autres tests mais aucun changement)

Si quelqu'un aurait des pistes ou éventuellement déjà effectué ce je souhaite faire je suis preneur
Bon dev :)
#2
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 15 mai 2019 - 15:29
Bonjour Alan,

Je me suis prêté à cet exercice et j'ai réussi à obtenir un résultat satisfaisant.

Voici comment :

1 - Créer une page ou un modèle de page en mode zoning sans zone d'entête. Par exemple composée d'un conteneur principal et d'une zone pied de page. Nom de la page par ex PAGE_Test_ScrollEnteteFixe.

2 - En haut du conteneur principal insérer un champ HTML_Entête d'une hauteur initiale - par exe 65 - et de la largeur de la page. Cocher pour que ce champ puisse être superposé. Ancrage : la page PAGE_Test_ScrollEntete est son champ parent; largeur : adaptée au navigateur; hauteur d'édition.

3 - Créer deux popups dans cette page. Le premier - POPUP_Entete_Initial - devra contenir comme champs tout ce qui est désiré comme entête initial au chargement de la page. Largeur de la page, hauteur 65 comme pour le champ HTML. Ancrage par défaut.

4 - La deuxième popup - POPUP_Entete_Reduit - sera identique, à ceci prêt qu'il sera d'une hauteur réduite. par ex 32. Et que tous les champs qu'elle contient seront adaptés à cette hauteur réduite.

Code au chargement de la page (navigateur - onload) :
gnScroll_Derniere_Position_Connue est un entier
HTM_Entete = jQuery(POPUP_Entete_Initial).html()
JSEvénement(ajusteEntete,jsEvénementWindow,jsEvénementScroll,jsEvénementBubble)


Code de la procédure navigateur ajusteEntete() :
Procedure ajusteEntete(pclEvenementJS est un objet dynamique)

pclEvenementJS = Null

nScroll est un entier = AscenseurPosition(PAGE_TestScrollEnteteFixe,ascVert)

HTM_Entete..Y = nScroll

SI gnScroll_Derniere_Position_Connue < 200 ALORS
SI nScroll >= 200 ALORS
HTM_Entete..Hauteur = 32
HTM_Entete = jQuery(POPUP_Entete_Reduit).html()
FIN
SINON
SI nScroll < 200 ALORS
HTM_Entete..Hauteur = 65
HTM_Entete = jQuery(POPUP_Entete_Initial).html()
FIN
FIN

gnScroll_Derniere_Position_Connue = nScroll


Voilà, en espérant que cela puisse aider.

Bon dev!

--
René MALKA
Message modifié, 15 mai 2019 - 15:35
→ Revenir à WEBDEV 2024