Add a Number to Another Number in JavaScript [Solved]

r3dux | June 19, 2010

Not Enough jQuery

LOLz!

Found at: http://techbuket.net/, where they have stacks more funny tech/geek pics…

Oh, and: jQuery

Comments
No Comments »
Categories
Coding, Humour
Tags
, ,
Comments rss Comments rss
Trackback Trackback

JavaScript: A Countdown Timer for Dates

r3dux | March 20, 2010

The mighty Shetboy’s heading down under to visit soon, so I thought I’d shove a JavaScript timer in the sidebar… There’s a lot of them out there, but the one I found didn’t work – so I fixed it.

Just shove this somewhere in the body section of a HTML document to see it work…

<script type="text/javascript">
<!-- Hide script from browsers with JavaScript disabled
 
function countdownTimer(targetYear, targetMonth, targetDay, targetHour, targetMinute)
{	
	// Get the current date
	var currentDate = new Date();
	currentYear = currentDate.getFullYear();
	currentMonth = currentDate.getMonth();                  
 
	// Convert the current date and target date into miliseconds. Because months start on 0 subtract 1 from target month.                       
	var currentMilliseconds = (new Date(currentYear, currentMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds())).getTime();                                 
	var targetMilliseconds  = (new Date(targetYear, targetMonth - 1, targetDay, targetHour, targetMinute, 00)).getTime();                  
 
	// Calculate the difference between the current date and target date in seconds                  
	var timeLeft = Math.round((targetMilliseconds - currentMilliseconds) / 1000);
 
	// If the time left is less than zero (i.e. the target date has arrived) cap it to zero
	if (timeLeft < 0)
	{
		timeLeft = 0;
	}
 
	// Work out days/hours/minutes/seconds
	var daysLeft = Math.floor(timeLeft / (60 * 60 * 24));
	timeLeft %= (60 * 60 * 24);
	var hoursLeft = Math.floor(timeLeft / (60 * 60));
	timeLeft %= (60 * 60);
	var minutesLeft = Math.floor(timeLeft / 60);
	timeLeft %= 60;
	var secondsLeft = timeLeft;            
 
	// Add on plural suffixes (PS) where required
	var daysPS = 's'; 
	var hoursPS = 's';
	var minutesPS = 's';
	var secondsPS = 's';
 
	// Nix the plural suffix after any occurence of "1"          
	if (daysLeft == 1) {
		daysPS = '';
	}
	if (hoursLeft == 1) {
		hoursPS = '';
	}
	if (minutesLeft == 1) { 
		minutesPS = '';
	}
	if (secondsLeft == 1) {
		secondsPS = '';
	}
 
	// Create the HTML output
	var timerHTML = daysLeft  + ' day' + daysPS + '<br />';
	timerHTML += hoursLeft + ' hour' + hoursPS   + '<br />';
	timerHTML += minutesLeft + ' minute' + minutesPS + ' and<br />';
	timerHTML += secondsLeft + ' second' + secondsPS + '!';
 
	// Display the timer on the screen
	document.write(timerHTML);
 
}
 
// Run the function once every 1000 milliseconds (i.e. once per second) to update the clock.
// *** THIS DOESN'T WORK - FUNCTION DOESN'T APPEAR TO BE CALLED AT PROVIDED INTERVAL =( ***
//setInterval("countdownTimer(2010, 3, 27, 23, 0, 1)", 1000);
 
// Just call the function once... At least that works. 
countdownTimer(2010, 3, 27, 23, 0, 1);
 
// End of JavaScript--> 
</script>

I’m a bit disappointed that the setInterval call doesn’t work to update the clock ticking down each second… I think it’s something to do with the function scope and references (as discussed here), but I’ve tried wrapping a function around the “proper” function, and calling the proper function from the wrapper, where the wrapper is the one passed to setInterval, but still no dice…

Would be super appreciative if any JavaScript coders out there know how to fix this issue :)

Comments
3 Comments »
Categories
Coding
Tags
, , , ,
Comments rss Comments rss
Trackback Trackback

How To: Scroll a Web-Page Background using JavaScript

r3dux | August 19, 2009

Update: As per request, modified to move the background in any direction and at any speed you’d like – all you have to do is change the vertSpeed, horizSpeed, and updateDelay variables to values of your choice! Oh, and I fixed up the jitter-on-wrap-around properly to use a better way of constraining the offsets which caters for all directions without letting the offsets hit any numerical limits.

I’m teaching a course titled Produce and Manipulate Digital Images at the moment, which along with the photography and photoshop type elements you’d expect, has to include an assignment for the students to incorporate digital photography into a multimedia sequence. I can get them to do the sequence in anything I deem appropriate: Flash, JavaScript, OpenGL if I wanna.. But considering the course after this (for this particular class) is on Multimedia Web Design, I thought maybe it might be an idea to do it in JavaScript, so I had a look around for JavaScript image manipulation and found this background image scroller (link now dead unfortunately).

Only it was a bit knackered and jumped when the (hard-coded, no less) background image height was reached. So I fixed it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
<!-- Original by Roy Sinclair. Update by r3dux, Nov 2010 --> 
<title>JavaScript Background Scroller</title>
 
<script type="text/javascript">
<!-- Hide script from browsers not playing nice w/ JavaScript
 
        // Function to scroll out background image
       function scrollBackground(imageWidth, imageHeight) {
 
            // Set our background offset. First field is horizontal offset, 2nd is vertical
            bgObject.style.backgroundPosition = horizOffset + " " + vertOffset;
 
            // Move image offset by given speeds
            horizOffset += horizSpeed;
	    vertOffset  += vertSpeed;
 
            // Reset our offsets when we've gone over (under if moving left or up) the size of the background image
	    if (Math.abs(horizOffset) > imageWidth)
	    {   
                if (horizOffset > 0)
		{
			horizOffset -= imageWidth;
		}
		else
		{
			horizOffset += imageWidth;
		}
            }
 
	    if (Math.abs(vertOffset) > imageHeight)
	    { 
		if (horizOffset > 0)
		{
			vertOffset -= imageHeight;
		}
		else
		{
			vertOffset += imageHeight;
		}
            }
 
       } // End of scrollBackground function
 
// End of JavaScript--> 
</script>
 
</head>
 
<!-- Kick off the document body and use our background image -->
<body background="./AU-Flag.gif">
 
<script type="text/javascript">
<!-- Hide script from browsers not playing nice w/ JavaScript
 
    // Movement controlling variables:
    // horizSpeed - positive values move the background to the right, negative to the left
    // vertSpeed  - positive values move the background downwards, negative values move it upwards
    // (Feel free to use fractional values, too i.e. 0.3 etc.)
    // updateDelay - how many milliseconds to wait before updating the screen with the new background position
    // (1000 ms in 1 second, lower values will move the background more often so it will appear to move faster, at the cost of increased CPU usage)
    var horizSpeed = 1; 
    var vertSpeed = 1.5;
    var updateDelay = 50;
 
    // Grab our background image
    var imgFile = new Image();
    imgFile.src = "./AU-Flag.gif"
 
    // Get the height and width of the image
    var imgHeight = imgFile.height;
    var imgWidth  = imgFile.width;
 
    // Set our initial background offset
    var horizOffset = 0;
    var vertOffset = 0;
 
    // Get our background var as the document body
    var bgObject = eval('document.body');
 
    // Kick off the scrolling. The second field is delay between updates in milliseconds.
    var ScrollTimer = window.setInterval("scrollBackground(" + imgWidth + "," + imgHeight + ")", updateDelay);
 
// End of JavaScript--> 
</script>
 
</body>
 
</html>

You can see it in action here. WoW! LoL! =P

Yeah… Gonna go with Flash CS4, methinks. But still, bit ‘o fun & all that…

P.S. If the background image doesn’t scroll, try re-loading the page… Not sure why but sometimes it just won’t go without having to do that… Very odd =/

Comments
4 Comments »
Categories
Coding
Tags
, , , ,
Comments rss Comments rss
Trackback Trackback