Utilisation de jquery pour un noob en js

Fermé
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012 - 23 févr. 2011 à 03:55
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - 23 févr. 2011 à 13:33
Bonjour, je souhaite utiliser un effet jquery (slidedown) pour mon site, je ne connais absolument pas le javascript. Si quelqu'un a la marche à suivre, je suis preneur merci d'avance,

en gros je souhaite qu'au chargement de ma div id="page" il y ai un effet slidedown (sans click -> automatiquement a l'affichage de la page) sur la div id="contentpage" comme sur ce site https://www.elegantthemes.com/preview/Divi/



Voilà mon html >>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="page">
<div id="header"></div>
<div id="contentpage">
<div id="content"></div>
</div>
<div id="footer">© Copyright 2011</div>
</div></body>
</html>

15 réponses

Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
23 févr. 2011 à 09:20
Bonjour,
La meilleur solution c'est d'aller jeter un oeil sur ce lien :
http://jquery.developpeur-web2.com/documentation/effets/slidedown.php
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 09:31
Je suis déjà tombé sur ce site, mais comme dit plus haut moi = noob javascript, ^^ donc je ne sais pas du tout comment exploiter $("p").slideDown("slow"); si tu avais un exemple concré pour mon code tu serais un ange :)
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
23 févr. 2011 à 09:48
$("p").slideDown("slow");

Ce code veut dire que tous les éléments p de la page auront un effet slidedown et le slow signifie la vitesse d'execution de l'effet. il me semble que tu peux mettre slow, normal, fast.
Sinon toi tu veux mettre ce slide sur ton div id="page"
donc tu fais un truc du genre :
$("#page").slideDown("slow");
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 10:54
merci a toi mello, mais je te dérange encore un peu, j'ai bien compris comment marche la ligne que tu ma passé, mais je ne sais absolument pas comment l'intégrer pour que ça fonctionne peut tu me donner le code complet please ?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js">

????????????? que dois-je mettre ici ?????????????

</script>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
Modifié par Melooo le 23/02/2011 à 11:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
<body><div id="page"> 
<div id="header"></div> 
<div id="contentpage"> 
<div id="content"></div> 
</div> 
<div id="footer">© Copyright 2011</div> 
</div></body> 
</html> 

Normalement quelque chose du genre devrait être pas mal...
Sinon je vois que tu va chercher le code jquery directement sur le site, je te conseil de l'exporter vers ton dossier de travail, ce qui
1) prendrait moins de temps à charger
2) si un jour le site plante, tu es dans le caca.
n'hésite pas si tu as rien compris à ce que je te raconte ;)
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 11:10
la j'avoue ne pas avoir compris ? tu m'as redonné le html sans rien ? pourquoi ?
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 11:11
je précise que ça va être intégré sous wordpress donc pour le jquery il sera automatiquement chargé par celui ci (si j'ai mis le lien du site c pour faire les test avant l'intégration wp) merki d'avance
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
23 févr. 2011 à 11:11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"> 
 <!-- 
<script type="javascript">
$(function() {
$("#page").slideDown("slow");
})
</script>
<body><div id="page"> 
<div id="header"></div> 
<div id="contentpage"> 
<div id="content"></div> 
</div> 
<div id="footer">© Copyright 2011</div> 
</div></body> 
</html> 

0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 11:20
ça ne marche pas, regarde c'est ici http://soussangabriel.free.fr/

en gros le header doit s'afficher directement et le content lui slider, car a l'intégration soius wp, je vais ajouté un menu list page au debut du content pour passer entre mes page et seul le content changera le header lui non, et je voulais un effet sympa slide sur le content a l'affichage du contenu de celui-ci
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
Modifié par Melooo le 23/02/2011 à 11:24
essayes sa :
$(document).ready(function() {

a la place de :
$(function() {

0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 11:25
marche toujours pas :'(
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
23 févr. 2011 à 11:27
Je viens d'aller voir ton code
dans le div que tu as mis dans ton jquery il est rempli de saut de ligne et rien d'autre donc normal que tu vois rien à ton écran...
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 12:27
j'ai mis du texte ça n'a rien changé ? une idée ?
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
23 févr. 2011 à 13:33
euh je viens de regarder ton code et c'est pas ce que je t'ai donnée..
quand tu utilises la balise <script> tu dois mettre le type...
ensuite ce code :
$(document).ready(function() {
---> code });

ensuite je vois que tu as mis un .click (syntaxe pas bonne d'ailleurs) ce qui n'est pas bon étant donné que tu veux au chargement de la page...
0
kizibag Messages postés 85 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 9 décembre 2012
23 févr. 2011 à 07:08
UP ? il n'y a personne ?
-1