1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with rubbable gif script

Discussion in 'JavaScript' started by lukeo25, Oct 31, 2015.

0
  1. #1
    Hi all,

    I am looking at producing a site with rubbable gifs. I found the .js files to do this on github but can't seem to get it working consistently.

    This is my html so far it loads the gifs and plays them instead of stopping them at the first frame and making them available for a user to scrub them back and forth. I have had this working on another box and ran everything via a localhost. But running it on another box using the same technique is proving unsuccessful. Html below.
    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
    <html>
    <head>

    <script type="text/javascript"src="./libgif.js"></script>
    <script type="text/javascript"src="./rubbable.js"></script>

    <title>
    ""
    </title>

    </head>

    <body>

    <center>
    <img id="scrub1" src="BBBBB.gif" alt="rub_test" rel:auto_play="0">
    <img id="scrub2" src="CCCC.gif" alt="rub_test" rel:auto_play="0">
    <img id="scrub3" src="DDDD.gif" alt="rub_test" rel:auto_play="0">
    <br>

    <script type="text/javascript">
    var sup1 = new RubbableGif({ gif: document.getElementById('scrub1') } );
    sup1.load();
    </script>
    <script type="text/javascript">
    var sup2 = new RubbableGif({ gif: document.getElementById('scrub2') } );
    sup2.load();
    </script>
    <script type="text/javascript">
    var sup3 = new RubbableGif({ gif: document.getElementById('scrub3') } );
    sup3.load();
    </script>

    </center>

    </body>

    </html>
    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

    Cheers
    Luke
     
    lukeo25, Oct 31, 2015 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #2
    Are you sure the syntax is correct? I can find nothing (http://www.w3schools.com/tags/tag_img.asp) that confirms your syntax.
     
    mmerlinn, Oct 31, 2015 IP
  3. lukeo25

    lukeo25 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hi mmerlin.

    This was the syntax taken from the example file at github.
    <img id="example2" src="./example_gifs/rub_test.gif" rel:auto_play="1" width="467" height="375" rel:rubbable="1" />
    I've only modified it slightly. But I think you might be on to something. I'm going to do some other modifications

    Cheers
     
    lukeo25, Oct 31, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    While I have no clue what a "rubbable gif" is -- the sound of it alone makes me think I don't want to know -- I'd say the problem is you removed the made-up fairy tale "So malfing ignorant of HTML they had no business writing JavaScript" rel:rubbable="1" attribute from the images you want targeted.

    BOTH of those rel:whatever attributes are gibberish markup, but removing the latter one is likely what "broke" the ineptly written scripting.

    *GOOGLES IT* Ah yes, broken interaction crap that I'd never put on a website in the first place...
     
    deathshadow, Nov 2, 2015 IP
  5. lukeo25

    lukeo25 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thanks deathshadow, To keep you up to date with the rest of us I suggest you do a "google search" that is pronounced "goo" gul" OK.
    By the way people use all sorts of code to do all sorts of things for all sorts of reasons.
     
    lukeo25, Nov 2, 2015 IP
  6. lukeo25

    lukeo25 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    What an unhelpful forum
     
    lukeo25, Nov 2, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Because I needed to be told to do something I said in the post I did.... and of course telling you it's a bad idea to do something WHILE STILL TELLING YOU HOW TO MAKE IT WORK is "unhelpful"

    RIGHT.

    To repeat the "solution" more verbosely:

    You did this:
    <img id="scrub1" src="BBBBB.gif" alt="rub_test" rel:auto_play="0">
<img id="scrub2" src="CCCC.gif" alt="rub_test" rel:auto_play="0">
<img id="scrub3" src="DDDD.gif" alt="rub_test" rel:auto_play="0">
    Code (markup):
    Which removed the rel:rubbable="1" from it.

    What you should likely have is this:

    <img id="scrub1" src="BBBBB.gif" alt="rub_test" rel:auto_play="0" rel:rubbable="1">
<img id="scrub2" src="CCCC.gif" alt="rub_test" rel:auto_play="0" rel:rubbable="1">
<img id="scrub3" src="DDDD.gif" alt="rub_test" rel:auto_play="0" rel:rubbable="1">
    Code (markup):
    Otherwise the script can't find them... you aren't saying they're rubbable.

    Though again, since there is NO SUCH THING as "rel:rubbable" in HTML whatsoever the creator of that script pulled fantasy-land out of their backside; for modern browsers that should be data- attributes, or for legacy (or even modern) I'd just use a class... since document.getElementsByClassName would be the easiest trigger to hook those with.

    Which is why whatever script you are trying to use (still not finding one that matches yours, and you don't have the post count to link yet) is ineptly coded rubbish...

    But sure, that wasn't "helping" at all... :/
     
    deathshadow, Nov 2, 2015 IP
  8. lukeo25

    lukeo25 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    So DeathShadow,

    Have you tried this and had a result?
    I just did it and I still can't get it to work. Yet I have done this on another box and it worked just fine.

    Cheers
     
    Last edited: Nov 2, 2015
    lukeo25, Nov 2, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    I tracked down the script you are using -- terrifyingly bad, but seems to work here with any animated GIF files I throw at it.

    usually when you have a problem like that, it's time to check that you have the files in the right places and with the right names. Do you actually have those same JS files in the same directory? Remember, "./" is not "../" - NOT that there is EVER a legitimate reason to type "./" in a url since that's the same as not saying it. :/

    Are you sure the GIF's you are trying to use are actually animated GIF's? Might sound odd, but it is something to check.

    If you have all the files in the same directory, and it's not working, I'd be looking at the GIF files you are trying to use as a possible culprit.

    Though again, I would REALLY just junk that script. For mouse-over paging of an image I prefer to just set a background on a span and slide the background around for the frames -- much like how the inaccurately named CSS sprite sheets work. That way you don't have to wait around for the JS to try and parse the GIF file to figure out it's frame markers, and you wouldn't be reliant on CANVAS to make it work.

    Much less avoiding making up attributes that don't even exist in the specification in the blind hope of it working -- again, whoever wrote that script doesn't know enough about HTML to be writing scripts for other people. Of course if you know ANYTHING about HTML the mere presence of a <center> tag in the demo should have waved you off!
     
    deathshadow, Nov 4, 2015 IP
  10. lukeo25

    lukeo25 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Deathshadaow Yep, 'followed your advice and am doing this with a sprite sheet now. Though I did finally get this to work.
    Thanks for the help
     
    lukeo25, Nov 6, 2015 IP