JS script not working properly

Question

JS code:

function showCaption() {
    var captionVis = $('.grey-box-caption-text').css('display');    
    if(captionVis = "none") {
      $('.grey-box-caption-text').width(0);
      $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
    } else {
      $(this).find('.grey-box-caption-text').animate({'width': '0'},750,
                                                     function(){$(this).hide();});  
    }
};

$('.caption-container').click(function() {
    showCaption();
    return false;   
    }
 );

HTML code:

<div class="one-half column home-three-img">
   <div class="caption-container">
      <div class="grey-box-caption">
      </div>
      <div class="grey-box-caption-text">This is a caption test - Hopefully this works
      </div>
   </div>
   <img src="images/3.jpg">
</div>

This won't work and I'm a JS noob. Please help.

I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.

I have Jquery loaded properly and have a document.ready function that works.

Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html

It's hard to make a question more ambiguous than to just say _"it doesn't work"_ without any explanation. — Etheryte, Nov 24 '14 at 19:15
Sorry I really have no idea what's wrong with it. I edited my post though — alcoven, Nov 24 '14 at 19:17
When you have a JavaScript problem, the very first thing to do is check the browser console for errors. — Pointy, Nov 24 '14 at 19:21
First you should [lint](https://github.com/jshint/jshint) your code... — Prusse, Nov 24 '14 at 19:40
I think the last answer to [this SO question](http://stackoverflow.com/questions/13059201/jquery-toggle-on-custom-animation) is what you want. Check the first jsFiddle. — AWolf, Nov 24 '14 at 19:42

score 2 · Accepted Answer · answered Nov 24 '14 at 19:20

2

A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:

function showCaption(){
    var captionVis = $('.grey-box-caption-text').css('display');    
    if (captionVis == "none") {
        $('.grey-box-caption-text').width(0);
        $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
    }
    else {
        $(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
            $(this).hide();
        }); 
    }
};

and then change the handler assignment to:

$('.caption-container').click(showCaption);

Also note that your test in that if statement was incorrect: use == or === for comparison.

answered Nov 24 '14 at 19:20

Pointy

405,095
59
585
614

Will you show me the js I tried implementing this and it wasn't working. I think I may have entered it incorrectly – alcoven Nov 24 '14 at 19:25
@alcoven that *is* the JS. Have you checked the browser console to see if there are errors? There was a problem with a stray `}` in your original source, and the browser would complain about that. – Pointy Nov 24 '14 at 19:27
Ok so got rid of the stray but now it's adding width:15px to my div and that width is not specified anywhere ;[ – alcoven Nov 24 '14 at 19:31
@alcoven that sounds like a different issue. – Pointy Nov 24 '14 at 19:33
@alcoven [here is a working CodePen](http://codepen.io/Pointy/pen/KwpzMm) – Pointy Nov 24 '14 at 19:38
Yeah, Idk why this is happening. It's definitely from the JS though. It only happens on .click please help me. Let me know if you can check the site. My css and html should be perfect, it's just my JS. – alcoven Nov 24 '14 at 19:38
Thank you so much @Pointy You rule! just one question. Why does the the click function have to be set up with $("body").onclick("click", ... – alcoven Nov 24 '14 at 19:49
@alcoven it doesn't; I just did that out of habit. If you do it your way, make sure you set it up in a "ready" handler. – Pointy Nov 24 '14 at 19:51

score 1 · Answer 2 · answered Nov 24 '14 at 20:33

I modified the CodePen from Pointy a bit and it should do the same with less code.

Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".

function showCaption() {
  var $graybox = $('.grey-box-caption-text');

  $graybox.animate({
    width: 'toggle',
    opacity: 'toggle'
  }, 'slow');
};

$(function(){
 $("#wrapper").on("click", showCaption);
});

.grey-box-caption {
  min-height: 3em;
  min-width: 20px;
  background-color: #bbb;
  display: inline-block;
}
.grey-box-caption-text {
  display: none;
  padding: 1em;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class=grey-box-caption>
    <div class=grey-box-caption-text>
      Hello World this is some text.
    </div>
  </div>
</div>

Very nice! I'm now working making this work with multiple $greybox using $(this). You just killed it with that clean JS though. — alcoven, Nov 24 '14 at 22:12

JS script not working properly

2 Answers2