11550 sujets

JavaScript, DOM et API Web HTML5

Pages :
Je me demande comment on fait pour mettre en place une fenêtre comme celle visible sur netvibes lorsque l'on clique sur le lien Options en haut à droite de la page!
C'est toujours une fenêtre que l'on dit "modale" ou est-ce que c'est toute autre chose?
J'aimerai m'inspirer de celle-ci.. si vous pouvez m'aider ..

Merci d'avance
Modifié par rafale29 (14 Apr 2007 - 22:04)
Salut,
Netvibes s'appuie sur prototype et scriptaculous comme base pour ses scripts (sans parler de ce qu'ils ont développé eux-mêmes), les modalboxes sont gérées par scriptaculous, mais existent aussi comme plugins ou nativement pour des librairies comme mootols, yui and co.

Je serais toi, j'irais faire un tour du côté de ces librairies/frameworks pour voir à quoi ça ressemblent et ce qui t'attend si tu plonges Smiley smile

Have swing
Merci pour ta réponse.. j'ai zieuté les scripts..c'est sûr qu'ils sont pas forcément très simples et de plus les fichiers sont assez lourds .. mais je préfère développer moi meme petit a petit quelque chose de similaire..et comme ca je saurai précisement comment cela va réagir. Ca risque de prendre du temps mais bon c'est pas grave!..
En tout cas le boulot fait par netvibes est quand meme remarquable niveau aspect pour l'utilisateur ..
rafale29 a écrit :
En tout cas le boulot fait par netvibes est quand meme remarquable niveau aspect pour l'utilisateur ..

Mais question accessibilité : 0 . Smiley biggol
a écrit :
Mais question accessibilité : 0 . Smiley biggol


On espére aussi qu'un jour les lecteurs vocaux et autre navigateurs texte seront capable de retranscrir ce genre de code...

Au fait pour faire ça, t'as pas forcement besoin de lessive Smiley lol
Modifié par matmat (16 Apr 2007 - 06:28)
Oui je me doute qu'il faut se plonger encore plus dans l'Ajax.. j'ai commencé déjà à faire quelques trucs mais là je crois que ca va être d'un autre niveau lol ..
Ce qu'il faut faire c'est ne pas utiliser absolument l'ajax mais à des endroits du site où c'est vraiment nécessaire et pas le mettre partout sur le site.

Je pense que niveau accéssibilité c'est plutôt utile de faire des choses comme Netvibes ; je dis cela car le site que je développe est un tchat et que l'apport de l'ajax et d'une interface conviviale et plutôt simple est de mise !
Pour ton popup, si tu veux le coder toi même, tu peux proceder ainsi :
- chargement su xml avec le donné (je pense que xml et aproprié, c'est facile a générer avec un language serveur)
- retranscription du xml (avec getelementsbytagName)
- mettre les infos dans les differentes balises html
- enfin mettre le tout dans un div et placer ce div au milieu de la page avec le fond gris

Pour le chargement du xml regarde dans un post plus bas, j'ai posté des codes qui marche trés bien même si j'ai encore des doutes.

Une fois que tu as ton xml dans ta variable tu parcours celui si avec le DOM, getelementsbytagName, firstChild, nextSibling etc...Je peux pas t'aider tout dépend de la structure de ton xml

Ensuite du place le tout dans des balises html appropriés. Si ça peux t'aider ses deux fonctions te permettrons de placer ton div au milieu:


function getWindowSize(){
  windowWidth =  window.innerWidth;
  windowWidth = (windowWidth)? windowWidth : document.documentElement.clientWidth;
  windowWidth = (windowWidth)? windowWidth : document.body.clientWidth;
  windowHeight =  window.innerHeight;
  windowHeight = (windowHeight)? windowHeight: document.documentElement.clientHeight;
  windowHeight = (windowHeight)? windowHeight: document.body.clientHeight;  
  return {'width': windowWidth, 'height': windowHeight};
}

function getPageSize(){
  var windowSize = getWindowSize()
  var xScroll = document.body.scrollWidth;
	var yScroll = (window.innerHeight && window.scrollMaxY)? window.innerHeight + window.scrollMaxY : document.body.scrollHeight;
	var pageWidth = (xScroll < windowSize.width)? windowSize.width : xScroll;  
  var pageHeight = (yScroll < windowSize.height)? windowSize.height : yScroll;
  return {'width': pageWidth, 'height': pageHeight};
}


Tu l'appeles comme ça:


	var windowSize = getWindowSize();
	var pageSize = getPageSize();


et par exemple pour centrer un element:

	if (objText) {
		objText.style.top = ((windowSize.height - 35 - objText.height) / 2) + 'px';
		objText.style.left = ((pageSize.width - 20 - objText.width) / 2) + 'px';
	}
Merci à toi pour toutes ces informations !! Oui je pense que je vais devoir passer par du xml de toute façon donc je vais certainement devoir revoir les pages existantes pour qu'elles puissent bien se structurer et être ensuite utilisées !

Pour la pop-up, voilà pourquoi je n'avais pas envie d'utiliser une librairie toute faite..on peut bien s'en sortir tout seul soi-même et l'avantage c'est qu'on la maîtrise ensuite parfaitement!
je pense que ton code va bien me servir merci encore, si j'ai quelques souci je posterai et je sais qu'on pourra m'aider Smiley cligne
matmat a écrit :
Mais question accessibilité : 0 . Smiley biggol


On espére aussi qu'un jour les lecteurs vocaux et autre navigateurs texte seront capable de retranscrir ce genre de code...

Au fait pour faire ça, t'as pas forcement besoin de lessive Smiley lol
Salut,
Je pensais surtout : Si t'as pas javascript, t'as qu'une page vide Smiley bawling

A part ça, je ne comprends pas tas fonction getPageSize. Comment tu t'en sert pour faire la même chose que cette page test qui comprends un élément centré dans la fenêtre, qqsoit la position des barres de défilement ?
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<style type="text/css" />
#content{
height:2000px;
width:2000px
}
#bando{
 position: absolute;
 z-index: 1;
 top: 15px;
 left: 15px;
 background:red;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<style type="text/css" />
#content{
height:2000px;
width:2000px
}
#bando{
 position: absolute;
 z-index: 1;
 top: 15px;
 left: 15px;
 background:red;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
( function() { //fonction éxécutable tout de suite
if(document.createElement){ // exclut les navigateurs incompatibles

var d=document,gk=window.innerWidth?1:0 // gecko ou ie
var obj=d.createElement('div');obj.setAttribute('id','bando')

var getCoord = function(){
	//infos sur la fenêtre du navigateur
	fl=gk?innerWidth:db.clientWidth 	//l fenêtre 
	fh=gk?innerHeight:db.clientHeight  	//h fenêtre 
	sx=gk?pageXOffset:db.scrollLeft; 	//scroll h 
	sy=gk?pageYOffset:db.scrollTop; 	//scroll v 
}	

var deplace = function(x,y){
getCoord();
with(obj.style){left=(fl-x)/2+sx+'px';top=(fh-y)/2+sy+'px';}
}

window.onload=function(){
 db=!d.documentElement.clientWidth?d.body:d.documentElement;  
 d.body.appendChild(obj);deplace(obj.offsetWidth,obj.offsetHeight)
 }

onresize=onscroll=function(){deplace(obj.offsetWidth,obj.offsetHeight)}
}} ) ();
</script>
</head>
<body >
<div id="content"></div>
</body>
</html>


Modifié par chmel (17 Apr 2007 - 02:12)
a écrit :

A part ça, je ne comprends pas tas fonction getPageSize. Comment tu t'en sert pour faire la même chose que cette page test qui comprends un élément centré dans la fenêtre, qqsoit la position des barres de défilement ?

Non en fait c'est pareil, mais la tienne est plus efficace, et j'utilise 2 fonctions alors que toi une seule, je crois que je vais utiliser la tienne d'ailleur... avec peut-être quelque modif il faut que je teste.

J'ai bien aimé le :

db=!d.documentElement.clientWidth?d.body:d.documentElement;  

Modifié par matmat (17 Apr 2007 - 05:12)
matmat a écrit :

