How to default hide this javascript balloon?

Question

I'm using a great Javascript popup balloon from here http://file.urin.take-uma.net/jquery.balloon.js-Demo.html .

The following code functions great, but the balloon is shown by default when the page loads. How can I make the balloon hidden on load and appear only when the image is clicked?:

<script>
$(function() {
    $("#myballoon > img").showBalloon({
                position: "right",
                css: {}
            }).toggle(function() { $(this).hideBalloon(); }, function() { $(this).showBalloon(); });

        });
</script>

Thank you!

set the style of the balloon to `display:none` – Harsha Venkataramu Jun 19 '13 at 09:51 — Harsha Venkataramu, Jun 19 '13 at 09:51

score 1 · Answer 1 · answered Jun 19 '13 at 09:59

1

Add this css to your page:

#myballoon > img { display:none; }

that is assuming showBallon() acts on the image & not the parent (#myballoon) element

answered Jun 19 '13 at 09:59

Precastic

3,742
1
24
29

score 0 · Answer 2 · answered Jun 19 '13 at 10:00

0

By default, with Jquery.Just add on document ready this.

$("#myballoon > img").hide();

answered Jun 19 '13 at 10:00

wandarkaf

1,839
20
30

Hmm I couldn't get this method or that of @Precastic to work. I've added this in a new script after the code in the OP: . Perhaps you can tell me what needs to be changed? – dk9000 Jun 20 '13 at 08:14
$(document).ready(function() {jQuery("#myballoon > img").hide(); /*then your balloon function*/}); – wandarkaf Jun 20 '13 at 08:25

How to default hide this javascript balloon?

2 Answers2