Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 31945

Jul 3rd, 2009

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

Expand Post »

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.

Similar Threads

Changing the default "submit" button. in HTML and CSS
how can I keep "checked" boxes within div to default to "unchecked" if div is"hidden" in JavaScript / DHTML / AJAX
Gridview coloumn data to come in Bulleted list in ASP.NET
Why server variable "http_referer" is empty first time? in ASP
"simple" file parser i am making in Python

MattTheHat

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

10 posts
since May 2009

Permalink

Jul 3rd, 2009

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

Hi there, have you tried:

(Toggle Plain Text)

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

Menster

Reputation Points: 49

Solved Threads: 22

Junior Poster

Offline

175 posts
since Jun 2009

Permalink

Jul 3rd, 2009

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

cheers i'll give that a go

MattTheHat

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

10 posts
since May 2009

Permalink

Jul 3rd, 2009

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.

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.

Bojero

Reputation Points: 10

Solved Threads: 3

Newbie Poster

Offline

13 posts
since Jul 2009

Permalink

Jul 3rd, 2009

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.

Menster

Reputation Points: 49

Solved Threads: 22

Junior Poster

Offline

175 posts
since Jun 2009

Permalink

Jul 6th, 2009

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

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

Reputation Points: 18

Solved Threads: 21

Junior Poster

Offline

180 posts
since Jul 2009

Permalink

Jul 6th, 2009

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

Click to Expand / Collapse Quote 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!

Bojero

Reputation Points: 10

Solved Threads: 3

Newbie Poster

Offline

13 posts
since Jul 2009

Permalink

Jul 6th, 2009

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.

MattTheHat

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

10 posts
since May 2009

Permalink

Jul 6th, 2009

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

Click to Expand / Collapse Quote 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

Reputation Points: 18

Solved Threads: 21

Junior Poster

Offline

180 posts
since Jul 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Validate FooterTemplate Textbox field using javascript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Styles for A Web App

DaniWeb Message

Cancel Changes

User Name
Password