homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Changing the color of a specifc DIV
how to change the color of a div
kdigennaro




msg:4621914
 8:24 pm on Nov 7, 2013 (gmt 0)

Hello All,

I have been having some trouble jscolor over the last couple of days.

I am trying to create a button or field that on click will display a color picker and once the color is changed the color of a specified div will change. I have seen examples of this done with the background color of a page but am having trouble getting it to work with anything other than an input tag.

Below is my latest attempt, it does everything except change the specific div '#footer'. It only changes the entire background.

Any help is greatly appreciated!


<div class="color" id="footer">
<input class="color" onchange="document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color">
</div>


I read in the website that you can not post links to code. Am I allowed to link to the jscolor website so you can access that code if need be?

Thank you,
Kevin

 

Fotiman




msg:4621919
 8:33 pm on Nov 7, 2013 (gmt 0)

Welcome to WebmasterWorld!

document.getElementsByTagName('BODY')[0]

That code is selecting your page's BODY element by it's tagname. If you want to change #footer:

<div class="color" id="footer">
<input class="color" onchange="document.getElementById('footer').style.backgroundColor = '#'+this.color">
</div>

Generally, though, it's best to avoid using inline JavaScript like this, as it makes it harder to maintain.

kdigennaro




msg:4621929
 8:55 pm on Nov 7, 2013 (gmt 0)

Fotiman,

Thank you for the warm welcome! And the quick response!

I can't believe I overlooked that.. I did try 'footer' but didn't change it to 'document.getElementById' which just makes sense haha.

As far as the inline JS I do agree with you. I was going to change it into a function. Would the following be correct? I have just been getting into writing my own JS after years of using snippets. So my semantics aren't always 100% correct.


function(){
document.getElementById('footer').style.backgroundColor = '#'+this.color
}


Thanks again for the kindness and quick response!
Kevin

Fotiman




msg:4621935
 9:25 pm on Nov 7, 2013 (gmt 0)

The general idea is that you want a nice clean separation of your content (HTML), presentation (CSS), and behavior (JavaScript), so you keep them all in their own files. That means attaching your event handlers (or event listeners) via JavaScript. So your markup might look like this:

<div class="color" id="footer">
<input class="color">
</div>

And then in your JavaScript file you'd attach your event handlers once the DOM was ready (the easiest way to ensure that is to put your script elements at the bottom of your page, just before the closing </body> tag). Your script might look like this:


(function () {
var footer = document.getElementById('footer'),
inputColor = footer.getElementsByTagName('input')[0];

inputColor.onchange = function () {
footer.style.backgroundColor = '#' + this.color;
};
})();

kdigennaro




msg:4621941
 10:25 pm on Nov 7, 2013 (gmt 0)

Thank you once again for your advice! I'm happy I found this forum and hope I can give back to the community!

Best Regards,
Kevin

phranque




msg:4621957
 11:33 pm on Nov 7, 2013 (gmt 0)

welcome to WebmasterWorld, Kevin !

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved