11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Le Javascript c'est vraiment pas mon point fort et j'ai un petit souci :

Mootools propose une fonction getSize() qui permet de trouver les dimensions d'un élément. Exemple :

var size = myElement.getSize();
alert("The element is "+size.x+" pixels wide and "+size.y+"pixels high.");


-----

De mon coté, je voudrais récupérer les dimensions de la fenêtre de l'utilisateur, puis appliquer un pourcentage sur chaque dimension (ne prendre que 80% de la largeur et 60% de la hauteur) puis les balancer dans le href d'une url. Exemple :

<a href="http://www.monsite.com?keepThis=true&TB_iframe=true&height=600&width=1000">


-----

Sauf que je ne sais pas du tout comment faire ça. J'imagine que c'est super simple pour quelqu'un qui s'y connait. Je ne maitrise pas du tout les syntaxes JS et l'insertion de JS dans du HTML de ce type.

Si quelqu'un pouvait me filer un coup de main, ce serait génial !

Merci d'avance à tous.
Modifié par Alekusu (07 Jul 2008 - 16:36)
En fait, il faut la version 1.2 de Mootools, hors chez moi tout tourne sur la 1.1, bref.

J'ai vu que javascript en natif fournissait facilement la taille de l'écran :

alert("The element is "+screen.width+" pixels wide and "+screen.height+"pixels high.");


Sauf que quand je remplace par window, ça marche pas.
J'ai donc farfouillé un peu et j'ai trouvé la solution suivante pour avoir la taille de la fenetre :

alert("The element is "+window.innerWidth+" pixels wide and "+window.innerHeight+" pixels high.");


A cela, j'applique le calcul que je souhaitais faire sur mon url et j'arrondis avec Math.round():

Width = window.innerWidth * 0.8
Height = window.innerHeight * 0.6
			
alert("http://www.monsite.com?keepThis=true&TB_iframe=true&height="+Math.round(Height)+"&width="+Math.round(Width));


Bon, il me reste plus qu'à comprendre comment appliquer cette URL dans le HREF d'une URL.

Si quelqu'un sait... Smiley cligne
Modifié par Alekusu (07 Jul 2008 - 04:50)
Bon j'avance doucement vu que personne ne me répond sur ce sujet Smiley decu


<SCRIPT LANGUAGE="JavaScript">
Width = window.innerWidth * 0.8
Height = window.innerHeight * 0.6
			
function Apercu()
{
location.href="http://www.google.com?keepThis=true&TB_iframe=true&height="+Math.round(Height)+"&width="+Math.round(Width);
}
</SCRIPT>

<a href="javascript:Apercu()">Google</a>


Ca fonctionne sauf que ça ouvre l'url comme si je la tapais dans la barre d'adresse au lieu de l'appliquer réellement au HREF de la balise A...

Si quelqu'un pouvait m'aider...
Modifié par Alekusu (07 Jul 2008 - 15:47)
Bon pour ceux que ça intéresse, voici le code final après pas mal de recherche et d'essais :

<script type="text/javascript">
function setLink() {
var Width = window.innerWidth * 0.8
var Height = window.innerHeight * 0.7
document.getElementById('mon_lien').href="http://www.google.com?keepThis=true&TB_iframe=true&height="+Math.round(Height)+"&width="+Math.round(Width);
}

window.onload = function() { setLink(); }
</script>
<a href="blabla" id="mon_lien">Google</a>


Je passe le sujet en résolu...auto-résolu, on est jamais aussi bien servi que par soi-même Smiley rolleyes Smiley lol
Modifié par Alekusu (07 Jul 2008 - 16:36)
Petit peaufinage pour avoir un truc plus propre, ça récupère l'url dans le href et ça lui applique ce que je veux :


<script type="text/javascript">
function setApercuLink() {
var Width = window.innerWidth * 0.8
var Height = window.innerHeight * 0.6
var apercuLink = document.getElementById('mon_lien');
apercuLink.href+="?keepThis=true&TB_iframe=true&height="+Math.round(Height)+"&width="+Math.round(Width);
}

window.onload = function() { setApercuLink(); }
</script>
<a href="http://www.google.com" id="mon_lien">Google</a>

Modifié par Alekusu (07 Jul 2008 - 16:48)
Dernière modif, car sinon ça marche pas sur IE :


<script type="text/javascript">
function setApercuLink() {
if (navigator.appName.indexOf("Microsoft")!=-1) 
{
var Width = document.body.offsetWidth * 0.8
var Height = document.documentElement.clientHeight * 0.8
}
else
{
var Width = window.innerWidth * 0.8
var Height = window.innerHeight * 0.8
}
var apercuLink = document.getElementById('mon_lien');
apercuLink.href+="?keepThis=true&TB_iframe=true&height="+Math.round(Height)+"&width="+Math.round(Width);
}

window.onload = function() { setApercuLink(); }
</script>
<a href="http://www.google.com" id="mon_lien">Google</a>