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

Provide your CSS/Style also..

Ash
– Ash

2014-02-28 19:01:12 +00:00
Commented Feb 28, 2014 at 19:01 — Ash
– Ash, Commented Feb 28, 2014 at 19:01
provide a fiddle for this

Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria

2014-02-28 19:02:10 +00:00
Commented Feb 28, 2014 at 19:02 — Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria, Commented Feb 28, 2014 at 19:02
See stackoverflow.com/q/1403615/2126792

pschueller
– pschueller

2014-02-28 19:02:27 +00:00
Commented Feb 28, 2014 at 19:02 — pschueller
– pschueller, Commented Feb 28, 2014 at 19:02
Maybe duplicate of stackoverflow.com/questions/17965839/…

Charles Prakash Dasari
– Charles Prakash Dasari

2014-02-28 19:02:35 +00:00
Commented Feb 28, 2014 at 19:02 — Charles Prakash Dasari
– Charles Prakash Dasari, Commented Feb 28, 2014 at 19:02

adeneo · Accepted Answer · 2014-02-28 19:45:26Z

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, 2014 at 19:45

answered Feb 28, 2014 at 19:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Xander Over a year ago

I put this in the header, inside script tags. The height doesn't change back when clicking outside of it still.

Ibu Over a year ago

@Xander here is jsfiddle of this answer. Looks like it works.

Xander Over a year ago

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

adeneo Over a year ago

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.

Xander Over a year ago

@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 <script> is placed after that.

|

Collectives™ on Stack Overflow

Javascript change css when any other element is clicked

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related