/    Sign up×
Community /Pin to ProfileBookmark

Using jQuery to find attributes in a DIV and make it clickable

Copy linkTweet thisAlerts:
Jul 27.2011

Hi everyone,

I’m trying to make a div clickable, i.e. when you click inside the div it takes you to a specified URL. I’m trying to use jQuery Find to look for attributes in the div and create the URL.

Here is a sample div:

[CODE]<div id=”post” post-username=”john-doe” post-id=”4585458″>

contents of the div go here

</div>[/CODE]

What I’d like to do is have jQuery search each div called post and then retrieve the attributes for post-id and post-username to form a URL like /john-doe/post/4585458/.

So far I have something like this:

[CODE]$(“#post”).click(function(){
window.location=$(this).find(“div”).attr(“post-username”);
return false;
});[/CODE]

But I’m not sure how to use Find to retrieve multiple attributes and concatenate them together to form the URL.

Any help would be appreciated.

Thanks.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@donatelloJul 27.2011 — What about covering the entire div with a transparent gif?

That's the easy way..

Create a clear pixel of dimensions 1x1, then display it on top of your DIV.

You could also use a large table cell instead of a DIV.

-----------------------------------------------
The hard way:

The dreaded CSS solution.

Because <div> tags are block level and <a> tags are inline <a> tags must sit inside <div> tags.

Try this:
[code=html]<div class="post">
<a href="john-doe.html" class="post">
</a>
</div> [/code]

<a> should take up the entire of the inside of the <div>, so:

[code=html].post a {
display: block;
height: 100&#37;;
width: 100%;
} [/code]

display:block elements automatically are as wide as their container so technically we shouldn't need that, but IE would do crazy stuff otherwise, so do it like that.

You can also give your <a> tags the class name that your <div> tags have and it should work.
Copy linkTweet thisAlerts:
@joeschmidtauthorJul 27.2011 — Thanks for taking the time to respond.

More information on my question: Inside each Post div will be content, mostly copy inside <p> tags possibly including links to resources on the internet. On a page there will be a stream of these divs, kind of like what twitter does. So you should be able to click on a link inside div and have it take you to that specific URL or you should be able to click on empty space in the div and have it take you to a page where you can see just that individual post (i.e. the /john-doe/post/485485/ URL I was trying to create in my initial question)

Would your technique allow for clicking on links contained inside the div or would they be covered up?
×

Success!

Help @joeschmidt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...