JAVASCRIPT Code Example: Javascript photo-viewer that works in four browsers

My name is Edward Tanguay. I am a web developer in Berlin, Germany. I learn everything I can and record it on this site.

Other things you might be looking for:

My Ubuntu Tutorial

My Datapod Project

My Blog Feed:

- Code Examples

JAVASCRIPT CODE EXAMPLE - added on July 6, 2008

Javascript photo-viewer that works in four browsers

This was a little experiment to get a useful base of cross-browser code that does some interactive stuff in Javascript. It is simple but handles mouseover, button highlight, and just has a nice, basic feel. The only issue is in Opera the text is at top of the buttons, but didn't have any nerves left for that one. At first I tried using :hover and :focus which brought me to the conclusion that this really isn't standard between the browsers so used onmouseover and onmouseout to deal with it. Also worked out a number of quirks that various browsers had, e.g. I removed the ugly dotted focus line in Firefox on the buttons, they left it there in Firefox 3 as well I noticed, I replaced it with a gradient background for the focussed button. So this code looks decent in Firefox 2/3, Internet Explorer 7 (probably 6 too), Opera 9.5 (in fact only after I upgraded from 8 did it show the background on the buttons), and Safari. The bad boy of the group is Opera, but since opera gets embedded in quite a number of devices these days (e.g. Philips TVs), you don't want to leave it out completely. You can view this example online here. Of course next step when implementing this is to make it read from a database or XML file, I just wanted to get the browser-compatibility as accurate as possible first.

index.htm
----------------
<html>
	<head>
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="javascript/main.js"></script>

</head>

<body>

<p id="title">Berlin AirportRun Half Marathon 2008</p>

<div id="menu">
	<button id="button1" class="button" onclick="executeButton1(this)" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)">Tree-Lined Roads</button>
	<button id="button2" class="button" onclick="executeButton2(this)" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)">Perspective</button>
	<button id="button3" class="button" onclick="executeButton3(this)" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)">Kilometer 19</button>
	<button id="button4" class="button" onclick="executeButton4(this)" onmouseover="buttonOver(this)" onmouseout="buttonOut(this)">Finished</button>
</div>

<div id="description">asfsdf</div>

</body>

</html>

main.css
--------------------
* {
	margin: 0px;
	padding: 0px;
}
ul {
	margin-left: 30px;	
}

#description {
	width: 640px;
	height: 200px;
	display: block;	
	left: 230px;
	top: 590px;
	position: absolute;
	font-size: 18pt;
}

#button1 {
	width: 200px;
	height: 50px;
	font-size: 14pt;
	position: absolute;
	top: 100px;
	left: 10px;
}

#button2 {
	width: 200px;
	height: 50px;
	font-size: 14pt;
	position: absolute;
	top: 170px;
	left: 10px;
}

#button3 {
	width: 200px;
	height: 50px;
	font-size: 14pt;
	position: absolute;
	top: 240px;
	left: 10px;
}

#button4 {
	width: 200px;
	height: 50px;
	font-size: 14pt;
	position: absolute;
	top: 310px;
	left: 10px;
}

.button {
	border: 2px #ccc outset;
	background-color: #ddd;
	cursor: pointer;
	cursor: hand;
	outline-style: none;
	-moz-outline-style:none;
	outline: none;
	-moz-outline-style: none;
}

#image {
	width:640px;
	height: 480px;
	padding:0px;
	border: 1px solid #555;
	position: absolute;
	left: 230px;
	top: 100px;
}

#title {
	position: absolute;
	top: 15px;
	left: 10px;
	font-size: 36pt;	
}

main.js
-------------

window.onload = initialize;

function initialize() {
	
	//variables
	var button1 = document.getElementById("button1");
	
	//click it
	button1.click();
	
}

function executeButton1(button) {

//variables
	var description = document.getElementById("description");
	var image = document.getElementById("image");

//change description
	description.innerHTML = "Tree-lined roads delivered much-needed shade.";
	
	//change image
	image.style.display = "block";
	image.src = "images/trees.jpg";
	
	//set button focus
	clearFocusOnButtons();
	button.blur();
	button.style.background = "#000 url(images/gradient.jpg)";
}

function executeButton2(button) {

//variables
	var description = document.getElementById("description");
	var image = document.getElementById("image");

//change description
	description.innerHTML = "Runners as far as you can see.";
	
	//change image
	image.style.display = "block";
	image.src = "images/longway.jpg";	
	
	//set button focus
	clearFocusOnButtons();
	button.blur();
	button.style.background = "#000 url(images/gradient.jpg)";
	
}

function executeButton3(button) {

//variables
	var description = document.getElementById("description");
	var image = document.getElementById("image");

//change description
	description.innerHTML = "Nice to see the kilometer sign approaching 21.";
	
	//change image
	image.style.display = "block";
	image.src = "images/kilometer19.jpg";	
	
	//set button focus
	clearFocusOnButtons();
	button.blur();
	button.style.background = "#000 url(images/gradient.jpg)";
	
}

function executeButton4(button) {

//variables
	var description = document.getElementById("description");
	var image = document.getElementById("image");
	
	//description
	description.innerHTML = "When does an ice cream taste best? At the end of a half marathon.";
	
	//change image
	image.style.display = "block";
	image.src = "images/finish.jpg";	
	
	//set button focus
	clearFocusOnButtons();
	button.blur();
	button.style.background = "#000 url(images/gradient.jpg)";
	
}

function buttonOver(button) {
	button.style.border = "3px #999 outset";
}

function buttonOut(button) {
	button.style.border = "2px #ccc outset";
}

function clearFocusOnButtons() {
	document.getElementById("button1").style.background = "#ccc";
	document.getElementById("button2").style.background = "#ccc";
	document.getElementById("button3").style.background = "#ccc";
	document.getElementById("button4").style.background = "#ccc";

}

post comment or question

Similar Code Examples:

JAVASCRIPT CODE EXAMPLE - added on July 3, 2008

How to display random quotes with Javascript.

This code uses the setInterval method to call a showQuote() function every 7 seconds, check out the online example.

SHOW CODE

TooTall: just curious why the first set of quotation marks are covered by some letters...and if there is a way to fix this? reply

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 1, 2008

How to set simple cross-browser Javascript event handlers

This code runs in Explorer, Firefox, Opera and Safari, simple code that enables you to attach Javascript functions to button clicks, etc.

SHOW CODE

post comment or question

JAVASCRIPT CODE EXAMPLE - added on September 27, 2007

How to implement a quick calendar control

I needed a quick feature on a website which would allow a user to select a date from a popup calendar and have it inserted automatically in a text field in the format 2007-12-31, found Matt Kruse's free script called calendarpopup which I integrated into my site in about 10 minutes. Display the source code, then copy it into a .js file called "thirdParty/calendarPopup/calendarPopup.js", then use the following code to run a sample, then build it into your site.

SHOW CODE

kalrav: i could not found calender control can you please give me code in php reply

Anonymous: I want to implement a Calendar on a FORM having formid in JSF reply

post comment or question

JAVASCRIPT CODE EXAMPLE - added on August 19, 2007

How to play an audio file by clicking a link

This code plays two different .wav files depending on which link you click. I tested it in IE6 and Firefox2. Works nicely for short files (e.g. pronouncing words on an educational site) or for intranet applications. Explorer will use Windows Media Player and for Firefox you have to install QuickTime, an easy install.

SHOW CODE

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 11, 2007

How to emulate a button in javascript

If you need to emulate a button for some reason, this code will get you started. It also flips through an array of texts so if you wanted to make a slideshow of texts or pictures, this would be good base code.

SHOW CODE

==codeExample
javascript
How to emulate a button in javascript
If you need to emulate a button for some reason, this code will get you started. It also flips through an array of texts so if you wanted to make a slideshow of texts or pictures, this would be good base code.
[[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Javascript</title>

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 10, 2007

How to make an HTML form interactive with javascript

Here is a functioning example of some base features you can build into a form with javascript to make it interactive, i.e. fill out other fields as a dropdown item is selected, etc.

SHOW CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Javascript</title>

</script>
			
			<style type="text/css">
			
				table.form {
					border-collapse: collapse;
				}
				table.form td {
					border: 1px solid #ddd;
					padding: 5px;
					background-color: beige;
					font-size: 10pt;
					font-family: arial;
					font-weight: normal;
				}
				
				
			</style>
			
	</head>
	
	<body>
		<form action="" id="main">															
			<table class="form">
				<tr>
					<td>Product</td>
					<td>
						<select name="product" onchange="changeProduct()">
							<option value="choose">Please Choose...</option>
							<option value="product1">Book 1</option>
							<option value="product2">Book 2</option>
							<option value="product3">Book 3</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Number of Items</td>
					<td style="text-align: right"><input type="text" id="numberOfItems" name="numberOfItems" value="1" style="text-align: right; width:60px" onblur="calculate()" /></td>
				</tr>
				<tr>
					<td>Price</td>
					<td style="text-align: right"><span id="price"/></td>
				</tr>
				<tr>
					<td>Amount</td>
					<td style="text-align: right"><span id="amount"/></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="Send"/></td>
				</tr>
			</table>
		</form>
	
	</body>
	
</html>

Kevin: I'm looking through this but I can't figure out where the data goes when you select your items and hit the 'Send' button

Wayne Boyd: In this example, the action is set to "" in the line: <form action="" id="main"> So it doesn't go anywhere or do anything unless you edit it more.

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 8, 2007

How to make the rows in a table light up on mouseover

This code shows how you can use javascript to make rows in a table light up when moused over and change color when you select them, similar to how phpmyadmin does it.

SHOW CODE

</body>
	
</html>

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 8, 2007

How to react on a double-click but not on a click

There may be times when you want an event to be first ONLY when a user DOUBLE clicks on a link and not on a simple click. You simply use the ondblclick event. Note however, that everytime a double click is fired, a click is necessarily fired before it.

SHOW CODE

post comment or question

JAVASCRIPT CODE EXAMPLE - added on July 7, 2007

How to create a date/time info bar at the top of your page

This shows you how to use the onload event in the body tag to show the current date and time when the user loads the page, nicely formatted as well.

SHOW CODE

sunita: how to create a calendar in javascript after 2 fields(i.e,bottom)in a table+ tell me code reply

post comment or question

My Free Tutorials:

How to Install the Android SDK on Windows XP and Create an Application that Runs in the Cell Phone Emulator

How to Create a Website with Datapod

Install Fedora 6 in VMWare on Windows XP and connect it to your network

Install Perl 5 on Windows XP and Get a Perl Hello World Running

Install OpenSuse 10.2 in VMWare on Windows XP and connect it to your network

Install Ubuntu 7.04 in VMWare on Windows XP and connect it to your network

Install Java on Windows XP and Learn the Basics of Java 6 using the NetBeans IDE

Setup a PHP Development Environment on Windows XP With Apache, PHP 5, MySQL 5, SQLite, Eclipse, Subversion, PHPMyAdmin, and Datapod

Install a PHP Development Environment with Eclipse PDT, Apache 2.2, PHP 5, MySQL 5, and phpMyAdmin Using XAMPP Lite

How to Install Ruby on Rails with Instant Rails and Create a Website Using JEdit and the Ruby Plugin