DaniWeb IT Discussion Community - Using <div onclick="""> to call an <a></a> link

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Using <div onclick="""> to call an <a></a> link (http://www.daniweb.com/forums/thread201432.html)

MattTheHat

Jul 3rd, 2009 6:40 am

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

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.

Menster

Jul 3rd, 2009 7:00 am

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

Hi there, have you tried:

<div id="blah" onclick="window.location = 'Your reference here'>

<a href="You can leave this blank">Your text here</a>

</div>

MattTheHat

Jul 3rd, 2009 7:01 am

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

cheers i'll give that a go

Bojero

Jul 3rd, 2009 7:02 am

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

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

<div id="myButton" onclick="window.location = 'http://google.com';">Page 2</div>

Menster

Jul 3rd, 2009 8:29 am

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

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.

codejoust

Jul 6th, 2009 11:19 am

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

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 --

$(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.

Bojero

Jul 6th, 2009 11:46 am

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

Quote:

Originally Posted by codejoust (Post 909730)

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! ;)

MattTheHat

Jul 6th, 2009 11:50 am

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

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.

codejoust

Jul 6th, 2009 1:11 pm

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

Quote:

Originally Posted by MattTheHat (Post 909769)

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...

All times are GMT -4. The time now is 2:33 pm.