scriptygoddess

17 May, 2002

Count Up "timer"

Posted by: Jennifer In: Bookmarks

pretty neat huh? (well, I guess not the unemployed part.) To find the script to do that get it here. That site, Dynamic Drive, has some pretty cool other scripts too. :)

(p.s. Here's a question for the CSS goddesses – how do I add a margin to that layer? I know how to add a margin to a layer specified by a div tag – but this is some sort of weird "ilayer" – me no know css) 😉

update: stopped constant "count" as it seemed to have crashed someones browser. (so the count you see is static, but that is because I commented out a line that refreshes the count).

24 Responses to "Count Up "timer""

1 | kristine

May 17th, 2002 at 8:45 am

Avatar

I just did a google search, and it looks like ilayer and layer is a proprietery NN4 thing. But I'm seeing it here on IE6, so that doesn't make sense. Maybe the Javascript above it makes it work. (for reference – scroll down to Layers)

So, the css-goddess's answer? Put

<div style="background-color:lightblue; margin:20px;">around the layer and ilayer tags</div>

and it will ensure you get your margin. :) Because ilayer is so odd, I don't think you could guarentee it would work crossbrowser by adding anything else to it, 'specially if the JavaScript is causing it to work with the specs it was. me no know javascript! :giggle:

2 | Jennifer

May 17th, 2002 at 8:53 am

Avatar

nope… didn't work…
DOH!

Actually there's an ilayer tag around a layer tag… so maybe the ilayer is for NS, and the layer is for IE… Really weird script… And to think I was going to try and WRITE something that did that last night, now i'm kinda glad I gave up… would've ended up being a long night of frustration (and NO success!!) LOL!

3 | Lynda

May 17th, 2002 at 9:00 am

Avatar

Inside the script, where you see this:

document.write('<span id="countupie" style="width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')

try adding margin:20px into that style, like so:

document.write('<span id="countupie" style="margin:20px;width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')

4 | Jennifer

May 17th, 2002 at 9:00 am

Avatar

…and Kristine??!! What's with keeping all the great tutorial links to yourself, huh?? 😉 Post em up on the resource page!!! LOL!

(I'll add that last one in now)

5 | kristine

May 17th, 2002 at 9:01 am

Avatar

Hmmm… the layers might override the div? I don't know, that made sense to me!

Nope, both are propriety Netscape tags. And according to this article at webreference even N6 doesn't support them! So I really don't understand why they are working now!!! :)

It is a really cool counter, though! Its neato that its real time :)

6 | Jennifer

May 17th, 2002 at 9:05 am

Avatar

well – that didn't do it either – that just added (white) space around it. LOL!

7 | marc

May 17th, 2002 at 9:07 am

Avatar

There's also a countdown one too!

link

8 | Jennifer

May 17th, 2002 at 9:07 am

Avatar

NOW I got it… I changed the var "opentags" and "endtags" to include that open div (with the margin) and end div… YAY!

9 | kristine

May 17th, 2002 at 9:08 am

Avatar

Lynda, it says in the top of the script (when I view source) that adding height is only a NS4 attribute

LOL, I'm just searching google for things as I need them here! Although I do recognize both of these sites (webref and webdev), and really probably DO have them in my bookmarks :) I'll try and spend some time going through my bookmarks this weekend and adding some stuff to the resources page :)

I'm a library over here! My sisters know that when they need indepth research, even if they've already searched, they come to me, and I'll always pull something up :)

10 | Lynda

May 17th, 2002 at 9:12 am

Avatar

Try changing margin:20px to padding:20px;

Not sure what I was thinking.

11 | Lynda

May 17th, 2002 at 9:13 am

Avatar

Okay, y'all are too quick for me. Although Kristine, I wasn't speaking of the height so I'm not sure what you're talking about. 😉

Jenn's solution works, so awesome!

As for me, I will continue to stay away from Javascript at every turn because it royally confuses me. LOL.

12 | kristine

May 17th, 2002 at 9:25 am

Avatar

Okay, Lynda, you got me, I don't know where I came up with that. LOLOL!

That looks much better, Jenn! WTG!!! :)

And :giggle: I have a desire to know more JavaScript, but I just don't know enough yet to even understand more than copy and paste :) I know that if I learn JS, my css knowledge will be more powerful…. I really need some more dHTML in my system. Maybe this afternoon, I'll find some links for the scripts I used for the header on my site. Which I think is bratta, but I won't spoilt it until this afternoon :) It'll be a present to myself for making it through work 😉

13 | marc

