Resolved click a link to change css [Archive]

View Full Version : Resolved click a link to change css

james438

01-30-2011, 02:55 AM

Hi, I am looking for a bit of sample javascript where if I click on an anchor link the background color of the div will change to a predetermined color. For example, if I load the page, div will be blue, but when I click the link it will become red.

My goal is to build upon this code to create a dynamic page that I can "paint". Later, I hope to add other possibilities as well, such as the ability to alter font families or background images.

Beverleyh

01-30-2011, 09:28 AM

Hi James,

You can use jQuery;

$('a.change').click(
function () {
$('div.paint').css({'background':'red'});
}
);

Sample HTML
<a href="#" class="change">Click to change colour</a>
<div class="paint"></div>

vwphillips

01-30-2011, 09:53 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Color(id,col){
document.getElementById(id).style.backgroundColor=col;;
}
/*]]>*/
</script>

</head>

<body>
<a name="tom" onclick="Color('d1','red');">Anchor</a>

<div id="d1" style="width:200px;height:200px;background-Color:blue;" ></div>

</body>

</html>

james438

01-30-2011, 02:09 PM

Thanks, this does give me something to look at. I really do not work with javascript and can not create even the simplest scripts on my own.

Beverly, I am having a little bit of difficulty getting your script to work. If I remember correctly, jQuery is based on a library of javascript functions. I wrapped your javascript in typical javascript tags: <script type="text/javascript"> and incorporating it into what vwphilips wrote, but am not having any luck. Would you be able to help me out a bit further?

djr33

01-30-2011, 02:39 PM

To use jquery you need the jquery script on your page. It is not a default.

You don't need jquery though. It just simplifies the code a bit.

vwphillips

01-30-2011, 04:28 PM

It just simplifies the code a bit

how?

plus the posted code is .5k where jQuery.min is 77K in size

and much better to learn javascript before jQuery

Nile

01-30-2011, 06:37 PM

how?

plus the posted code is .5k where jQuery.min is 77K in size

and much better to learn javascript before jQuery

You should not use jQuery without knowing javascript - correct.
And I agree, jQuery will be more complicated at times when all thats needed is one line of simple javascript.

james438

01-30-2011, 06:44 PM

In this case, I am going to go with vwphillips. It is better to learn javascript before trying to utilize the jQuery library. It seems to me that the jQuery is analogous to using a website creator before learning some of the basic languages.

Even so, how do you use the jQuery library, just for future reference?

Beverleyh

01-30-2011, 07:00 PM

If you know javascript, youre at an advantage and it will be easy to write the code you need - unfortunately I dont so I just suggested what I know from fiddling with jQuery, which for me was much easier to get my head around than starting with javascript from scratch (is that bad?). Maybe now if I go back and start looking at javascript, it will be easier for me but sadly I havent got time to do that at the mo.

James, as an alternative to Vic's suggestion (which is smaller so by all means go with that if you prefer) you can first download and link to the jQuery library in the head of your page (download: http://docs.jquery.com/Downloading_jQuery ) and then use the function as suggested earlier;

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.change').click(
function () {
$('div.paint').css({'background':'red'});
}
);
});
</script>

(HTML as before)

james438

01-30-2011, 07:40 PM

Thanks for explaining Beverly. I have tried a few times in the past to learn javascript, but was intimidated by it and have so far had no reason at all to learn it. At the moment I have one reason in which it might be advantageous to learn it, which is to try and create a website design program for the admin section of my website.

djr33

01-30-2011, 08:09 PM

jQuery helps for some operations and for others it isn't much of a shortcut at all, since those are allowed directly within javascript. But for those operations that are not standards or differ in various browsers, it can really help. The question is whether it's easy to use basic javascript or to use jQuery on a certain page, and there are two things to consider: 1) can you do it without jQuery as well as jQuery does it-- for example if jQuery has already worked out how to do something hard across multiple browsers, why reinvent the wheel?; 2) are you using jQuery enough to warrant the extra .js file (a big one) and bandwidth? Usually this means more than one operation. And if you already have jQuery loaded on the page then there's no reason not to use it even for basic things.

My main objection to jQuery is that it is seen as a "language" or something in itself and some people become more familiar with it than javascript. It should be helpful, not limiting. And if you only know jQuery, then that means you don't know javascript well (at all?).

As a slightly tangential question, but one that is relevant (and since the original question has been answered):
How can CSS be dynamically changed on a page? Either by loading an external stylesheet or, perhaps more difficult, could a string (of CSS text) be applied directly within the page?

james438

01-31-2011, 05:28 AM

This is related enough that I am going to post here. The following is largely the same as the example that vwphillips posted earlier, but I am adding the ability to change the font family, but it does not seem to be working. Could someone explain what I am doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
function Color(id,col){
document.getElementById(id).style.backgroundColor=col;
}
function FontFamily(id,col){
document.getElementById(id).style.fontfamily=col;
}
</script>
</head>

<body>
<a onclick="Color('d1','red');">Anchor</a><br>
<a onclick="FontFamily('font','Arial');">Font Family</a>
<div id="font" style='font-family:verdana;'>This is a test of the Emergency Broadcasting System. This is only a test.</div>
<div id="d1" style="width:200px;height:200px;background-color:blue;" ></div>

</body>

</html>

azoomer

01-31-2011, 07:05 AM

Try "camelcase" for the font style:

<script type="text/javascript">
function Color(id,col){
document.getElementById(id).style.backgroundColor=col;
}
function FontFamily(id,col){
document.getElementById(id).style.fontFamily=col;
}
</script>