JavaScript - Video Playhead Manipulation

I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail.

My current email address is formatted like this example: Code:

firstlast@gmail.com

I want the script to manipulate the text to resemble this: Code:

first.last@gmail.com

I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated!

Code:

(function () {

	var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
	var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
	var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');

	function changeName() {
		
		if(loadOldName) {
			window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
		};

		if(topLeftName) {
			window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
		};

		if(topLeftDrop) {
			window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
		};

	};

	changeName();

});

Hi,

I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image.

I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree...

Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated.

I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each.

http://jsfiddle.net/defencedog/Zz7cX/

[My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine]

regards;;

Hello,

I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image.

I have NEVER coded in JavaScript and need some assistance with this.

Here is the array example:

Code:

var holiday = new Array()
	holiday[0] = "images/bronc.jpg"
	holiday[1] = "0210, 0214, images/Valentines_Pic.jpg"
	holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg"
	holiday[3] = "0701, 0704, images/4th_Of_July.jpg"
	holiday[4] = "1015, 1031, images/Halloween.jpg"
	holiday[5] = "1111, 1130, images/Thanks_Giving.jpg"
	holiday[6] = "1201, 1227, images/Christmas.jpg"
	holiday[7] = "9999, 9999, images/New_Years_Pic.jpg"

holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element.

Then something like

get date
alter date to be mmdd
if date >= firstarraydate and date <= secondarraydate
then set image to ********.jpg
else set image to *******.jpg
loop

then in the body display the correct image

<p><img src="image" /></p>

Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated.

Thanks
Kel

Hello everyone,

I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error.

Thanks in advance,

Alex

Code(JS):
Code:

function runstuff() {
	canvasthing = document.getElementById('1');
	context = canvasthing.getContext('2d');
	purple = new Image();
	purple.src = 'img/buttonpurple.png';
	purple.onload = function() {
    context.drawImage('purple', 0, 0);
	};
	context.font = '16px Vani';
	context.textBaseline = 'top';
	context.fillText('Test', 26, 24);
}

Code(html):
Code:

<!doctype html>
<html lang="en">
	<head>
		<title>POB.G</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js">
		</script>
	</head>
	<body onload="runstuff()">
	<canvas id="1" width="127" height="128"></canvas>
	</body>
</html>

Error:
Code:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7"  data: no]

Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!!

Here is the Code:

Code:

	function getEl(element)
		{
			var object = null;
			if (document.layers)
				{
					object = document.layers[element];
				}
			else if (document.all)
				{
					object = document.all[element];
				}
			else if (document.getElementById)
				{
					object = document.getElementById(element);
				}
			return object;
		}
		
function addRow()
{
  var tbl = getEl('invTbl');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  var cellqty = row.insertCell(0);
  var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
  cellqty.appendChild(qty);
  
  var cellitm = row.insertCell(1);
  var itm = document.createElement('input');
  itm.type = 'text';
  itm.name = 'itm_' + iteration;
  itm.id = 'itm_' + iteration;
  itm.size = 30;
  cellitm.appendChild(itm);
  
  var celldsc = row.insertCell(2);
  var dsc = document.createElement('input');
  dsc.type = 'text';
  dsc.name = 'dsc_' + iteration;
  dsc.id = 'dsc_' + iteration;
  dsc.size = 50;
  dsc.value = iteration;
  celldsc.appendChild(dsc);
  
  var cellprc = row.insertCell(3);
  var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
  cellprc.appendChild(prc);
  
  var celldel = row.insertCell(4);
  var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
  celldel.appendChild(del);

}

function removeRow(row)
{

	alert("you are deleting row " + parseInt(row));
	tbl = getEl('invTbl');
	rowTotal = tbl.rows.length;
	alert("there are " + rowTotal + " rows!");
	tbl.deleteRow(parseInt(row));	
	for ( i = 1; i < rowTotal; i++ )
		{
		if ( i > parseInt(row) )
			{
			place = i - 1;
			alert(i + " becomes " + place);
			qtycontainer = "qty_" + i;
			itmcontainer = "itm_" + i;
			dsccontainer = "dsc_" + i;
			prccontainer = "prc_" + i;
			delcontainer = i.toString();
			buttonchange = place.toString();
			
			getEl(qtycontainer).name = 'qty_' + place;
			getEl(qtycontainer).id = 'qty_' + place;
	
			getEl(itmcontainer).name = 'itm_' + place;
			getEl(itmcontainer).id = 'itm_' + place;
			
			getEl(dsccontainer).name = 'dsc_' + place;
			getEl(dsccontainer).id = 'dsc_' + place;
			getEl('dsc_'+place).value = getEl('dsc_'+place).id;
			
			getEl(prccontainer).name = 'prc_' + place;
			getEl(prccontainer).id = 'prc_' + place;
			
			getEl(delcontainer).name = buttonchange;
			getEl(delcontainer).id = buttonchange;
			alert("del button changed to " + getEl(i).id);
			}
		}
//	updatePrice();
}