J'ai bien aimé le :

db=!d.documentElement.clientWidth?d.body:d.documentElement;  

J'ai trouvé que c'était la façon la plus courte et efficace pour détecter le mode standard ou quirk de IE. J'ai eu des ratés avec celle de quirksmode.
Par contre, je ne connaissait pas ces méthodes :
window.scrollMaxY et document.body.scrollHeight
a écrit :
avec peut-être quelque modif il faut que je teste.

Tu me tiendras au courant parce que pour positionner un élément par rapport à la fenêtre, c'est ok, mais par rapport à la page, c'est moins évident. Par exemple, je me suis aussi essayé à imiter "lightbox", mais je n'arrive pas toujours à recouvrir la page avec l'arrière plan, surtout sur IE7
Modifié par chmel (18 Apr 2007 - 00:23)
Salut chmel, comme promis voici, les modifs que j'ai effectué sur les fonctions getWindowSize et getPageSize, je préfére les laisser séparée c'est plus flexible :

function getWindowSize(){
  db=(!d.documentElement.clientWidth)?document.body:document.documentElement;  
  var windowWidth = (window.innerWidth)? window.innerWidth : db.clientWidth;
  var windowHeight = (window.innerHeight)? window.innerHeight: db.clientHeight;
  return {'width': windowWidth, 'height': windowHeight};
}

function getPageSize(){
  var windowSize = getWindowSize()   
  var xScroll = document.body.scrollWidth;
  var yScroll = (window.innerHeight && window.scrollMaxY)? window.innerHeight + window.scrollMaxY : document.body.scrollHeight;
  var pageWidth = (xScroll < windowSize.width)? windowSize.width : xScroll;  
  var pageHeight = (yScroll < windowSize.height)? windowSize.height : yScroll;
  return {'width': pageWidth, 'height': pageHeight};
}


Je n'est pas trop touché a getPageSize, parceque je crois que c'est justement parceque la tienne et incompléte que tu as des problémes celon les navigateurs.

J'ai par contre amélioré la getWindowSize à l'aide de ta variable db.
Modifié par matmat (19 Apr 2007 - 02:53)
ok, merci matmat, je commence à comprendre :
getWindowSize() donne les dimentions de la fenêtre de navigation, alors que getPageSize() récupère celles de la page en cours.
C'est bien cela qui me manquait Smiley biggrin pour dimentionner l'arrière plan, je pense Smiley rolleyes . Je vais étudier ça quand j'aurait le temps.
PS, Dans l'éxellent script de Xuan Nguyen, getPageSize() me semble regrouper les deux ...
Modifié par chmel (19 Apr 2007 - 23:28)
exact sa fonction getPageSize() regroupe les deux, c'est un choix. Je préfére les garder séparée parceque des fois j'ai besoin de l'une mais pas de l'autre. Tu me diras c'est pas trés lourd...
Par contre j'aime bien getWindowSize() avec ta variable db. Ceci dit on se prend un peu la tête pour rien, c'est a peu prés tout pareil en fait.
Modifié par matmat (20 Apr 2007 - 00:04)
Les fonctions getPageSize() et getPageScroll() ont été écrites par Peter-Paul Koch (quirksmode.org) et recodée par Lokesh Dhakar (Lightbox JS) Smiley smile
bonjour xuxu,

N'empèche que getPageSize n'est pas au point sur IE en mode strict.
Je l'ai résolu ici avec
var pageWidth = db.scrollWidth;  
var pageHeight = db.scrollHeight;
non il y est aussi, ici:

else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...[b]would also work in Explorer 6 Strict[/b], Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

Mais il me semble que ta solution est plus courte.
matmat, j'avais essayé ça, mais c'est pas seulement une histoire longueur, sur IE 6 ou 7/win standard(vista, je sais pas), c'est document.documentElement qui marche et non pas document.body. C'est pour cela que j'ai mis la variable db citée plus haut Smiley cligne sinon, l'arriére plan, censé recouvrir la page, ne va pas j'usqu'en bas Smiley biggol
Voir la fonction pageDim dans le script.
Modifié par chmel (24 Apr 2007 - 00:36)
Pages :