More nifty corners

Salut,

Certains parmi vous ont-ils étudié cette technique ?
J'envisage de la perfectionner, mais je cherche à bien l'étudier au préalable.

Perfectionner ?
Y a t il besoin ?

Salut,

'perfectionner' pas vraiment, mais j'ai fait une petite modif qui permet de ne pas indiquer les codes de couleurs à l'appel de la fonction.

Le principe c'est de détecter ces couleurs dans les élements eux-mêmes.

J'ai pensé aussi à pouvoir l'utiliser en indiquant uniquement dans le html
une classe particulière sur le modèle de :sorttable
mais je n'ai pas commencé la modif.

voilà, si çà t'intéresse, je peux poster le code.
@modérateurs : il est un peu long, est-ce génant ?

ps : puisque c'est mon premier post, je voudrais aussi remercier le créateur et les intervenants du forum pour la qualité des réponses. J'apprends plein de choses sur ce forum.

Olivier a écrit :
Perfectionner ?
Y a t il besoin ?

Oui, un peu.
1) J'aurais besoin de pouvoir spécifier l'épaisseur de la bordure dans les coins (tous les cadres ne font pas la même épaisseur), ainsi que les rayons de courbure en x et y (un coin n'est pas nécessairement "rond")
2) Si je réussis à faire ça, je voudrais mettre plusieurs versions des fonctions selon le besoin, afin de diminuer le nombre de tests
3) La détection des couleurs dans les éléments est effectivement très intéressante. Si tu penses que ton code est trop long pour être mis dans le post, mets le en ligne, avec un lien.

NB : Oui, je pense à le perfectionner, mais je tiens tout de même à préciser que je trouve déjà la chose trés "élégante" en l'état :
- on garde un code propre
- gère les bordures, la transparence
- "degrades gracefully" (et ça, ça compte)

Salut,

je viens de me rendre compte qu'il y a une nouvelle version de nifty corners.
http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

Mes modifs portent sur une ancienne version (mars 2005).

Le petit détail génant, c'est que cette nouvelle version est sous copyright et surtout n'autorise pas les modifs.

a écrit :
When the first article was published, I knew there were many improvements to be done, and now I think this version is a stable and definitive release. Nifty Corners are free, but no modifications to the script and/or the CSS are allowed. This article and Nifty Corners are fully copyrighted by HTML.it and Alessandro Fulciniti, and were published on the 6th of April 2005 both in Italian and in English. You can contact the author writing to a.fulciniti html.it

Du coup, j'hésite à envoyer le code, bien que sur cette ancienne version les modifs étaient autorisées contre un envoi à l'auteur. Ce que j'ai fait.

Votre avis ?

1) Si tu l'as fait sous l'ancienne version, et en suivant leurs recommandations, pas de pb
2) De toute façon, tant que tu ne le revendiques pas comme étant "nifty corners" et que tu ne cherches pas à le vendre, tu as tout à fait le droit de créer une "bibliothèque javascript de création de coins arrondis" en t'inspirant de ce que tu as vu sur leur article

ok,

Désolé, je n'ai pas de site ou mettre le code, donc le voici.
Les modifs et ajouts sont repérés par // modif herve , en fin de ligne.
Attention, je débute en javascript, il y a surement plus simple.

basé sur Nifty Corners: rounded corners without images By Alessandro Fulciniti

function NiftyCheck(){
if(!document.getElementById || !document.createElement)
    return(false);
var b=navigator.userAgent.toLowerCase();
if(b.indexOf("msie 5")>0 && b.indexOf("opera")==-1)
    return(false);
return(true);
}

function Rounded(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i<l;i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
    }
}

function RoundedTop(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddTop(v[i],bk,color,size);
}

function RoundedBottom(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddBottom(v[i],bk,color,size);
}

function AddTop(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
var cp; //modif herve
var el_parent = el.parentNode ; //modif herve
if(size && size=="small"){ cn="rs"; lim=2}
d.className="rtop";
while (getElementStyle(el_parent,"backgroundColor","background-color") == "transparent" && el_parent.nodeName != "HTML") {
el_parent = el_parent.parentNode ; 
}// modif herve
cp = getElementStyle(el_parent,"backgroundColor","background-color");//modif herve
d.style.backgroundColor = cp ;//modif herve
for(i=1;i<=lim;i++){
    var x=document.createElement("b");
    x.className=cn + i;
    x.style.backgroundColor=getElementStyle(el,"backgroundColor","background-color");//modif herve
    d.appendChild(x);
    }
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
var cp; //modif herve
var el_parent = el.parentNode ; //modif herve

if(size && size=="small"){ cn="rs"; lim=2}
d.className="rbottom";


while (getElementStyle(el_parent,"backgroundColor","background-color") == "transparent" && el_parent.nodeName != "HTML") {
el_parent = el_parent.parentNode ;
} // modif herve
cp = getElementStyle(el_parent,"backgroundColor","background-color");// modif herve
d.style.backgroundColor = cp ; // modif herve
for(i=lim;i>0;i--){
    var x=document.createElement("b");
    x.className=cn + i;
    x.style.backgroundColor=getElementStyle(el,"backgroundColor","background-color"); //modif herve
    d.appendChild(x);
    }
el.appendChild(d,el.firstChild);
}

function getElementsBySelector(selector){
var i;
var s=[];
var selid="";
var selclass="";
var tag=selector;
var objlist=[];
if(selector.indexOf(" ")>0){  //descendant selector like "tag#id tag"
    s=selector.split(" ");
    var fs=s[0].split("#");
    if(fs.length==1) return(objlist);
    return(document.getElementById(fs[1]).getElementsByTagName(s[1]));
    }
if(selector.indexOf("#")>0){ //id selector like "tag#id"
    s=selector.split("#");
    tag=s[0];
    selid=s[1];
    }
if(selid!=""){
    objlist.push(document.getElementById(selid));
    return(objlist);
    }
if(selector.indexOf(".")>0){  //class selector like "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    }
var v=document.getElementsByTagName(tag);  // tag selector like "tag"
if(selclass=="")
    return(v);
for(i=0;i<v.length;i++){
    if(v[i].className==selclass){
        objlist.push(v[i]);
        }
    }
return(objlist);
}

//modif   http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html
 
function getElementStyle(elem, IEStyleProp, CSSStyleProp) {
     if (elem.currentStyle) {
        return elem.currentStyle[IEStyleProp];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleProp);
    }
    return "";
}

Le script peut donc être appelé sans mettre les couleurs

Rounded("selecteur");
RoundedTop("selecteur");
RoundedBottom("selecteur");

On peut encore préciser les couleurs, notamment pour les cadres dégradés.

Pourras-tu nous informer de tes avancées ?

A bientôt.
[/i][/i][/i][/i][/i][/i]

1) J'informerai bien entendu de mes avancées dans ce domaine, ce qui me paraît la moindre des choses si on tient compte du fait que tes travaux vont me permettre d'avancer.

2) Je regarderai le code js à tête reposée (là il se fait tôt)

3) Si tu veux, je peux mettre ton code sur mon serveur afin que tu puisses faire un lien dessus.