IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Diaporama dans un fichier JS - innerHTML


Sujet :

JavaScript

  1. #1
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut Diaporama dans un fichier JS - innerHTML
    bonjour,

    Je cherche à inclure un diaporama dans un fichier JS qui comporte déjà du texte et des images.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    /* Création image */
    var k = new Image();
    k.src = "max-3.jpg";
    /* Ajout image  */
    document.getElementById("mox").appendChild(k);
    var p = document.createElement("p");
    p.innerHTML="<img class='alignnone' src='smiley-3.gif'>";
    document.getElementById("mox").appendChild(p);
    C'est un bouton qui ouvre le script JS :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <button onclick="myMax()">Ouvrir ..</button>
    <div id="mix"></div>

    1 / Caser tout le code html du diaporama dans la balise innerHTML est irréalisable.
    2 / JS n'ouvre pas un fichier externe ou page html

    Comment implémenter et avec quelle balise ?

    @+

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonjour,

    ça manque de détails tout ça. Ce diaporama, est-ce un script prêt à l’emploi que tu as téléchargé, ou bien quelque chose que tu souhaites faire toi-même ?

    À propos du chargement d’images par script : quand tu crées un objet image, le navigateur va commencer à charger l’image au moment où tu affectes une valeur à son .src. Ce chargement se fait de façon asynchrone, c’est-à-dire que le script continue de s’exécuter en même temps. C’est un détail qui peut avoir son importance.

    Je suis confus à propos de ces getElementById("mox") dans ton script et de cette <div id="mix"></div> dans ton code HTML. Est-il censé s’agir du même élément ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Il y a beaucoup de possibilités avec JS. Je peux utiliser un diapo existant et le placer dans un iframe.
    Mais, je regroupe tout dans un JS externe qui a l'ouverture/fermeture du bouton donne un contenu spécifique.
    Ci-dessous trois <div> dédiés à ce bouton :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <button onclick="myMux()">Effacez ..</button>
    <button onclick="myMax()">Ouvrir ..</button>
    <div id="mix"></div>
    <div id="max"></div>
    <div id="mox"></div>
    Je cherche un diapo en JS qui peut englober le cadrage des balises html + exécution JS , dans un
    JS externe.

    Le conteneur du diapo peut se placer dans un div de la page html( en dessous des 3 précédents) :
    nb : un diapo qui s'ouvre après un bouton et qui ne dépendra pas d'un iframe, est ce possible ?


  4. #4
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    J'ajoute que la plupart des diapo utilise css
    En passant par un iframe, les transitions entre diapo sont annulées
    Il faut gérer les conflits entre css de page et de iframe



    https://skitter-slider.net/

    skitter est le diapo que j'utilise

    [Résolu] : Avec <embled ... et en perdant les transitions ( ce détail n'a pas d'importance )


  5. #5
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Oui, c’est possible de le faire sans iframe.

    Et pour ajouter à une réflexion que tu faisais dans ton premier post, il est possible de créer une structure HTML complexe via un script, et de façon plus pratique qu’avec le sous-optimal innerHTML, simplement en utilisant createElement et appendChild que tu as l’air de déjà connaître.
    Pour cette raison, je ne comprenais pas vraiment quel était ton problème.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    https://skitter-slider.net/ voir le diapo de la page ( les transitions qui sont scriptés par des class css )

    Avec firebug je ne vois pas de conflit entre css du diaporama et css de la page où est importé le diapo
    Ces transitions ne passent pas.

    Comment débbuger du css ?


  7. #7
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Ce sont des transitions complexes qui n’utilisent pas uniquement CSS. Peux-tu me montrer ton code, en particulier l’endroit où tu inclues la bibli et l’endroit où tu y fais appel ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    bm
    bm est déconnecté
    Membre confirmé

    Homme Profil pro
    Freelance
    Inscrit en
    Octobre 2002
    Messages
    874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Octobre 2002
    Messages : 874
    Points : 556
    Points
    556
    Billets dans le blog
    6
    Par défaut
    Je ne peux rien montrer.
    La multiplication du css rend son débogage impossible.

    Fireburg est un suiveur de synthaxe en temps réel.
    Il faut se placer sur la bonne couche, mais ensuite impossible de coper/coller des portions de script.

    Nom : diapo.jpg
Affichages : 377
Taille : 61,0 Ko

    La coloration synthaxique change pendant les transitions du diapo.

    Lorsque le diapo est imbriqué dans une autre page Firebug se balade sur le calque
    de cette page et ne voit pas ce qui est en dessous.



    nb : Si il faut mettre toutes les librairies " au niveau -1 " derrière la page, cela sera impossible à gérer
    Sinon chaque page devient un conteneur indépendant et passer d'un page à l'autre va empiler les librairies
    avec des caches de navigation plein à raz bord comme la soute à charbon du Titanic ...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PPT-2010] Lancer un fichier powerpoint en mode diaporama dans sharepoint 2010
    Par CobraPython dans le forum Powerpoint
    Réponses: 4
    Dernier message: 20/03/2020, 10h41
  2. Balises HTML dans un fichier XML
    Par Bastet79 dans le forum XML/XSL et SOAP
    Réponses: 12
    Dernier message: 04/09/2002, 16h29
  3. Sauvegarder une surface dans un fichier
    Par Freakazoid dans le forum DirectX
    Réponses: 6
    Dernier message: 18/08/2002, 16h23
  4. séparateurs dans un fichier
    Par manuhard dans le forum Langage
    Réponses: 5
    Dernier message: 13/08/2002, 12h30
  5. enregistrer dans un fichier avec une appli mdi
    Par ferrari dans le forum C++Builder
    Réponses: 4
    Dernier message: 05/05/2002, 16h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo