CODEWITHSUNDEEP
phpjavascriptcsshtml
chustar
chustar

Reputation: 12465

How to make a DIV section clickable?

I have written a web page in which links are all contained within their own tags. I've also made them all button styles with CSS (border, background color, padding). How do I enable the whole DIV to be clicked to activate the link?

Upvotes: 5

Views: 16602

Answers (7)

Murray
Murray

Reputation: 11

Try this:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

Upvotes: 1

Triactol
Triactol

Reputation: 11

To make a div clickable. put an a tag inside it and display it as a block element and give it the same width and height as the div I do it all the time.

Upvotes: 1

nightcoder
nightcoder

Reputation: 13519

I think you had to write CSS for your "a" tags, instead of putting your links into divs and tunning divs with CSS.

Here is the example of the sidebar: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

/*********************/
/* SIDEBAR */
/*********************/
#sidebar {
  width: 160px;
  float: left;
  margin-top: 10px;
}

#news {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.2em;
  border-top: 1px dashed #294E56;
  border-right: 1px dashed #294E56;
}
#news li {
  display: inline;
}
#news .title {
  font-weight: bold;
  display: block;
  color: #666666;
}
#news a {
  text-decoration: none;
  display: block;
  padding: 5px;
  border-bottom: 1px dashed #294E56;
  color: #73AFB7;
  line-height: 110%;
  background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top;
}
/* hack for IE 6 < to make entire block clickable */
* html #news a {
  height: 1px; 
}

#news a:hover {
  color: #000000;
  background-image: url(images/bg/bg_link_h.png);
}

</style>
</head>
<body>
<div id="sidebar">
<ul id="news">
    <li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li>
    <li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
</ul>
</div>
</body>
</html>

You can see it in action here: http://bazanov.net/sidebar

Upvotes: 3

Pim Jager
Pim Jager

Reputation: 32129

Usually this is done in either of the following ways:

<div class='link_wrapper'>
  <!-- there could be more divs here for styling -->
  <a href='example.com'>GOto Example!</a>
</div>

.link_wrapper{
  somestyles: values;
  height: 20px; /*or whatever*/
  width:auto;
  padding:0px;
}
.link_wrapper a{
  line_height:20px; /*same as .link_wapper*/
  margin:0px;
}

Now the whole div is clickable.

Using Javascript this is also quite easy, this is using jQuery for easyness, however you could very easiyly do this without jQuery (if you do not already use it).

$('.link_wrapper')
  .style('cursor', 'pointer') //very important, indicate to user that div is clickable
  .click( function() {
    window.location = $(this).find('a').attr('href');
  }); //Do click as if user clicked actual text of link.

I highly recommend putting an actual link in the DIV as non-javascript user will not be able to use the link if there is no actual link in the DIV.

Upvotes: 4

Lance McNearney
Lance McNearney

Reputation: 9490

The best way to do this kind of effect (making links act like buttons) is to apply css to the links themselves. Here's a basic example:

a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}

Test it out - the whole of the button is clickable. And it respects the browser's normal link actions like right-clicking, status url information, etc.

Upvotes: 17

Brian Fisher
Brian Fisher

Reputation: 23999

Using jQuery you can do something similar to what chustar suggested:

$(div#name).click(function(){
    window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')}, 
   function () {$(this).removeClass('hovered')});

Upvotes: -1

chustar
chustar

Reputation: 12465

I figured out how to do it. In the tag, create an onclick property then in that property, set window.location = (where you want to go). As in:

<DIV OnClick="window.location='http://stackoverflow.com'">
    Content
</DIV>

Upvotes: -3

Related Questions