homepage Welcome to WebmasterWorld Guest from 54.145.211.125
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
make a div clickable
surrealillusions

5+ Year Member



 
Msg#: 4072196 posted 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

5+ Year Member



 
Msg#: 4072196 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4072196 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4072196 posted 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

5+ Year Member



 
Msg#: 4072196 posted 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

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



 
Msg#: 4072196 posted 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