SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Whole Div Clickable?

    I'm trying to make the whole div (contentpad) clickable not just the h3 or h4..but i cant figure it out.. seems simple

    Code html4:
    <div class="contentpad">
    <h3 class="aw">Header3</h3>
    <h4>header4</h4>
    </div>

  2. #2
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might SEEM simple, but it really isn't. Probably the best way to do it is with a bit of javascript, jQuery actually, does the job nicely.

    http://css-tricks.com/snippets/jquer...div-clickable/
    Web Goddess & Web Standards Evangelist

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi enwise,

    Yeah, LaynRed is right, block elements don't take well to these kind of requests.

    JavaScript either through jQuery or plain old onclick should give you want you want.

    <div class="contentpad" onclick="alert('Do something here');">
    <h3 class="aw">Header3</h3>
    <h4>header4</h4>
    </div>

    Alternatively, re-arrange your design to make it obvious where to click. One must ask the question why would a user click on what might appear to be empty space?

    Regards,


    David
    David McLeary
    Emerging Innovations
    Website Development, Training and Consultancy

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    From an HTML standpoint, if you are trying to make the entire div a clickable link, you could try putting an anchor tag inside of the div with display:block; set in the CSS along with the width and height at 100&#37;. This might work.

    This isn't the most proper of solutions, but the only answer I can come up with to make an entire div function as a clickable element using HTML / CSS.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks 4 the help ill go with a jquery solution

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div id="example" onclick="clickable">
    <p>Here is some dummy text</p>
    <p>Here is some dummy text</p>
    <p>Here is some dummy text</p>
    <p>Here is some dummy text</p>
    </div>

    Code CSS:
    #example {
        background:#cccccc;
        cursor:pointer;
    }
    Code JavaScript:
    function clickable () {
        alert("You have created a click div");
    }

    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @enwise

    Are you actually linking this out to another page, or site?

    If so:
    What if JavaScript is disabled, do you have a fallback solution?
    As a developer, you can never make assumptions, as assumptions lead to less users

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Unobtrusive example with a toggle.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Unobtrusive Event Handling</title>
    	
    	<script type="text/javascript">
    		window.onload = function() {
    			
    			(function() {
    				var objContentPad = document.getElementById('contentpad');
    				if(!objContentPad) return;
    				
    				objContentPad['onclick'] = (function() {
    				
    					var boolClicked = false;
    				
    					return function(objEvt) { 
    						
    						objContentPad.className = boolClicked?'':'clicked';			
    						boolClicked =! boolClicked;
    						
    						return false;  
    					}
    				
    				})();
    				
    			})();
    			
    		}
    	</script>
    	
    	<style>
    		#contentpad {
    			border: 1px solid black;
    			width: 500px;
    			height: 500px;
    		}
    		#contentpad.clicked {
    			background-color: red;
    		}
    	</style>
    	
    </head>
    <body>
    	<div id="contentpad">
    		<h3 class="aw">Header3</h3>
    		<h4>header4</h4>
    	</div>
    </body>
    </html>

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    oddz, it might be unobtrusive but it's not going to be very graceful for the JavaScript deficient. I would go with what Alex said and include an anchor which spans the element in question (using z-index to overlay the element over any content if needed). It's semantic because it's providing an anchor related to the element (inside it) which directs the user... plus it requires no scripting (to remove the text just use a negative text-indent).

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by enwise View Post
    I'm trying to make the whole div (contentpad) clickable not just the h3 or h4..but i cant figure it out.. seems simple

    Code html4:
    <div class="contentpad">
    <h3 class="aw">Header3</h3>
    <h4>header4</h4>
    </div>
    It isn't simple.

    A few points to consider:
    (a) Why do you not want the heading elements to be clickable? You don't have to have them styled as links, but unless there is a good reason to exclude them, I would just put an onClick event on the <div> and let it cover the whole lot.
    (b) Is the click going to be a link to another page, or an action? If it's a link, you should put an <a href="..."> around the key text or image content in the <div> so that it is accessible to people without Javascript fully operational.
    (c) What affordance are you giving that the div is clickable? Will there be any styling cues or other pointers that people can click on the <div> contents?

  11. #11
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    759
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    oddz, it might be unobtrusive but it's not going to be very graceful for the JavaScript deficient. I would go with what Alex said and include an anchor which spans the element in question (using z-index to overlay the element over any content if needed). It's semantic because it's providing an anchor related to the element (inside it) which directs the user... plus it requires no scripting (to remove the text just use a negative text-indent).
    Right. This would seem to be the best solution in my eyes.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx for the help i decided to go with Alex's solution since it doenst use javascript .. I'm not sure if I did it the right way because its not validating.. here what I have

    Code html4strict:
    <div class="pad"><a href="services/pages">
    <h3 class="aw">Pages</h3>
    <h4>text text text text.</h4>
    </a></div>

    Code css:
    .pad a{
    	display:block;
    	height:100&#37;;
    	width:100%;
    	}

    XHTML 1.0 Strict is the doctype

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    There was a CSS quiz on this actually.

    I'm not sure if I did it the right way because its not validating.. here what I have
    Your a is wrapping blocks still. A's are inline, headers are blocks. Inlines are like water and blocks are like buckets. Buckets can hold water but water can't hold a bucket. Except in HTML5, where it's legal to wrap an anchor around a block.

    The easiest pure-HTML solution is wrapping an anchor around every block element inside. Any click on any element inside would go to the same address. This makes for messy HTML code, but I'd do it.

    If the div is fixed height you could use an example from the CSS quiz... damn but they are numbered so finding it would take a while..

    *edit http://www.sitepoint.com/forums/showthread.php?t=602808 Quiz 2. I used it temporarily on a page before the client changed his mind on the design. IE6 was still a little wobbly but it's an interesting idea.

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by enwise View Post
    I'm not sure if I did it the right way because its not validating.. here what I have
    Hi,
    As Stomme poes explained your code is illegally nesting block level elements in an inline element. An anchor is an inline element and even if you change it's display to block via css the validator still sees it for what it is, an inline element.
    Quote Originally Posted by cooper.semantics View Post
    That method that cooper linked to is my preferred method. The absolute positioned anchor just sits there quietly on it's own and covers the entire div with width and height at 100&#37;. That takes care of dynamic heights in all browsers except IE6.

    http://www.css-lab.com/misc-test/click-div.html

    Quote Originally Posted by Stomme poes View Post
    The easiest pure-HTML solution is wrapping an anchor around every block element inside. Any click on any element inside would go to the same address. This makes for messy HTML code, but I'd do it.

    If the div is fixed height you could use an example from the CSS quiz... damn but they are numbered so finding it would take a while..

    *edit http://www.sitepoint.com/forums/showthread.php?t=602808 Quiz 2. I used it temporarily on a page before the client changed his mind on the design. IE6 was still a little wobbly but it's an interesting idea.
    That would be messy, I don't think I could bring myself to do that.

    Paul's Solution in Quiz#2 did use fixed heights for the sake of catering to IE6. In that example the anchor is still set as a block level whereas the nested span was the element that got the absolute positioning along with the defined height once again for IE6.

    It is possible to do this for dynamic heights in IE6 with the AP anchor method. IE6 will not give the BG color changing on hover though since it only supports :hover on an anchor.

    (Dynamic height div and anchor)
    http://www.css-lab.com/misc-test/click-div-4.html

    The BG color changing on hover in that example is coming from div:hover and IE6 would need the suckerfish hover script to comply.

    Sadly though this is another one of those situations where IE6 requires an extra foo div with overflow:hidden on it since it will only work with height:999em; for IE6 since it chokes on height:100% on AP elements.

    Once again IE spoils everything but you can give it just enough to work or bend over backwards and give it special attention if you want to support psedou hovers with a script.

    http://www.css-lab.com/misc-test/span-hover-ie6.html

    Hope that helps.

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ray
    That would be messy, I don't think I could bring myself to do that.
    I do it regularly... however this is in cases where two items or possibly possibly three in a box are supposed to be clickable... like both a small image AND the text and maybe also the header... if it were more items, then likely I wouldn't for the mess factor. I don't think I've had any boxes yet where many many items inside are clickable.

    What I don't like about the abso-po'd anchor solution is the inability to highlight text. So I would use it, but not where I think people would want to highlight or copy text.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •