Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CCS in javascript

    Hi all,

    Im in a bit of a pickle here.
    Ive a piece of code that ive almost finished, but im on the verge of cracking up with the css code.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <title>Symantec Quote Calculator</title>
    <script>
    <!--
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
    if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
    for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    if (zxcp){ zxcp.appendChild(zxcele); }
    if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
    return zxcele;
    }
    
    
    
    function zxcAddLanguage(zxcobj,zxccount,zxcsel,zxccost,zxcselected){
     var zxcfrm=zxcobj.form;
     var zxccnt=zxcfrm[zxccount];
     zxccnt.value=zxccnt.value.replace(/\D/g,'');
     var zxcsel=zxcfrm[zxcsel];
     var zxcindex=zxcsel.selectedIndex;
     var zxcoption=zxcsel.options[zxcindex];
     var zxcselected=document.getElementById(zxcselected);
     var zxcclds=zxcselected.childNodes;
     var zxcadd=true;
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
      if (zxcclds[zxc0].firstChild.data==zxcoption.text){
       zxcselected.removeChild(zxcclds[zxc0]);
       zxcES(zxcoption,{backgroundColor:'#ffffff'});
       zxcadd=false;
       break;
      }
     }
     if (zxcindex>0&&zxcadd){
      var zxclang=zxcES('DIV',{position:'relative',left:'0px',height:'28px',backgroundColor:'#FFD700',fontSize:'15px', borderBottom:'solid black 1px',paddingLeft:'5px',paddingRight:'5px',paddingBottom:'5px',paddingTop:'5px'},zxcselected,zxcoption.text)
      zxclang.cost=zxcoption.value;
      zxclang.euro=zxcES('INPUT',{position:'absolute',top:'0px',left:'100px',width:'50px',backgroundColor:'#FFFF00',border:'solid black 0px'},zxclang);
      zxclang.dollar=zxcES('INPUT',{position:'absolute',top:'0px',left:'150px',width:'50px',backgroundColor:'#FFFF00',border:'solid black 0px'},zxclang);
      zxcES(zxcselected,{border:'solid black 1px',borderBottom:'0px'});
      zxcES(zxcoption,{backgroundColor:'#FFFFCC'});
     }
     zxcsel.selectedIndex=0;
     var zxctotal=0;
     if (zxccnt.value.length>0){
      zxcclds=zxcselected.childNodes;
      for (var zxc1=0;zxc1<zxcclds.length;zxc1++){
       var euros = zxcclds[zxc1].cost*zxccnt.value;
       var dollars = euros * 1.34;
       zxctotal+=euros;
       zxcclds[zxc1].euro.value='€ '+euros.toFixed(2);;
       zxcclds[zxc1].dollar.value='$ '+dollars.toFixed(2);
      }
     }
     var euros = zxctotal;
     var dollars = euros * 1.34;
     zxcfrm[zxccost].value ='€ '+euros.toFixed(2);
     zxcfrm["dollar"].value ='$ '+dollars.toFixed(2);
    }
    
    function zxcNext(zxcfrm){
     var zxccnt=zxcfrm.count.value;
     var zxccost=zxcfrm.cost.value;
     var zxcdivs=document.getElementById('selected').childNodes
     var zxclanguages='';
     for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
      zxclanguages+=zxcdivs[zxc0].firstChild.data+':';
     }
     if (zxccnt<1||zxclanguages==''){
      alert('Please select the Number of Words and the Language to Translate');
      return;
     }
     zxclanguages+='^'+zxccnt+'^'+zxccost;
     zxcSetFormCookie(zxclanguages);
    }
    
    
    
    //-->
    </script>
    
    <script>
    <!--
    
    var zxcDays=1;       // The cookie will be available on revisits for a specified number of days
    var zxcCookie='Language1';        // The Cookie name
    
    
    function zxcSetFormCookie(zxcvalue){
     document.cookie=zxcCookie+"="+encodeURI(zxcvalue)+";expires="+zxcExp+";path=/;"
     window.top.location="Quote Tool_1.html"
    }
    
    var zxcExp=new Date(new Date().getTime()+zxcDays*86400000).toGMTString();
    
    function zxcCookieValue(){
     zxcString=zxcGetCookie(zxcCookie);
    document.Show.Show0.value=zxcGetCookie(zxcCookie)
    }
    
    function zxcGetCookie(name) {
     var zxcst=document.cookie.indexOf(name+"=");
     var zxclen=zxcst+name.length+1;
     if ((!zxcst)&&(name != document.cookie.substring(0,name.length))) return null;
     if (zxcst==-1) return null;
     var zxcend=document.cookie.indexOf(";",zxclen);
     if (zxcend==-1) zxcend=document.cookie.length;
     return decodeURI(document.cookie.substring(zxclen,zxcend));
    }
    
    //-->
    </script>
    
    <style type="text/css">
    
    
    body
    {
    width: 800px;
    height: 600px;
    }
    
    fieldset.formFieldSet {
    padding: 10px;
    width: 325px;
    border:solid #000000;
    }
    <!--
    .style2 {font-family: "Symantec Sans Medium"}
    -->
    </style>
    </head>
    
    <body bgcolor="#FFFF00" >
    <fieldset class="formFieldSet">
    <center>
    <form action="Quote Tool_1.html" onsubmit="this.YourHiddenElementName.value=cost()" >
    <span class="style2">Please Input the Word Count Here: </span>
    <input name="count" type="text" size="7" onkeyup="zxcAddLanguage(this,'count','sel','cost','selected')">
    <br><br>
    <select name="sel" onchange="zxcAddLanguage(this,'count','sel','cost','selected')" >
    <option value="" >Select Languages</option>
    <option value="0.17" >Brazilian</option>
    <option value="0.15" >Dutch</option>
    <option value="0.23" >French</option>
    <option value="0.22" >German</option>
    <option value="0.22" >Italian</option>
    <option value="0.21" >Japanese</option>
    <option value="0.07" >Korean</option>
    <option value="0.04" >Simplified Chinese</option>
    <option value="0.12" >Spanish</option>
    <option value="0.12" >Spanish Latin</option>
    <option value="0.32" >Swedish</option>
    <option value="0.07" >Traditional Chinese</option>
    <option value="0.00">------------------------------</option>
    <option value="0.24" >Arabic</option>
    <option value="0.13" >Czech</option>
    <option value="0.27" >Danish</option>
    <option value="0.15" >Finnish</option>
    <option value="0.27" >Greek</option>
    <option value="0.29" >Hebrew</option>
    <option value="0.13" >Hungarian</option>
    <option value="0.27" >Norwegian</option>
    <option value="0.10" >Polish</option>
    <option value="0.22" >Portuguese</option>
    <option value="0.08" >Russian</option>
    <option value="0.12" >Turkish</option>
    </select>
    <br>
    <br>
    <span class="style2">
    Selected Languages Will Appear Below.
    To remove languages from the list, simply select the language again from the drop-down box.</span>
    <br><br>
    <div id="selected" style="position:relative;width:100px;"></div>
    <br>
    <span class="style2"><b>Total Translation Cost</b></span>:
    <input name="cost" type="text"  size="7"  onkeyup="return false;">
    <input name="dollar" type="text" size="7"  onkeyup="return false;">
    
    <br>
    
    <br>
    <INPUT TYPE="BUTTON" value="Reset" onclick="window.location.href='Quote Tool.html'" />
    <br><br>
    <b><h6 align="left">DISCLAIMER:</b> Translation prices may vary, please contact us for more information.</h6>
    
    </form>
    </center>
    
    
    </body>
    </html>
    Basically if you load this code into a page you can select the number of words that your document has and then select your languages. Now the languages are then displayed below the wordcount with the cost in euros and dollars beside it. If you try this out, and see the way the languages are displayed after they ahve been selected you can see that its not layed out very well.
    Can anyone help with this? I would like the text to be more centered and perhaps the costs in euros and dollars to be displayed more neatly in accordance with the language beside it. (Perhaps with a border around each cost).

    Can anyone help with this?

    I will be eternally grateful.

    Thanks in advance

    Claire

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    function zxcAddLanguage(zxcobj,zxccount,zxcsel,zxccost,zxcselected){
     var zxcfrm=zxcobj.form;
     var zxccnt=zxcfrm[zxccount];
     zxccnt.value=zxccnt.value.replace(/\D/g,'');
     var zxcsel=zxcfrm[zxcsel];
     var zxcindex=zxcsel.selectedIndex;
     var zxcoption=zxcsel.options[zxcindex];
     var zxcselected=document.getElementById(zxcselected);
     var zxcclds=zxcselected.childNodes;
     var zxcadd=true;
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
      if (zxcclds[zxc0].firstChild.data==zxcoption.text){
       zxcselected.removeChild(zxcclds[zxc0]);
       zxcES(zxcoption,{backgroundColor:'#ffffff'});
       zxcadd=false;
       break;
      }
     }
     if (zxcindex>0&&zxcadd){
      var zxclang=zxcES('DIV',{position:'relative',left:'0px',height:'28px',backgroundColor:'#FFD700',fontSize:'15px', borderBottom:'solid black 1px',paddingLeft:'5px',paddingRight:'5px',paddingBottom:'5px',paddingTop:'5px'},zxcselected,zxcoption.text)
      zxclang.cost=zxcoption.value;
      zxclang.euro=zxcES('INPUT',{position:'absolute',top:'0px',left:'100px',width:'50px',backgroundColor:'#FFFF00',border:'solid black 1px'},zxclang);
      zxclang.dollar=zxcES('INPUT',{position:'absolute',top:'0px',left:'150px',width:'50px',backgroundColor:'#FFFF00',border:'solid black 1px'},zxclang);
      zxcES(zxcselected,{border:'solid black 1px',borderBottom:'0px'});
      zxcES(zxcoption,{backgroundColor:'#FFFFCC'});
     }
     zxcsel.selectedIndex=0;
     var zxctotal=0;
     if (zxccnt.value.length>0){
      zxcclds=zxcselected.childNodes;
      for (var zxc1=0;zxc1<zxcclds.length;zxc1++){
       var euros = zxcclds[zxc1].cost*zxccnt.value;
       var dollars = euros * 1.34;
       zxctotal+=euros;
       zxcclds[zxc1].euro.value='\u20AC '+euros.toFixed(2);;
       zxcclds[zxc1].dollar.value='$ '+dollars.toFixed(2);
      }
     }
     var euros = zxctotal;
     var dollars = euros * 1.34;
     zxcfrm[zxccost].value ='\u20AC '+euros.toFixed(2);
     zxcfrm["dollar"].value ='$ '+dollars.toFixed(2);
    }
    
    function zxcNext(zxcfrm){
     var zxccnt=zxcfrm.count.value;
     var zxccost=zxcfrm.cost.value;
     var zxcdivs=document.getElementById('selected').childNodes
     var zxclanguages='';
     for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
      zxclanguages+=zxcdivs[zxc0].firstChild.data+':';
     }
     if (zxccnt<1||zxclanguages==''){
      alert('Please select the Number of Words and the Language to Translate');
      return;
     }
     zxclanguages+='^'+zxccnt+'^'+zxccost;
     zxcSetFormCookie(zxclanguages);
    }
    Would it not be better to learn to write html, JavaScript and css yourself?
    Due to your lack of basic knowledge the page will not display correctly in all browsers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •