Changing divs with setStyleById

@follishMar 15.2007

Hello, I am currently trying to modify a class css that a div uses with javascript, specifically, the background-color. I’m not really sure how I should be doing this.

[CODE] <link rel=”stylesheet” type=”text/css” href=”style.css”> <script type=”text/javascript”> var pagecolor=new Array() pagecolor[0] = “#FFFFFF”; pagecolor[1] = “#FF0000”; pagecolor[2] = “#99CCFF”;

function setpage(page) { goto(page); setStyleById(“footer”, “background-color”, pagecolor[page]); } </script>[/CODE]

I call this function with links like these:

[CODE]<a href=”javascript:setpage(1);”>MAKE IT RED!!</a>[/CODE]

and the div tag is as follows:

[CODE]<div class=”footer” align=”center”>I am in a colored box</div>[/CODE]

If you need more information, let me know. All help welcomed, links are fine too. Thanks!

to post a comment

JavaScript

11 Comments(s) _↴

@cgishackMar 16.2007 — #I made a sample up for try this in your browser.

If you have any questions reply to the post.

<i>
 </i>[COLOR="Navy"]&lt;script&gt;
 //Array of Colors
 var pagecolor = new Array();
 pagecolor[0] = "#FFFFFF";
 pagecolor[1] = "#FF0000";
 pagecolor[2] = "#99CCFF";
 
 //Function to Change the Styles BG Color
 function giveMeAColor(div,arrayNumber)
 {
 div.style.backgroundColor=pagecolor[arrayNumber];
 }
 &lt;/script&gt;[/COLOR]
 
 
 &lt;div id="myDiv" onclick="giveMeAColor(this,1)"&gt; Make Me Red &lt;/div&gt;

Hope this helps

Drew

@follishauthorMar 16.2007 — #That works perfectly!! Only one thing i need changed...

I need to change the div from a link, anyway i could just call that function from a text link and still have it work, even though the text it would be calling from isn't in the actual div.

Thanks again.

@cgishackMar 16.2007 — #If you want to call the function from another HTML element here is the modifications

<i>
 </i>&lt;script&gt;
 //Array of Colors
 var pagecolor = new Array();
 pagecolor[0] = "#FFFFFF";
 pagecolor[1] = "#FF0000";
 pagecolor[2] = "#99CCFF";
 
 //Function to Change the Styles BG Color
 function giveMeAColor(id,arrayNumber)
 {
 div = document.getElementById(id);
 div.style.backgroundColor=pagecolor[arrayNumber];
 }
 &lt;/script&gt;

and the HTML would be something like

<i>
 </i>&lt;div id="myDiv"&gt; My Text Here &lt;/div&gt;
 &lt; a href="" onclick="giveMeAColor('myDiv',1); return false;"&gt; Click Me &lt;/a&gt;

I did not test it, but it should work

Drew

@follishauthorMar 16.2007 — #It doesn't appear to be working, if you could take a look at my code and tell me if I'm doing anything wrong that would be great. Thanks again for your help.

The Javascript:

[CODE]<script type="text/javascript">
 var pagecolor=new Array()
 pagecolor[0] = "#FFFFFF";
 pagecolor[1] = "#FF0000";
 pagecolor[2] = "#99CCFF";
 function setpage(page, id) {
 div = document.getElementById(id);
 div.style.backgroundColor=pagecolor[page];
 }
 </script>[/CODE]

The Button
[CODE]<a href="javascript:setpage(7, 'foot');">Color It</a>[/CODE]

The Div Tag
[CODE]<div class="footer" id="foot" align="center">I am mere text</div>[/CODE]

@cgishackMar 16.2007 — #Umm..

Try this..

Try calling the function from the onClick event of the Link.

So when the link is clicked, the function will trigger

<i>
 </i>&lt; a href="javascript:void(0);" onclick="setpage(7, 'foot'); return false;"&gt;Click Me&lt;/a&gt;

Im at work right now, but if you need further assistance let me know and I might be able to help you out later on tonight.

Drew

@follishauthorMar 16.2007 — #Still not working, document.getElementById(id); produces the following text (with document.write(...) ):

[object HTMLDivElement]

Does it matter if the div has a class and an id? I wouldn't think so, in fact, I would assume this whole operation would be relatively simple. But there you go, feel free to get back to me whenever you can do so comfortably, thanks again.

@cgishackMar 16.2007 — #I found your error.

You might kick yourself for it, but its very simple.

Look at the length of your array. You have only 3 index numbers (0,1,2)

and In your function you are asking for index number 7

Make your function called like

<i>
 </i>setpage([B]2[/B], 'foot')

That should do it!

Are you kicking yourself yet ? ?

Drew

@follishauthorMar 16.2007 — #Unfortunately I am not currently kicking myself, the full array is as follows:

[CODE]
 var pagecolor=new Array()
 pagecolor[0] = "#FFFFFF";
 pagecolor[1] = "#FF0000";
 pagecolor[2] = "#FFFFFF";
 pagecolor[3] = "#FFFFFF";
 pagecolor[4] = "#FFFFFF";
 pagecolor[5] = "#FFFFFF";
 pagecolor[6] = "#FFFFFF";
 pagecolor[7] = "#99CCFF";
 [/CODE]

I edited out 2-6 because they were the same color. If you wouldn't mind, you seem to have a more advanced knowledge of this type of scripting, running the script on your side and telling me what you get. Cheers!

@cgishackMar 16.2007 — #here is my Code

100% complete.

Try it out.

I did not change anything except the colors of the array to values i know.

<i>
 </i>
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
 &lt;title&gt;Div Color Thing&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 var pagecolor=new Array()
 pagecolor[0] = "#FFFFFF";
 pagecolor[1] = "#FF0000";
 pagecolor[2] = "#000000";
 pagecolor[3] = "#F0F0F0";
 pagecolor[4] = "#555FFF";
 pagecolor[5] = "#888FFF";
 pagecolor[6] = "#000FFF";
 pagecolor[7] = "#99CCFF";
 
 <i>	</i>function setpage(page, id)
 <i>	</i>{
 
 <i>	</i>	div = document.getElementById(id);
 <i>	</i>	div.style.backgroundColor=pagecolor[page];
 <i>	</i>}
 &lt;/script&gt;
 
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;a href="javascript:setpage(7, 'foot');"&gt;Color It&lt;/a&gt;
 
 
 &lt;div class="footer" id="foot" align="center"&gt;I am mere text&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

When I run the script The DIV changes to the color that i called in the array.

Drew

@follishauthorMar 16.2007 — #Problem solved! Thanks a bunch, it turns out it was another function interrupting my shiiz, i put it at the end of the function that changed color and presto, I didn't throw it in there because I knew it bugged out the browser. <_<

Anyways, this last script did the trick, thanks again.

@cgishackMar 16.2007 — #Cool Stuff!

Try using FireBug for Fire Fox to help debug.

It would have caught that error I think.

Its a tool many could not live without now.

Drew

Also in #JavaScript _↴

Call PHP code within JS function with a JS variable How to use 'this' and add element dynamic Javascript and Word Document Objects...

Success!

Help @follish spread the word by sharing this article on Twitter...

Tweet This

Changing divs with setStyleById

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changing divs with setStyleById

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