homepage Welcome to WebmasterWorld Guest from 54.198.94.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
make a div clickable
surrealillusions




msg:4072198
 8:16 pm on Feb 1, 2010 (gmt 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?

 

jerry95




msg:4072432
 2:51 am on Feb 2, 2010 (gmt 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?

Fotiman




msg:4072720
 2:27 pm on Feb 2, 2010 (gmt 0)

@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




msg:4073183
 1:51 am on Feb 3, 2010 (gmt 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");
})};

surrealillusions




msg:4075162
 9:30 pm on Feb 5, 2010 (gmt 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;
});

rocknbil




msg:4075189
 10:56 pm on Feb 5, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved