AJAX

Using <div onclick="""> to call an <a></a> link

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2009

Posts: 10

Reputation: MattTheHat is an unknown quantity at this point

Solved Threads: 0

MattTheHat MattTheHat is offline

Offline

Newbie Poster

Using <div onclick="""> to call an <a></a> link

Jul 3rd, 2009

Is it possible to do something like this?

<div id="btn1" onclick="//somehow call page2Link here"><a href="page2.html" id="page2Link">Page 2</a></div>
Basically it's to try and make the text work with the a:hover text effect I have whilst making the whole layer sensitive to clicks.

i tried this already:

<a href="page2.html" id="page2Link"><div id="btn1" ><a href="page2.html" id="page2Link">Page 2</a></div></a>
but it's untidy and a bit rubbish is there a better way to do it neatly?

I know i could always call a JS function to do a parent.location thing but i would rather not if possible.

Last edited by peter_budo; Jul 4th, 2009 at 6:05 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Jun 2009

Posts: 171

Reputation: Menster is an unknown quantity at this point

Solved Threads: 22

Menster

Offline

Junior Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 3rd, 2009

Hi there, have you tried:

Help with Code Tags

(Toggle Plain Text)

<div id="blah" onclick="window.location = 'Your reference here'>
<a href="You can leave this blank">Your text here</a>
</div>

$me = new Person();
if (isset($_COOKIE)){
$me->eat($_COOKIE);
} else { $me->starve(); }

•

Join Date: May 2009

Posts: 10

Reputation: MattTheHat is an unknown quantity at this point

Solved Threads: 0

MattTheHat MattTheHat is offline

Offline

Newbie Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 3rd, 2009

cheers i'll give that a go

•

Join Date: Jul 2009

Posts: 13

Reputation: Bojero is an unknown quantity at this point

Solved Threads: 3

Bojero

Offline

Newbie Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 3rd, 2009

You can leave out the <a> tag then because you can just use the div:hover.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div id="myButton" onclick="window.location = 'http://google.com';">Page 2</div>
<div id="myButton" onclick="window.location = 'http://google.com';">Page 2</div>

Last edited by Bojero; Jul 3rd, 2009 at 7:04 am.

•

Join Date: Jun 2009

Posts: 171

Reputation: Menster is an unknown quantity at this point

Solved Threads: 22

Menster

Offline

Junior Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 3rd, 2009

But, if you leave out the anchor tag the styles you've applied won't work... but i suppose you could just change them from a:hover etc.
to div:hover.

$me = new Person();
if (isset($_COOKIE)){
$me->eat($_COOKIE);
} else { $me->starve(); }

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 18

codejoust

Offline

Junior Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 6th, 2009

What I end up doing quite a bit, is making the div clickable, but allowing for people without javascript to access the link (such as search spiders).
One way to do this is using jquery --

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
$(function(){
$('div.link:has(a)').click(function(){
$(this).addClass('linked'); /*Allows for CSS hover and different styles for link clicks.*/
window.location = $(this).nearest('a').attr('href'); /*Go there! Only works with jquery 1.3 (due to the use of nearest. */
}); //End Click
}); //End OnReady
$(function(){
$('div.link:has(a)').click(function(){
$(this).addClass('linked'); /*Allows for CSS hover and different styles for link clicks.*/
window.location = $(this).nearest('a').attr('href'); /*Go there! Only works with jquery 1.3 (due to the use of nearest. */
}); //End Click
}); //End OnReady

Which allows for the div to be clickable.

Last edited by peter_budo; Jul 8th, 2009 at 7:20 am. Reason: Correcting openning tag please use [code=JavaScript] instead of [code language=JavaScript]

CodeJoust! Design + Development - Proud User of Ubuntu

•

Join Date: Jul 2009

Posts: 13

Reputation: Bojero is an unknown quantity at this point

Solved Threads: 3

Bojero

Offline

Newbie Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 6th, 2009

•

Originally Posted by codejoust

What I end up doing quite a bit, is making the div clickable, but allowing for people without javascript to access the link (such as search spiders).
One way to do this is using jquery --
[code language=javascript]
$(function(){
$('div.link:has(a)').click(function(){
$(this).addClass('linked'); /*Allows for CSS hover and different styles for link clicks.*/
window.location = $(this).nearest('a').attr('href'); /*Go there! Only works with jquery 1.3 (due to the use of nearest. */
}); //End Click
}); //End OnReady
[/code]
Which allows for the div to be clickable.

Mmmm jQuery!

•

Join Date: May 2009

Posts: 10

Reputation: MattTheHat is an unknown quantity at this point

Solved Threads: 0

MattTheHat MattTheHat is offline

Offline

Newbie Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 6th, 2009

Thanks to all.

Problem now solved.

ps. Give JQuery a rest some of us like to code in an old school manner where all the code is ours rather than being cut & paste monkeys.

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 18

codejoust

Offline

Junior Poster

Re: Using <div onclick="""> to call an <a></a> link

Jul 6th, 2009

•

Originally Posted by MattTheHat

Thanks to all.

Problem now solved.

ps. Give JQuery a rest some of us like to code in an old school manner where all the code is ours rather than being cut & paste monkeys.

I wrote the jQuery javascript, It isn't cut+paste from somewhere else, but I do understand liking to use the 'old-school' methods... not much problem there, although jQuery (I think) helps it so you don't need to change any HTML to get the effect...
Its also sometimes hard to relearn something too...

CodeJoust! Design + Development - Proud User of Ubuntu