JavaScript - Dom In Style

Hi all,

On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is?

Thanks in advance!

Kyle

This is killing me guys...

I want to take the current location of an position:absolute div and add 100 to its style.top value. However I can't get that value, I can set it but not retrieve its current value.

Here is a sample....

Code:

function moveit(elem){ alert(elem.style.top); alert(document.getElementById("question1").style.top); }

Demo: http://campo.cc/stage.htm

Please help!!! Jutboy

Hello. I need to make drop down box, with 2 statments: hide, show.

And I need one table, that javascript set [style="display: none"](When the dorp dow is: hide) and [style="";](When the DDB is set to: show.

Can any one help a little, please?

I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected.

Works great except for those browsers that have javascript disabled. Then the form is useless.

I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja).

Can anyone advise me on how to do that? I'd really appreciate the help! Thanks!

Hi All,

I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element.

This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element.

To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds.

Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC.

So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work.

Any thoughts? Any help would be much appreciated!!

Getting elements/setting style functions
Code:

function getElement(id, type)
{
    var inputs = document.getElementsByTagName(type);
    var descField = null;
    for(var i=0;i<inputs.length;i++)
    {
        if(inputs.item(i).getAttribute('id') == id )
        {
            descField = inputs.item(i);
            break;
        }
    }
    
    return descField;
}



// setStyleById: given an element id, style property and 
// value, apply the style.
// args:
//  i - element id
//  p - property
//  v - value
//
function setStyleById(i, p, v) {
	//var n = document.getElementById(i);
	var n = getElement(i, 'div');
	n.style[p] = v;
}

Full Code:
Code:

function getElement(id, type)
{
    var inputs = document.getElementsByTagName(type);
    var descField = null;
    for(var i=0;i<inputs.length;i++)
    {
        if(inputs.item(i).getAttribute('id') == id )
        {
            descField = inputs.item(i);
            break;
        }
    }
    
    return descField;
}



// setStyleById: given an element id, style property and 
// value, apply the style.
// args:
//  i - element id
//  p - property
//  v - value
//
function setStyleById(i, p, v) {
	//var n = document.getElementById(i);
	var n = getElement(i, 'div');
	n.style[p] = v;
}

function replace_html(el, html) {
	if( el ) {
                oldEl = (typeof el === "string" ? document.getElementById(el) : el);
                newEl = document.createElement(oldEl.nodeName);

                // Preserve any properties we care about (id and class in this example)
                newEl.id = oldEl.id;
                newEl.className = oldEl.className;
                //alert(newEl.id);
                //set the new HTML and insert back into the DOM
                newEl.innerHTML = html;
                
               // alert(newEl.innerHTML);
                if(oldEl.parentNode)
        	        oldEl.parentNode.replaceChild(newEl, oldEl);
                else
		        oldEl.innerHTML = html;

                //return a reference to the new element in case we need it
                return newEl;
	}
};


function populate_array()
{
	// this function's sole job is to populate the array of items to be used.


	var da = new Array(8);

	da[0] = new Array(3);
	da[0][0] = "portfolio/garage_conversion_before.jpg";
	da[0][1] = "portfolio/garage_into_kitchen.jpg";
	da[0][2] = "pfimage1";

	da[1] = new Array(3);
	da[1][0] = "portfolio/refurb_old.jpg";
	da[1][1] = "portfolio/refurb_new.jpg";
	da[1][2] = "pfimage2";

	da[2] = new Array(3);
	da[2][0] = "portfolio/fireplace_old.jpg";
	da[2][1] = "portfolio/fireplace_new.jpg";
	da[2][2] = "pfimage3";

	da[3] = new Array(3);
	da[3][0] = "portfolio/bathroom1_old.jpg";
	da[3][1] = "portfolio/bathroom1_new.jpg";
	da[3][2] = "pfimage4";

	da[4] = new Array(3);
	da[4][0] = "portfolio/kitchen1_old.jpg";
	da[4][1] = "portfolio/kitchen1_new.jpg";
	da[4][2] = "pfimage5";

	da[5] = new Array(3);
	da[5][0] = "portfolio/bathroom2_old.jpg";
	da[5][1] = "portfolio/bathroom2_new.jpg";
	da[5][2] = "pfimage6";

	da[6] = new Array(3);
	da[6][0] = "portfolio/bathroom3_old.jpg";
	da[6][1] = "portfolio/bathroom3_new.jpg";
	da[6][2] = "pfimage7";

	da[7] = new Array(3);
	da[7][0] = "portfolio/ext1_old.jpg";
	da[7][1] = "portfolio/ext1_new.jpg";
	da[7][2] = "pfimage8";


	return da;

}


