[resolu]Comment changer la valeur de element.style

bonjour a tous

j ai beau retourner le code dans tous les sens et n y connaissant rien en javascript je n arrive pas a modifier l element style voir image ci contre

j aimerais lui affecter la valeur block au lieu de none

je joins les fichiers en css et javascript pour pouvoir m aider (j ai fait des leins car les codes sont long

d avance merci

http://www.hostingpics.net/viewer.php?id=708029ecran3.jpg

fichier css

http://cjoint.com/?CErnjg3Fo6U


fichier gallerificPlus.js

http://cjoint.com/?CErnlvCYR06


jquery-1.3.2.min.js

http://cjoint.com/?CErnmg9heEB




jquery-1.3.2.js

http://cjoint.com/?CErnlV5XIM7



html

http://cjoint.com/?CErnmzaYkyg
Modifié par flexi2202 (20 May 2013 - 18:52)

Tes liens ne fonctionnent pas tous.

Et pour ta question :

$('selecteur').css('display', 'block');

Ou si tu préfères :

$('selecteur').show();

merci pour la reponse

ah oui juste les liens ne fonctionne pas

comment les poster ???

la solution que tu me donnes je dois la placer ou ?

Bonjour,

Tu dis vouloir changer element.style mais il se trouve que c'est la façon de firebug pour montrer le style défini directement au moment de la déclaration d'une balise dans le code html. Donc ici il suffit dans ta div qui est en surbrillance dans ton image d'effacer << style="display:none;" >>.

Sinon cela peut être gallerificPlus qui le change à cause d'un event, à quel moment moment ton élément passe en none? quel effet tu veux faire en réalité?
Modifié par Tybar (18 May 2013 - 19:43)

bonsoir a tous

merci pour la réponse , oui je me doute que c est la façon a firebug de définir le code , puisque je ne le trouve pas ....

pourtant en général firebug est nickel pour effectuer des changements mais la ....

quand j ouvre ma galerie j ai ceci , c est super car c est ce que je recherche , ensuite lorsque je choisis une autre image et cela pendant 2 ou 3 images j ai bien la description en dessous de chaque image , mais subitement cette description disparait sur les autres images même si je reviens sur celle ou la description était ok , a y perte son latin et donc je me retrouve avec les images sans description et cela pour toutes les images comme ma deuxième prise d écran "ce que je ne veux pas"
ce que je désire pour chaque image
http://www.hostingpics.net/viewer.php?id=186844ecran1.jpg

ce que je ne veux pas
http://www.hostingpics.net/viewer.php?id=860759ecran2.jpg

étant sur un autre forum on m a conseille d affecter ce code a ma feuille html
document.getElementById('details').style.display = 'block';

mais cela n a servi a rien .....

je rejoins mes fichiers codes

fichier css

http://cjoint.com/?CEsiUnys1FJ

fichier gallerificPlus.js

http://cjoint.com/?CEsiU1VIuV3


jquery-1.3.2.min.js

http://cjoint.com/?CEsiVPCkscR


jquery-1.3.2.js
http://cjoint.com/?CEsiWBfzjdQ


html

http://cjoint.com/?CEsiTA4JKSG


un énorme merci pour l aide et le suivi
Modifié par flexi2202 (18 May 2013 - 22:59)

Oui effectivement firebug est bien pour faire ses test en css ce qui nous vaut certainement le bel outil maintenant intégré à firefox mais quand javascript s'y mêle ça ne sert plus a grand chose.

En passant, ton lien pour Gelerifiplus donne ton html mais après ca se retrouve facilement, j'espère que tu n'y a pas touché mais ça m’étonne assez que ça ne fonctionne qu'un peu au début, c'est sensé être développé sérieusement donc anticiper un minimum de bugs. Ca me fait penser à un problème que j'ai pas mal rencontré un temps qui fessait que si on clique trop vite sur les liens le lancement d'un event en altère un autre qui n'est pas terminé.

Après j'essaye d'éviter d'utiliser du tout fait justement pour garder le contrôle et quand ca plante je sais que c'est de ma faute surtout pour un effet de ce style je pense que le code serait loin d'être aussi lourd mais bien sur il faut connaître jquery un minimum, sinon en css3 c'est encore plus simple si on sait se servir des sélecteurs mais la compatibilité est pas géniale.

Pourrait-on avoir un lien pour essayer de comprendre ce qui déclenche le bug sinon?

bonjour a tous

Avant toute chose un grand merci pour la patience et l aide

Oui je me doute bien que quand on le code soi même c est plus facile pour s y retrouver

Voici donc un lien qui montre le soucis


http://la-peche-a-la-perle.forumgratuit.be/t22-essai123456#22

merci des reponses

Bonjour,

Alors d'abord je voie qu'il y en a un qui fonctionne très bien dans le 2eme post pourquoi ne pas utiliser celui-là?

Ensuite (dans le cas ou ce n'est pas possible) ou as-tu trouver ce qu'il fallait écrire comme script pour appeler correctement l'affichage de #details?

       gallery.onFadeOut = function() {
          $('#details').fadeOut('fast');
       };
       
       gallery.onFadeIn = function() {
          $('#details').fadeIn('fast');
       };

bonjour

avant toute chose un grand merci pour l aide

je rappelle comme écrit plus haut que moi et le javascript euhhhh....mdr

Alors pour ce qui est du deuxième post c est vrai qu il fonctionne mais cela est une galerie simple sans la lightbox quand on clic une image

je suis desole mais n ayant pas ecrit ce script je ne comprends pas tres bien
ceci
Ensuite (dans le cas ou ce n'est pas possible) ou as-tu trouver ce qu'il fallait écrire comme script pour appeler correctement l'affichage de #details?

       gallery.onFadeOut = function() {
          $('#details').fadeOut('fast');
       };
       
       gallery.onFadeIn = function() {
          $('#details').fadeIn('fast');
       };

un tout grand merci pour l aide

D'accord j'avais espéré que tu ais écrit ce code mais voilà quelque test à essayer.
Si ca ne marche pas décrit moi le résultat lorsque tu clique sur les images et passe au point suivant:

1.
efface ce code

gallery.onFadeOut = function() {
          $('#details').fadeOut('fast');
       };

2.
Ajoute ce qui est en gras:

gallery.onFadeIn = function() {
          $('#details')[b].delay(500)[/b].fadeIn('fast');
       }

sinon remplace par:

$('#navigation .thumbs li').mousedown(function() {
          $('#details').delay(500).fadeIn('fast');
       };

Si ca marche essaye sans .delay(500)

3.
Dans gallerificPlus.js ligne 875 ajoute ce qui est en gras:

syncThumbs: function() {
                        if (this.$thumbsContainer) {
                                        var page = Math.floor(this.currentIndex / this.settings.numThumbs);
                                if (page != this.currentPage) {
                                    this.currentPage = page;
                                    this.updateThumbs();
                                        } else {
                                                var selectedThumb = this.currentIndex % this.settings.numThumbs;

                                                // Remove existing selected class and add selected class to new thumb
                                                this.$thumbsContainer
                                                        .find('ul.thumbs li.selected')
                                                        .removeClass('selected')
                                                        .end()
                                                        //.find('ul.thumbs a[href="#'+this.currentIndex+'"]')
                                                        .find('ul.thumbs li').eq(selectedThumb)
                                                        .addClass('selected');
                                                [b]$('#navigation .thumbs li').mousedown(function() {
                                                        $('#details').delay(500).fadeIn('fast');
                                                };[/b]
                                        }
                                }

                                return this;
                        }

Si ca marche enlève .delay(500)

merci merci merci merci et encore mille fois merci
cela fonctionne enfin ......hourra
voila donc ce que j ai fait
j ai juste enlever ceci
1.
efface ce code

gallery.onFadeOut = function() {
          $('#details').fadeOut('fast');
       };

vraiment super encore merci

Heureux d'avoir pu t'aider mais tout de même je pense que si tu veux en faire plus apprendre jquery ne serait pas une tâche trop lourde avec une simple logique pas plus compliquer que pour objet sur lequel se produit un événement on produit un effet, on peut en faire déjà pas mal.

je pense aussi que tu peux enlever ca;
dans le head:

<script type="text/javascript">

	document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
 document.getElementById('details').style.display = 'block';
	</script>

à la fin:

 document.getElementById('details').style.display = 'block';

et surement aussi:

	gallery.onFadeIn = function() {
		$('#details').fadeIn('fast');
	};

N'oublie pas de mettre ton sujet en résolue également.

ah oui alors la tu peux le dire que tu m as vraiment aider
mais bon pour l instant je suis encore au stade de l html et du css, le javasdcript c est du petit negre , mais des que j ai un moment je regarde a jquery
reste plus qu a trouver comment mettre un deuxième bouton close au dessus de la lightbox quand elle s ouvre
et tout sera parfait
oui je vais essayer les changements que tu préconises

un treeeessss grand merci pour tout
Modifié par flexi2202 (20 May 2013 - 01:34)

Ok alors j'aiderais encore sur ce coup même si je ne suis pas tout à fait certain de l'utilité d'un 2eme bouton close il faut dire.

dans Gallerificplus.js ligne 247 ajoute en gras:

$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox">[b]<a id="lightbox-secNav-btnClosetop" style="float:right;"  href="#"><img src="http://p6.storage.canalblog.com/66/19/1093017/86552032_o.gif"></img></a>[/b]<div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + defaults.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + defaults.imageBtnClose + '"></a></div></div></div></div>');  

pareil ligne 269 :

$('#lightbox-loading-link,#lightbox-secNav-btnClose[b],#lightbox-secNav-btnClosetop[/b]').click(function() {
                        _finish();
                        return false;
                });

super super super nichkel , un immense merci
seul petit soucis le bouton close est carrément a droite de l écran

c est tout bon j ai changer float:right en center et cela fonctionne a merveille que du bonheur encore un méga merci

oui je sais que cela n es pas utilile mais bon comme je sais qu en principe il y aura pas mal de personne agee qui vont aller dessus je préfère prévoir mdrrrr
Modifié par flexi2202 (20 May 2013 - 02:52)