...

View Full Version : Clickable Area for Div



Sammy12
11-06-2011, 05:29 AM
Hello,

I have a div acting as a large clickable area (button) using cursor: pointer;. However, since there is text within it, when a user clicks the button and drags his mouse, he can accidently highlight everything and his cursor changes to text.



user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;


This stops the user from selecting, however the user's cursor still changes to text. how can I prevent this without using <button> or <a> (which changes the cursor to default)

jajamiharja
11-06-2011, 06:16 PM
Hmmmm. sorry bro. i do'nt have solution:)

Sammy12
11-06-2011, 06:31 PM
lol thanks for at least replying + bumping the thread

hopefully one of the big dogs will help me with this. I'm sure this problem has happened before.

hawaiiwebdesign
11-06-2011, 10:55 PM
use CSS cursor [pointer]

Sammy12
11-06-2011, 11:21 PM
use CSS cursor [pointer]

...no that does not work. It's implied that I already used cursor: pointer;. When a user clicks down on the button and holds for 2 sec, the cursor changes to text.

Excavator
11-06-2011, 11:33 PM
Hello Sammy12,
I'm not sure why you don't want to use an anchor, there are still a lot of browsers in use that need to use anchor to be clickable.

What does this do for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
cursor: pointer;
}
#container {
width: 800px;
margin: 30px auto;
padding: 20px 0 300px 20px;
background: #999;
overflow: auto;
}
a {
height: 50px;
width: 100px;
display: block;
line-height: 50px;
text-align: center;
text-decoration: none;
color: #000;
background: #f00;
}
</style>
</head>
<body>
<div id="container">
<a href="">some text</a>
<!--end container--></div>
</body>
</html>

Sammy12
11-06-2011, 11:43 PM
change the <a> to a <div>
then click and hold on the div or click and drag

there's where my problem is a) the area is selectable (solved that) b) the cursor changes to text

Excavator
11-07-2011, 12:06 AM
Look at this in FF and see if that's what you're looking for. Still not right in IE...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 20px 0 300px 20px;
background: #999;
overflow: auto;
}
#linked {
height: 50px;
width: 100px;
display: block;
line-height: 50px;
text-align: center;
text-decoration: none;
cursor: pointer;
color: #000;
background: #f00;
}
#linked span {
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="linked"><span>some text</span></div>
<!--end container--></div>
</body>
</html>

Sammy12
11-07-2011, 12:08 AM
YES, i tested in chrome and ff

that's funny, let me check why my website doesn't do that




EDIT: wait no, could you get it for a <div> :P I would have just used a <button> if I wanted to use an inline element :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum