Learn VBA & Macros in 1 Week!

JavaScript - Play Movie Behaviour

Full Excel VBA Course - Beginner to Expert

Play Movie Behaviour	View Content

Hi

I'm looking for solutions to play a movie file (it can be any format) on a keyboard press. I have this 'textsizer' code so far which I have adapted to work with swapimage but wondered if it would be possible to adapt this to play a movie too.

function textsizer(e){
var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode
var actualkey=String.fromCharCode(unicode)
if (actualkey=="a")
MM_swapImage('Image1','','marta3.jpg',1)
if (actualkey=="z")
MM_swapImgRestore('Image1','','marta.jpg',1)
}
document.onkeypress=textsizer

Hope someone can help

Thanks

Full Excel VBA Course - Beginner to Expert

Prevent Esc Behaviour

Similar Tutorials

View Content

Hello.
I'm using the keyup event for an input box to check for the Escape key (keyCode 27). I'm then using this to hide a related select element.

It works okay apart from IE(8) of course . How can I prevent IE carrying on with its normal Escape behaviour? If tried a number of things, most recently:
Code:

e.cancelBubble = true;
if ( e.stopPropagation ) e.stopPropagation();
return false;

but it, IE, is insistant.

I tried switching to 'keydown' but it went a bit wonky.. Andy.

Strange Blur Behaviour

Similar Tutorials

View Content

Hi all,

A piece of code I have been working on has a small issue with bluring off a div and I can't working out why. Basically what I do is append divs to the DOM and on double click I make them editable and when I blur they are none editable and I append a new div into the document.

I have quickly knock up a small piece of code to illustrate the problem ...
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<style text="text/css">

		.dropArea {
			color:#757575;
			font-weight:bold;
			display:block;
			margin:0px;
			border: 1px dashed #999999;
			background-color:#DDDDDD;
			left:10px;
			right:10px;
			/*width:auto;*/
			text-align:center;
			line-height:20px;
		}
		.textEditArea {
			display:block;
			margin-bottom:10px;
			border: 1px dashed #999999;
			background-color:inherit;
			left:10px;
			right:10px;
			padding:5px;
			width:auto;
		}

	</style>

	<script>
		function makeEditable(activeZone) {
			if (activeZone.className == "dropArea") {
				activeZone.innerHTML = "";
			}
			activeZone.contentEditable = true;
			activeZone.className = "textEditArea";
		}

		function doneEditing(activeZone) {
			// if no HTML added, make it a drop zone
			if (trim(activeZone.innerHTML) == "") {
				activeZone.className = "dropArea";
				activeZone.innerHTML = "Drop items from or double click to add text";
			} else if (activeZone.addDropZoneAlready == undefined) {
				// add a new drop zone underneath
				activeZone.title = "Double click to edit text";
				activeZone.addDropZoneAlready = "true";
				activeZone.zoneType = "textDisplay";
				addNewDropZone();
			}
			activeZone.contentEditable = false;
		}

		function addNewDropZone() {
			var dropArea = document.createElement("div");
			dropArea.className = "dropArea";

			var appendTo = document.body;
			appendTo.appendChild(dropArea);

			dropArea.ondblclick = function () { makeEditable(dropArea); };
			dropArea.onblur = function () { alert('done'); doneEditing(dropArea); };

			dropArea.innerHTML = "Drop items or double click to add text";
		}
	</script>

</head>
<body onload="addNewDropZone();">

	<div onDblClick="this.contentEditable=true;" onBlur="this.contentEditable=false;alert('Done!');" style="background-color:#C0C0C0; width: 500px; height:200px;"></div>

</body>
</html>

The div in the body already works as expected, it alerts "Done!" however divs I append into the document have to blur twice before the onblur fires? I just don't undestand why its doing it.

Anybody have any ideas as to what is happening?

Thanks,
Dale

Erratic Behaviour Onmousedown

Similar Tutorials

View Content

I have 9 boxes which I can drag around an invisible grid however when the onMouseDown function is called for the first time on each of the boxes, they behave erratically, then once
all boxes have been clicked once, the entire script works as it should. I've tried using default values when declaring the variables however it doesn't seem to do anything.

Does this happen with anyone else, anything obvious I'm missing.

Code:

<html>
<head>

<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var newleft;
var newtop;

function mouse_move(event)
	{
	if(event.offsetX || event.offsetY) 
		{
		x=event.offsetX;
		y=event.offsetY;
		}
	else	
		{
		x=event.pageX;
		y=event.pageY;
		}

	if(being_dragged = true)
		{
		document.getElementById(element).style.top = y-diff_org_top +'px';
		document.getElementById(element).style.left = x-diff_org_left +'px';
		}
	}

function mouse_down(ele_name)
	{
	being_dragged = true;
	element = document.elementFromPoint(x, y).id;

	org_top = document.getElementById(element).style.top;
	org_left = document.getElementById(element).style.left;

	diff_org_top = y-org_top.substring(org_top.length-2,org_top);
	diff_org_left = x-org_left.substring(org_left.length-2,org_left);
	}

