make a div clickable

[surrealillusions]

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?

[jerry95]

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?

[Fotiman]

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

[daveVk]

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");
})};

[surrealillusions]

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

[rocknbil]

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.