...

View Full Version : CCS in javascript



cup80
10-30-2007, 06:57 PM
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.


<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,zxcoptio n.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',backgroundColo r:'#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

Fang
10-31-2007, 10:41 AM
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,zxcoptio n.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',backgroundColo r:'#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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum