• Résolu Message d'information splash


    Mardi 29 Octobre à 18:24
    GPR_PLOUHA

    Dans gérer son blog :

    [SCRIPT] Afficher des messages d'informations temporaires (splash screen)

     

    il est écrit : 

    Ces messages sont de classe splash, et donc pour modifier leur visuel on peut écrire du code CSS avec le sélecteur .splash.

     

    Ma question : Comment modifier dans le CSS la position (toujours au centre de l'écran) de la fenêtre du message d'information. Je voudrai la mettre en haut à gauche.

    Mercredi 30 Octobre à 22:40
    stormalo

    Bonsoir,

    Bonne question. L'auteur du code (Thierry) aurait été le mieux placé pour répondre, mais il ne semble plus être actif sur son blog.

    Comme son code est très bien commenté ça invite à voir si on peut intuitivement le modifier.


    Thierry récupère une fonction existante placée dans les blogs puisqu'il crée une ligne de code pour modifier un style du texte initialement prévu en "gras" pour le mettre en "normal".
    Par mimétisme, j'ai utilisé le principe de cette même ligne pour placer la boite "splash" en haut et à gauche . . .  « et ça marche ».    smile
    Un simple ajout de css ne fonctionnerait pas, car le positionnement est ici placé  dans un attribut style="..."  généré par un codage javascript.

    Voici la  modification du code  (ajout de code en vert et réglages en rouge

    [ ..debut du code.. ]

    // Passage en texte non gras (ces messages sont en gras par défaut)
    mysplashelt.style.fontWeight="normal";
    //  modification du positionnement top et left
    mysplashelt.style.top="30px";
    mysplashelt.style.left="30px";
    // Injecte le HTML dans le message (remplacer " par \")
    mysplashelt.innerHTML=html;

    [ ..suite du code.. ]  

    Bon usage !

    Jeudi 31 Octobre à 17:26
    Colette95

    Bonjour GPR_PLOUHA, coucou stormalo smile

    Cette question m'intéressant, après quelques recherches, effectivement, en utilisant le sélecteur .splash il est possible, comme indiqué par l'auteur du code, d'apporter les modifications que l'on souhaite uniquement avec du css.

    Par exemple avec ces codes :

    <style><!--
    .splash {
    margin-top: -200px;
    left: 50%;
    margin-left: -250px;
    background: #D6D6D6;
    border: 4px solid #666666;
    font-family: Verdana, Geneva, serif;
    color: #000000;
    }
    --></style>

    (j'ai utilisé uniquement les valeurs qui m'intéressaient pour le déplacement et le design).

    Voici ce que j'ai obtenu :

    Et comme l'a dit stormalo, bon usage !  smile et bonne soirée à tous deux.

    Jeudi 31 Octobre à 22:00
    GPR_PLOUHA

    Merci à Stormalo et Colette95 pour leurs exemples. Ça marche

     

    Jeudi 31 Octobre à 23:11
    stormalo

    @GPR_PLOUHA     

    reste plus qu'à choisir et à splasher smile

     

    @Colette95          

    C'est inattendu pour moi ce fonctionnement par css.  En principe les instructions par l'attribut style sont prioritaire sur celle par sélection css, et c'est pourquoi j'ai cherché uniquement à intervenir via javascript, comme l'avait fait "Thierry" pour agir sur les caractères.

    Différences constatées :

    Modif par javascript : le positionnement se fait par rapport à l'écran, quel que soit le zoom utilisé ou le défilement de la page.

    Modif par ajout de css: le positionnement se fait en relatif, par rapport à la position  précédemment définie, et il est sensible au zoom  ou au défilement de la page

    Enfin, ça c'est sur mon écran de portable. Sur grand écran c'est peut être différent..wink2

    Vendredi 1er Novembre à 08:25
    Colette95

    Coucou stormalo,

    Effectivement c'était assez inattendu et tout comme toi j'avais essayé de trouver à travers le javascript.

    Mais comme je ne connais pas du tout ce codage (j'ai quand même planté 2 fois mon blog en introduisant les codes de GPR_PLOUHA intello), je me suis dit qu'il fallait que j'explore la piste indiquée par l'auteur du tuto. et lors de l'apparition de la fenêtre, j'ai eu le temps de bloquer le code source et voir qu'effectivement elle était configurée avec le sélecteur .splash et voili et voilou... yes

    Quant au positionnement, celui de la plateforme est en position absolute (copie d'écran d'une partie desdits codes).

    (Comme je l'avais indiqué, je n'avais repris que les valeurs que je souhaitais modifier.)

    Mais comme tu l'as souligné, en utilisant le css, il est sensible au zoom mais uniquement dans la hauteur, la marge gauche restant identique dans tous les cas de figure.

    Reste plus qu'à choisir selon ses souhaits, mais, résultats et échanges fort intéressants. smile

    Vendredi 1er Novembre à 10:57
    stormalo

    oui, nos échanges sont intéressants même si nos expressions écrites sont parfois perfectibles pour se comprendre wink2

    exemple avec relatif < > absolu. Soit on est dans le sens purement html, soit dans le sens commun (relatif : en relation avec, par référence à, …)

    Brièvement dans mon esprit:
    En utilisant la modif par ajout de css, les navigateurs calculent la position d'affichage relativement à celle définie en absolute (html).

    En utilisant la modif du javascript, aucun calcul, le positionnement est défini complétement (sens absolu en langage courant) 

    Le plus important est de constater que deux pistes de réflexion existent avec ce genre de codage.

    Bon w.e.  

     

    Vendredi 1er Novembre à 11:16
    Colette95




    Vous devez être membre pour poster un message.