Powered by Invision Power Board


Forum Rules Bienvenue dans la Distillerie d'entraide

Quelques soient vos problèmes, nous sommes là !

  Reply to this topicStart new topicStart Poll

> Problème de Javascript, à me faire arracher les cheveux
Reven Niaga
Écrit le : Jeudi 09 Août 2012 à 13h12


Pirate silvite
Group Icon

Groupe : Citoyennes
Messages : 1 285
Membre n° : 222
Inscrit le : 23/07/2003




Oyé, oyé, cher citoyens zanarkandiens !

J'ai besoin de votre aide.
J'ai un petit projet de site web en cours.

Pour faire genre joli et agréable à visiter, j'ai décidé de vouloir insérer deux trois fonctions javascript, parce qu'il paraît que le faire autrement, c'est pas trop possible.

Donc, les fonctions en question :
Une lightbox pour afficher les images
De l'expansion de texte (on cliquer sur un bout de texte/titre et la suite se déroule)
Une scrollbar personnalisé pour mieux intégré le design.

Alors voilà.
Au début j'avais que la lightbox qui marchait sans aucun soucis. Tout beigne quoi.
Ensuite, j'ai fait l'expansion du texte, qui marche aussi. Je dois créer pour chaque expansion de texte au même niveau sur une même page, un script à part, sinon il ouvre tout en même temps. C'pas trop grave.

ensuite j'ai mis la scrollbar personnalisé.
Elle marche pas.

J'ai remarqué par la suite que la lightbox ne fonctionne pas non plus.
Je ne trouve pas l'erreur du codage. Je ne suis pas une experte en javascript. Et depuis je désespère en voulant m'arracher les cheveux. Je suppose qu'il y a quelque part un soucis d'appel de script ? Mais je ne vois pas du tout.

Voici le code que j'ai en header :

CODE

<head>

