Welcome to WebmasterWorld Guest from 184.72.177.182

Forum Moderators: open

Message Too Old, No Replies

make a div clickable

     
8:16 pm on Feb 1, 2010 (gmt 0)

Preferred Member

5+ Year Member

joined:Dec 10, 2007
posts:507
votes: 0


Hi all,

Got a problem in that IE doesnt believe in CSS and thus refuses to render the a tag as a real block to make a div clickable, and thus I am resorting to javascript after getting really fustrated in finding a CSS solution.

I found this Jquery script to make the following div clickable but it isnt working.

<script type="text/javascript">
$(".section").click(function() {
window.location = $(this).find("a:first").attr("href");
});
</script>


<div class="section">
<a href="nextpage.php"></a>
<h2>Headline</h2>
<p>Some text.</p>
</div>

What is going wrong with this?
2:51 am on Feb 2, 2010 (gmt 0)

New User

5+ Year Member

joined:Jan 31, 2008
posts:20
votes: 0


Hello, I don't know if that's what you're looking for but it seems that you want the whole content of the div to be clickable so why don't you wrap the heading and the paragraph in the link tag and use css to remove underline and other attributes?
2:27 pm on Feb 2, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


@jerry95, you can't wrap a block level element (<div>, <p>, etc.) in an inline element <a>.

@surrealillusions, your link element is empty. It will be useless as no one will be able to click on it. What you should do instead is have a real link. That way, users with JavaScript disabled will still be able to follow the link to your "nextpage.php".


<div class="section">
<a href="nextpage.php">Next Page</a>
<h2>Headline</h2>
<p>Some text.</p>
</div>


I suspect that once the <a> isn't empty, your jQuery code might work as well.
1:51 am on Feb 3, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


The script needs to be executed on page load, check the prefered way of doing that with jQuery, maybe ?

$(document).ready(function(){
$(".section").click(function() {
window.location = $(this).find("a:first").attr("href");
})};
9:30 pm on Feb 5, 2010 (gmt 0)

Preferred Member

5+ Year Member

joined:Dec 10, 2007
posts:507
votes: 0


Thanks for the replies.

I eventually got it working.

The <a> tag is set as display:block; with a defined width and height, positioned absolutely inside the div, which works for all modern/major browsers except for IE.

The following Javascript works. The main difference been the 3rd line to what DaveVK posted:

$(document).ready(function() {
$(".section").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
10:56 pm on Feb 5, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


which works for all modern/major browsers except for IE.


Is that the final fix, or does it still fail in IE?

If it does, it's because of what Fotiman says, IE abhors a vacuum. It's also true of empty table cells.

If it's still broken, at the very least, try

<a href="">&nbsp;</a>

Though it should be text . . . you could add something to write &nbsp; to the anchor onload if you really don't want text there.

EDIT: Agh . . . what you want is an ampersand next to nbsp;, you know the entity. Recent changes to this board have begun parsing our entities. :-) Going to try a trick, let's see if it works.

Second edit: it works, but only because I tricked the board 'ware by adding an entitied ampersand (& amp;) next to the bare nbsp; if it ever gets fixed it will be hosed up.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members