11548 sujets

JavaScript, DOM et API Web HTML5

Position fixed et scroll sur ie

Bonjour, comment à l'aide d'un javascript, émuler une position:fixed sur ie ? Dans mon CSS j'ai ça :


#menu {
background:none;
position:absolute;
top:expression(documentElement.scrollTop+body.scrollTop+300);
}
}


L'idée est de pouvoir déplacer le menu...
Franchement je m'en sors pas.
StudioTchio a écrit :
Mélanger du css et du js, ça ne fait pas bon ménage Smiley rolleyes
Mais c'est parfois très utile pour pallier à certains manques d'IE... (je ne me prononce pas en ce qui concerne ce cas particulier)
Modifié par Julien Royer (26 Mar 2007 - 11:12)
Si IE n'existait pas ça serait le bonheur... En attendant j'aimerais vraiment trouver comment faire car j'ai pas dormi cette nuit et ça urge... J'ai un script qui déplace le div et qui marche très bien. Seulement ça lui redonne une valeur en dur à la place de l'expression, donc quand on scroll ça viens avec... Je pensais peut etre faire une fonction qui detecte les scrolls... ou alors trouver l'expression appropriée.
voilà mon javascript :


var classMove = "drag"; // nom de class des oobjets draggables
var myObjectClick = null; // objet actuellement cliqué
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
var menu;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
	if(window.attachEvent){ // pour IE
		document.onmousedown = start;
		document.onmousemove = drag;
		document.onmouseup = drop;
		menu = document.all["menu"];
	}
	else{ // pour les autres navigateurs
		document.addEventListener("mousedown",start, false);
		document.addEventListener("mousemove",drag, false);
		document.addEventListener("mouseup",drop, false);
		menu = document.getElementById("menu");
	}
}

//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Détection de l'élément sur lequel on a clické
	monElement = (e.target)? e.target:e.srcElement;

	if(monElement) {
		//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
		getClassDrag(monElement);
		if(myObjectClick){
			positionXAtClick = e.clientX; // position du curseur lors du click
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(menu.offsetLeft); // position avant déplacement de l'objet cliqué
			positionYMyobjectClick = parseInt(menu.offsetTop);
			return false;
		}
	}
}

function drag(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Si l'objet est déplaçable et qu'il existe
	if(movable && myObjectClick){
		// myObjectClick.style.position = "absolute" ; // donne la propriété "absolu" à l'objet
		//On récupère la position de la souris par rapport à l'objet
		menu.style.left = e.clientX+(positionXMyobjectClick-positionXAtClick)+"px";
		menu.style.top = e.clientY+(positionYMyobjectClick-positionYAtClick)+"px";
	}
}

function drop(){
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;
}

function getClassDrag(myObject){
	with(myObject){
		var x = className; // nom de la classe de l'objet
		listeClass = x.split(" "); // si l'objet à plusieurs classes
		//On parcours le tableau pour voir si l'objet est déplaçable
		for(var i = 0 ; i < listeClass.length ; i++){
			if(listeClass[i] == classMove){ // si une des classe est égale à la classe définie pour les objets draggables...
				movable = true; // l'objet est déplacable
				myObjectClick = myObject;
			}
		}
	}
}

window.onload = init_evenement;
[/i]
StudioTchio a écrit :
Mélanger du css et du js, ça ne fait pas bon ménage Smiley rolleyes


Oui mais mélanger du JS et des CSS, c'est mieux !

Essayer jquery pour voir...
Sujet clos
Aller à