<title>La Vie Morte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Reven Niaga" content=" " />
<meta name="L'univers des Kurukas expliqué et illustré" content=" " />
<link rel="stylesheet" href="http://viemorte.revenniaga.com/style.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript"> $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view2').hide(); $('div.slide2').toggle(function() { $(this).siblings('div.view2').fadeIn('slow'); }, function() { $(this).siblings('div.view2').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view3').hide(); $('div.slide3').toggle(function() { $(this).siblings('div.view3').fadeIn('slow'); }, function() { $(this).siblings('div.view3').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view4').hide(); $('div.slide4').toggle(function() { $(this).siblings('div.view4').fadeIn('slow'); }, function() { $(this).siblings('div.view4').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view5').hide(); $('div.slide5').toggle(function() { $(this).siblings('div.view5').fadeIn('slow'); }, function() { $(this).siblings('div.view5').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view6').hide(); $('div.slide6').toggle(function() { $(this).siblings('div.view6').fadeIn('slow'); }, function() { $(this).siblings('div.view6').fadeOut('fast');return false; }); }); </script>

<script type="text/javascript"> $(document).ready(function() { $('div.view7').hide(); $('div.slide7').toggle(function() { $(this).siblings('div.view7').fadeIn('slow'); }, function() { $(this).siblings('div.view7').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view8').hide(); $('div.slide8').toggle(function() { $(this).siblings('div.view8').fadeIn('slow'); }, function() { $(this).siblings('div.view8').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view9').hide(); $('div.slide9').toggle(function() { $(this).siblings('div.view9').fadeIn('slow'); }, function() { $(this).siblings('div.view9').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view10').hide(); $('div.slide10').toggle(function() { $(this).siblings('div.view10').fadeIn('slow'); }, function() { $(this).siblings('div.view10').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view11').hide(); $('div.slide11').toggle(function() { $(this).siblings('div.view11').fadeIn('slow'); }, function() { $(this).siblings('div.view11').fadeOut('fast');return false; }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('div.view12').hide(); $('div.slide12').toggle(function() { $(this).siblings('div.view12').fadeIn('slow'); }, function() { $(this).siblings('div.view12').fadeOut('fast');return false; }); }); </script>


</head>


et la fin du script de la scrollbar personnalisé, juste avant le </body> :

CODE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
   <script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>
   <!-- mousewheel plugin -->
   <script src="jquery.mousewheel.min.js"></script>
   <!-- custom scrollbars plugin -->
   <script src="jquery.mCustomScrollbar.js"></script>
   <script>
     (function($){
       $(window).load(function(){
         $(".content").mCustomScrollbar();
       });
     })(jQuery);
   </script>



Pour voir le site web, c'est par ici :

http://viemorte.revenniaga.com/index.php

ID : vip
pass : viemorte

Merci !
PMUsers WebsiteICQAOLYahoo
Top
Le poussin
Écrit le : Jeudi 09 Août 2012 à 22h52


Roi des abysses
Group Icon

Groupe : Citoyens
Messages : 507
Membre n° : 310
Inscrit le : 22/09/2003




Je ne suis pas un expert en javascript non plus mais quelques remarques tout de même.
- Javascript et non Java (dans le titre). Ce sont deux langages bien différents. ;)
- La plupart des navigateurs disposent de plugin, voire incluent de base, de quoi debuguer du javascript (et plus encore). Sous Chrome je crois que c'est de base. Sous Firefox tu as Firebug. Pour les autres je ne sais pas mais ça doit se trouver facilement. Par exemple là Firebug me signale (entre autres) une erreur dans lightbox.js : Object.extend is not a function.
- Tu as l'air d'inclure plusieurs fois jQuery, avec des versions différentes. Ça ne me semble pas une très bonne idée.
- Tu pourrais factoriser un peu de code, notamment pour éviter trop de copier coller pour les expansions de texte (voire rendre ça presque complétement automatique).
PMUsers Website
Top
Reven Niaga
Écrit le : Samedi 11 Août 2012 à 10h32


Pirate silvite
Group Icon

Groupe : Citoyennes
Messages : 1 285
Membre n° : 222
Inscrit le : 23/07/2003





QUOTE
- Javascript et non Java (dans le titre). Ce sont deux langages bien différents. ;)


Ah bah j'ignorais tu vois, j'ai cru que Java était une abbréviation pour javascript ^^.

QUOTE
- La plupart des navigateurs disposent de plugin, voire incluent de base, de quoi debuguer du javascript (et plus encore). Sous Chrome je crois que c'est de base. Sous Firefox tu as Firebug. Pour les autres je ne sais pas mais ça doit se trouver facilement. Par exemple là Firebug me signale (entre autres) une erreur dans lightbox.js : Object.extend is not a function.


Oh, j'ignorais aussi ! J'ai vraiment très peu de connaissance du javascript, c'est la première fois que je m'y essaie ^^'.
Je vais voir pour la lightbox, j'avais pris le code d'un site simplement, et il me semble pas qu'il y avait un soucis. Peut-être en conflit avec d'autres scripts ? Hm

QUOTE
- Tu as l'air d'inclure plusieurs fois jQuery, avec des versions différentes. Ça ne me semble pas une très bonne idée.


Hm ? Mince ? J'aurais pas vu, je vais revoir ça. J'avoue que comme je connais vraiment peu, j'ai beaucoup de mal ^^'. Mais je serais très fière une fois arrivé à bout de ça !

QUOTE
- Tu pourrais factoriser un peu de code, notamment pour éviter trop de copier coller pour les expansions de texte (voire rendre ça presque complétement automatique).


J'aimerai bien, mais je crains que mes connaissances sont beaucoup trop basiques pour me permettre ça :-/ J'ai déjà eu du mal à faire ça comme ça ^^" Et je sais pas pourquoi, le page ou j'utilise beaucoup d'expand de texte (Dramatis personae) vient de voir la moitié de son contenu disparaître, et j'arrive pas à savoir pourquoi non plus :S

En fait, j'aimerai bien trouver une alternative à javascript, mais il me semble pas que ça existe pour rendre un site "interactif" sans charger des pages sans arrêt.

En tout cas, merci, je regarderais ça :)
PMUsers WebsiteICQAOLYahoo
Top
0 utilisateur(s) sur ce sujet (0 invités et 0 utilisateurs anonymes)
0 membres :

Topic Options Reply to this topicStart new topicStart Poll

 


Habillé par Shadowillusions

Sites de nos membres :
Le blog de Mortis Ghost Le site de la réécriture Avatar RPG Le site de Fauna Friends