Javascript Help [Archive]

iUnknown

13-07-2009, 11:55 PM

I'll try and make this has informative and brief as possible...

I have links (<a href="#">) and I need it so that when the click is clicked (onClick="") it changes a CSS 'element''s value. So, when click, it changes the "background" of the div with the ID "banner". So in the CSS document I have:

#banner {
background: url(images/banner.png);
more css blah
}

Onclick of this particular link, I need it to dynamically become:

#banner {
background: url(images/banner2.png);
more css blah
}

Any help will be appreciated, thanks.

Johno

14-07-2009, 12:02 AM

http://www.codingforums.com/showpost.php?p=603151&postcount=2

Quick Google brought that up, should work.

iUnknown

14-07-2009, 12:49 AM

http://www.codingforums.com/showpost.php?p=603151&postcount=2

Quick Google brought that up, should work.

Thanks, but I've already tried that and couldn't get it to work.

Maybe I'm just being an idiot, but if it works I usually manage to get it to work, and I couldn't?

If a javascript coder can use the guide there (http://www.codingforums.com/showthread.php?t=122011) and get it to work in the way I need it, please let me know how you did it.

Or... any other suggestions?

Thanks very much.

Johno

14-07-2009, 01:20 AM

Worked for me? Hope you can get it working :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>oh hay</title>

<style type="text/css">
.banner1 {
background-color: aqua;
width: 100px;
height: 100px;
}
.banner2 {
background-color: fuchsia;
width: 100px;
height: 100px;
}
</style>
</head>

<body>
<div id="hello" class="banner1"></div>
<a href="#hello" onclick="document.getElementById('hello').className ='banner2'">Hello</a>
</body>
</html>

Blinger1

14-07-2009, 01:26 AM

Try this:

<a href="#" onclick="document.getElementById('banner').style.background Image='url(background2.jpg)';">click.</a>

BoyBetterKnow

14-07-2009, 10:10 AM

jQuery outline selectors.

iUnknown

14-07-2009, 10:58 AM

Worked for me? Hope you can get it working :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>oh hay</title>

<style type="text/css">
.banner1 {
background-color: aqua;
width: 100px;
height: 100px;
}
.banner2 {
background-color: fuchsia;
width: 100px;
height: 100px;
}
</style>
</head>

<body>
<div id="hello" class="banner1"></div>
<a href="#hello" onclick="document.getElementById('hello').className ='banner2'">Hello</a>
</body>
</html>

Got that working now, thanks very much +rep. It doesn't look as good as I wanted, so I'm going to try and work out how to add a fade to the changeover now haha.

Any suggestions or help on ths would also be appreciated.

BoyBetterKnow

14-07-2009, 11:01 AM

Got that working now, thanks very much +rep. It doesn't look as good as I wanted, so I'm going to try and work out how to add a fade to the changeover now haha.

Any suggestions or help on ths would also be appreciated.

Use jQuery. You can do like css change then .fade('slow'); or whatever.

:D

iUnknown

14-07-2009, 11:11 AM

Use jQuery. You can do like css change then .fade('slow'); or whatever.

:D

I've got jquery now but I'm awful at javascript... I need a little bit more detailed advice on how to use it :P Can I use jquery to add a fade to something like this?

onclick="document.getElementById('banner').className ='banner2'"

iUnknown

14-07-2009, 11:33 AM

Can't edit, please merge my posts.

This is now my code:

function imgChange1() {
document.getElementById('banner').className ='banner1';
}

function imgChange2() {
document.getElementById('banner').className ='banner2';
}

function imgChange3() {
document.getElementById('banner').className ='banner3';
}

function imgChange4() {
document.getElementById('banner').className ='banner4';
}

function imgChange5() {
document.getElementById('banner').className ='banner5';
}

What can I add to the functions to make it do that with a fade?

Thanks.

Jam-ez

14-07-2009, 02:35 PM

Can't edit, please merge my posts.

This is now my code:

function imgChange1() {
document.getElementById('banner').className ='banner1';
}

function imgChange2() {
document.getElementById('banner').className ='banner2';
}

function imgChange3() {
document.getElementById('banner').className ='banner3';
}

function imgChange4() {
document.getElementById('banner').className ='banner4';
}

function imgChange5() {
document.getElementById('banner').className ='banner5';
}

Quick google search:
http://brainerror.net/scripts/javascript/blendtrans/
That seems to outline what you're trying to do, good luck!

Blob

14-07-2009, 06:35 PM

Can't edit, please merge my posts.

This is now my code:

function imgChange1() {
document.getElementById('banner').className ='banner1';
}

function imgChange2() {
document.getElementById('banner').className ='banner2';
}

function imgChange3() {
document.getElementById('banner').className ='banner3';
}

function imgChange4() {
document.getElementById('banner').className ='banner4';
}

function imgChange5() {
document.getElementById('banner').className ='banner5';
}

What can I add to the functions to make it do that with a fade?

Thanks.

Try using jquery

Also your code will be much better like this:

function imgChange( number ) {
document.getElementById('banner').className ='banner' + number;
}

Jam-ez

14-07-2009, 06:44 PM

Try using jquery

Also your code will be much better like this:

function imgChange( number ) {
document.getElementById('banner').className ='banner' + number;
}

Hah, I was originally planning on posting that until i forgot what the sign was to connect the submitted thing into it was (the +). I'll +rep you if I can; and also good luck Unknown, you'll get their sometime! :)

Edit: @Blob : must spread!

iUnknown

15-07-2009, 12:20 AM

I ended up getting this done professionally now because I realised it wasn't something I could do or get done for free. All working now after a ton of effort due to countless problems with integration into the layout, and looking at the code I was pretty far off. Didn't use jquery in the end, just custom coded by a pro.

Thanks for everyone's help - useful contributions have received +rep where possible.

BoyBetterKnow

15-07-2009, 12:00 PM

I ended up getting this done professionally now because I realised it wasn't something I could do or get done for free. All working now after a ton of effort due to countless problems with integration into the layout, and looking at the code I was pretty far off. Didn't use jquery in the end, just custom coded by a pro.

Thanks for everyone's help - useful contributions have received +rep where possible.

I would've done your javascript for free lol. If you had sent me the files you wanted it built into, I would've done it.

Protege

15-07-2009, 05:32 PM

http://jamie-online.com/random-jamz/wp-content/uploads/2009/06/facepalm.jpg

jQuery is used by "pros".