Show/Hide button with javascript

Question

I want to show/hide the button with class ".edit-one-button" within ".widget" by using the javascript below. However, the button is not hidden when I first load the page. Any idea what might went wrong?

<script type="text/javascript">
    $(function () {
      $('.edit-one-button').hide();  
      $('.widget').hover(function () {
        $(this).find('.edit-one-button').fadeIn(100);
      }, function () {
        $(this).find('.edit-one-button').fadeOut(100);
      });
    });
</script>

Good question. Not that either. The button shows up when I first load that page. The hover effect doesn't work either... — wcdomy
– wcdomy, Commented Jul 20, 2012 at 18:02
Have you included the jQuery library? Do you get any Javascript errors in the error console? — Guffa
– Guffa, Commented Jul 20, 2012 at 19:41
I included that. I do have an error which is saying another function was not built successfully. Will that affect this part??? — wcdomy
– wcdomy, Commented Jul 20, 2012 at 19:44
check your class names, - what do you get when you type " $('.edit-one-button')" in the console? — Jibi Abraham
– Jibi Abraham, Commented Jul 21, 2012 at 5:48
That's what I got: [input.edit-one-button Edit, input.edit-one-button Edit, input.edit-one-button Edit, input.edit-one-button Edit] — wcdomy
– wcdomy, Commented Jul 23, 2012 at 15:13

Christopher Marshall · Accepted Answer · 2012-07-20 16:48:50Z

2

You could also reverse the code so .edit-one-button has an inline style of display:none then add a class like .active on hover with display:block in the css rather than hide on load using javascript.

.edit-one-button {
  display:none;
}



$(function () { 
  $('.widget').hover(function () {
    $('.widget .edit-one-button').fadeIn(100);
  }, function () {
    $('.widget .edit-one-button').fadeOut(100);
  });
});

edited Jul 20, 2012 at 16:48

answered Jul 20, 2012 at 16:00

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

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

9 Comments

jfriend00 Over a year ago

The OP's code already is in document ready. They are using the $(fn) version which works the same as $(document).ready(fn).

Christopher Marshall Over a year ago

Still still good practice. The CSS solution I proposed is also relevant and would work.

Guffa Over a year ago

The code is already in the ready event. The op is using the shorthand.

wcdomy Over a year ago

Can you show me how to do that using the other way you mentioned? So it will all be done through css instead of javascript?

Guffa Over a year ago

Removed the downvote as the answer is not misleading now, but it still doesn't fix anything in the original code, it's just another way to do the same thing.

|

Collectives™ on Stack Overflow

Show/Hide button with javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related