11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai mixé plusieurs tutos de alsacreations, dans le but d'obtenir une fausse popup qui se ferme quand on clique sur le lien "fermer", qui contient un tableau, et le point qui me pose problème, dragable avec la souris.

Voici le code utilisé :
function pop()
{
    var myAs = document.getElementsByTagName('a');
    for (var a = 0; a < myAs.length; ++a) {
	// Si le lien a une classe de type pop
        if (myAs[a].className == 'pop') {
	// on extrait l'id de la popup à partir du href
            var pop = document.getElementById(myAs[a].href.substring(myAs[a].href.lastIndexOf('#') + 1));
	// si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                myAs[a].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
            }
        }
    }
}

function initLien(){ 
db=!document.documentElement.clientWidth?document.body:document.documentElement //quirk IE6 
gdim=document.getElementById('pop'); lx=document.getElementById('tet') 

addEvent(lx,"mousedown",function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;}) 
addEvent(lx,"mouseup",function(){drag=0}) 
addEvent(document,"mousemove",controle_position(e)) 
}

function controle_position(e){ 
sx=gk?pageXOffset:db.scrollLeft; //scroll h 
sy=gk?pageYOffset:db.scrollTop; //scroll v 
px=gk?e.pageX:event.clientX+sx; //curseur x 
py=gk?e.pageY:event.clientY+sy; //curseur y 
if(drag){with(gdim.style){left=px-dx+"px";top=py-dy+"px"};return false} 
} 

gk=window.Event?1:0/*Gecko*/; 
dx=dy=e=drag=cr=0;
pop()
initLien()


et la partie XHTML :
<div id="pop">
	<div id="tet" style="cursor:move;"><h1>Tarifs :</h1></div>
		<a href="#pop" class="pop" title="Fermer la popup des tarifs"><img src="images/fermer.png" alt="fermer" /></a>
		<table>
			<tr>
				<td>nom du produit</td>
				<td>Bidon métal<br />(50 cl)</td>
				<td>13.75&euro;</td>
			</tr>
		</table>
	</div>


Tout fonctionne bien, sauf le drag :'( il ne se passe tout simplement rien quand je clique sur le div "tet"...

Merci de votre aide
Modifié par Freedom_09 (30 Apr 2006 - 11:36)
Résolu, comme d'habitude la paresse d'utiliser un truc tout fait m'a fait perdre mon temps, j'ai très bien réussi en faisant le script moi-même ^^