Web Analytics Made Easy -
StatCounter Question: How To Make an Image Click Toggle ON/OFF a JQuery Snowfall Plug-in? - CodingForum

Announcement

Collapse
No announcement yet.

Question: How To Make an Image Click Toggle ON/OFF a JQuery Snowfall Plug-in?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery Question: How To Make an Image Click Toggle ON/OFF a JQuery Snowfall Plug-in?

    Hi:

    This is my first post. I've read both the FAQ and the Sticky on "How to post a Javascript question!", so hopefully I'll be able to properly communicate my issue. Here we go:

    First off, I'm a writer (not a coder!) and have recently completed a Christmas book which I'd like to start to promote ['tis (almost) the season] on my website. To this end, I created a webpage with the intention of including a couple of "fun" holiday bells and whistles. One of these was an audio plugin ("Amazing Audio Player") that can play "God Rest Ye Merry Gentlemen" (which is relevant to the book). And the most amazing thing about it was that I actually got it to work! [I know this is kid stuff to you, but I was unreasonably proud.] This success occurred because the cut-and-paste instructions for Amazing Audio Player were amazingly clear and simple. However...

    For the second "fun" holiday feature, I wanted to include a plugin that would make it snow on the webpage, but only if/when the reader wanted it to, i.e., no "autostart". And so began several days of a particular kind of hell for me, as I searched and researched online, finding several candidates and trying to understand the rudiments of Javascript, but never getting anything to look or behave how I wanted.

    This is the webpage in question:

    03 Special Page

    The primitive nature of my website should tell you all you need to know about my level of programming knowledge, i.e., I barely understand HTML enough to be able to use a WYSIWYG editior ("Kompozer"), let alone CSS and Javascript.

    You can also see in the upper right quadrant of this page how far I got and what I'm trying to achieve. It's pretty simple, really: When someone visits the page, I'd like for them to be able to click the image of the snowflake, and make it start snowing. Click it again, and the snow will stop (i.e., disappear).

    I have since learned that this may be more accurately described as toggling the Javascript function from "RUN" (or "ON") to "CLEAR" (or "OFF").

    Further, I have found a plugin online that pretty much does this, and looks pretty close to the way I'd like it to look when snowing:

    http://loktar00.github.io/JQuery-Snowfall/

    If you click on the button in the upper left corner that says "Click to clear", the snowflakes disappear. If you then click on the button next to it that says "Rounded", they reappear, and in the size and look that I like. Clicking between these two buttons achieves the exact effect I'd like in terms of an "ON/OFF" switch in the form of my webpage's snowflake image.

    But I have no idea how to make this happen.

    I tried. I looked at the source code of the above demo page and tried to apply the buttons to my site, but there were two problems: 1. I couldn't get any buttons to work, let alone make them work in connection with my snowflake image; and 2. I couldn't even figure out how to make the JQuery-Snowfall plugin (snowfall.jquery.js) load, even after I found the contents of the file written out in a nice, formatted file:

    https://github.com/loktar00/JQuery-S...fall.jquery.js

    Rather than relate every gruesome failure, I should probably just try to summarize what I'm after here (if it's even possible):

    - I'd like to use this JQuery-Snowfall plugin on my webpage (I'll be uploading the customized .js file to my site, as I did for Amazing Audio Player), such that it turns "ON" (or runs) (in "Rounded" snowflake mode) when the image of the snowflake on my website is clicked, and turns "OFF" (or clears) when the image is clicked again, i.e, my snowflake image becomes an ON/OFF toggle "button" for the JQuery-Snowfall plugin.

    [Perhaps the following related link will help, as it contains some code (which I tried - not really knowing where or how to use it) that purports to be about "invoking" the snow, and "clearing" it: Snowfall 1.6 | Somethinghitme]

    Again, though I've done considerable reading in the past several days, I'll yet plead complete ignorance of Javascript, with the aim being to invoke the mercy of those who might help in the form of very simple, caveman-like directions on the order of step-by-step instructions to a child on how to tie his shoes.

    As I said, I'm a writer, not a coder.

    But I already have increased respect for those who can claim the latter!

    Thanks for reading all this,

    Todd

  • #2
    https://jsfiddle.net/3qf0w8dx/7/


    first, make sure to get the snowfall.js file and call it after you call jQuery.js.

    http://loktar00.github.io/JQuery-Sno....jquery.min.js

    then you can do something like:

    Code:
    $(document).ready(function(){
      $('.toggleSnow').on('click',function(){
      	if($('body').hasClass('snowing')){
        	$(document).snowfall('clear');
          $('body').removeClass('snowing');
        } else {
        	$(document).snowfall();
          $('body').addClass('snowing');  
        }
      });
    });
    Give your image a class of toggleSnow.

    So what it does is, when you click the image with that class (toggleSnow) it sees if the <body> has the class of snowing. If it doesn't, it gives it that class and calls snowfall(). If, on click, the body does have the class of snowing, it removes the class and call snowfall('clear')
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

    Comment


    • #3
      @harbingerOTV:

      First off, thanks so much for your reply.

      The good news is, your example page linked at jsfiddle.net is pretty much exactly what I'm looking for.

      The bad news is, I haven't gotten it to work for me. This is probably due to the fact that I don't really know how to "make sure to get the snowfall.js file and call it after you call jQuery.js". I'm also probably not embedding your code properly, either.

      I did, however, give it a few different tries, so for anyone who may still be reading this thread, this is where I am right now, i.e., my best guess as to how it "should" work (but doesn't). I uploaded a snowfall test page to my website, which you can see here:

      test2

      More importantly, this is the code for the page (or you can "View >> Page Source" on your browser):

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html><head>
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>test2</title>
      
      <script src="jquery-3.1.0.min.js"></script>
      <script src="snowfall.jquery.js"></script>
      </head>
      <body>
      <div style="text-align: center;"><big><big><big><span style="font-weight: bold;">This is Test2 page.</span></big></big></big><br>
      </div>
      <br>
      <img class="toggleSnow" style="width: 72px; height: 72px;" alt="Snowflake Button" src="Snowflake%20Button.png"><br>
      <div class="toggleSnow">clicky clicky</div>
      <script src="snowfall.jquery.js" type="text/javascript" $(document).ready(function="" $('.togglesnow').on('click',function="" if($('body').hasclass('snowing="" $(document).snowfall('clear="" $('body').removeclass('snowing="" else="" {="" $(document).snowfall="" $('body').addclass('snowing="" }=""></script>
      </body></html>
      The longest line above is a cut-and-paste from harbingerOTV's code (except I added src="snowfall.jquery.js" and wrapped it all in <script> tags) (which may or my not be correct).

      Obviously, the snow isn't "invoked" or "cleared" by clicking either my image, or the "clicky clicky" toggle.

      Also, obviously, I don't know why.

      Note that I customized the "jquery.snowfall.js" file (on Notepad) by changing the flake color to light blue (#99ccff) (so that it could be seen against a white background) and flake size "round" value to "true" (a fatter flake, which is what I visually prefer).

      Also note that I uploaded both the "jquery-3.1.0.min.js" file (which I downloaded directly from the jQuery site) and the (customized) "snowfall.jquery.js" file to the same local folder ("zTest2") as my HTML page (test2.html). In other words, these should be available "locally" (if that's the correct term), and not need to be "called" from some "remote" site?

      So, I guess the question is: Is there some sort of formatting or syntax error I'm unwittingly committing?

      I hope I've provided enough information. I have a feeling that the mistake I'm making is probably a pretty basic one, but remember, I know almost nothing about Javascript...

      ...and the more I read (almost a week now, off and on!), the more confused I seem to get!

      Any additional help would be most appreciated,

      Todd

      Comment


      • #4
        CLOSED: I Think I Got It!

        After many more trials and errors, I think I may have finally solved my Javascript snowfall issue.

        For any interested, here is the webpage in its final, (apparently) functional form:

        03 Special Page

        These were the keys to making it finally work:

        1. Calling JQuery:

        I finally found a way to call JQuery in the <head> of the page that worked:

        Code:
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        It's worth noting that this <script> had to be placed BEFORE the <script> that called "Amazing Audio Player", or else the player itself would not display (the final frustration - "oh, so close!" - that I was finally able to overcome).

        2. Invoking The Snow:

        I also found out that the actual (customized) Javascript Snowfall Plugin had to be called in the <body> of the document, just before any commands involving it:

        Code:
        <script src="snowfall.jquery.js"></script>
        
        <script type="text/javascript"> $(document).ready(function(){
        $('.toggleSnow').on('click',function(){
        if($('body').hasClass('snowing')){
        $(document).snowfall('clear');
        $('body').removeClass('snowing');
        } else {
        $(document).snowfall({round : true, minSize: 5, maxSize:8});
        $('body').addClass('snowing'); }
        });
        });
        </script>
        If this looks a lot like harbingerOTV's code, that's because it is. The one alteration I had to make was changing the call for snow after "else" from a plain $(document).snowfall() to the more detailed $(document).snowfall({round : true, minSize: 5, maxSize:8}). Why? Because, for some reason, even after customizing the snowfall.jquery.js file to select "rounded" flakes (round : true), it wasn't snowing that way on my website. So I looked at those empty parenthesis in the command line and thought, "input variables?", and then gave it a try.

        I'll (humblebrag) admit, it was my finest moment of this whole process!

        3. Finally, the Snowflake Image as ON/OFF Toggle Switch:

        I simply added a "class=toggleSnow" attribute to my <img>, as harbingerOTV suggested, and that was that.

        I'm still pretty amazed this all worked...

        ...and all it took was (mumble, mumble) hours!

        Next time, I think I'll look into hiring the infinitely more qualified!

        Thanks again to all who read this, and particularly, of course, harbingerOTV.

        With Tidings of Comfort and Joy,

        Todd

        Comment


        • #5
          Good deal.

          Sounds like you were having dependency issues. The snowfall.js and your audio script both need jQuery to work so yeah, you needed to call jQuery.js before any other script that needs it other wise the "$ (or jQuery) is undefined" error.
          Stop making things so hard on yourself.
          i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

          Comment

          Working...
          X