Modèles VB et Javascript - Centrer les éléments de la page

Fév. 08 27

Centrer les éléments de la page

Mots-clés : Cas pratique

Inconvénient du modèle iThème lors de l'utilisation d'une colonne fixe
Le modèle n'est pas centré sur la page. En effet, pour ceux qui disposent d'une bonne résolution, un espace vide apparaît à droite ou à gauche de la page (en fonction du positionnement de la colonne fixe)

L'idée
Faire en sorte que les colonnes du modèle soient centrées au niveau de la page indépendemment du ressource écran/résolution utilisé.

Les éléments concernés dans iThème :
- sidebar ou sidebar_bis dans les fichiers css externalisé : /public_images/skins/itheme/troiscol_milieu_fixe_1.css dans le cas où la colonne fixe est située à l'extrémite gauche de la page, la colonne des articles au centre de la page et la colonne droite à l'extrémité droite de la page.
Idem pour :
/public_images/skins/itheme/troiscol_milieu_fixe_2.css, /public_images/skins/itheme/deuxcol_grosbloc_droite_fixe.css, /public_images/skins/itheme/deuxcol_grosbloc_gauche_fixe.css, /public_images/skins/itheme/troiscol_gauche_fixe_2.css

/public_images/skins/itheme/deuxcol_gauche.css est le "link rel" mis par le modèle dans le iTheme généré (tel que au 13/03/2008

#sidebar {
position: fixed;
_position: absolute;
top: 243px;
_top: 240px;
left: 3px;
}
Dans cet exemple, la colonne gauche est positionée dans les coordonnées (x=3, y=243).

De plus, tous les éléments de la page sont dans un conteneur au nom de "wrapper" qui a une largeur de 995px :

#wrapper {
width: 995px;
margin: 3px;
position: absolute;
}

Solution en javascript

Récupérer les dimensions de la page.
Recalculer l'attribut "left" de "sidebar", "sidebar_bis" (la colonne de droite) et "main-col" (la colonne centrale)

Mitra Actualités 7 commentaires Nombre de lectures Lu fois

Commenter

Commentaires

Tous les nouveaux écrans subissent cette tendance idiote qui favorise plus la lecture de DVD que celle du Net (alors que je ne regarde quasiment jamais un film sur un portable, et jamais jamais ne surfe dans une salle de cinéma, fut-elle Home mais chacun fait comme il veut).
Bref la plupart des écrans modernes sont donc en 16/9.
Ce qui renforce mon sentiment que des tas de saloperies d'applications géniales, widgets, pop-up, flashmachins devraient s'afficher ici ou là dans les espaces inertes.
Soit aléatoirement pour nous rappeler notre rdv chez le dentiste, soit pour nous annoncer le divorce de machin, soit pour nous indiquer qu'un virus se pointe, que le temps tourne à la pluie, qu'un nouveau mail/commentaire/chat pointe, etc etc ou que mon OPA hostile sur Viabloga a fonctionné grâce à l'intervention du Back Office des produits dérivés de la Soc Gén, ainsi que mon ami Jérôme l'avait programmé.

leblase | Le Mercredi 27/02/2008 à 19:46 |

| Répondre

← Re:

Leblase,
J'aimerais bien que t'invite ton ami Jérôme à mon enterrement;-)
Ok ... mon anniversaire est proche et je voudrais un écran 16/9.
Tu connais mon adresse maintenant;-))))

Mitra | Le Jeudi 28/02/2008 à 00:28 |

| Répondre

Bon ... comment cherche-t-on les dimensions de l'écran ?
Je commence par chercher ...

Mitra | Le Jeudi 28/02/2008 à 22:32 |

| Répondre

← Solution pour récupérer la largeur et la hauteur d'un écran

J'ai trouve :

var Lscreen=screen.width;
var Hscreen=screen.height;

Les deux attributs width et height de l'objet screen permettent de récupérer la largeur et la hauteur de l'écran.

Mitra | Le Jeudi 28/02/2008 à 22:40 |

| Répondre

← Re: Solution pour récupérer la largeur et la hauteur d'un écran

Mitra, tu as bien trouvé !

le code javascript que j'avais mis dans un commentaire de ce blog était :

<a rel="nofollow" href="javascript:alert('Votre écran : '+screen.width+'x'+screen.height+' pixels');"> <i>(cliquer ici)</i> </a>

Mini-explication :
A l'intérieur des guillemets doubles de href="....." on met d'habitude une URL du genre http://www.monsite.com/mondocument.html
Ici l'URL a été remplacée par un appel javascript:
Le code javascript lui-même comprend une seule instruction : alert(....); Note bien le point-virgule qui en javascript comme dans plusieurs autres langages termine une ligne d'instruction(s).
alert(chaîne de caractères) envoie un pop-up affichant la chaîne de caractères.
Ici la chaîne de caractères totale est composée de 4 éléments concaténés par "+"
Les chaînes 'Votre écran : ' et ' pixels'
Les valeurs numériques screen.width et screen.height que javascript transforme en chaîne de caractères.

Tu vois la case de formulaire ci-dessous :

Clique sur ce lien pour faire "parler" le formulaire !
Tu peux changer ce qu'il y a dans la case.

Fix | Le Jeudi 28/02/2008 à 23:44 |

| Répondre

← Re: Solution pour récupérer la largeur et la hauteur d'un écran

Mitra,

j'ai "enfin" terminé mon précédent comm' en réponse à to comm' sur largeur & hauteur d'écran

si une alerte "jaja dans le HEAD" s'affiche à chaque chargement de page ...

c'est un test en javascript implanté dans le modèle personnel public-itheme modif commentaire.html dans la partie <head>, après <SITE_META_ICBM>

C'est probablement à cet endroit qu'il faudra introduire un test de détection des dimensions écran.

Fix | Le Vendredi 29/02/2008 à 01:06 |

| Répondre

← Utilisation d'un fichier .js externe

Utilisation d'un fichier .js externe

Test :

Au lieu de mettre des scripts "dans" le modèle (... dans une page HTML), on peut les mettre dans un fichier externe.
Tu peux lire ce fichier à : http://coucou.viabloga.com/files/exterieur.js
L'intérêt d'un fichier externe : utilisable par plusieurs pages ou modèles, une modif. du fichier externe se répercute sur toutes les pages qui font appel à lui. Un autre intérêt : la page ou modèle est moins encombrée par du javascript.

Dans le test ci-dessus (lis le "source" du comm' ...), cliquer le bouton appelle la fonction appelexterne() qui affiche un pop-up

Dans le modèle personnel public-itheme modif commentaire.html la définition du fichier externe est faite dans la partie <head>, juste après <title> (ça devrait marcher ailleurs, du moment que c'est dans la partie <head> ...) :

<script language="javascript" src="http://coucou.viabloga.com/files/exterieur.js"></script>

Il peut y avoir autant de fichiers externes que l'on souhaite dans un modèle ou une page HTML.