11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Alors voila mon soucis, j'ai plusieurs div disposées en cercle auxquelles j'ai attribué un style css appelé "bulle".

Sur tout les navigateur (dont IE) lorsque je survol une div elle va au centre et change de taille. Parfait !

Le soucis est que lorsque je survol une autre div, j'aimerais que celle du centre reprenne sa place initiale (chose qui marche partout sauf IE).

Voici le code JS :

var infosAncienneBulle = new Array();
$(function() {
	$(".bulle").mouseenter(function() {
		survolBulle($(this));
	});
});

function survolBulle(bulle) {
	bulle.css({
		"width": "300px",
		"height": "300px",
		"margin-top": "270px",
		"margin-left": "335px"
	});
	bulle.unbind("mouseenter");
	basculerBulles(bulle);
}

function basculerBulles(nouvelleBulle) {
	if(infosAncienneBulle.length != 0) {
		var bulle = $("#" + infosAncienneBulle[0]);
		var positionY = infosAncienneBulle[1];
		var positionX = infosAncienneBulle[2];

		bulle.css({
			"width": "100px",
			"height": "100px",
			"margin-top": positionY,
			"margin-left": positionX
		});

		bulle.mouseenter(function() {

			survolBulle($(this));

		});

	}

	infosAncienneBulle[0] = nouvelleBulle.attr("id");
	infosAncienneBulle[1] = nouvelleBulle.css("margin-top");
	infosAncienneBulle[2] = nouvelleBulle.css("margin-left");
}


IE se comporte comme si il ne connaissait pas positionX et positionY. Une idée ? je sèche vraiment..

http://www.lileye.fr/fr/album.php pour l'aperçu

Merci d'avance !
Note, c'est un code jQuery, ça peut être utile de le préciser d'emblée, il est tout à fait possible de faire la même chose en JS pur.
À essayer, au lieu de :
	infosAncienneBulle[1] = nouvelleBulle.css("margin-top");
	infosAncienneBulle[2] = nouvelleBulle.css("margin-left");


Le code suivant :

	infosAncienneBulle[1] = nouvelleBulle.offset().top;
	infosAncienneBulle[2] = nouvelleBulle.offset().left;
Bonjour,

Effectivement c'est un Code jQuery, oublié de le préciser.

Pour le code que tu m'as fournis, les bulles vont bien au centre et le changement de taille se fait bien par contre au moment de reprendre leur taille et place initiale... elles partent un peu n'importe ou (en tout cas pas trouvé de logique.)

Merci pour ta réponse !
Modifié par BlAzAk (28 May 2012 - 16:16)
Les margin-top et left sont-ils définis dans une feuille de style ou dans un attribut de style. Si c'est dans une feuille, essaye de le faire en attribut :
<div class="bulle" style="margin-top:32px; margin-left:40px;">A</div>
Même constat, elles se placent un peu n'importe ou.. voici le code que je viens d'essayer :

HTML :
<div id="mariage" class="bulle" style="margin-top:20px; margin-left:435px;" onmouseover="masquer('presentation');"></div>


CSS :

#mariage {
background-image:url(http://www.lileye.fr/fr/images/mariage.gif);
z-index:10;
}
.bulle {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #c0c0c0;
	background-size: 100% 100%;
	text-align: center;
	vertical-align:middle;
	line-height: 100px;
	font-size:19px;
	font-weight:bold;
	color:#000;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow: 0 0 10px #343434;
	-o-box-shadow: 0 0 10px #343434;
	-webkit-box-shadow: 0 0 10px #343434;
	box-shadow: 0 0 10px #343434;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	behavior: url(http://www.lileye.fr/fr/pie/PIE.htc);
}


JS :

    infosAncienneBulle[1] = nouvelleBulle.offset().top;
	infosAncienneBulle[2] = nouvelleBulle.offset().left;


Dans tous les navigateur (sauf ie), les divs ne reviennent pas à leur position original mais double leurs margin. Exemple pour mariage un top de 40px et un left de 870px.

Sur IE elles se superposent un peu au dessus de l'angle inférieur droit.

Un vrai casse tête Smiley decu

Merci de ta patience !
Après un petit tour sur CanIUse :
http://caniuse.com/#search=background

Je vois que background-size n'est pas compatible en dessous de IE9 déjà. Ensuite tu as des transitions CSS3, donc pour tous les navigateurs modernes le JS/jQuery n'est pas utile.

Ce n'est donc pas a priori le jQuery qui ne marche pas sur IE. Le jQuery ne se lance que sur IE et il est donc bogué, je sais que ça ne résout pas le problème mais c'est la première chose à avoir en tête.

PIE, c'est bien, mais ce n'est que du cache-misère. Tant que ça reste fixe, ça se passe bien, dès que tu animes, le résultat est imprévisible, dans la mesure où il faudrait d'abord étudié le fonctionnement exact du script.
Bonjour, je remonte ce topic car j'ai totalement changé ma façon de procédé, mais mes divs ne vont ni au centre, et ne reprenne pas leur place initiale. et je ne comprends pas pourquoi...

Page visible sur: http://www.lileye.fr/fr/album.php

