Javascript change css when any other element is clicked

Question

Right now I have a menu fixed to the bottom of the screen that is 35px in height, and when clicked it does this:

Javascript Code

    function slideChat() {
    div = document.getElementById('chat-slide');
    div.style.height = "100px";
    div.style.transition = "height .4s ease";
    }

HTML Code

 <div id="chat-slide" class="mobilechaticonON">
      <button onclick="javascript:slideChat();" class="mobilechat"><span></span></button>
      <br>
      <button class="smschat"><a href="bing.com"><span></span></a></button>
      <br>
      <button class="webchat"><a href="google.com"><span></span></a></button>
    </div>

CSS

.mobilechaticonON {
  display: block;
  height: 35px;
  position: fixed;
  bottom: 0;
  left: 21%;
  width: auto;
  padding: 5px 15px;
  background: #16a085;
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  z-index: 999;
  transition: height .4s ease;
 }
 .smschat span:before {
     content:"Chat through text message";
 }
 .webchat span:before {
     content:"Chat using web chat";
 }
 .mobilechat span:before {
     content:"Live Sales Chat - Online!";
 }
 .mobilechaticonON button {
     border: 0;
     background: transparent;
     height: 35px;
 }
 .mobilechaticonON button span:before {
     font-family: Arial;
     font-size: 1.2em;
     color: #fff;
 }

I'm trying to figure out a way to when the user clicks on something else outside of this div, the div goes back down to 35px instead of 100px. Not having any luck so far.

Here is a fiddle but I'm not sure why the initial slide function doesn't even work over there. Works fine on my normal page. O.o

Maybe duplicate of http://stackoverflow.com/questions/17965839/close-a-div-by-clicking-outside — Charles Prakash Dasari, Feb 28 '14 at 19:02

adeneo · Answer 1 · 2014-02-28T19:45:26.400

3

Target the document, and if the click originated from any element outside chat-slide, change the height back

$(document).on('click', function(e) {
    console.log('clicking anywhere works !');
    if ( ! $(e.target).closest('#chat-slide').length ) {
        $('#chat-slide').css('height', '35px');
    }
});

And if you're using jQuery (you tagged it with jQuery) use a proper event handler

$('.mobilechat').on('click', function() {
    console.log('clicking the button works !');
    $('#chat-slide').css({
        height: '100px',
        transition : 'height .4s ease' 
    });
});

and at the same time change

<button onclick="javascript:slideChat();" class="mobilechat">

to just

<button class="mobilechat">

edited Feb 28 '14 at 19:45

answered Feb 28 '14 at 19:03

adeneo

312,895
29
395
388

I put this in the header, inside script tags. The height doesn't change back when clicking outside of it still. – Xander Feb 28 '14 at 19:09
@Xander here is [jsfiddle](http://jsfiddle.net/LC93V/1/) of this answer. Looks like it works. – Ibu Feb 28 '14 at 19:20
Hm. On my actual website. It throws the errors "Uncaught ReferenceError: slideChat is not defined" and "Uncaught ReferenceError: hideChat is not defined". I put what was in the fiddle inside the header, inside script tags – Xander Feb 28 '14 at 19:24
1

That's your functions, it has nothing to do with this code! You placed your functions that you use for the inline handler out of scope, probably inside document ready. Get rid of those functions and use this instead. – adeneo Feb 28 '14 at 19:25
@adeneo D'oh. Okay so I removed those inline functions. The "onclick=" bit of codes. Now Chromes console throws no errors, but clicking the button doesn't do anything now. Blargh. Sorry guys. Struggling with this, really new to javascript. I know the site already has jquery 1.7.2 called, and this – Xander Feb 28 '14 at 19:32
Then add console.logs inside the click functions and start debugging and see that the clicking works etc. That way you'll learn how to figure things like this out. The code for clicking the document and filtering outside/inside a certain element is pretty standard, and most definitively works, you just have to figure out why it doesn't work on your site, and you're the only one who can do that. – adeneo Feb 28 '14 at 19:34
I added console.logs to the answer to show where you'd add them, the above code is added **inside** document.ready on your site somewhere – adeneo Feb 28 '14 at 19:46
@adeneo Dang. Okay that code is now inside my , inside of – Xander Feb 28 '14 at 19:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48717/discussion-between-xander-and-adeneo) – Xander Feb 28 '14 at 20:12

Javascript change css when any other element is clicked

1 Answers1