function switchimage(folioItemNum, ImageState)
{
    var isOpera, isIE = false;
    if(typeof(window.opera) != 'undefined'){isOpera = true;}
    if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}


	// folioItemNum tells us which folio item to access,
	// ImageState tells us which image to set.
	// we will use ajax/dom to re-write the document.

	var OldImageState = 1 - ImageState;

	// 2d array of items.
	var darray = populate_array();

	// take one item and fade out
	opacity(darray[folioItemNum][2], 100, 0, 500);
	
	// re-arrange.
	// with time delay.
	window.setTimeout(function (a,b,c,d,e){
		var y = "<a href=\"" + c + "\" rel=\"lightbox[" +  d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" +  d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
		replace_html(e, y);
		opacity(e, 0, 100, 500);
	},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);
	
	
	// done.
}


function regenbottomimgs()
{
    var isOpera, isIE = false;
    if(typeof(window.opera) != 'undefined'){isOpera = true;}
    if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}


	var array = Array(3);
	array[0] = -1;
	array[1] = -1;
	array[2] = -1;


	array[0] = get_unique_random_int(6, array, 3);
	array[1] = get_unique_random_int(6, array, 3);
	array[2] = get_unique_random_int(6, array, 3);

	var darray = populate_array();
	var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";

	opacity("bottomimgs", 100, 0, 500);

	
	window.setTimeout(function (a,b){
		var x = replace_html(b, a);
		opacity(b, 0, 100, 500);
	},500,imgstr,"bottomimgs");
	
	
}



function get_random_int(Max)
{
    var randomnumber = Math.round( Math.random() * Max );
    return randomnumber;
}


function get_unique_random_int(Max, List, List_Length)
{
	var stop = 1
	var esc = 0
	var x = 0;
	var i = 0;

	while ( stop == 1 )
	{
		esc = 0;

		x = get_random_int(Max);

		for ( i = 0; i < List_Length; i++ )
		{
			if ( x == List[i] )
			{
				esc = 1;
				break;
			}
		}

		if ( esc == 0 )
		{
			stop = 0;
		}
	}

	return x;
}


function randomise_bottom_images()
{
	regenbottomimgs();
	setTimeout("randomise_bottom_images()",5000);
}

function launch_randomise()
{
	setTimeout("randomise_bottom_images()", 5000);
}

function switchallnew()
{
	switchimage(0,1);
	switchimage(1,1);
	switchimage(2,1);
	switchimage(3,1);
	switchimage(4,1);
	switchimage(5,1);
	switchimage(6,1);
	switchimage(7,1);
}



function opacity(id, opacStart, opacEnd, millisec) 
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if( opacStart > opacEnd ) 
    {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout(function (opacity, id) {
                setStyleById(id, "opacity", (opacity / 100));
                setStyleById(id, "MozOpacity", (opacity / 100));
                setStyleById(id, "KhtmlOpacity", (opacity / 100));
                setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
            
            },(timer * speed), i, id);
            timer++;
        }
    } 
    else if(opacStart < opacEnd) 
    {
        for(i = opacStart; i <= opacEnd; i++)
        {
            setTimeout(function (opacity, id) {
               
                setStyleById(id, "opacity", (opacity / 100));
                setStyleById(id, "MozOpacity", (opacity / 100));
                setStyleById(id, "KhtmlOpacity", (opacity / 100));
                setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
            
            },(timer * speed), i, id);
            timer++;
        }
    }
}

Thanks,

A.

I am struggeling to get this to work in both IE, Firefox and Opera.

I have an ajax application that changes the tr row bgcolor if the row is clicked and thereby item is added successfully to another items-list.

My problem is to determine if the bg-color has changed or not, if it has changed, do not append the ordinary bgcolor on onmouseout and do not change color if you roll mouse over the row after this is done.

The following is my problem:

Code:

// $bgfarve is the default row color

// this works in IE and Opera but not in Firefox
style="background-color: $bgfarve;" 
onmouseout="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='$bgfarve';" 
onmouseover="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='#dddddd';"


// this works in Firefox but not the others
style="background-color: $bgfarve;" 
onmouseout="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='$bgfarve';" 
onmouseover="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='#dddddd';"

I had one solution working by setting ordinary bg and onmouseover colors on the tbody tag, and the chart was setting tr-color - but IE was very very very slow on that.

Any ideas ?
Anyone ?

I got this code

Code:

   Div= document.createElement("div");
	 Table= document.createElement("table");
	 Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");
 	 Table.setAttribute("bgColor","#708090");
	 tr=document.createElement("tr");
	 td=document.createElement("td");	
	 text=document.createTextNode(aText); 
	 myTableBody = document.createElement("TBODY")
	 td.appendChild(text); 	 
	 tr.appendChild(td); 
	 myTableBody.appendChild(tr); 
	 Table.appendChild(myTableBody); 
	 Div.appendChild(Table); 		  

   document.getElementsByTagName('body').item(0).appendChild(Div);

Now it all works fine with the exception of the
Code:

	 Table.setAttribute("style","width:100px;height:100px;background-color : #708090;");

so I was wondering how do I set the style attribute in the table node?

hi all,

i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks!

code for the combo box: PHP Code:
select name="country" size="1" id="country" 
style="position:absolute; left:451px; top:260px; width:176px; 
color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; 
z-index:13" onChange="PhoneMask();">
<option value="1">United States</option>
<option value="2">Australia</option>
<option value="3">China</option>
<option value="4">Mexico</option>
<option value="5">United Kingdom</option>
</select> 


code for the different labels i want to display: PHP Code:
/*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/

<div id="phoneLabelUS" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
*Telephone Number </b></font><font style="font-size:12px" 
face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span>
</b></font></div>

<div id="phoneLabelAU" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" 
align="left"><font style="font-size:12px" color="#FF0000" 
face="Arial"><b>*Telephone Number </b></font><font 
style="font-size:12px" face="Arial"><b><span class="style9">
(xx-xxxx-xxxx)</span></b></font></div>

<div id="phoneLabelOTHER" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
Telephone Number</b></font></div>

/*------------------------------------------------------------------------------------*/ 


here is my PhoneMask() function: PHP Code:
function PhoneMask() {

    if (document.getElementById("country").value == "1") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 51;
        document.getElementById("phoneLabelUS").style.visibility = 'visible'; }
    elseif (document.getElementById("country").value == "2") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 51;
        document.getElementById("phoneLabelAU").style.visibility = 'visible';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
    else { 
        document.getElementById("phoneLabelOTHER").style.zIndex = 51;
        document.getElementById("phoneLabelOTHER").style.visibility = 'visible';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
        
} 

Hi guys, For some reason the following code is not working. Anybody see any issues?

By default the style of #pricea in my stylesheet is visibility="hidden";

Code:

<script type="text/javascript">
	function arrow(boxName){
			document.getElementById(boxName).style.visibility = "visible";
	}
</script>



<?php
if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){
?>
<script type="text/javascript">
	arrow('pricea');
</script>
<?php	
}?>

Hello ,,,

I have a a php form where there a drop down list and a text box which is show and hide based on drop down list select value. This part work perfectly with js
Code:

<script type="text/javascript">

    function showfield(name){
    if(name != 'High School')
    document.getElementById('div1').style.display="block";
    else 
    document.getElementById('div1').style.display="none";
  }

  function hidefield() {
    document.getElementById('div1').style.display='none';
 }
<script>

<body onload = "hidefield()">

<select name="education" size="1" class="text" id="education" onchange="showfield(this.options[this.selectedIndex].value)">

The problem is when I click submit and the validation appear the div also hide ,,,

I want to retain the style of the div after submit to be as it was before submit... meaning if it was appearing then it should still appear after submit coz there is validation on it as well.

Hope I can found an answer coz Im trying since a week

We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated.

Code:

<style type="text/css">
		.al {display:none}
		.ca {display:none}
		.ct {display:none}
		.ga {display:none}
		.il {display:none}
		.la {display:none}
		.ma {display:none}
		.mi {display:none}
		.mn {display:none}
		.mo {display:none}
		.ms {display:none}
		.nc {display:none}
		.ne {display:none}
		.nh {display:none}
		.nv {display:none}
		.ny {display:none}
		.or {display:none}
		.sc {display:none}
		.tn {display:none}
		.tx {display:none}
		.va {display:none}
		.vt {display:none}
		.wa {display:none}
		.wi {display:none}
    </style>
    <script type="text/javascript">
      function showHide(cls, show) {
        for (var i=0; i<document.styleSheets.length; i++) {
               // browser-compatibility 
               var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
               for (var j = 0; j < rule.length; j++) {
                       if (rule[j].selectorText == "." + cls) { //find css selector
                               rule[j].style.display = (show) ? 'block' : 'none';
                       }
               }
        }
}

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>
</head>

<body>
    <table>
      <tr>
        <td colspan="3">
          <select name="type" onchange="selAction(this);">
            <strong><option value="et">
              Please Select Your State:
            </option>
            <option value="al">Alabama</option>
            <option value="ca">California</option>
            <option value="ct">Connecticut</option>
            <option value="ga">Georgia</option>
            <option value="il">Illinois</option>
            <option value="la">Louisiana</option>
            <option value="ma">Massachusetts</option>
            <option value="mi">Michigan</option>
            <option value="mn">Minnesota</option>
            <option value="mo">Missouri</option>
            <option value="ms">Mississippi</option>
            <option value="nc">North Carolina</option>
            <option value="ne">Nebraska</option>
            <option value="nh">New Hampshire</option>
            <option value="nv">Nevada</option>
            <option value="ny">New York</option>
            <option value="or">Oregon</option>
            <option value="sc">South Carolina</option>
            <option value="tn">Tennessee</option>
            <option value="tx">Texas</option>
            <option value="va">Virginia</option>
            <option value="vt">Vermont</option>
            <option value="wa">Washington</option>
            <option value="wi">Wisconsin</option></strong> </select>
        </td>
      </tr>
      <tr class="al">
        <td>
        No issues in your state at this time.</td>
      </tr>
      <tr class="ca">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ct">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ga">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="il">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="la">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ma">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mo">
        <td> No issues in your state at this time. </td>
      </tr>
      <tr class="ms">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ne">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nh">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nv">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ny">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="or">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="sc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tx">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="va">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="vt">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wa">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      </table>
</center></td>
  </tr>
</table>
</body>
</html>

Hey,

I'm a beginner in javascript and I have a problem setting up a tag.

I want to change the background color ONLY if it is #d0d0d0, so I made up these scripts:

Code:

<b class="nav1" id="nav1" onclick="highlightnav1()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 1</b>
     <b class="nav2" id="nav2" onclick="highlightnav2()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 2</b>
     <b class="nav3" id="nav3" onclick="highlightnav3()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 3</b>
     <b class="nav4" id="nav4" onclick="highlightnav4()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 4</b>
     <b class="nav5" id="nav5" onclick="highlightnav5()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 5</b>

Code:

function overnavigation(obj){
	if (obj.style.backgroundColor='#d0d0d0'){
		obj.style.backgroundColor='#e0e0e0';
	}
}

function outnavigation(obj){
	if (obj.style.backgroundColor='#e0e0e0'){
		obj.style.backgroundColor='#d0d0d0';
	}
}

This doesn't work, and because I don't have mush experience I don't know how to fix it. Could anybody help me?

------------
Sorry for my bad english, I'm Dutch

Hello everybody,

I just found a calendar script @ http://www.javascriptkit.com/script/cut20.shtml.

I like everything about and the only thing I want to change is the border. I'd like to collapse it. I'm a student in web development. Can anyone help? I imagine I'd have to change something here below: (to see the full script go to link above) Thanks very much for your help.

Code:

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
var headerHeight = 50 // height of the table's header cell
var border = 2 // 3D height of table's border
var cellspacing = 4 // width of table's border
var headerColor = "midnightblue" // color of table's header
var headerSize = "+3" // size of tables header font
var colWidth = 60 // width of columns in table
var dayCellHeight = 25 // height of cells containing days of the week
var dayColor = "darkblue" // color of font representing week days
var cellHeight = 40 // height of cells representing dates in the calendar
var todayColor = "red" // color specifying today's date in the calendar
var timeColor = "purple" // color of font representing current time

// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
text += monthName + ' ' + year 
text += '</FONT>' // close table header's font settings
text += '</TH>' // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'

Hello,

Using Javascript,

How would I go about apply the following code below as a style class (Error) to a single textbox?

Here's what I have so far:
Code:

document.getElementById('T1').style.backgroundColor = 'FEF6F4'
document.getElementById('T1').style.border = '1px solid #CD0A0A'

Thanks.

J

Hi,

I've tried everything I can think of and can't get this script sorted out. So here I am :-)

I have this script attached on my website now. I am working on a beta version and I need to have this script so that it doesn't affect the cookie for the live version.

I've renamed everything I can see that can be and they each still affect each other.

Any ideas?

Thanks in advance.

Kind regards,

jo

Code:

function setActiveStyleSheet2(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet2() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet2() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie2(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie2(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie2("style");
  var title = cookie ? cookie : getPreferredStyleSheet2();
  setActiveStyleSheet2(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet2();
  createCookie2("style", title, 365);
}

var cookie = readCookie2("style");
var title = cookie ? cookie : getPreferredStyleSheet2();
setActiveStyleSheet2(title);