SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Campbeltown, Scotland
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    opposite of onclick?

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

    Code HTML4Strict:
    <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. #2
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Location
    The Wirral, England
    Posts
    1,294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "The proper function of man is to live - not to exist."
    Get a Free TomTom


  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Campbeltown, Scotland
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Use the onblur event?
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Campbeltown, Scotland
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you thought about a simple CSS solution?

    Code CSS:
    <style type="text/css">
     
    #search {
     
    border: 2px solid #ccc;
     
    }
     
    #search:focus {
     
    border-color: #000;
     
    }
     
    </style>

    Code HTML4Strict:
    <div id="search"></div>
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  7. #7
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Location
    The Wirral, England
    Posts
    1,294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    Have you thought about a simple CSS solution?
    Do pseudo-selectors like :focus work in IE (except on anchors) though? This would be a major stumbling block to a CSS solution.
    "The proper function of man is to live - not to exist."
    Get a Free TomTom


  8. #8
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigalreturns View Post
    Do pseudo-selectors like :focus work in IE (except on anchors) though? This would be a major stumbling block to a CSS solution.
    IE7 (AFAIK) works fine, IE6 only works on anchors.

  9. #9
    SitePoint Member
    Join Date
    May 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do this with jQuery easily:

    Code JavaScript:
    $(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. #10
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigalreturns View Post
    Do pseudo-selectors like :focus work in IE (except on anchors) though? This would be a major stumbling block to a CSS solution.
    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.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  11. #11
    SitePoint Member
    Join Date
    May 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    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.
    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. #12
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Campbeltown, Scotland
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Campbeltown, Scotland
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I figured it out. It was inside a php condition that only ran when google maps was required so the script never ran.


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
  •