JavaScript - Adding Control Buttons To A Movie Player Window

I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with:
Code:

function ObjButtonBuild() {
  this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
  this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
  this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
  if(this.accessKeyValue && this.accessKeyValue!=null){
  
  	this.divInt+=' accessKey='+this.accessKeyValue+' ';
  }
  
  if( this.altName ) this.divInt += ' title="'+this.altName+'"'
  else if( this.altName != null ) this.divInt += ' title=""'
  this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
  if( this.altName ) this.divInt += '" alt="'+this.altName
  else if( this.altName != null ) this.divInt += '" alt="'
  this.divInt += '" width='+this.w+' height='+this.h+' border=0'
  if( !is.ns4 )  this.divInt += ' style="cursor:pointer"'
  this.divInt += '></a>'
}

Code:

button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()

I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks.

Here's the code:
Code:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 7;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});

My page is auto centered when some with a monitor bigger than what I developed for views the page. I want to add a left border to my left div tag when the screen is over a certain size.

Here's what I have:

the div tag is this:

Code:

<div class="left"></div>

css
Code:

.left{
width: 240px;
min-height: 548px;
background: #97D38B;
float: left;
border: 0px;
border-bottom: 2px;
border-style: solid;
border-collapse: collapse;
border-color: #0F5400;
}

javascript:

Code:

window.onresize=resized;
window.onload=resized;
function resized(){
if (window.innerWidth)
        {
        screenWidth=window.innerWidth;
        }
  else if (document.documentElement && document.documentElement.clientWidth)
        {
         screenWidth=document.documentElement.clientWidth;
        }        
  else if(document.body)
        {
        screenWidth=document.body.clientWidth;
        }
		
if (screenWidth<=1015)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';

if (screenWidth>1015)
document.getElementById('left').style.borderLeft = '2px';
}

The last bit of code document.getElementById('left').style.borderLeft = '2px'; doesn't seem to work.

Is there a way to make 2 functions load at the same time using window.onload? I have to seperate functions which rotate images, then another that rotates text.

Functions:

showQuote()
iAnimate()

hello,

I am trying to add a window event listener on some links in a loop instead of doing them one by one. I've tried

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=changeIframeSrc(src, 'solid',1, event);
document.links[i].onmouseout=changeIframeSrc(null,'none',0,event);
	}
}

and

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=function(a1,a2,a3,a4){
		return function(){changeIframeSrc(a1,a2,a3,a4);}
 }(src, 'solid',1, event);
 	}
}

but the event keeps coming up undefined. Any ideas on how to do this?

Hi

Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it?

[CODE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>MEG</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var content;
var oneWindow;
var fullWindow;
var oneWindowStatus = false;
var fullWindowStatus = false;


function closeAllWindows() {
if((oneWindowStatus) && (!oneWindow.closed)) oneWindow.close();
if((fullWindowStatus) && (!fullWindow.closed)) fullWindow.close();
oneWindowStatus = false;
fullWindowStatus = false;
}


function productObject(name,description,use,image) {
this.name = name;
this.description = description;
this.use = use;
this.image = image;
this.displayOne = displayOne;
}

//Add products here
var products = new Array();
products[0] = new productObject("Ears", "Fluffy, pointy, big", "For hearing other dogs near by, for listening to my owner but ignoring her", "images/ears.jpg");
products[1] = new productObject("Eyes", "Shiny, brown, pretty", "To see dogs to bark at, to see when treats are available", "images/eyes.jpg");
products[2] = new productObject("Nose", "Black, wet", "For sniffing out food and squirrels", "images/nose.jpg");
products[3] = new productObject("Mouth", "BIG", "For barking loudly with", "images/mouth.jpg");
products[4] = new productObject("Tongue", "Pink, wet", "To lick you with when you really dont want her to", "images/tongue.jpg");
products[5] = new productObject("Legs", "Short, fluffy", "To run as fast as possible with after squirrels", "images/legs.jpg");
products[6] = new productObject("Paws", "Small", "To raise when I want treats/food of any sort", "images/paws.jpg");

var len = products.length;

function displayOne() {
content="";
content+="<HTML><HEAD><TITLE>" + this.name + "</TITLE></HEAD>";
content+="<BODY><DIV ALIGN='center'>";
content+="<TABLE WIDTH='90%'><TR><TD COLSPAN='3' ALIGN='center'>";
content+="<H3>Name: " + this.name.bold() + "</H3><HR>";
content+="<TR><TD><B>Name:</B> " + this.name;
content+="<TR><TD><B>Description:</B> " + this.description;
content+="<TR><TD><B>Use:</B> " + this.use;
content+="<TR><TD><IMG SRC= '" + this.image + "' HEIGHT='100' WIDTH='100'>";
content+="</TABLE><FORM>";
content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>";
content+="</FORM></DIV></BODY></HTML>";
oneWindow = open("","OneWindow","width=500,height=400");
newWindow(oneWindow);
oneWindowStatus = true;
}

function showAll() {
content="";
content+="<HTML><HEAD><TITLE>All that is Meg</TITLE></HEAD>";
content+="<BODY><DIV ALIGN=center>";
content+="<TABLE WIDTH='90%' BORDER CELLPADDING='2'>";
content+="<TR><TH COLSPAN='2' ALIGN='center'>";
content+="All that is Meg";
content+="<TR><TH>Name<TH>Image";

for (var i = 0; i < len; i++) {
content+="<TR><TD>";
content+="<A HREF='javascript:void(window.opener.products[" + i + "].displayOne());'>";
content+=products[i].name + "</A>";
content+="<TD>" + products[i].description;
}
content+="</TABLE><FORM>";
content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>";
content+="</FORM></DIV></BODY></HTML>";
fullWindow = open("","AllWindow","width=500,height=400,resizable=1");
newWindow(fullWindow);
fullWindowStatus = true;
}

function newWindow(x) {
x.document.close();
x.document.open();
x.document.write(content);
x.document.close();
x.moveTo(20,20);
x.focus();
}

//-->
</SCRIPT>

</SELECT>

</HEAD>
<BODY onFocus="closeAllwindows();" bgcolor="lightblue">
<DIV ALIGN="center">

<H2>Meg</H2>
<HR>
<FORM NAME="prodForm">
<TABLE WIDTH="100%">
<TR>
<TD WIDTH="50%" ALIGN="right">
<SELECT NAME="itemName">

<SCRIPT LANGUAGE="JavaScript">
<!--

for (var i = 0; i < len; i++) {
document.write("<OPTION>" + products[i].name);
}

//-->
</SCRIPT>

</SELECT>
<TD>
<INPUT TYPE="button" VALUE="Get Info"
onClick="
var i = document.prodForm.itemName.selectedIndex;
products[i].displayOne();">
<TR><TD ALIGN="right">
<TR><TD colspan="2" ALIGN="center">&nbsp;
<TR><TD colspan="2" ALIGN="center">
<INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();">
</TABLE>
</FORM>
<img src="images/meg1.jpg" "alt="Meg" border="2"/>
</DIV>
</BODY>
</HTML>

[CODE]

Thanks and hope someone can help

Claire

Help will be greatly appreciated!

Situation:
I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END.

condition of the frame, fixed width/height, no scroll, no border.

Very new to javascript but need this code to make a page work for BIZ.

Thank you in advance for anyone kind enough to point the right direction!

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

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>

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?

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>

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>

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.

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...