Changing the color of text - link

Changing the color of text - link JScolor

[kdigennaro]

Hey guys,

I really appreciate the help thus far! I have a question about how to change the text color of a h1 tag and link tags.

I am trying to do this using the JScolor picker script. For the h1 tag I gave the it the DOM selector of class and changed the class name. Below is what I attempted.

Select Logo Color:<input class="color" onchange="document.getElementByClassName('h1_logo').style.backgroundColor = '#'+this.color">                

I noticed that it was calling .style.backgroundColor. I am assuming this is my issue. I tried changing it to color and didn't have any success. Any help would be appreciated.

My other question, is it possible to call a string of html. For instance I want to call #Navigation ul li a. How would I go about calling this?

Thanks again for your help!
Kevin

[Fotiman]

The problem is that document doesn't have a method called:
getElementByClassName
it has:
getElementsByClassName
which returns an array. So if you only have 1 element with that classname, you can return the first item in the array. Like so:
document.getElementsByClassName('h1_logo')[0].style.color = '#'+this.color">

[kdigennaro]

Thank you for the feedback Fotiman. This did indeed fix the problem. I am currently playing around with another color picker I found that I seems to work a little bit better for what I need it to do. Hopefully with the help you have given me thus far I will be able to put things together!

Thanks,
Kevin

P.S. Is there a site that you recommend for JS. That is a site that could be a reference or learning tool. W3 schools has always been great but I feel that I haven't been able to get as much out of the JS section as I used to with HTML, CSS, PHP, etc.

Thanks again,
Kevin

[kdigennaro]

I don't want to spam the forum so I think this still applies to this topic.

I have been playing around with a JS color slider called 'Spectrum'. The documentation has been great but I am having trouble with the change event.

When the color is selected I want the background-color of #header to change.

Below is my code thus far. I am clearly missing something with the change command and can't seem to get the answer out of the documentation. Any help is appreciated!

HTML

<div class="wrap">
<div id="header" class=""></div>

    <p>Background Color: <input type="text" name="bgcolor" id="bgcolor" /></p>
</div>

and the JS

function updateBackground(color) {
  $("#header").css("background-color", color.toHexString());
}

$(function() {
$("#bgcolor").spectrum({
showPalette: true,
    showSelectionPalette: true,
    maxPaletteSize: 10,
change: function(color) { 
  color(); *I am missing something here*
}
});

$("#bgcolor").spectrum();
$("#bgcolor").show();
});

As always thank you!
-Kevin

[Fotiman]

From the documentation [bgrins.github.io]

change: function(color) {
  color.toHexString(); // #ff0000
}

In other words, the change function takes a single parameter, which will contain the color that was chosen. You've already created a function updateBackground that looks correct, you just need to call it from the change function. So your change function should look something like this:

change: function(color) {
  updateBackground(color);
}

[kdigennaro]

Fotiman thank you very much for all the help you have given me. I feel a little guilty that I haven't been able to pay you back in some way! I have been trying to help on the forums but always get beat to the post! Haha

I saw the color.toHexString function I just wasn't exactly sure how to call my function but that makes complete sense.

I am how ever running into an issue. I am able to change the color but only 1 time.

So if I want to see how red looks for example I could not change it to blue. Any idea why this would happen? I am sorting through the documentation to try to figure it out.

Thanks,
-Kevin



Edit: Problem Solved I had called the

$("#bgcolor").spectrum();

twice causing an error.


Edit: I have seen this notice several times quote, "

Setting the colorpicker programmatically will update the original input.

Note: this will not fire the change event, to prevent infinite loops from calling set from within change.
"

I suspect this could have something to do with my issue but I am not 100% sure how to interrupt this.

Thanks again,
Kevin

[Fotiman]

Always glad to help.:)

It's not clear, did you solve your last issue, or do you still have a problem you need to solve?

[kdigennaro]

I did solve it, I apologize looks like I accidentally put the edit above the other edit :D.

Fotiman, if I may ask, how did you learn JS? Was there any specific site or book that really helped you? Or did you go to school? I don't know enough about JS but feel that it is one of the most important languages on the web these days and am looking to learn as much as I can!

Thank you,
Kevin

[kdigennaro]

I think I have just about wrapped up what I am working on but I currently have two issues that maybe someone could help me on :D.

1) Right now after you change the color of an element a box input box pops up. How can I disable that?

Here is a live version so you can see what I am talking about.
Live URL: <snipped, please see sticky>

2) How can I change the color of the nav hover? Below is what I have tried.

JS

/*Change Nav Hover Text Color*/
function updateHoverColor(color) {
 $("a:hover.navcolor").css("color", color.toHexString());
}

$(function() {
$("#navhover").spectrum({
color: "#f29c1f",
showPalette: true,
  showSelectionPalette: true,
  maxPaletteSize: 10,
change: function(color) { 
updateHoverColor(color);
$("#navhover").show();
}
});

Thanks again for any help!
-Kevin

[edited by: whoisgregg at 3:53 pm (utc) on Nov 19, 2013]
[edit reason] rv link, please see sticky mail :) [/edit]

[Fotiman]

1. I think if you specify an input with type="color", that's what you'll get. Instead you may want to look at the "custom" section: [bgrins.github.io...]

2. I don't think you can target the :hover style directly, but perhaps you could try this:

function updateHoverColor(color) {
  $(".navcolor").hover(
    function (){$(this).css("color", color.toHexString());},
    function (){$(this).css("color", "");}
  );
}

[kdigennaro]

Thank you very much Fotiman,

That works perfect for the hover.

To be honest with you I must have over looked that custom section. I will look through it and see if I can get it to work the way the I want!

Thanks again,
Kevin

[kdigennaro]

I have to say that I am really scratching my head as to why that input field is showing up.

I downloaded the source files for their website and stripped everything and added an input with my same options.

Here is a link <snipped url, see sticky mail>

*Notice there is no input field that pops out

Any ideas what is hiding/preventing this field from coming out? I tried destroying the code to recreate the error and I haven't even been able to haha.

Once again many thanks!
Kevin

[edited by: whoisgregg at 3:54 pm (utc) on Nov 19, 2013]
[edit reason] rv link, please see sticky mail :) [/edit]

[Fotiman]

The difference is the input type value. If you specify input type="color" as your original example, then you get those inputs. However, in this last link, the input type is text, and therefore we don't see it.

[kdigennaro]

Thanks for getting back Fotiman,

I have tried declaring the type as both color and text and had the same result. I am wondering if I modified something accidentally that I shouldn't or didn't want to. I will rebuild it tonight and see if I can resolve the issue.

Thank you very much,
Kevin

[kdigennaro]

Just in case anyone is curious I have solved the problem! *only took 6 hours... :P*

The error is that the id="" and the name="" can not be the same. It seems that the only issue it causes is the strange error with the input box.

Working example: <url removed, see sticky mail>

[edited by: whoisgregg at 3:55 pm (utc) on Nov 19, 2013]
[edit reason] rv link, please see sticky mail :) [/edit]

[Fotiman]

Glad you got it working. :)