Roundies.js (angle arrondi ss IE) marche pas!
Résolu
Fonx2
Messages postés
331
Date d'inscription
Statut
Membre
Dernière intervention
-
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'essaie désespérément depuis deux jours de faire fonctionner le script "Roundies.js", récupéré ici (Tuto + Liens):
>> https://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html <<
Ce script a pour but de remplacer la propriété CSS3 "border-radius" sous Internet Explorer puisque celui-ci ne la gère pas (comme tant d'autre chose...).
Le fichier "Roundies.js" se trouve dans le même répertoire que les fichiers PHP.
Voici un extrait du code du fichier PHP:
Un extrait du code CSS:
Il me semble avoir bien respecté ce qui est dit dans le tuto alors... pourquoi sa fonctionne pas?!!
J'essaie désespérément depuis deux jours de faire fonctionner le script "Roundies.js", récupéré ici (Tuto + Liens):
>> https://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html <<
Ce script a pour but de remplacer la propriété CSS3 "border-radius" sous Internet Explorer puisque celui-ci ne la gère pas (comme tant d'autre chose...).
Le fichier "Roundies.js" se trouve dans le même répertoire que les fichiers PHP.
Voici un extrait du code du fichier PHP:
<!--[if lte IE 8]>
<script type='text/javascript' src='Roundies.js'></script>
<script type='text/javascript'>DD_roundies.addrule('.BordureTableau', '20px 20px 0px 0px');</script>
<![endif]-->
Un extrait du code CSS:
.BordureTableau {
margin: auto;
margin-bottom: 25px;
border: none;
background-color: #4681FF;
border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
}
Il me semble avoir bien respecté ce qui est dit dans le tuto alors... pourquoi sa fonctionne pas?!!
9 réponses
Hello !
Ayé, ça fonctionne ! Je suis super speed aujourd'hui (début de vacances, avions et tout ce qui va avec...), j'espère que je vais être clair.
1. Tu ne change rien à ton/tes fichiers .css, hormis les habituels codes pour le radius à la netscape comme ça:
2. Dans les lignes suivantes tu verra que (pour d'autres raisons), j'ai un style conditionnel pour IE, on s'en fiche. Ce qui compte est juste en dessous et n'est pas conditionnel, de toute façon Firefox n'en fera rien (au pire une erreur dans un coin, à voir). Tu importes le roundies.js, et tu ajoutes les arrondis que tu souhaites directement sur les ID et/ou CLASS des div que tu veux :
3. Là je crois que c'est tout... Le site sur lequel j'ai fait ça est en ligne (http://www.france-vacationhome.com), si problème, re-poste, ou utilise FireBug pour fouiner dans mon code !
Good Luck !
Guillaume PELESE
gpelese.fr
Ayé, ça fonctionne ! Je suis super speed aujourd'hui (début de vacances, avions et tout ce qui va avec...), j'espère que je vais être clair.
1. Tu ne change rien à ton/tes fichiers .css, hormis les habituels codes pour le radius à la netscape comme ça:
-moz-border-radius : 3px; -webkit-border-radius : 3px; -khtml-border-radius : 3px;
2. Dans les lignes suivantes tu verra que (pour d'autres raisons), j'ai un style conditionnel pour IE, on s'en fiche. Ce qui compte est juste en dessous et n'est pas conditionnel, de toute façon Firefox n'en fera rien (au pire une erreur dans un coin, à voir). Tu importes le roundies.js, et tu ajoutes les arrondis que tu souhaites directement sur les ID et/ou CLASS des div que tu veux :
<!-- DD roundies (coins arrondis pour ie) -->
<!--[if IE]>
<link rel="stylesheet" href="./css/main_ie.css" type="text/css"/>
<![endif]-->
<script type="text/javascript" src="./css/roundies.js"></script>
<script>
DD_roundies.addRule('.btn', '3px', true);
DD_roundies.addRule('.active_btn', '3px', true);
DD_roundies.addRule('#global', '10px', true);
DD_roundies.addRule('#menu', '10px', true);
DD_roundies.addRule('#video', '10px', true);
DD_roundies.addRule('#centre', '10px', true);
DD_roundies.addRule('#addon', '10px', true);
DD_roundies.addRule('#webcam', '10px', true);
DD_roundies.addRule('#annonce', '10px', true);
DD_roundies.addRule('fieldset', '5px', true);
DD_roundies.addRule('input', '3px', true);
DD_roundies.addRule('textarea', '3px', true);
</script>
3. Là je crois que c'est tout... Le site sur lequel j'ai fait ça est en ligne (http://www.france-vacationhome.com), si problème, re-poste, ou utilise FireBug pour fouiner dans mon code !
Good Luck !
Guillaume PELESE
gpelese.fr
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
peut être qu'il te faut lancer la fonction au chargement.
window.onload = function(){
DD_roundies.addrule('.BordureTableau', '20px 20px 0px 0px');
}
car tes éléments ne sont pas encore chargé.
pazz
window.onload = function(){
DD_roundies.addrule('.BordureTableau', '20px 20px 0px 0px');
}
car tes éléments ne sont pas encore chargé.
pazz
@ gp
Super! Merci beaucoup pour ton aide!
C'est grâce au code que tu as posté que j'ai pu régler le problème: une simple histoire de majuscule!!
En effet, dans mon code j'ai mis:
"<script type='text/javascript'>DD_roundies.addrule('.BordureTableau', '20px 20px 0px 0px');</script>"
Alors qu'il faut mettre:
"<script type='text/javascript'>DD_roundies.addRule('.BordureTableau', '20px 20px 0px 0px');</script>"
Et voila! Le remplacement du "addrule" par "addRule" a résolut le problème!
Cela dit, j'ai remarqué un certain délai dans l'application des angles arrondis.
Je vais essayé d'exécuter la fonction au chargement, comme conseillé par pazz.
En tout cas, merci beaucoup pour votre aide!
Super! Merci beaucoup pour ton aide!
C'est grâce au code que tu as posté que j'ai pu régler le problème: une simple histoire de majuscule!!
En effet, dans mon code j'ai mis:
"<script type='text/javascript'>DD_roundies.addrule('.BordureTableau', '20px 20px 0px 0px');</script>"
Alors qu'il faut mettre:
"<script type='text/javascript'>DD_roundies.addRule('.BordureTableau', '20px 20px 0px 0px');</script>"
Et voila! Le remplacement du "addrule" par "addRule" a résolut le problème!
Cela dit, j'ai remarqué un certain délai dans l'application des angles arrondis.
Je vais essayé d'exécuter la fonction au chargement, comme conseillé par pazz.
En tout cas, merci beaucoup pour votre aide!
@ pazz
Merci pour ta contribution.
J'ai testé ton code mais hélas, il ne règle pas le problème de casse initial et il n'apporte pas non plus de solution pour le problème du délais d'application des angles arrondis.
En tout cas, merci beaucoup quand même d'avoir pris du temps pour lire et répondre.
@+!
Merci pour ta contribution.
J'ai testé ton code mais hélas, il ne règle pas le problème de casse initial et il n'apporte pas non plus de solution pour le problème du délais d'application des angles arrondis.
En tout cas, merci beaucoup quand même d'avoir pris du temps pour lire et répondre.
@+!
Je galère avec roundies.js ces temps-ci afin de pouvoir arrondir les champs de mon formulaire.
Pas de soucis avec la plupart des navigateurs sauf IE bien sûr qui ne veut arrondir que mes inputs et pas les textareas.
J'aimerais juste savoir quelle est votre version de IE ? (IE7 pour ma part)
Merci
Cela dit, la limitation concernant les images en fond me gène trop.
Je pense donc finir par m'orienter sur la méthode donnée ici:
http://jquery.malsup.com/corner/
Voila! Bon courage à tous et merci pour votre aide en tout cas!