function mouse_up()
	{
	being_dragged = false;
	
	newtop = Math.floor((y-diff_org_top+100)/200) * 200;
	newleft = Math.floor((x-diff_org_left+100)/200) * 200;
	
	if (newtop<0)
		{
		newtop = 0;
		}
	else if (newtop>400)
		{
		newtop = 400;
		}

	if (newleft<0)
		{
		newleft = 0;
		}
	else if (newleft>400)
		{
		newleft = 400;
		}

	document.getElementById(element).style.display = 'none';
	if (document.elementFromPoint(newleft+100, newtop+100).id != '')
		{
		element2 = document.elementFromPoint(newleft+100, newtop+100).id;
		document.getElementById(element2).style.top = org_top;
		document.getElementById(element2).style.left = org_left;
		element2 = null
		}
	document.getElementById(element).style.display = 'block';

	document.getElementById(element).style.top = newtop +'px';
	document.getElementById(element).style.left = newleft +'px';		

	element = null;
	}

</script>

<style type="text/css">
.box
	{
	float:left;
	display:block;
	width:190;
	height:190;
	margin:5;
	position:absolute;
	}

.red
	{
	background:red;
	top:0;
	left:0;
	}

.blue
	{
	background:blue;
	top:0;
	left:201;
	}
	
.yellow
	{
	background:yellow;
	top:0;
	left:401;
	}

.green
	{
	background:green;
	top:201;
	left:0;
	}

.violet
	{
	background:violet;
	top:201;
	left:201;
	}

.orange
	{
	background:orange;
	top:201;
	left:401;
	}

.maroon
	{
	background:maroon;
	top:401;
	left:0;
	}

.lime
	{
	background:lime;
	top:401;
	left:201;
	}

.indigo
	{
	background:indigo;
	top:401;
	left:401;
	}
</style>
</head>

<body onMouseMove="mouse_move(event)">
	<div id="one" class="red box" onMouseDown="mouse_down('one')" onMouseUp="mouse_up()">
	</div>
	
	<div id="two" class="blue box" onMouseDown="mouse_down('two')" onMouseUp="mouse_up()">
	</div>
	
	<div id="three" class="yellow box" onMouseDown="mouse_down('three')" onMouseUp="mouse_up()">
	</div>
	
	<div id="four" class="green box" onMouseDown="mouse_down('four')" onMouseUp="mouse_up()">
	</div>
	
	<div id="five" class="orange box" onMouseDown="mouse_down('five')" onMouseUp="mouse_up()">
	</div>
	
	<div id="six" class="violet box" onMouseDown="mouse_down('six')" onMouseUp="mouse_up()">
	</div>
	
	<div id="seven" class="maroon box" onMouseDown="mouse_down('seven')" onMouseUp="mouse_up()">
	</div>
	
	<div id="eight" class="lime box" onMouseDown="mouse_down('eight')" onMouseUp="mouse_up()">
	</div>
	
	<div id="nine" class="indigo box" onMouseDown="mouse_down('nine')" onMouseUp="mouse_up()">
	</div>
</body>
</html>

Strange Saveas Behaviour

Similar Tutorials

View Content

Hi,

I am trying to make an xml file download from my website, so the saveAs window will be open, I checked the forum and found the following code. but instead of saving the xml file it saves the html file. any clue???
are there other ways to do it ?

Code:

<html>

<script type="text/javascript">
function forceSaveAs (filename){
	document.execCommand('SaveAs',null,filename)
}

</script>
<a href='/DVEConfiguration.xml' onclick=\"forceSaveAs('DVEConfiguration.xml_export'); return false\">Download</a>
</html>

I also try to send the xml with the following header but with no success

Code:

print "Content-type: application/octet-stream\n\n";			
print "Content-Disposition: attachment; filename=file.xml;"

Unexpected Array Behaviour

Similar Tutorials

View Content

Hey all,

I have a rather complicated program so I'm going to try and make it a little simpler - the problem is with the following function:

Code:

this.onInsertSuccess = function (paramsArray) {
        
        var result = Array();
        result[0] = {};
        result[0][this.params.idfield] = paramsArray.id;
        result[0][this.params.titlefield] = "NEW ITEM";
        result[0][this.params.displayfield] = 1;
        
        console.log(this.displayArray.length);
        
        for (x = 0; x < this.displayArray.length; x++) {
            
            
            this.displayArray[x][this.params.displayfield] = x + 2;
            
            result[result.length] = this.displayArray[x];
            
            
            newParams = {idfield:this.params.idfield, id:this.displayArray[x][this.params.idfield], table:this.params.table, displayfield:this.params.displayfield, order:(x+2)};
            this.load.updateItem(newParams);
            
        }
        
        
        this.displayArray = Array();
        
        for (x = 0; x < result.length; x++) {
            
            this.displayArray[x] = result[x];
        }
        
        this.display();
    }

Here's a simplified version:

Code:

onInsertSuccess = function (id) {
        
        var result = Array();


        result[0] = {};
        result[0][this.params.idfield] = id;
        result[0][this.params.titlefield] = "NEW ITEM";
        result[0][this.params.displayfield] = 1;
        
        for (x = 0; x < this.displayArray.length; x++) {
           
            this.displayArray[x].displayorder = x + 2;
            
            result[result.length] = this.displayArray[x];
            
        }
        
        
        this.displayArray = result;
        
        // this just updates the display and has no effect on displayArray
        this.display();
    }

What's happening is that the first time this is called, displayArray appears to update correctly and a "NEW ITEM" appears at the top of my list.

The next time the function is called, displayArray consists of only two results - each "NEW ITEM" - this continues to be the case when the function is called again.

the initial displayArray is this:

Code:

this.displayArray = [{'clid': "1", 'name': "Yorkshire Digital Awards", 'displayorder': "1"}, {'clid': "2", 'name': "Screen Yorkshire", 'displayorder': "2"}, {'clid': "3", 'name': "SureStart Selby District", 'displayorder': "3"}, {'clid': "4", 'name': "Mencap", 'displayorder': "4"}, {'clid': "5", 'name': "York St. Johns", 'displayorder': "5"}, {'clid': "6", 'name': "Mobstar Media", 'displayorder': "6"}, {'clid': "7", 'name': "Wheatfields Hospice", 'displayorder': "7"}, {'clid': "8", 'name': "The National  Railway Museum", 'displayorder': "8"}];

I've left the original function in because I fully appreciate that it may be another function that's causing this problem! I thought also it could be to do with accidentally assigning references rather than values (hence the adaption of the result assignment at the end of the function in the full code).

Any ideas?

Many thanks
Edd

Fancybox With Scrolling To Youtube Movie

Similar Tutorials

View Content

Hi,
I'm new at this stuff, like, super new. Basically, I want to call Fancybox to open a youtube video in a scrolling gallery. I think it's pretty simple to do but so far I can only get it to open when it is specifically clicked on and not part of the scrolling gallery.
I think I need a different thing besides "click" to call the function but I have no idea what.
For you pros, this should be easy (I hope). Please help!
Code:

$(document).ready(function() {
			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'swf'                 : {'mode':'transparent'}
				});
				$("a#p20").click(function() {
                 $.fancybox({
                  'padding'             : 0,
                  'autoScale'   : false,
                  'transitionIn'        : 'none',
                  'transitionOut'       : 'none',
                  'title'               : this.title,
                  'width'               : 680,
                  'height'              : 495,
                  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                  'type'                : 'swf',
                  'swf'                 : {'allowfullscreen':'true'} 
                  });
                 return false;

            }); 
			});

This is my HTML
Code:

 <a rel="example_group" href="images/portfolio/crapbooking.jpg"><img alt="" src="images/portfolio/crapbooking_thumb.jpg" /></a>
      <a rel="example_group" href="images/portfolio/acuppakoko.jpg"><img alt="" src="images/portfolio/acuppakoko_thumb.jpg" /></a>
      <a id="p20" rel="example_group" href="http://www.youtube.com/watch?v=GaidsWnSOz0"><img alt="" src="images/portfolio/hongkong_thumb.jpg" /></a>

Thoughts?

Flash Movie Based On Time Of Day

Similar Tutorials

View Content

I am looking to change a flash movie based on the time of day. Basicaly I need it to switch between a day/night version of the flash.

I have this piece of code and want to know how to call the day.swf, night.swf in the flash object section where i have written 'WHAT DO I PUT HERE?'

Any help with be greatly appreciated.

Thanks.

Code:

<script type="text/javascript"> 
   <!-- 
      var DayOrNightMovie = "day.swf";
      now = new Date(); 
      hour = now.getHours(); 
      if (hour > 6 && hour < 18) { 
        DayOrNightMovie = "day.swf"; 
      } 
      else 
      { 
        DayOrNightMovie = "night.swf"; 
      } 
      var FlashObject = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="520" height="85" hspace="0" vspace="0" align="top">'
      FlashObject += '<param name="movie" value="WHAT DO I PUT HERE?">  <param name="quality" value="high"><param name="wmode" value="transparent">'
      FlashObject += '<embed src="WHAT DO I PUT HERE?" width="520" height="85" hspace="0" vspace="0" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>'
      document.write(FlashObject);
   // --> 
</script>

Curious Behaviour On Css Style Changer

Similar Tutorials

View Content

Hi.
I have a JavaScript that resizes an image held within an Iframe. It works perfectly, BUT only works if there is an alert box in the code.

/*Image resizing scripts - Dependant on page size!*/
///////////////////////////////////
function Im_Resize()
{
var imheight = 550;

/*Change the IFrame CSS*/
iframeheight = imheight + 15; /* +15px for the x-axis scroll bar*/
var IFrame = document.getElementById('MainFrame');
IFrame.style.height = iframeheight + 'px';

alert('after iframe size - before im change');

/*Change the Image CSS*/
var innerdoc = IFrame.contentDocument || IFrame.contentWindow.document;

Image1 = innerdoc.getElementById('MainImg1');
Image1.style.height = imheight + 'px';
}

If I take the alert box out the code just doesn't work?? I thought that it was that during the loading of the page an element hadn't been loaded yet, but a delay doesn't work either. If I press 'ok' on the alert box too quick it doesn't work either.
In terms of HTML this script is run whenever the page is loaded and is also fired when a click event is detected on one of the divs on the page.
Any help would be great
Ed

Strange Behaviour In Window.prompt()

Similar Tutorials

View Content

Dear all

I have been working with with window.promt() and i noticed a weird behaviour.

In some cases (i do not known why) my prompt cannot get over a certain limit of characters. But in some other cases it can get as many characters as i want.

Anyone know about this?

Thanks
Alex

Weired Behaviour Of Anchor Tag In C# And Javascript

Similar Tutorials

View Content

Im using an anchor tag with a class specified.
When i click the anchor tag which i have displayed using C# it opens as a popup with background disabled.
But when i clikc the anchor tag which i displayed using javascript it redirects to the url mentioned and does not open as a popup.

C# Code
-----------------
Code:


builder.Append("<a href='EditLevelValues.aspx?levelId=" + levelId + "&amp;levelValueId=" + levelValueId + "&amp;levelName=" + levelName + "&amp;levelValueName=" + levelValueName + "&amp;levelValueDescription="+levelValueDescription+"&amp;placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=300&amp;width=500&amp;modal=true&amp;'  class='thickbox obox'>");

trLevels.InnerHtml = builder.ToString();

JAVASCRIPT CODE
-------------------------
Code:

strLevelValues += "<a href='EditLevelValues.aspx?levelValueName=" + lvlValueName + "&amp;levelId="+lvlId+"&amp;levelValueId=" + lvlValueId + "&amp;levelValueDescription="+lvlValueDescription+"&amp;levelName=Projects&amp;placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=300&amp;width=500&amp;modal=true&amp;' class='thickbox obox'>";

trProjLevel[0].innerHTML = strLevelValues;

How Can I Write A Javascript That Will Display A Flash Movie?

Similar Tutorials

View Content

Hi Everyone,

I must admit that I'm a newbie in writing javascript.

Can anyone help me with a script that will enable me to display a flash movie on one of my sites.

I will appreciate all your responses.

Thank you.

Javascript Not Recognizing Quicktime Movie Object

Similar Tutorials

View Content

Hello i'm trying to play just the first few seconds on a quicktime movie then stop. if the user scrolls, I replay - Im doing this to reshow the image that seems to go away when scrolling. By design, once the user clicks 'Play' I want the movie to disregard the scroll (and other) functions. This seems to work in FF, but not in IE, where the movie will not even play initially. I'm getting a 'document.movie1 undefined error'. Any help is much appreciated. Here is the code....
Code:

<script src="include/javascript/AC_QuickTime.js" language="javascript"
type="text/javascript">

</script>
<script type="text/javascript" src="include/javascript/mootools-1.2.5-
core-nc.js"></script>
<script type="text/javascript" src="include/javascript/Quickie.js"></
script>
<!--if IE>
<object id="qt_event_source" classid="clsid:CB927D12-4FF7-4a9e-
A169-56E4B8A75598" codebase="http://www.apple.com/qtactivex/
qtplugin.cab#version=7,2,1,0" height="376" width="400">
<param name="scale" value="tofit" />
</object>
<!endif-->
<script type="text/javascript">


function BeginPlayback() {

if (document.movie1 !== null) {
document.movie1.Play();
document.movie1.SetTime(600);
var t = setTimeout("RewindPlayback()", 1000);
}

}

function RewindPlayback() {

if (document.movie1 !== null) {
document.movie1.Stop();
}
}
function QTSetup() {

var t = setTimeout("BeginPlayback()",1000);
}

function startUp() {
var myQuickie = new Quickie('http://malsup.github.com/video/
simpsons.mov', {
id: 'movie1',
width: 400,
height: 376,
container: 'qtmovie',
attributes: {
controller: 'true',
autoplay: 'true',
scale: 'tofit'
},
onCanplay: function() { },
onLoad: function() { QTSetup(); },
onPlay: function() {

if (document.getElementById("hfPlayed").value == "No" &&
document.getElementById("hfFromScroll").value == "No") {
document.getElementById("hfPlayed").value = "Yes";
}
},
onPause: function() { document.getElementById("hfFromScroll").value =
"No"; }
});
}

window.onscroll = function() {
if (document.getElementById("hfPlayed").value == "No") {
document.getElementById("hfFromScroll").value = "Yes";
BeginPlayback();
}
};
window.onresize = function() {
if (document.getElementById("hfPlayed").value == "No") {
document.getElementById("hfFromScroll").value = "Yes";
BeginPlayback();
}
};

function onBlur() {
if (document.getElementById("hfPlayed").value == "No") {
document.getElementById("hfFromScroll").value = "Yes";
BeginPlayback();
}
}
function onFocus() {
if (document.getElementById("hfPlayed").value == "No") {
document.getElementById("hfFromScroll").value = "Yes";
BeginPlayback();
}
}

if (/*@cc_on!@*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}

</script>
<form id="form1" runat="server">



<input id="hfPlayed" type="hidden" value="No" />
<input id="hfFromScroll" type="hidden" value="Yes" />

</form>

Javascript Random Movie Display Script

Similar Tutorials

View Content

Hi, I have a Javascript which I'm using to display one of four Flash SWF files randomly. These need to be actually displayed twice, so I'm basically calling the script twice.

This works great aside from one thing- occasionally the same movie appears in both scripts, for example the first instance picks movie 3 of 4 and th second instance does the same.

What I need is to somehow make sure that if the first instance of the script picks movie x then the second script will pick any movie EXCEPT movie x.

This is the script as it stands:

Code:

<script language="JavaScript">

// Generate a Random Number
var randomnumber = Math.round(Math.random()*3);

// Select a swf and execute the corresponding function
if (randomnumber == 1)

{movie1();}

else if (randomnumber == 2)

{movie2();}

else if (randomnumber == 3)

{movie3();}

else {movie4();}

//Functions to write out the correct flash movie resource.

function movie1(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/1.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/1.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie2(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/2.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/2.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie3(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/3.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/3.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}

function movie4(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/4.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/4.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
</script>

Strange Behaviour Of Java Scripts In Firefox Help

Similar Tutorials

View Content

for some reason on my site 2 javascipts are acting strange there is obviously a conflict in them but I have no idea when it comes to javascript.

My site can be viewed at www.actioncomputing.co.uk

The images on the right hand side use a script which makes them open a window with the enlarged image in, the revolving image below just cycles through other jobs i have done. now problem is when the side images are clicked everything else on page should go dark including the revolving image but it doesnt it stays light and even goes over the top of my close button ( please try clicking on the sds asbuilt image you will see what i mean.

my html code is below but i dont think there is a issue here Im thinking there must be a variable thats conflicting between the 2?!?!?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Website Design and Graphic Design by Action computing, A leading Website Design Company. Website Design, Ecommerce Web Design & Web Development. Logo Design, Label Design ."/>
<meta name="keywords" content="web design bournemouth, website design, web designers, website optimization, advert design,logo design, pc repair, label design, design, web design company, ecommerce, ecommerce web design, hampshire, dorset, bournemouth, southampton"/>
<meta name="author" content="Website and Graphic Design Company, Action Computing"/>
<meta name="language" content="EN"/>
<meta name="Classification" content="Website Design and Graphic Design Company"/>
<meta name="copyright" content="www.ActionComputing.co.uk"/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="7 days"/>
<meta name="document-classification" content="Website Design and Graphic Development"/>
<meta name="document-type" content="Public"/>
<meta name="document-rating" content="Safe for Kids"/>
<meta name="document-distribution" content="Global"/>

<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.min.js"></script>

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

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1",
	dimensions: [220, 200],
	imagearray: [
		["images/demos/sdsasbuilt.jpg", "http://www.asbuiltsdsgroup.co.uk/", "_new", "Asbuilt SDS group front portal"],
		["images/demos/sdsgroup.jpg", "http://www.sds-group.co.uk/", "_new", "SDS Asbuilt group front portal"],
		["images/demos/gillyprint.jpg", "http://www.gillyprinters.com", "_new", "Gilly Print, professional labelling Website"],
		["images/demos/firetradeasia.jpg", "http://www.hemminginfo.co.uk/index.cfm?fuseaction=home.products&producttypeid=2", "_new", "Hemming Information Group online Fire Trade Europe Directory ."],
		["images/demos/timespace.jpg", "http://www.intensive-driving-schools.co.uk/", "_new", "Time and Space driving schools website"],
		["images/partytubhire.jpg", "http://www.partytubhire.co.uk", "_new", "Party Tub Hire Website 'Relax in style'"],
		["images/demos/arborventure.jpg", "http://www.arborventure.co.uk/", "_new", "Arbor Venture Website"]
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>


</head>

<body>
<div class="Container">



<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="index.html">Home</a> <span class="vertline">|</span> <a class="menu"  href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">|</span> <a class="menu"  href="#">About Us</a> <span class="vertline">|</span></p>

</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div><div class="menubottomright">
  <p style="text-align:center; padding-top:7px;"><a class="menu" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">|</span><a class="menu" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">|</span>  <a class="menu" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">|</span> <a class="menu" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">|</span> <a class="menu" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a></p> 
</div>
<div class="Flashtop">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','622','height','101','src','images/headermov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/headermov' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="622" height="101">
    <param name="movie" value="images/headermov.swf" />
    <param name="quality" value="high" />
    <embed src="images/headermov.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="622" height="101"></embed>
  </object></noscript>
</div>
</div>



<div class="content1container">
  <div class="contentleft">
    <div class="insideleftborder"><img src="images/sidegradients.jpg" width="9" /></div>
    <div class="leftcontent-tops">
      <h1 class="titles"> Welcome To Action Computing, Bournemouth!</h1>
    </div>
    <div class="leftcontent-bottom">
      <p><br />
        <h2>Welcome to Action Computing . We are a <strong>Web Design</strong> and <strong>Graphic Design</strong> studio based near  Bournemouth, Dorset on the south coast of the United Kingdom. that specialize in <strong>Web Design</strong>, <strong>Web Optimisation</strong> and all elements of <strong>Graphic Design</strong> including <strong>Stationary Design</strong>, <strong>Logo Design</strong>,<strong> Label Design</strong>, <strong>Advert Design</strong>, <strong>Brochure Design</strong>, <strong>Exhibition Artwork Design</strong> and <strong>Packaging Design</strong>. Action Computing will Design Internationally as well as locally.<br /></h2>
        <br />
      </p>
      <p>Action Computing focuses on three main goals, </p>
      <p>&nbsp;</p>
      <p ><img src="images/QuestionMark.png" width="53" height="51" style="float:right; padding-right:20px; padding-left:20px" /></p>
      <p><strong>One</strong>, making things as simple for the customer as possible using language and explanations that anyone can understand rather than using <strong>Web Design</strong> /<strong> Graphic Design 'jargon'</strong>, this way rather than being confused about the subject matter the client can feel completely Comfortable  with exactly what is going on</p>
      <p>&nbsp;</p>
      <p><img src="images/handshake.jpg"  style="float:right; padding-right:10px; padding-left:20px; padding-top:10px;"/><strong>Two</strong>,  Building a friendly long term relationship with our customers. Successful web site's are not built overnight, they evolve over a period of months   and years and with Action Computing by your side you can guarantee a constant aid to all your <strong>Web Design</strong> and <strong>Graphic Design</strong> needs.</p>
      <p>&nbsp;</p>
      <p><img src="images/pile_english_money.JPG" width="72" height="59" style="float:right; padding-right:10px; padding-left:20px;" /><strong>Three</strong>, Making you money while keeping your Web or <strong>Graphic Design</strong> costs as low as possible. Its all well and good having a pretty web site but if it does not generate money or business then it is simply a waste of time and money, at Action Computing we strive to make sure your web site will succeed.</p>
      <p>&nbsp;</p>
      <p align="justify" class="style10">With over 10 Years of <strong>Web Design</strong> experience we hope to make your journey to the web as smooth as possible and guarantee to cater to your needs as best possible as we can.</p>
      <p align="justify" class="style10">For Everything that is needed to take your first steps into you <strong>Web Design</strong> or <strong>Graphic future</strong> please<a href="contact.php"> click here</a> or above on the appropriate Design needed.</p>
      <br />
      <p align="right" style="border-top:1px dashed #000000; border-bottom:1px dashed #000000; "> Regards<br />
        Action Computing </p>
    </div>
    <div class="leftcontent-tops">
      <h1 class="titles">Our Promise</h1>
    </div>
    <div class="leftcontent-bottom"><br />
      At Action computing are promise to to make you happy, Whether it be <strong>Graphic Design</strong> including <strong>Logo Design</strong>, <strong>Label Design</strong> and <strong>Advert Design</strong> or <strong>Web Design</strong> we will not simply make one <strong>web site</strong> or graphic that you &quot;must&quot; take off us! we will not give up on your <strong>Web site</strong> or Graphics until you are &quot;100%&quot; happy with the outcome, We do usually manage to interpret our customers design dreams to a almost identical result first time, but we will always make your design dreams become a reality!
      <p></p>
      <br />
      <br />
      <p align="right" style="border-top:1px dashed #000000; border-bottom:1px dashed #000000; ">Regards<br />
        Action Computing </p>
      <div align="center">
        <p>All of our web sites are tested on the most common browsers.</p>
        <p>&nbsp;</p>
        <p><img src="images/ie.jpg" style=" padding-left:70px; float:left" /><img src="images/firefox.jpg" style=" padding-left:20px; float:left" /><img src="images/aol.jpg" style=" padding-left:20px; float:left"/><img src="images/SAFARI.jpg" style=" padding-left:20px; float:left"/> </p>
        <p style="clear:both; padding-left:67px; float:left;">Internet Explorer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fire Fox&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AOL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Safari<br />
          <br /><strong>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton </strong></p>
      
        
        
        
      </div>
    </div>
  </div>
  <div class="contentright">
    <div class="insiderightborder"></div>
    <div class="rightcontent-tops">
      <h1 class="titles">Recent Examples</h1>
    </div>
    <div class="rightcontent-bottom">
      <div align="center"><br />
          <a href="images/demos/full size/levelchecker.jpg" title="Level-Checker Web site visit at www.level-checker.co.uk" rel="lightbox"> <img src="images/demos/level-checker.jpg" width="212" height="221" /></a><br />
         <a href="images/demos/full size/levelchecker.jpg" title="Level-Checker Web site visit at www.level-checker.co.uk" rel="lightbox">Level-Checker</a><br />
          Web site        </p>
        <hr />
         <a href="images/demos/full size/asbuilt.jpg" title="Asbuilt SDS Group Web Portal visit at www.asbuiltsdsgroup.co.uk" rel="lightbox"><img src="images/demos/sdsasbuilt.jpg" width="212" height="191" /></a><br />
        <a href="images/demos/full size/asbuilt.jpg" title="Asbuilt SDS Group Web Portal visit at www.asbuiltsdsgroup.co.uk" rel="lightbox">Asbuilt SDS Group</a><br />
        Web site / Portal
        <hr />
        
          <div  id="fadeshow1"></div>
****
  
******
      </div>
    </div>
    <div class="rightcontent-tops"><h1 class="titles">Testimonials</h1></div>
    <div class="rightcontent-bottom"></div>
    
  </div>
  <div class="bottommenu">
    <p><a class="menubottom" href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">| </span><a class="menubottom" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">|</span><a class="menubottom" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">|</span> <a class="menubottom" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">|</span> <a class="menubottom" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">|</span> <a class="menubottom" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a> </p>
    <p>Action Computing email:<a href="mailto:enquiries@actioncomputing.co.uk">enquiries@actioncomputing.co.uk</a> phone: 07927255606</p>
  </div>
</div>
</div>
</body>
</html>

Major thanks to anyone who can help

Adding Control Buttons To A Movie Player Window

Similar Tutorials

View Content

Hello.

My difficulty is in adding Flash control buttons (play, stop, rewind, et cetera) to a window for playing movies.

My initial code to create a window for the Shockwave/Flash player worked just fine:

Code:

<html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
 function playMovie(file){
  var moviePlayer=window.open('assets/'&&file&&'', '', 'height=480,width=640,resizable=0,status=0,locationbar=0,menubar=0,top=200,left=350');
  moviePlayer.document.write('<html><head><title>Movie Player</title>');
  moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
  moviePlayer.document.write('</head><body"><center>');
  moviePlayer.document.write('<object width="640" height="480">');
  moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
  moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
  moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480">');
  moviePlayer.document.write('</embed></object>');
  moviePlayer.document.write('</center></body></html>');
  moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>  
</html>

However, I then tried to add some of the material found on this webpage: http://www.permadi.com/tutorial/flashjscommand/

The resulting code:

Code:

<html>
<head>
<title>Movie Player Example</title>

<script type="text/javascript"><!--
 function playMovie(file){
  var moviePlayer=window.open('assets/'&&file&&'', '', 'height=510,width=640,resizable=1,status=0,locationbar=0,menubar=0,top=200,left=350');
  moviePlayer.document.write('<html><head><title>Movie Player</title>');
  moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
  moviePlayer.document.write('<script type="text/javascript">');
  moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
  moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
  moviePlayer.document.write('else{return document.getElementById(file);}}');
  moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
  moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
  moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
  moviePlayer.document.write('</script>');
  moviePlayer.document.write('</head><body><center>');
  moviePlayer.document.write('<object width="640" height="480">');
  moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
  moviePlayer.document.write('<param name="ShowControls" value="1">');
  moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
  moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480" pluginspage="http://www.macromedia.com/go/getflashplayer">');
  moviePlayer.document.write('</embed></object>');
  moviePlayer.document.write('<a href="javascript:movieControlPlay();"><img src="play.png" alt="Play" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlStop();"><img src="stop.png" alt="Stop" height="50" width="50" border="0" /></a>&nbsp;');
  moviePlayer.document.write('<a href="javascript:movieControlRewind();"><img src="rewind.png" alt="Rewind" height="50" width="50" border="0" /></a>');
  moviePlayer.document.write('</center></body></html>');
  moviePlayer.document.close();
}
//--></script>

</head>
<body>
 <p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>  
</html>

Where the problem is:
Code:

  moviePlayer.document.write('<script type="text/javascript">');
  moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
  moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
  moviePlayer.document.write('else{return document.getElementById(file);}}');
  moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
  moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
  moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
  moviePlayer.document.write('</script>');

And:
Code:

<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>

So it's just the sections dealing with the buttons and handling the buttons in the generated page header. Any help would be appreciated. Thanks.

Resolved !!! Third-party Javascript Menu Interferes With Flash Movie On Home Page

Similar Tutorials

View Content

Ok ..... let's see if I can explain this so someone else can understand it!

I have a menu created with AllWebMenus and after battling with it for some time to get it to show up on the pages !!!! i am now facing another problem.....

I have a flash movie on the home page that it does not start unless i click the home button. I've tested locally without the menu and it works, so has to be the menu that is conflicting with it. the site is www.teiafirme.com

I could just drop the menu and create another one, thing is I like those darn buttons...

Anyone here have any experience with this kind of problem? if needed i can post the menu and flash code...

Jingle To Play Once Per Visit Only.

Similar Tutorials

View Content

Hello all;

I am doing a site for a local business that uses radio advertising and has a jingle that they want to play once per visit only (so it does not play over again of they return to the same page later that day). I have tried to use yahoo player, Google player and the infamous wma player and all work well. I especially like the yahoo player but as will all the players I could not find a way to have it only play once per day per visitor.

Is there a way to accomplish this? I was thinking using a tracking cookie but have no idea how to implement it.

In the end I would like to accomplish the following:
mp3 plays automatically on page load audio only playes once per day per visitor hava small player so if the visitorr wants to hear the jingle again they can do so. the player should be compact and cross browser compatible. Should be compatible with HTML 5.0 Transitional or at the very least 4.01
Any help would be appreciated.

Need Help Getting 2 Scripts To Play Nicely Together

Similar Tutorials

View Content

Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated.

Page can be seen he test site

Code for page:
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" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	font-family: Arial, sans-serif;
	background: url(images/bg.gif) #FFF;
}
* {
	margin: 0;
	padding: 0;
}
#wrapper {
	width:950px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
	background:#fff;
	border-left:1px solid #036;
	border-right:1px solid #036;
}
#footer, #push {
	clear:both;
	width:950px;
	height: 30px;
	margin:0 auto;
	background:#036;
	font-size:11px;
	text-align:center;
	color:#FFF;
}
#push {
	background:none;
}
/*  Navigation  */
#nav ul, #nav li {
	display:inline;
	list-style-type:none;
}
#nav li {
	height:55px;
	width:119px;
	background:url(button.jpg);
	display:block;
}
#nav a {
	height:32px;
	width:119px;
	display:block;
	text-decoration:none;
	background:url(button.jpg);
}
#nav a:hover {
	background:url(button.jpg);
	background-position:0px 55px;
}
#nav span {
	display:block;
	padding-top:10px;
	color:#000;
	font-weight:bold;
	text-align:center;
}
/*  Picture Gallery  */
#right {
	width:400px;
	height:100%;
	position: absolute;
	top: 0px;
	left:500px;
}
#filler {
	background:url(fish9.jpg) top center no-repeat;
	border-bottom:1px solid #333;
	display:inline;
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top:0;
	left:0;
}
#thumbs {
	width:400px;
	position: absolute;
	top: 330px;
	left:0;
}
#thumbs ul {
	display:inline;
	list-style-type:none;
}
#thumbs ul li {
	width:92px;
	height:69px;
	float:left;
	display:inline;
	padding-left:6px;
	padding-bottom:6px;
}
#thumbs ul li a {
	text-decoration:none;
}
#thumbs a img {
	border: none;
}
#thumbs ul li.extrapixels {
	padding-left:7px;
}
#message {
	width:400px;
	float:left;
	height:70px;
	text-align:center;
	position: absolute;
	top: 300px;
	left:0;
	color:#333;
}
#bigDynPic {
	width:400px;
	height:300px;
	text-align:center;
	position: absolute;
	top: 0px;
	left:0;
}
#bigDynPic img {
	border-bottom:1px solid #333;
	display:block;
}
#bigDynPic p {
	font-family:Verdana, Sans-serif;
	font-weight:bold;
	font-size:80%;
	background:#fff;
	color:#333;
	margin:0;
	padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
 function dyngallery()
{
	var picId='bigDynPic';
	var loadingId='loadingmessage';
	var d=document.getElementById('thumbs');
	if(!d){return;}
	if(!document.getElementById(loadingId))
	{
		var lo=document.createElement('div');
		d.parentNode.insertBefore(lo,d);
		lo.id=loadingId;
		lo.style.display='none';
	}
	var piclinks=d.getElementsByTagName('a');
	for(var i=0;i<piclinks.length;i++)
	{
		piclinks[i].onclick=function()
		{
			document.getElementById(loadingId).style.display='block';
			var oldp=document.getElementById(picId);
			if(oldp)
			{
			 oldp.parentNode.removeChild(oldp);
			}
			var nc=document.createElement('div');
			d.parentNode.insertBefore(nc,d);
			nc.style.display='none';
			nc.id=picId;
			var newpic=document.createElement('img');
			newpic.src=this.href;
			newpic.alt=this.getElementsByTagName('img')[0].alt;
			newpic.title='Click to return to images';
			newpic.onload=function()
			{
				document.getElementById(loadingId).style.display='none';
			}
			newpic.onclick=function()
			{
			 this.parentNode.parentNode.removeChild(this.parentNode);
			}
			nc.appendChild(newpic);
			np=document.createElement('p');
			np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
			nc.appendChild(np);
			nc.style.display='block';
			return false;
		}
	}		
}
window.onload=function()
{
	if(document.getElementById && document.createTextNode)
	{
		document.body.onmouseover=function()
		{
			dyngallery();	
		}																		
	}
} 
// -->
</script>
<script type="text/javascript">
<!--
 	window.onload = initMenu;
function initMenu() {
	var e=document.getElementById('nav');
	var links=e.getElementsByTagName('A');
    for(i=0; i < links.length; i++) { 
        var thisLink = links[i];
        if(thisLink.parentNode.tagName == "LI"){
            setActivity(thisLink);
        }
    }
}
function setActivity(thisLink){
    thisLink.onmouseover = mouseOver;
    thisLink.onmouseout = mouseOut;	
}
function mouseOver() {
    this.parentNode.style.background = 'url(button.jpg) 0px 55px';
    return this;
}
function mouseOut() {
    this.parentNode.style.background = 'url(button.jpg)';
    return this;
} 
// -->
</script>
</head>
<body>
<div id="wrapper">
  <ul id="nav">
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="index.html"><span>Page1</span></a></li>
    <li><a href="index.html"><span>Page2</span></a></li>
    <li><a href="index.html"><span>Page3</span></a></li>
    <li><a href="index.html"><span>Page4</span></a></li>
  </ul>
  <div id="right">
    <div id="filler"> </div>
    <div id="message">Click on thumbnail for larger picture</div>
    <div id="thumbs">
      <ul>
        <li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
        <li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
        <li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
        <li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
        <li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
        <li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
        <li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
        <li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
      </ul>
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <p>&copy; 2009</p>
</div>
</body>
</html>

Scripts would normally be external, I just put them in the page for now for simplicity.

Thanks.

Play Videos With Javascript

Similar Tutorials

View Content

I have an HTML document with an <embed> tag in order to play a video.

<code>
<embed src="someMovie.mpeg" autostart="false"</embed>
</code>

I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg".

I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video.

Is there a way I can do this?

Stop And Play Slideshow..

Similar Tutorials

View Content

Been given a task to edit a simple javascript slide show to have form buttons

This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle.

Quote:
<script type="text/javascript">

var hol_pics = new Array(); // Create Array Object
for (var i=0;i<9;i=i+1) {
hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects
hol_pics[i].src="harbour"+i+".jpg"; // Preload Images
}

i=0; // 'Remember' original image displayed by img tag
function next_photo() {
i=i+1;
if(i>8) i=0; // Increment image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i+1)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}

function back_photo() {
i=i-1;
if(i<0) i=8; // Decrement image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i-1+9)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}

//]]>
</script>
</head>

<body>
<h1>Basic Slide Show</h1>
<p>

<img src="harbour0.jpg" width="324" height="432" alt=></a>

<form action="">
<input type="button" value="Previous" name="button" onclick="back_photo()" />
<input type="button" value="Next" name="button" onclick="next_photo()" />
</form>