May 17th, 2002 at 9:30 am

Avatar

Kristine – are you talking about the fact that, for me, changing the var countdownheight has NO effect? For me it just uses whatever height layer it needs to display the timer. I wonder if changing the Overflow attribute might effect it? ::scurries away to have a look ::

14 | Lynda

May 17th, 2002 at 9:31 am

Avatar

The thing I don't like about javascript is that it is client side, not serverside. A lot of stuff done with javascript can be done with PHP and if it CAN be done with PHP, I think it SHOULD be done with PHP as then it will work with everyone who can reach your page, not just people with the right browser.

The countup script can be done with PHP, although it can't change every second (just every time the page is loaded) because that requires the browser (client) to work.

Javascript also seems a bit more cryptic to me than PHP and I don't like how I can just view the source and get the code (makes people stealing scripts TOO easy)

It's just a personal thing with me. I've learned more about JS just being around Jenn, LOL – but I think javascript should be a last resort, so I try to look for PHP alternatives.

15 | Jennifer

May 17th, 2002 at 9:35 am

Avatar

Javascript can do some pretty cool things. I still like it…

…however – you can't DEPEND on it. I remember hearing that a scary number of people surf with javascript turned OFF! DOH!

It would be a good learning experience to try and figure out how to do that timer in PHP… Maybe that'll be my diversion this weekend.

16 | Lynda

May 17th, 2002 at 9:39 am

Avatar

I like it on other people's sites, but I have reservations about adding it to mine. :) And since I don't like using it on my own site, I don't think I'll ever get inclined enough to LEARN it.

17 | marc

May 17th, 2002 at 9:39 am

Avatar

D'oh – should have read the description of the "clip" attribute:

This parameter specifies the clipping rectangle (viewable area) of the layer, which can be less than the width and height of the content of the layer. If the CLIP attribute is omitted, the clipping rectangle of a layer is the same size as the HTML content of the layer. A layer will expand to contain all of its content by default

18 | kristine

May 17th, 2002 at 12:43 pm

Avatar

long ramble between work projects… :)

I read what you said, Lynda, just before I walked downstairs for breakfast, so I thought more about this on the way to work.

I've thought for a long time that i should have a good working knowledge of JavaScript mainly because I should be able to do dHTML. Because CSS+JavaScript is cool.

But ya know what else is cool? There isn't a fancy name (that I know of) for CSS+PHP, but when I think about it, I have done some pretty neato stuff with just a simple stylesheet and a bunch of PHP includes – my portal being a prime example.

So maybe instead of focusing my energies on JavaScript, I should be learning more PHP :) Not to say that I'll stop with JS – I'm using ImageReady-generated rollovers in a good portion of my graphic sets, and some dHTML scrollers…. but this thought came to me this morning, and I thought i'd share it :)

19 | wKen

May 17th, 2002 at 7:11 pm

Avatar

Just what I asked for. Thanks so much.

20 | Tricia

May 17th, 2002 at 11:37 pm

Avatar

Gaaaaaaahh!!!!!!!! Neato trick, but I hate it!! Completely crashed my browser the first time out, can barely type this comment, every time the count moves, I get the wait cursor…those of us with slower processors (120 mhz here) have a really hard time with things like this. Guess I need to stay away until this scrolls off the screen lol!

21 | Maggie

June 1st, 2002 at 7:47 am

Avatar

Thanks marc!! :o)

22 | shelli

August 17th, 2002 at 6:06 pm

Avatar

small code for countdown til christmas. I think its working properly on my site.
<!—start of countdown—->
<?

$day = 25; // Day of the countdown
$month = 12; // Month of the countdown
$year = 2002; // Year of the countdown

// mktime is the marked time, and time() is the current time.
$target = mktime(0,0,0,$month,$day,$year);
$diff = $target – time();

$days = ($diff – ($diff % 86400)) / 86400;
$diff = $diff – ($days * 86400);
$hours = ($diff – ($diff % 3600)) / 3600;
$diff = $diff – ($hours * 3600);
$minutes = ($diff – ($diff % 60)) / 60;
$diff = $diff – ($minutes * 60);
$seconds = ($diff – ($diff % 1)) / 1;

printf("There are $days days, $hours hours, $minutes minutes, $seconds seconds until Christmas");
?>

<!—end of countdown >

23 | Crystal

September 19th, 2002 at 3:48 am

Avatar

I'd really like to see that PHP countup script…

24 | Jennifer

September 19th, 2002 at 7:44 am

Avatar

Crystal – it's on this site..
here

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements