Paneau d'éléments cliquable

Imprimé depuis: Forum openElement
Categorie:

openElement

Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23934
Date: 26 Sep 2023 à 09:23
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com

Sujet: Paneau d'éléments cliquable

Posté par: disbras
Sujet: Paneau d'éléments cliquable
Posté le: 24 Août 2020 à 13:07

Bonjour,

Je débute sur open élément et je tente de faire un site web responsive. Pour l'instant tout se passe bien concernant cette partie là, le redimensionnement de la fenêtre modifie correctement l'interface. Cependant, je n'arrive pas à rentre un paneau d'éléments (ou div) entièrement cliquable. J'ai vu sur internet que cela était possible en implementant une ligne dans le code html. Mon but serait comme pour les sites d'informations, d'avoir un texte et une image (le tout contenu dans mon paneau d'éléments) qui au clic dans la zone du paneau me redirige vers une autre page de mon site.

Pouvez vous m'aider?

Merci d'avance pour l'aide que vous m'apporterez et très bonne journée.

Prenez soin de vous

Réponses:

Posté par: Hobby001
Posté le: 24 Août 2020 à 13:55

Bonjour et bienvenue

Pour découvrir OpenElement, je vous suggère de consulter les tutos créés par des utilisateurs et dont vous trouverez la liste ici https://forum.openelement.com/fr/forum_posts.asp?TID=22320&title=rcapitulatif-des-tutoriels" rel="nofollow - .

Avant de commencer un site, je vous suggère ces courts vidéos

1. Le format adaptatif(responsive) d’une page WEB https://youtu.be/ouAg6yqdBZs" rel="nofollow -

2. Les positionnement relatif vs absolu dans OE http://youtu.be/7ThgFBmjTQk" rel="nofollow - https://youtu.be/7ThgFBmjTQk

Certains, comme les tutos de Larsene, principalement sur l'aspect adaptatif (Responsive), sont accompagnés de vidéos très utiles https://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne%20" rel="nofollow - . Ces tutos sont basés sur une version moins récente d'OpenElement.

Finalement il y a le WIKI dont vous trouverez le lien en haut de cette page.

Vous trouverez sur ce forum de l'aide pour des questions précises. Cette aide est offerte bénévolement mais en échange nous nous attendons à ce que vous exploriez le logiciel et en développiez la connaissance avant de poser vos questions.

OpenElement vous propose une foule de modèles dont certains sont adaptatifs et, de ce fait, beaucoup plus d'actualité.

Sensode en propose aussi quelques-uns des plus complets mais contre une rétribution minime par rapport au coût de développement. https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode" rel="nofollow -

Des éléments complémentaires créés par différents intervenants sont aussi disponibles. Vous en trouverez la liste ici: https://forum.openelement.com/fr/forum_posts.asp?TID=22573&title=liste-des-lments-proposs" rel="nofollow -

Encore une fois, bienvenue.

P.S.

Il est important que vous compreniez que toute aide fournie ici est donnée par des bénévoles.

Nous ne sommes pas le personnel de openElement.

Nous sommes heureux d'aider lorsque nous sommes disponibles pour fournir des conseils, des astuces et parfois un petit bout de code. Nous apprécions que les usagers fassent un effort sérieux de recherche et d'autoformation.

Certains d’entre nous travaillent en Europe, d’autres ailleurs dans le monde. Conséquemment le délai de réponse peut aussi dépendre des fuseaux horaires.

Lorsque l'exigence est trop importante, elle peut être contractée et la rétribution exigée paiera le développement.

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: Hobby001
Posté le: 24 Août 2020 à 14:01

Une fois que vous vous serez familiarisé avec le code javascript

Ajoutez une classe personalisée à votre panneau d'éléments, disons ProchainePage

Puis ajoutez le code JS suivant à votre page:

$(".ProchainePage").click(
function(){
window.open("url de votre nouvelle page","_self");
}
);

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: disbras
Posté le: 24 Août 2020 à 15:20

Bonjour,

Merci beaucoup pour votre reponse, je viens de faire le test avec un bloc de code, et en implémentant votre code exactement comme ecrit (en changeant juste l'url par "index.htm" pour faire un test. Cependant, rien ne se passe.

Pouvez-vous m'aider s'il vous plait ?

P.S j'ai bien ajouté ma classe personalisée au paneau d'éléments

Merci beaucoup !

Posté par: brolysan
Posté le: 24 Août 2020 à 15:25

vous aidez comment, sans accès au projet et encore moins à une page en ligne? Wink

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie

Posté par: disbras
Posté le: 24 Août 2020 à 16:12

https://www.transfernow.net/ddl/rcet" rel="nofollow - https://www.transfernow.net/ddl/rcet

Bonjour,

Voici plus haut le lien vers le rar du projet de mon site.

J'aimerais rediriger dans un premier temps le visiteur vers l'accueil (index.htm) lorsqu'il clique sur le panneau d'éléments de classe perso : rcet sur la page downloads

Merci beaucoup !

P.S Le code javascript en question n'est pas le même que proposé car j'ai tenté d'autres codes entre temps

Posté par: Hobby001
Posté le: 24 Août 2020 à 16:44

Ce code est bon et vérifié:

$(".ProchainePage").click(
function(){
window.open("index.htm","_self");
}
);

Assurez-vous simplement de respecter la casse dans le nom de classe perso

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: brolysan
Posté le: 24 Août 2020 à 16:56

le code fonctionne je confirme, mais pensez BIEN à respecter ceci :

.rect au lieu de #WErect (comme vous avez modifié)
l'url doit bien être votre site avec index.htm à la fin.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie

Posté par: disbras
Posté le: 24 Août 2020 à 17:09

Bonjour,

Je n'arrive toujours pas à faire fonctionner le code de mon côté, avez-vous une idée ? (J'ai bien remplacé tel que vous me l'avez dit)

Merci beaucoup !

Posté par: Hobby001
Posté le: 24 Août 2020 à 22:53

Voici ce que vous avez entré:

$("#rcet").click(
function(){
window.location.replace("http://www.w3schools.com");
}
);

Voici ce que je vous ai recommandé avec vos paramètres

$(".rcet").click(
function(){
window.open("index.htm","_self");
}
);

Trouvez l'erreur

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: disbras
Posté le: 25 Août 2020 à 09:23

BBonjour,

C'est ce que j'avais re tré adin de réaliser d'autres tests, comme le second code que vous me proposez n'avait pas marché. Cependant je me demande si la version de open element peut être à l'origine de ce problème, et non le code, car s'il marche pour vous il lz devrait aussi pour moi.

Je vais essayer de faire une mise à jour d'open element dans la journée s'il en existe une, et vérifier ça.

Je reviens vers vous dès que possible !

Posté par: disbras
Posté le: 25 Août 2020 à 09:25

Je viens de vérifier, mais je possède bien la dernière version du logiciel. Je ne sais plus quoi faire, votre code semblant marcher de votre côté.

Posté par: Hobby001
Posté le: 25 Août 2020 à 12:06

disbras a écrit:

Je viens de vérifier, mais je possède bien la dernière version du logiciel. Je ne sais plus quoi faire, votre code semblant marcher de votre côté.

Je vois que votre page empêche la détection de l'événement click(); via JS sans générer de message d'erreurs

Si ce n'est pas volontaire, refaites la au complet.

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: brolysan
Posté le: 25 Août 2020 à 13:46

mais si , ca fonctionne, hormis les erreurs dans le code, y a aussi une autre modif à faire.
Déjà, voila le code EXACT à mettre :


$(".rcet").click(
	function(){
		window.location.replace("http://www.w3schools.com","_self");
		
	}

);

Et aussi, changez la position du bloc de code Source : Mettez Endbody au lieu de Header.

Puis, mettez cette class perso sur le panneau d'éléments WErcet :

Puis, dans le menu de droite, onglet Styles puis Personnalisation, cherchez la partie Positionnement et Curseur :

Mettez Main.

Sauvegardez et contrôlez.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie

Posté par: Hobby001
Posté le: 25 Août 2020 à 14:20

C'est bien vrai, j'ai complètement omis de regarder ça.

À force de chercher des solutions à des problèmes complexes en en vient à oublier la base.

Bien joué brolysan!

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros

Posté par: disbras
Posté le: 26 Août 2020 à 14:28

Merci Beaucoup, c'est exactement ce qu'il me fallait !!! Cela marche enfin merci beaucoup encore une fois !!

Posté par: disbras
Posté le: 26 Août 2020 à 14:42

Bon maintenant j'ai un autre petit problème... J'ai copié collé ma div avec mes textes dedans, juste en dessous de la première, l'ai ajoutée à la classe perso multai et ai copié collé le code une deuxième fois, en changeant la classe sélectionnée.

Cependant, rcet me redirige correctement, mais pas multai, d'où ce problème peut-il venir ?

Merci d'avance pour l'aide que vous m'apporterez !

Posté par: disbras
Posté le: 26 Août 2020 à 14:48

Désolé, j'ai finalement compris que open élément a du mal vis à vis de la mise à jour du code, tout fonctionne bien, mais je n'ai aucune idée de comment tout actualiser.

Posté par: Hobby001
Posté le: 27 Août 2020 à 11:47

Quand on fait trop de copier coller, OE perd la carte. Il faut faire des suvegardes fréquentes

-------------
https://denislafrance.net/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros