Succulente cuisine : Modèles VB et Javascript

Pourquoi faire simple quand ....

Pourquoi ne pas mettre tout le modèle dans un div qui a comme largeur 100% ?

au niveau du CSS

← Re: Pourquoi faire simple quand ....

Bienvenue au chantier Laseine.
On dirait qu'il y a eu une fuite ... :-)

 

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


#sidebar {
position: fixed;
_position: absolute;
top: 123px;
_top: 120px;
left: 3px;
}

#sidebar_bis {
position: absolute;
top: 120px;
left: 783px;
}

#main-col {
position: absolute;
top: 120px;
left: 225px;
}

← Débloquer un div puis le rebloquer ?

Constat 1 :

iTheme, par défaut, et pour les rares sites que je connais (Sur VdeV il y a une listes modèles les plus utilisés ... mais pas avec les sites qui les utilisent ...), est "centré". Il suffit de rétrécir / agrandir la fenêtre du navigateur pour s'en apercevoir. La cause : les attributs des <div> page et wrapper. Donc (bravo Mitra et Olivier, beau boulot !) iTheme convient parfaitement aux "petits" écrans.

Oui mais voilà, il y a leblase.net, avec son <div> bloqué ....

Constat 2 :

Sur des CSS qui "centrent", il n'y a rien d'intéressant à faire pour déplacer les attributs left de tel ou tel bloc.

Mais ... sur des CSS qui ne "centrent pas" (leblase.net) ? Il faut étudier ....

Mitra, peux tu créer "ici" un modèle avec 3 col., et un bloc "bloqué" comme celui de leblase.net ? Oui, je sais, il n'y a pas que le modèle, il y a aussi un ou deux petits fichiers css à mettre dans les "files".

Hypothèse 1 : débloquer / rebloquer ?

Est ce que serait intéressant, sur un modèle où il y a un div "bloqué", de :
• récupérer largeur écran
• récupérer position A du div "bloqué" , les attributs B des div "supérieurs", etc.
• débloquer le div, et donner aux div "supérieurs" des valeurs normales (comme sur les autres modèles)
• tout ça devrait avoir pour effet de recentrer le modèle
• rebloquer le div à la position A, remettre les attributs B
• on devrait maintenant avoir un modèle centré (sur la nouvelle largeur écran ou fenêtre), et avec son fameux div bloqué.

Est-il possible d'avoir le fichier du Modèle ?
Mais si je vous embête Mitra et Fix dites le moi

← Re:

Laseine,
Je te l'envoie par mail.
Cependant, le but de nos travaux est aussi de progresser ensemble afin de voir si on peut faire des choses sympa avec Viabloga et Javascript.
Je sais que tes connaissances dans la matière sont énorme et peuvent beaucoup nous apporter mais nous ne cherchons pas une solution packagée sans comprendre le pourquoi et le comment.

Enfin, même si on trouve une solution pure html/css, je pense qu'il est intéressant de poursuivre la solution javascript.

Sinon tu t'y connais en javascript ?
Si oui, y a-t-il un moyen d'introduire le javascript dans du CSS ?
Par exemple, peut-on faire appelle à une fonction javascript à l'intérieur du CSS du sidebar par exemple ?

Mais si mais si ça peut marcher :-)

Je crois que j'ai la solution (en javascript) pour accéder à, puis modifier à la volée, n'importe quel élément de style. Conséquence, avec les browsers modernes : l'apparence est changée "instantanément".

Je posterai ça un peu plus tard. Pour le moment (03h15 ...), repos  :-)

← Wake up ... it's morning:-)

Ta solution ne serait pas avec setAttribute("left") ?

Aller ... donne nous la solution:-)

← Re: Wake up ... it's morning:-)

 1) setAttribute ne "devrait" pas fonctionner si tu n'arrives pas à faire fonctionner getAttribute
mais bon, il n'y a qu'à faire le test :-)

2) Pour faire court et simple, un espoir du côté de la fonction getComputedStyle ? Mais je n'ai pas réussi (Mac OSX, Firefox 2 et Safari 3, dernières versions) à la faire fonctionner correctement.
De plus, je n'ai pas (parce que je me suis énervé sur mes tests ?) exactement compris le pourquoi du comment de getComputedStyle. Je suis comme toi, besoin de "comprendre à fond". 

Voir ce test : ahlala zut  

3) Mais j'avais, avant-hier, fait un truc dont je suis très fier . Regarde ce "texte" essai-stylesheets-index- . Ce n'est pas une approche "courte et simple", mais ça marche : je récupère tous les éléments de style, leurs propriétés et valeurs. Reste à trouver comment modifier un élément .

4) J'ai tenté une approche "ergonomique" : demander à l'utilisateur l'index de styleSheets[ ] et l'élément de CSS à rechercher, puis, hop, lui proposer la liste calculée comme en 3) ci-dessus. Une piste à creuser (pour l'ergonomie) ? Voir abracadabra 

5) ouh la ... encore passé beaucoup trop de temps à tout ça. Deux remarques :
• si dans le head du modèle on met deux appels ("src=") consécutifs à des fichiers (.js) externes de scripts, seul le fichier du premier appel est efficace. Va savoir pourquoi ... 
• l'éditeur de texte de Viabloga n'est pas du tout adapté à l'édition de script. Par ex., il a tendance à rajouter des blancs lors d'un copier-coller, ce qui est extrêmement gênant car cela peut donner :
if(truc== machin) au lieu de if(truc==machin) qui seul est efficace.
Par ex. encore, l'éditeur supprime des passages à la ligne qui rendent le script lisible. Etc.

← Re: Wake up ... it's morning:-)

C'est génial ce que tu as fait.

J'ai un peu continué l'idée de getAttribute et setAttribute sans succès.
Ce soir, j'ai repris tes différentes solutions et voici le code que j'ai :

<html>
<head>
<script type="text/javascript">
   function cStyles()
  {
   var RefDiv = document.getElementById("sidebar");
   var txtHeight = document.getElementById("t1");
   var l_style =
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("left");
   txtHeight.value = l_style;
  }
 </script>

 <style type="text/css">
#sidebar {
position: fixed;
top: 123px;
left: 3px;
width: 30px;
}
 </style>
</head>

<body>

<div id="sidebar">&nbsp;</div>

<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
  left<input id="t1" type="text" value="99">
</form>
</body>
</html>

---------------------------------
Le résultat avant :

Le résultat après :

← getComputedStyles ... j'ai enfin pigé

 Ayant lu relu et rererelu les manuels ... 

• getComputedStyles (ou l'équivalent pour IE .currentStyle) donne des résultats "imprévisibles" (pour résumer ...) en raison de l'empilement (Cascading ...) de règles CSS. Ce n'est donc pas la bonne fonction à utiliser ... sauf si nous avons des raisons impérieuses. Mieux vaut se plonger dans les subtilités du DOM pour extraire des valeurs "sûres" !

← Re: Wake up ... it's morning:-)

Pour changer le style des éléments de la page :

<script type="text/javascript">
    function changeStyles()
    {
        document.getElementById("sidebar").style.left="20px";
    }
 </script>

← Some days later ...

 Hello Mitra,

j'ai passé bcp  bcp de temps ces derniers jours à "revenir aux choses basiques". Lire mes manuels javascript (y compris un tout nouveau : Javascript - la référence, de David Flanagan, chez O'Reilly. Plus de 1000 pages ... ouuuuuuuuuuuuu).

Passé aussi bcp bcp bcp de temps à refaire un "texte" Viabloga : abracadabra, qui permet de lister les styleSheets[ ] et les cssRules des styleSheets.

problèmes rencontrés avec les scripts de ce "texte" :
• bêtises de débutant : taper un code, retaper un code, rereretaper un code ... au lieu de commencer par étudier le manuel. Les exemples en ligne (recherches Google) ne sont pas efficaces si on ne comprend pas toutes les implications du "code miracle" trouvé ... le manuel, c'est bien, c'est mieux.
• problèmes avec l'éditeur de texte (par ex. de façon inexplicable il change parfois une majuscule en minuscule ...)
• temps passé à comprendre comment fonctionnent différents outils de débogage , et "pourquoi" un problème apparaît à tel endroit (souvent, la source du pb. se situe bien "avant").
• compatibilité, pour que ça "passe" aussi bien avec Safari (Safari 3, dernière version, Mac OS X) que Firefox ((Firefox 2, dernière version, Mac OS X). Eh oui, des syntaxes "standard" digérées sans pb. par Safari ne "passent" pas avec FF, il faut trouver une autre syntaxe standard ... Ça promet, avec IE, le plus incompatible des navigateurs, et toutes ses versions boguées (je ne parle même pas de la 5 ...).

Remarque 1 :
• on peut facilement tester un script sur une page HTML indépendante (sur son PC, chez un hébergeur, et pourquoi pas dans les "files" de Viabloga.  On peut même inclure dans cette page les styles générés par VB (par copier-coller depuis le source d'une page VB).
• dans la mesure où nos efforts de scriptage s'intéressent à ce qui se passe "dans" Viabloga,  on peut (ou : il faut) transposer ces tests "dans" Viabloga (par ex. dans un "texte", c'est plus discret pour tester). Comme l'éditeur de texte utilisé par VB joue des tours, il vaut mieux avoir fait le maximum de déboguage "primaire" sur la page HTML indépendante évoquée ci-dessus.

Remarque 2 :
• en faisant ces petits travaux, on se rend compte de l'immense boulot qu'a du faire Stéphane pour que Viabloga soit accessible au "maximum" de navigateurs.
• et on rejoint l'immense cohorte des maudisseurs de Microsoft. Une pensée émue pour les utilisateurs en entreprise, obligés de se servir d'IE 5 ou 6 ... ou même 7. 

Remarque 3 :
• Safari 3 (sur Mac OS X en tout cas) dispose de très bons outils de déboguage. Il faut pour cela déverrouiller un truc permettant l'accès à un menu "Debug"
• Pour FF, j'essaie d'utiliser l'extension Firebug

Remarque 4 :
• la prochaine version du texte "abracadabra" tentera de modifier directement le contenu d'un div, plutôt que de recourir à un textarea : un premier pas pour utiliser le DOM et gérer (si utile) des contenus Viabloga.

Remarque 5 :
• la prochaine version du texte "abracadabra" explorera simultanément toutes les styleSheets[ ] d'une page Viabloga. De façon par exemple à repérer qu'il y a deux occurences (mais oui !) de #sidebar. En attendant, tu peux "jouer" avec abracadabra.
• comme il y a plusieurs styleSheets[ ], il pourrait être utile de pouvoir les identifier autrement que par un index (ex. styleSheets[0] ).  Je vais étudier le manuel pour voir comment (.name ? .id ? .link ?). Si c'est concluant, on pourrait proposer à Stéphane une "règle d'identification".

Remarque 6 :
• le déboguage me signale qu'avec la version  de modèle public-itheme 090308 il y a plusieurs erreurs (Parse Error, Can't find variable, etc.) dans le modèle.
• ce serait commode de pouvoir afficher en clair (sans aller dans le menu Admin de VB) le modèle utilisé ... je vais essayer de voir si c'est possible. Nous pourrions aussi demander à Stéphane de créer une "variable Viabloga" contenant ce renseignement (javascript sait très bien extraire le contenu d'une variable VB, pour aller ensuite l'afficher où cela serait utile).
• il serait souhaitable, version par version, que nous documentions les changements apportés au modèle. Pour cela, commentaires "dans" le modèle, ou utilisation de "textes VB" sur ce blog. Qu'en penses tu ?

Remarque 7 :
• j'ai acheté un nouveau manuel (le Flanagan, voir plus haut). Mais ... en français (passage à la Fnac, irrésistible, hop !). Si la version d'origine est en anglais, mieux vaut la V.O ! Parce que probablement plus récente, et certainement dépourvue d'inévitables erreurs de traduction etc. Et puis ... tous ces langages de programmation, ils sont "en anglais", non ? Ou en tout cas, conçus par des équipes anglophones.

Remarque 8 :
• je vais enfin (ah, tout de même !) essayer de tester la fonction changeStyles() que tu proposes !

← Re: Some days later ...

Fix,

"Remarque 6:
comme il y a plusieurs styleSheets[ ], il pourrait être utile de pouvoir les identifier autrement que par un index (ex. styleSheets[0] ).  Je vais étudier le manuel pour voir comment (.name ? .id ? .link ?). Si c'est concluant, on pourrait proposer à Stéphane une "règle d'identification"."

"il serait souhaitable, version par version, que nous documentions les changements apportés au modèle. Pour cela, commentaires "dans" le modèle, ou utilisation de "textes VB" sur ce blog. Qu'en penses tu ?"

Oui à condition d'utiliser une régle de nommage du modèle à faire évoluer.
Un truc du genre :

• "iTheme evol ddmmyy.html" pour la dernière version du modèle testé et validé,
• "iTheme encours Fix ddmmyy.html" pour la version de travail Fix. Personne d'autre que Fix ne pourra y toucher.
• "iTheme encours Mitra ddmmyy.html" pour la version de travail Mitra. Personne d'autre que Mitra ne pourra y toucher.

Parce que là, je suis larguée depuis quelques jours !

← Re: Some days later ...

Hello Mitra !
Content de constater que la DGI te lâche un tout petit peu les baskets (je te raconterai des trucs marrants qui me sont arrivés il y a bien longtemps avec la DGI lors d'un appel d'offres).

Identifier les styleSheets : j'y travaille, avec des name="nomDeCeStyle". Les numéros d'index ? Ils correspondent à l'ordre dans lequel le navigateur charge les feuilles de style internes ou externes. Ce n'est PAS l'ordre qui est appliqué dans le Cascading, qui prend en compte des règles de priorité assez complexes.

L'index de la cssRule pour #sidebar  dans le texte EssaiStyleSheet[index] ? j'avais initialisé l'index à -999 au départ du script. "-999" correspond donc à une cssRule non trouvée dans telle styleSheet.

Mais ce texte EssaiStyleSheet[index] correspond à un script ... assez ancien (héhé, je progresse, très lentement, mais je progresse). Tu trouveras mieux avec les scripts du texte abracadabra.

A propos des name pour désigner les styleSheets : voir cet article sur VdeV Modèles et titres des styles.

Ta proposition de nommage des modèles :"iTheme evol ddmmyy.html" pour la dernière version du modèle testé et validé,
"iTheme encours Fix ddmmyy.html" pour la version de travail Fix. Personne d'autre que Fix ne pourra y toucher.
"iTheme encours Mitra ddmmyy.html"

Super ! je vais essayer de me discipliner et de respecter ça. Parce que ça devient .... heu ... très bordélique tous ces modèles dans la page "modèles". Même pas de liste triable par date de dernière mise à jour etc. 

Il faudra aussi que je fasse une liste (un texte VB) documentant les caractéristiques de tel ou tel changement apporté à tel modèle. De façon à retrouver tel truc intéressant, ou tel truc qui-ne-marche-pas (et c'est pas la peine de réessayer).