1. #1
    Membre habitué
    Inscrit en
    février 2009
    Messages
    340
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 340
    Points : 158
    Points
    158

    Par défaut Safari/IE pb avec rotate et transform

    Bonjour,

    Depuis hier, j'apprend l'accordéon, c'est un instrument très amusant.

    Par exemple, dans la partie droite de chaque menu je cherche à faire alterner deux icones bootstrap avec un effet d'animation,
    l'exemple ci-dessous fonctionne très bien sur Chrome/FF/Opéra mais pas sur IE/Safari.

    Petite précision, j'utilise exactement le même principe dans un autre contexte sur des images et cela fonctionne,
    comme si le content: n'était pas reconnu...


    Tournant en rond, auriez-vous une idée du problème ?

    Code CSS/Bootstrap : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .accordion-icon [data-toggle="collapse"]:after
    {
        font-family: 'Glyphicons Halflings';
        content: "\2212"; /* "-" icon */
        float: right;
        color: #b0c5d8;
        font-size: 16px;
        line-height: 28px;
     
        /* Animation */
    	transition: all 700ms ease;
    	-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
     
     }
    .accordion-icon [data-toggle="collapse"].collapsed:after
    {
        font-family: 'Glyphicons Halflings';
        content: "\2b"; /* "+" icon */
        float: right;
        color: #fff;
        font-size: 16px;
        line-height: 30px;
     
        /* Animation */
    	transition: all 700ms ease;
    	-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
        /* Rotation */ 
    	transform: rotate(90deg);
    	-webkit-transform: rotate(90deg); /* Compatibilité : Safari */
     
    }

    Vous remerciant par avant pour vos idées.

  2. #2
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 379
    Points : 486
    Points
    486

    Par défaut

    Ben lorsque l'on est pas wordpress, bootstrap ou autre c'est un peu maigre en code html et css pour pouvoir aider.
    Donc sans un peu plus de code difficile de comprendre ... sinon passer à la flute ou au pipeau

  3. #3
    Membre habitué
    Inscrit en
    février 2009
    Messages
    340
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 340
    Points : 158
    Points
    158

    Par défaut

    Merci pour la réponse, difficile de m'aider si vous ne posséder pas d'accordéon...

    https://www.developpez.net/forums/d1...rdeon-niveaux/


  4. #4
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    379
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 379
    Points : 486
    Points
    486

    Par défaut

    Même avec tout ça, il manque pas mal de css et pour faire un petit ban de test et essayer de comprendre, c'est un peu léger.
    Bon, sans bonne volonté pour montrer un code testable et concis, tant pis.
    Peut être un participant aura du temps a y consacrer ...
    je reste au pipeau!

  5. #5
    Membre habitué
    Inscrit en
    février 2009
    Messages
    340
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 340
    Points : 158
    Points
    158

    Par défaut

    Il ne manque absolument rien au CSS, c'est du Bootstrap, il faut juste ajouter le collapsed dans à la ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    class="panel-heading collapsed
    La fonction slideToggle() ne fait rien d'autre qu'un simple slideToggle().
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function slideToggle(id)
    { 
        $('#'+id).slideToggle(500);
    }
    Si vous ne maitrisez pas le sujet, s'il vous plait, même si cela part d'un bon sentiment, merci de ne pas polluer inutilement ce message.
    Néanmoins, si ce sujet vous intéresse quand même, voici quelques exemples compatibles Chrome/Safari/IE/FF/Opéra trouvés hier soir :

    https://plnkr.co/edit/3ItOoCFZQlicu7iCcGFL?p=preview
    http://jsfiddle.net/koala_dev/3v2egwfs/7/
    http://css3.bradshawenterprises.com/accordions/


Discussions similaires

  1. [XSL-FO] texte avec rotation
    Par minou2005 dans le forum XSL/XSLT/XPATH
    Réponses: 15
    Dernier message: 21/03/2008, 10h27
  2. Dessiner avec rotation un bitmap
    Par Andry dans le forum Delphi
    Réponses: 6
    Dernier message: 04/05/2007, 16h15
  3. Dessiner des regions rectangulaires avec rotation
    Par PadawanDuDelphi dans le forum Delphi
    Réponses: 5
    Dernier message: 26/09/2006, 21h08
  4. JLabel avec rotation
    Par lionrouge dans le forum AWT/SWING
    Réponses: 3
    Dernier message: 22/07/2006, 12h06
  5. Class de gestion des images avec rotation
    Par Johnny Boy dans le forum MFC
    Réponses: 1
    Dernier message: 03/05/2005, 12h54

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