Opposite of onclick?

JavaScript
1

I have a div element that I want to change the border colour of when it is clicked on:

<div id="search" onclick="this.style.border='#000000 2px solid';" style="border:#CCCCCC 2px solid;"></div>

How do I change the colour back to its original state when the user clicks anywhere else on the page but within the div?

Thanks

Asa

2

I think the only way you can do this is to add an onclick eventhandler to document, which changes the style back to the original.

3

I’ve tried using jQuery to do it but I still can’t get it working:

<style>
.searchon {
border:#CCCCCC 1px solid;
height:20px;
}
</style>
</head>
<body>

<div id=“search”>Click me to turn border on</div>

<script>
$(document).ready(function(){

$("#search").click(function () {
  $(this).addClass("searchon");
});

$("body").click(function () {
  $("#search").removeClass("searchon");
});

});
</script>

4

Use the onblur event?

5

I don’t believe it. After two days of trying to get this to work all I needed to do was use onblur!

However, there are two problems:

  1. Hovering over some elements on the page causes it to lose focus without clicking on another element.

  2. onblur doesnt seem to work when some elements are placed within the container that has the onblur. I cant seem to figure out why this is. Putting a form inside it causes onblur not to work.

http://www.argyllnewmedia.co.uk/itrenz/test.php

6

Have you thought about a simple CSS solution?

<style type="text/css">

#search {

border: 2px solid #ccc;

}

#search:focus {

border-color: #000;

}

</style> 


<div id="search"></div>
7

Do pseudo-selectors like :focus work in IE (except on anchors) though? This would be a major stumbling block to a CSS solution.

8

IE7 (AFAIK) works fine, IE6 only works on anchors.

9

You can do this with jQuery easily:

$(document).ready(function() {
    $('#search').click(function(evt) {
        $(this).addClass('searchon');
        evt.stopPropagation();
    });
	
    $(document).click(function() {
        $('#search').removeClass('searchon');										
    });	
});

When you click the div, the class is added. When you click the document, the class is removed. The key is: evt.stopPropagation();

The event model in browsers lets an event pass up the chain of ancestors, so a click on the <div> will also be responded to by any click events attached to the document. In other words clicking the div will add the class, but then the document’s click handler will remove it. jQuery’s stopPropagation() method stops the event from passing up the chain to the document.

10

Seeing as this is only a style implementation, it maybe that it would not remove much functionality out of the form only style if the browser cannot render pseudo-selectors efficiently. Most modern browsers cater for pseudo-selectors, and even if a user still insists on using an older web browser, surely they would mind loosing a different color border round a focused form input?

Would it be worth calling in a javascript library to add a certain style change when a form input is selected? IMHO I do not think so.

11

Unfortunately the :focus pseudo-class doesn’t apply to a <div> (which is the original poster’s goal). If you want to toggle the appearance of that <div>, you’ll need a JavaScript solution.

12

Thanks sawmac that solution seems to work great:

http://www.argyllnewmedia.co.uk/itrenz/test.php

However, in my production site I cant get it to work:

http://www.trenzdirect.co.uk/index.php

Any idea’s why? I can’t see anything wrong…

13

Ah I figured it out. It was inside a php condition that only ran when google maps was required so the script never ran.