Online since 2002. Over 3300 puzzles, 2600 worldwide members, and 270,000 messages.

TwistyPuzzles.com Forum

It is currently Sat Apr 19, 2014 10:35 pm

All times are UTC - 5 hours



Post new topic Reply to topic  [ 13 posts ] 
Author Message
 Post subject: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 8:51 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Hey everyone! I'm trying to do something that I've done before years ago, but can't for the life of me figure out how to do now. I'm trying to simulate an animated GIF using PNGs. Obviously, I'm trying to use JavaScript, but it's been nearly five years since I've done any programming. Can someone help me with this, please?

Basically, what I want to do is have a rotating background image for a table cell. I've seen some scripts out there for something similar...just not in a table cell. That's my problem. Any help would be greatly appreciated.

And I hate to sound rude, but time is a factor. :D

Thanks!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:11 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Sorry for the bump, but I still need help with this. Here's what I've got so far.

JavaScript File
Code:
var bannerImg = new Array();
  bannerImg[0]="image1.png";
  bannerImg[1]="image2.png";

var newbanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newbanner++;
  if (newbanner == totalBan) {
    newbanner = 0;
  }
  document.banner.src=bannerImg[newbanner];
  setTimeout("cycleBan()", 3*1000);
}
window.onload=cycleBan;

Head of HTML Page
Code:
<script type="text/javascript" src="banner.js"></script>

Body of HTML Page
Code:
<img id="banner">

All I need is for this to be modified slightly so that it can be called to a table background instead of an img tag. Thanks!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:25 am 
Offline
User avatar

Joined: Fri Feb 08, 2008 1:47 am
Location: near Utrecht, Netherlands
In your table:
Code:
<td id="something"></td>


In your script:
Code:
document.getElementById("something").style.background="url(someimage.png)";

_________________
Tom's Shapeways Puzzle Shop - your order from my shop includes free stickers!
Tom's Puzzle Website


Buy my mass produced puzzles at Mefferts:
- 4x4x6 Cuboid for just $38
- Curvy Copter for just $18
- 3x4x5 Cuboid for just $34


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:33 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Thanks for the reply, TomZ! Where in my script do I put that? Thanks, again!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:35 am 
Offline
User avatar

Joined: Wed Jan 21, 2009 12:58 pm
TomZ code is almost perfect. Here's a little adaptation that will work with the existing code, this is a modification of your existing external JavaScript banner.js (it replaces the line that starts with document.banner.src)
Code:
  document.getElementById('banner').style.background="url("+bannerImg[newbanner]+")";

Don't forget the CSS also inside HEAD:
Code:
<style type="text/css">
#banner {
   background-image: url(image1.png);
}
</style>

Also, your cell will be:
Code:
<td id="banner"></td>


Skarabajo.

_________________
My collection | My first mod | Making of first mod | Items for sale


Last edited by Skarabajo on Tue Apr 12, 2011 10:40 am, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:40 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Thanks, Skarabajo, but that just posted image1.png. as the background image. It does not rotate the images. Any idea why it's not working for me?

Thanks, again!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:43 am 
Offline
User avatar

Joined: Wed Jan 21, 2009 12:58 pm
I tried the above code, it works perfectly. Simply double check everything: the external JavaScript, the CSS, the ID of the TD.

Maybe you should repost every part here again, or maybe this should now go to PM...

Skarabajo.

_________________
My collection | My first mod | Making of first mod | Items for sale


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:47 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
I'll post it here one more time then go to PM. Thanks!

Here you go! Switched everything to "back" instead of "banner."

JavaScript File
Code:
var backImg = new Array();
  backImg[0]="50years.png";
  backImg[1]="lewis.png";

var newback = 0;
var totalBack = backImg.length;

function cycleBack() {
  newback++;
  if (newback == totalBack) {
    newback = 0;
  }
  document.getElementById('back').style.background="url("+backImg[newback]+")";
  setTimeout("cycleBack()", 3*1000);
}
window.onload=cycleBack;

Head of HTML Page
Code:
<script type="text/javascript" src="back.js"></script>

<style type="text/css">
#back {
   background-image: url(50years.png);
}
</style>

Body of HTML Page
Code:
<table id="back"></table>


Tried in the TD tag and it still didn't work. Thanks, again! I really appreciate the help!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:51 am 
Offline
User avatar

Joined: Wed Jan 21, 2009 12:58 pm
It will definately work... the TD tag is part of the TABLE tag. See example below of a 3x3 empty table with one cell that has the ID:
Code:
<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td id="back">&nbsp;</td>
  </tr>
</table>

Skarabajo.

_________________
My collection | My first mod | Making of first mod | Items for sale


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 10:52 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Nevermind! It works! It was a stupid error on my part. Thank you guys soooooooo much! This was for my mother's anniversary so she'll love it. Thanks, again!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 11:09 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Actually, when I post it into my full script it doesn't work anymore. Would someone mind taking a look at my entire script to see what may be causing the issue? Let me know! Thank you, guys!

- Billy


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 11:12 am 
Offline
User avatar

Joined: Fri Dec 08, 2000 2:32 am
Location: San Francisco, CA
You may want to pre-load the images as well. Here's my take on the problem:
Code:
window.onload = function () {
    var images = ["images/pic1.png", "images/pic2.png", "images/pic3.png"],
        interval = 300,
        target = document.getElementById('back');

    // returns a function; after the function is called "count" times, "then" will be called
    function after(count, then) {
        return function () {
            count -= 1;
            if (count === 0) { then(); }
        };
    }

    // start the animation loop
    function start() {
        var cur = 0;

        setInterval(function () {
            target.style.backgroundImage = 'url("' + images[cur] + '")';
            cur = (cur + 1) % images.length;
        }, interval);
    }

    // pre-load the images
    (function () {
        var i, img, callback = after(images.length, start);

        for (i = 0; i < images.length; i += 1) {
            img = new Image();
            img.onload = callback;
            img.src = images[i];
        }
    }());
};


Top
 Profile  
 
 Post subject: Re: Any JavaScript experts out there?
PostPosted: Tue Apr 12, 2011 11:58 am 
Offline
User avatar

Joined: Wed Sep 10, 2008 6:22 pm
Well, all is well. Thank you all for your help! It works perfectly now. You guys are great! Consider this topic closed. :D

- Billy


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  

Forum powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group