The button element for each row calls javascript:removeRow(this.id);

Please help me figure out what I am doing wrong!

I want to be able to have multiple video's available on our site from our local news station. I have two separate video's in the code but only one shows. I wanted to show a player for each one but it looks as though I can display one player and need to know how to have more than one load in the same player - one at a time. I hope this makes sense. I need to have links but not leave this page or player.

You can view the code with two video links here

http://www.cincinnatidesigns.com/wri...ing/w_news.htm

Hey all. I want to figure out how to make a new video pop up like this site I'm about to show you.

Go to this link, then click on "Watch HD Video". You see how a new video pops up in the same window? Basically I want to do EXACTLY that. I've taken a good hour trying to figure it out for myself; viewing their source codes, looking at their java scripts, but I just couldn't get it to work. If any of you know how to achieve the exact same thing on that site, please share your knowledge with me!

Hey, I am making a website and need to make a video archive like on this website http://5secondfilms.com/films/ so the newest videos are first and it just automatically updates as a new video page is added. Also what would be the easiest way to create the new video pages? Just make the one and then copy the page, paste, then edit the paragraphs and link to the new video?

All help appreciated, Thanks.

Hey im having a problem putting a swf video in a website

Code:

<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript">
	function showIt(){
		var so = new SWFObject('./images/portfolio/tours/stoodly_pano/panoStudioViewer.swf',Stoodly','325','325','9');
		so.addParam('allowscriptaccess','always');
		so.addParam('bgcolor','#FFFFFF');
		so.addParam('flashvars','file=stoodly2.xml&autostart=true');
		so.write('portfolio-content');
	}
	</script>

With this code it shows a loading bar thats as far as it goes can anyone show me where i am going wrong

the following script opens a video and plays the video
is there anyway to have it list all the flv files in a folder and make it play the video onclick
something like a web photo album but for video's all with the same extension
the file name that would need to be replaced is detecting.flv

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- A minimal Flowplayer setup to get you started -->
  

	<!-- 
		include flowplayer JavaScript file that does  
		Flash embedding and provides the Flowplayer API.
	-->
	<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
	
	<!-- some minimal styling, can be removed -->
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<!-- page title -->
	<title>detecting finds</title>

</head><body>

	<div id="page">
		
		<p style="text-align: center">Franks website</p>
		
		<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
		<a  
			 href="http://franks.com/movies/detecting.flv"
			 style="display:block;width:520px;height:330px"  
			 id="player"> 
		</a> 
	
		<!-- this will install flowplayer inside previous A- tag. -->
		<script>
			flowplayer("player", "http://franks.com/movies/flowplayer-3.2.7.swf");
		</script>
	
	</div>
	
	
</body></html>

01) I would like to rollover (onmouseover?) a button that is a video and have the video (button) play. (A 5 sec video that stops at end)

02) On rolloff (onmouseoff?) the same button I would like it to rewind to the beginning for next rollover.

03) I would like to add more of these "Video Button Rollovers" to the same website page in the future. I would like to use DreamWeaver CS4, and stay away from flash for more accessibility and less memory intensive overhead. (obviously no control-bar for video)
-----
I have all the parts to this to try a variety of solutions.
-----
-The video is a box with untied string on a white background.
- When played a person fades-on and ties the string into a bow.
(white background matches website background)
-----
Parts:
01) video from untied box to tied box with person .mov
02) image of first frame of video .jpg
03) video from untied box to tied box with person to person fade-off and untied box .mov
04) video of tied box with person to person fade-off and untied box.mov
-----
The parts will be on this website: http://mydata.salve.edu/emersonb/g2/media.html

Thanks

So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video.

What could I possibly be doing wrong?

Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4
JS: http://xonicgames.com/video/?i=6

Thanks

Hello everyone, after a few days of looking i give up i just don't know what to look for or how to do it.

on this website "http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding there is a section called How to make a video select list. I have been able to replicate and modify it to my liking how ever i have one issue. i can't make my videos fullscreen. The videos have and give the option for full screen but the fullscreen doesn't work.

i prefer this kind of code because it allows my webpage to select a video without changing the webpage and play it, i find it much more smoother then then multiple embedded videos in tabs (i don't even know what to call it so thats what i call it)

just incase the website doesnt work or something i will post the script

first part<div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div>

then

<div id='selectDemo1' style='display: none'>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="350">
</embed>
</object>
</div>

<div id='selectDemo2' style='display: none'>
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="350">
</embed>
</object>
</div>

then
<A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A><BR>
<A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute </A><BR>

and finally<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>

i'm not sure the exact functions or how to write this kinda stuff from scratch so if you have any helpfull additions or suggestions please let me know.

I want to encrypt my video file and wants to give source url of that file in my web page and while before playing of that file on my web page I want enable password for authentication.
How to do this? (Using javascript or html5 )