homepage Welcome to WebmasterWorld Guest from 54.226.161.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
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 text - link
Changing the color of text - link JScolor
kdigennaro




msg:4622136
 8:53 pm on Nov 8, 2013 (gmt 0)

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




msg:4622139
 9:11 pm on Nov 8, 2013 (gmt 0)

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




msg:4622637
 10:48 pm on Nov 11, 2013 (gmt 0)

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




msg:4622647
 11:47 pm on Nov 11, 2013 (gmt 0)

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




msg:4622789
 2:28 pm on Nov 12, 2013 (gmt 0)

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




msg:4622793
 2:48 pm on Nov 12, 2013 (gmt 0)

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




msg:4622795
 2:58 pm on Nov 12, 2013 (gmt 0)

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




msg:4622797
 3:04 pm on Nov 12, 2013 (gmt 0)

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




msg:4622808
 3:48 pm on Nov 12, 2013 (gmt 0)

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




msg:4622821
 5:04 pm on Nov 12, 2013 (gmt 0)

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




msg:4622851
 7:37 pm on Nov 12, 2013 (gmt 0)

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




msg:4622863
 8:37 pm on Nov 12, 2013 (gmt 0)

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




msg:4622873
 10:00 pm on Nov 12, 2013 (gmt 0)

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




msg:4622882
 11:37 pm on Nov 12, 2013 (gmt 0)

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




msg:4622883
 12:11 am on Nov 13, 2013 (gmt 0)

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




msg:4622887
 12:58 am on Nov 13, 2013 (gmt 0)

Glad you got it working. :)

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