Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

<div></div> afronde met javascript

cor0612
1 antwoord
  • Hoi

    Ik ben op dit moment bezig met een pagina waarin ik teksten in <div></div> zet. Ik heb een script gedownload waarmee ik de hoeken kan afronde. Hieronder mijn javascript file.

    [code:1:7e35504098]

    var DOMOk=(document.getElementById && document.createElement && Array.prototype.push);
    var RHCss=false;

    String.prototype.find=function(welke){
    return(this.indexOf(welke)>=0 ? true : false);
    }

    var vLaden=window.onload;
    if(typeof(RHLaden)!='function') RHLaden=function(){};
    if(typeof(vLaden)=='function')
    window.onload=function(){vLaden();CssToevoegen();RHLaden()};
    else window.onload=function(){CssToevoegen();RHLaden()};

    function CssToevoegen(){
    RHCss=true;
    var l=CreateEl("link");
    l.setAttribute("type","text/css");
    l.setAttribute("rel","stylesheet");
    l.setAttribute("href","rondehoeken.css");
    l.setAttribute("media","screen");
    document.getElementsByTagName("head")[0].appendChild(l);
    }

    function Afgerond(selector,opties){
    if(DOMOk==false) return;
    if(RHCss==false) CssToevoegen();
    var i,v=selector.split(","),h=0;
    if(opties==null) opties="";
    if(opties.find("fixed-height"))
    h=getElementsBySelector(v[0])[0].offsetHeight;
    for(i=0;i<v.length;i++)
    Rounded(v[i],opties);
    if(opties.find("height")) ZelfdeHoogte(selector,h);
    }

    function Rounded(selector,opties){
    var i,top="",bottom="",v=new Array();
    if(opties!=""){
    opties=opties.replace("links","lb lo");
    opties=opties.replace("rechts","rb ro");
    opties=opties.replace("boven","rb lb");
    opties=opties.replace("onder","ro lo");
    opties=opties.replace("transparent","alias");
    if(opties.find("lb")){
    top="beide";
    if(!opties.find("rb")) top="links";
    }
    else if(opties.find("rb")) top="rechts";
    if(opties.find("lo")){
    bottom="beide";
    if(!opties.find("ro")) bottom="links";
    }
    else if(opties.find("ro")) bottom="rechts";
    }
    if(top=="" && bottom=="" && !opties.find("geen")){top="beide";bottom="beide";}
    v=getElementsBySelector(selector);
    for(i=0;i<v.length;i++){
    FixIE(v[i]);
    if(top!="") AddTop(v[i],top,opties);
    if(bottom!="") AddBottom(v[i],bottom,opties);
    }
    }

    function AddTop(el,side,opties){
    var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
    d.style.marginLeft="-"+getPadding(el,"Left")+"px";
    d.style.marginRight="-"+getPadding(el,"Right")+"px";
    if(opties.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
    else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
    d.style.background=bk;
    d.className="rondehoeken";
    p=getPadding(el,"Top");
    if(opties.find("kl")){
    d.style.marginBottom=(p-2)+"px";
    btype+="s"; lim=2;
    }
    else if(opties.find("gr")){
    d.style.marginBottom=(p-10)+"px";
    btype+="b"; lim=8;
    }
    else d.style.marginBottom=(p-5)+"px";
    for(i=1;i<=lim;i++)
    d.appendChild(CreateStrip(i,side,color,border,btype));
    el.style.paddingTop="0";
    el.insertBefore(d,el.firstChild);
    }

    function AddBottom(el,side,opties){
    var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
    d.style.marginLeft="-"+getPadding(el,"Left")+"px";
    d.style.marginRight="-"+getPadding(el,"Right")+"px";
    if(opties.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
    else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
    d.style.background=bk;
    d.className="rondehoeken";
    p=getPadding(el,"Bottom");
    if(opties.find("kl")){
    d.style.marginTop=(p-2)+"px";
    btype+="s"; lim=2;
    }
    else if(opties.find("gr")){
    d.style.marginTop=(p-10)+"px";
    btype+="b"; lim=8;
    }
    else d.style.marginTop=(p-5)+"px";
    for(i=lim;i>0;i–)
    d.appendChild(CreateStrip(i,side,color,border,btype));
    el.style.paddingBottom=0;
    el.appendChild(d);
    }

    function CreateStrip(index,side,color,border,btype){
    var x=CreateEl("b");
    x.className=btype+index;
    x.style.backgroundColor=color;
    x.style.borderColor=border;
    if(side=="links"){
    x.style.borderRightWidth="0";
    x.style.marginRight="0";
    }
    else if(side=="rechts"){
    x.style.borderLeftWidth="0";
    x.style.marginLeft="0";
    }
    return(x);
    }

    function CreateEl(x){
    return(document.createElement(x));
    }

    function FixIE(el){
    if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)
    el.style.display="inline-block";
    }

    function ZelfdeHoogte(selector,maxh){
    var i,v=selector.split(","),t,j,els=[],gap;
    for(i=0;i<v.length;i++){
    t=getElementsBySelector(v[i]);
    els=els.concat(t);
    }
    for(i=0;i<els.length;i++){
    if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;
    els[i].style.height="auto";
    }
    for(i=0;i<els.length;i++){
    gap=maxh-els[i].offsetHeight;
    if(gap>0){
    t=CreateEl("b");t.className="opvullen";t.style.height=gap+"px";
    nc=els[i].lastChild;
    if(nc.className=="rondehoeken")
    els[i].insertBefore(t,nc);
    else els[i].appendChild(t);
    }
    }
    }

    function getElementsBySelector(selector){
    var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;
    if(selector.find("#")){ //id selector zoals "tag#id"
    if(selector.find(" ")){ //descendant selector zoals "tag#id tag"
    s=selector.split(" ");
    var fs=s[0].split("#");
    if(fs.length==1) return(objlist);
    f=document.getElementById(fs[1]);
    if(f){
    v=f.getElementsByTagName(s[1]);
    for(i=0;i<v.length;i++) objlist.push(v[i]);
    }
    return(objlist);
    }
    else{
    s=selector.split("#");
    tag=s[0];
    selid=s[1];
    if(selid!=""){
    f=document.getElementById(selid);
    if(f) objlist.push(f);
    return(objlist);
    }
    }
    }
    if(selector.find(".")){ //class selector zoals "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    if(selclass.find(" ")){ //descendant selector zoals tag1.classname tag2
    s=selclass.split(" ");
    selclass=s[0];
    tag2=s[1];
    }
    }
    var v=document.getElementsByTagName(tag); // tag selector zoals "tag"
    if(selclass==""){
    for(i=0;i<v.length;i++) objlist.push(v[i]);
    return(objlist);
    }
    for(i=0;i<v.length;i++){
    c=v[i].className.split(" ");
    for(j=0;j<c.length;j++){
    if(c[j]==selclass){
    if(tag2=="") objlist.push(v[i]);
    else{
    v2=v[i].getElementsByTagName(tag2);
    for(k=0;k<v2.length;k++) objlist.push(v2[k]);
    }
    }
    }
    }
    return(objlist);
    }

    function getParentBk(x){
    var el=x.parentNode,c;
    while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
    el=el.parentNode;
    if(c=="transparent") c="#FFFFFF";
    return(c);
    }

    function getBk(x){
    var c=getStyleProp(x,"backgroundColor");
    if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))
    return("transparent");
    if(c.find("rgb")) c=rgb2hex(c);
    return(c);
    }

    function getPadding(x,side){
    var p=getStyleProp(x,"padding"+side);
    if(p==null || !p.find("px")) return(0);
    return(parseInt(p));
    }

    function getStyleProp(x,prop){
    if(x.currentStyle)
    return(x.currentStyle[prop]);
    if(document.defaultView.getComputedStyle)
    return(document.defaultView.getComputedStyle(x,'')[prop]);
    return(null);
    }

    function rgb2hex(value){
    var hex="",v,h,i;
    var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
    var h=regexp.exec(value);
    for(i=1;i<4;i++){
    v=parseInt(h[i]).toString(16);
    if(v.length==1) hex+="0"+v;
    else hex+=v;
    }
    return("#"+hex);
    }

    function Mix(c1,c2){
    var i,step1,step2,x,y,r=new Array(3);
    if(c1.length==4)step1=1;
    else step1=2;
    if(c2.length==4) step2=1;
    else step2=2;
    for(i=0;i<3;i++){
    x=parseInt(c1.substr(1+step1*i,step1),16);
    if(step1==1) x=16*x+x;
    y=parseInt(c2.substr(1+step2*i,step2),16);
    if(step2==1) y=16*y+y;
    r[i]=Math.floor((x*50+y*50)/100);
    r[i]=r[i].toString(16);
    if(r[i].length==1) r[i]="0"+r[i];
    }
    return("#"+r[0]+r[1]+r[2]);
    }[/code:1:7e35504098]



    Kan ik in deze code ergens instellen hoe rond hij moet zijn?? Of moet ik dat in onderstaand CSS bestand doen? Zoja waar?

    [code:1:7e35504098]

    b.rondehoeken,b.opvullen{display:block}
    b.rondehoeken *{display:block;height: 1px;line-height:1px;font-size: 1px;overflow:hidden;border-style:solid;border-width: 0 1px}

    /* normaal */
    b.r1{margin: 0 3px;border-width: 0 2px}
    b.r2{margin: 0 2px}
    b.r3{margin: 0 1px}
    b.r4{height: 2px}
    b.rb1{margin: 0 8px;border-width:0 2px}
    b.rb2{margin: 0 6px;border-width:0 2px}
    b.rb3{margin: 0 5px}
    b.rb4{margin: 0 4px}
    b.rb5{margin: 0 3px}
    b.rb6{margin: 0 2px}
    b.rb7{margin: 0 1px;height:2px}
    b.rb8{margin: 0;height:2px}
    b.rs1{margin: 0 1px}

    /* transparant */
    b.t1{border-width: 0 5px}
    b.t2{border-width: 0 3px}
    b.t3{border-width: 0 2px}
    b.t4{height: 2px}
    b.tb1{border-width: 0 10px}
    b.tb2{border-width: 0 8px}
    b.tb3{border-width: 0 6px}
    b.tb4{border-width: 0 5px}
    b.tb5{border-width: 0 4px}
    b.tb6{border-width: 0 3px}
    b.tb7{border-width: 0 2px;height:2px}
    b.tb8{border-width: 0 1px;height:2px}
    b.ts1{border-width: 0 2px}[/code:1:7e35504098]


    Alvast bedankt voor jullie hulp

    Gr webgek

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.