Je vous invite à aller sur la page pour visualiser le rendu.
Le but recherché, je le rappel, est que lorsque l'on survol une div, celle-ci se mette au centre des autres. Lorsqu'on en survol une autre, celle du centre reprends sa place pour être remplacée par la nouvelle.

Merci d'avance pour vos réponses !


HTML :

<div id="presentation" class="presentation"><img alt="Album photo Lileye - Photographe basé à Lyon" src="images/album_photo_lileye_photographe_lyon.png" width="292" height="227" /></div>
<div id="areaOver">
                <div class="classedivalbum" onmouseover="masquer('presentation');" onclick="javascript:location.href='http://www.lileye.fr/fr/photos/mariage/'" id='mariage'></div>
                <div class="classedivalbum" id='grossesse'></div>
                <div class="classedivalbum" id='nature'></div>
                <div class="classedivalbum" id='patrimoine'></div>
                <div class="classedivalbum" id='portrait'></div>
                <div class="classedivalbum" id='macro'></div>
                <div class="classedivalbum" id='gastronomie'></div>
                <div class="classedivalbum" id='immobilier'></div>
</div>



CSS :

#mariage {
margin-top: 20px;
margin-left: 435px;
background: url('http://www.lileye.fr/fr/images/mariage.jpg') center center no-repeat;
background-size:100% 100%;
}
#grossesse {
margin-top:130px;
margin-left:180px;
background: url('http://www.lileye.fr/fr/images/grossesse.jpg')  center center no-repeat;
background-size:100% 100%;
}
#nature {
margin-top:370px;
margin-left:80px;
background: url('http://www.lileye.fr/fr/images/nature.jpg')  center center no-repeat;
background-size:100% 100%;        
}
#patrimoine {
margin-top:585px;
margin-left:180px;
background: url('http://www.lileye.fr/fr/images/patrimoine.jpg') center center no-repeat;
background-size:100% 100%;              
}
#portrait {
margin-top:695px;
margin-left:435px;
background: url('http://www.lileye.fr/fr/images/portrait.jpg') center center no-repeat;
background-size:100% 100%;          
}
#macro {
margin-top:585px;
margin-left:685px;
background: url('http://www.lileye.fr/fr/images/macro.jpg') center center no-repeat;
background-size:100% 100%;                
}
#gastronomie {
margin-top:370px;
margin-left:780px;
background: url('http://www.lileye.fr/fr/images/gastronomie.jpg') center center no-repeat;
background-size:100% 100%;  
}
#immobilier {
margin-top:130px;
margin-left:685px;
background: url('http://www.lileye.fr/fr/images/immobilier.jpg') center center no-repeat;
background-size:100% 100%;  
}
.classedivalbum {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #c0c0c0;
	text-align: center;
	vertical-align:middle;
	line-height: 100px;
	font-size:19px;
	font-weight:bold;
	color:#000;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow: 0 0 10px #343434;
	-o-box-shadow: 0 0 10px #343434;
	-webkit-box-shadow: 0 0 10px #343434;
	box-shadow: 0 0 10px #343434;
        cursor:pointer;
}



Javascript :

$(document).ready( function() {

var a_mariage = new Array(20,435);
var a_grossesse = new Array(130,180);
var a_nature = new Array(370,80);
var a_patrimoine = new Array(585,180);
var a_portrait = new Array(695,435);
var a_macro = new Array(585,685);
var a_immobilier = new Array(370,780);
var a_gastronomie = new Array(130,685);

var xPosCenter = 270; ///Attention ne pas mettre la meme pos X qu'un des bloc 
var yPosCenter = 335; ///Attention ne pas mettre la meme pos Y qu'un des bloc 

$("#testOver").val(0); //init//Permet d'éviter le déclenchement du mouseover pendant un déplacement


$.extend({
               goCenter : function(Obj) { 
               $("#testOver").val(1);
               X_ElemOver = Obj.position().top;
               Y_ElemOver = Obj.position().left;
               
               $(Obj).animate({
               top: xPosCenter,
               left: yPosCenter,
               width: 300,
               height: 300
              
               }, 300 ,r = function () {
               $("#testOver").val(0);
               });
               },
               checkCenter : function() { ///Check si ya un bloc au centre et le renvoi à sa pos INIT
               
               $("#areaOver div").each(function( i, obj ) {
               arrayPosOver = new Array();     
               if ( $(obj).position().top == xPosCenter && $(obj).position().left == yPosCenter) {
              idbloc = $(obj).attr('id');
              
              arrayPosOver = eval('a_'+idbloc);
              
              $(obj).delay(50).animate({
              top:arrayPosOver[0]+'px',
              left:arrayPosOver[1]+'px',
              width: 100,
              height: 100
              },300, function () {
              
              });
              
               } 
               });
               
               }
});

$("#areaOver div").mouseover( function() {
               if ($("#testOver").val()==1) return false;
    
               X_ElemOver = $(this).position().top;
               Y_ElemOver = $(this).position().left;
               
               if (X_ElemOver!=xPosCenter && Y_ElemOver!=yPosCenter) {
               $.checkCenter();
               }
               $.goCenter($(this));
               
});


});