JavaScript - Youtube Iframe And Events (problem)

Hello,
i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html

but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up
(eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result.
so please.... please....help me to solve this.

this is the problematic java script,
Code:

<script type="text/javascript">

var scrollspeed=cache=1
var initialdelay=500

function initializeScroller(){
	dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
	dataobj.style.top="5px"
	setTimeout("getdataheight()", initialdelay)
}

function getdataheight(){
	thelength=dataobj.offsetHeight
	if (thelength==0)
		setTimeout("getdataheight()",10)
	else
		scrollDiv()
}

function scrollDiv(){
		dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
		if (parseInt(dataobj.style.top)<thelength*(-1))
			dataobj.style.top="5px"
		setTimeout("scrollDiv()",40)
}

if (window.addEventListener)
		window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
		window.attachEvent("onload", initializeScroller)
else
		window.onload=initializeScroller

</script>

thank you

.

Code:

window.onload = function() 
	{
		var vIframeUrl;
		vIframeUrl= document.getElementById("ifrBDiagram").src;
		
		if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "")
		{
			document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg";
		}
		getIframeSize(); 
	} 

function getIframeSize()
	{
		//Get window width and height
		var winW = 630, winH = 460;
		if (document.body && document.body.offsetWidth) { 
			winW = document.body.offsetWidth;
			winH = document.body.offsetHeight;
		}
		if (document.compatMode=='CSS1Compat' &&
			document.documentElement &&
			document.documentElement.offsetWidth ) {//alert("in 2");
			winW = document.documentElement.offsetWidth;
			winH = document.documentElement.offsetHeight;
		}
		if (window.innerWidth && window.innerHeight) {//alert("in 3");
			winW = window.innerWidth;
			winH = window.innerHeight;
		}
		
		document.getElementById("ifrBDiagram").width = (winW * 0.95);
		document.getElementById("ifrBDiagram").height = (winH * 0.88);
	}

Code:

<table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;">
	<tr>
		<td><b>Bnr No:</b></td>
		<td><input type="text" id="txtBnr" name="txtBnr" /></td>
		<td> </td>
		<td> </td>	
	</tr>
	<tr>
		<td><b>Lot No:</b></td>
		<td><input type="text" id="txtLot" name="txtLot" /></td>
		<td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()">&nbsp;&nbsp;<INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td>
		<td> </td>
	</tr>
	<tr>
		<td><b>Failure Catalogues:</b></td>
		<td><select id="myList">
			<option></option>
			<option>DSO</option>
			<option>Pre-Assembly</option>  
			<option>PO EOL</option>
			<option>TDSON/TSDSON</option>
			<option>S308/WISON</option>
			</select>
		</td>
		<td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td>
		<td> </td>	
	</tr>
	<tr>
		<td colspan="4">
			<iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;">
				<span id="sMsg"></span>
			</iframe>
		</td>
	</tr>
</table>

When I first run the html , the interface just goes like this.



After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly.


Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks

I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame?

please run the code,

type any text from the paragraph of text and click serach button.

see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe]

code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<script language="javascript" type="text/javascript">
var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.";
var iframe;
var id;
var doc;
var index;
var highlightStartTag = "<span style='color:#EE7A03'>";
var highlightEndTag = "</span>";
var wrong_word = "speltext";
var afterHighlightText;
var newText;
var start = 0;

function highlight() {
iframe = document.getElementById('frame1');
doc = iframe.document;
if (iframe.contentDocument)
doc = iframe.contentDocument;
else if (iframe.contentWindow)
doc = iframe.contentWindow.document;
}
function highlight1() {
newText = html;
var tid = document.getElementById('TextBox1');
var text = tid.value;
index = newText.indexOf(text);
if (index >= start) {
var length = 0;
length = index + wrong_word.length;
var before_delim = newText.charAt(index - 1);
var after_delim = newText.charAt(length);
var beforeHighlightText = newText.substring(0, index - 1);
afterHighlightText = newText.substring(length + 1, newText.length);
newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText;
doc.write(newText);
}
else {
alert("Reached End");
}
return false;
}
</script>

</head>
<body onload="highlight()" >
<form id="form1" runat="server">
<div>
<div>
<b>Sample Text:</b>
<br />
Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.
</div>
<br />
<b>Type the Text to Search from the above passage, for EG:"powerful"</b>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<b>Move Scroll button to see hidden highlighted text</b>
<iframe id="frame1"></iframe>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Search"
OnClientClick="return(highlight1());" />
</div>
</form>
</body>
</html>

Thanks,
Lakshmi

I'm using a simple PHP login script (this one: http://www.zubrag.com/scripts/password-protect.php) in tandem with Fancybox (he http://fancybox.net/). The Fancybox pop-ups on my pages use iframes, to hold written content and links.

When I log in once, I can access all the regular HTML pages inside the login script without having to log in again. But when I click Fancybox's pop-up links, the pop-up is logged OUT. How can I make all the iframe pop-ups stay logged in when the user is logged in?

Thanks for any help, much appreciated.

Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA"

Feel better now!

I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ!

My Code:

Code:

<SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
	try{	
	var oBody	=	ifrm.document.body;
	var oFrame	=	document.all("ifrm");
		
	oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
	}
	//An error is raised if the IFrame domain != its container's domain
	catch(e)
	{
	window.status =	'Error: ' + e.number + '; ' + e.description;
	}
}
//-->
</SCRIPT>


<body onload="reSize()" onresize="reSize()">

<li>
	<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
	<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
	<span class="nav_title">Home</span>
	<br/>
	</a>
</li>


<iframe onresize=reSize() id=ifrm  src="home.html" name="info" frameborder="0" 
	padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px" 
	allowTransparency="true" noresize>
</iframe>

Is there a way to use google anayltics to track how many people clicked onto my video from my site to watch it? how long they stayed on the video, where they came from, ect?

This is what I have:
http://page-test.co.uk/js-test.html

..and it works exactly how I want it to, but I need it to work by doing these two things:

(a) If you see in the change_button function, I have hard coded the 'name_can_vary' name element. I need to do it so this isn't hard coded (so it can work on any page/form).

(b) I don't want to change any of the HTML, and I only want to change the code used in the change_button function (otherwise I will need to change many pages).

Thanks in advance.

i have a link that references: <a href="My_Video.asx">video</a>. when you click, video will open in the "windows media player" and the parent window goes blank.

how can i prevent the parent window from going blank?

thank you for help
julio

Can anyone help me modify this script to be able to view feeds of type media rather apps?
I want it to work as it does for a channel rather than all of youtube.
I've tried changing the settings at the top and a lot of other stuff but no luck so far... getting desperate here.

I'm willing to pay at this point but I don't have much. I neeeeeed this script. It could be in PHP even. However it must be completely dynamic and allow me to make searches against the channel.
Code:

var quvic = {};

quvic.MAX_RESULTS_LIST = 50;


quvic.THUMBNAIL_WIDTH = 124;

quvic.THUMBNAIL_HEIGHT = 93;


quvic.PLAYER_WIDESCREEN_WIDTH = 720;

quvic.PLAYER_STANDARD_WIDTH = 540;


quvic.PLAYER_HEIGHT = 405;


quvic.VIDEO_LIST_CSS_CLASS = 'videolist';

quvic.PREVIOUS_PAGE_BUTTON = 'previousPageButton';

quvic.NEXT_PAGE_BUTTON = 'nextPageButton';

quvic.STANDARD_FEED_URL_TOP_RATED = 
    'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?';

quvic.STANDARD_FEED_URL_MOST_VIEWED = 
    'http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?';

quvic.STANDARD_FEED_URL_MOST_POPULAR = 
    'http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?';

quvic.STANDARD_FEED_URL_RECENTLY_FEATURED = 
    'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?';

quvic.VIDEO_FEED_URL = 
    'http://gdata.youtube.com/feeds/api/videos?';

quvic.QUERY_URL_MAP = {
  'top_rated' : quvic.STANDARD_FEED_URL_TOP_RATED,
 
  'most_viewed' : quvic.STANDARD_FEED_URL_MOST_VIEWED,
 
  'most_popular' : quvic.STANDARD_FEED_URL_MOST_POPULAR,
  
  'recently_featured' : quvic.STANDARD_FEED_URL_RECENTLY_FEATURED,
 
  'search' : quvic.VIDEO_FEED_URL
};

quvic.nextPage = 2;

quvic.previousPage = 0;

quvic.previousSearchTerm = '';

quvic.previousQueryType = 'search';

quvic.jsonFeed_ = '';

quvic.appendScriptTag = function(scriptSrc, scriptId, scriptCallback) {
 
  var oldScriptTag = document.getElementById(scriptId);
  if (oldScriptTag) {
    oldScriptTag.parentNode.removeChild(oldScriptTag);
  }
  var script = document.createElement('script');
  script.setAttribute('src', 
      scriptSrc + '&v=2&alt=jsonc&callback=' + scriptCallback);
  script.setAttribute('id', scriptId);
  script.setAttribute('type', 'text/javascript');
  document.getElementsByTagName('head')[0].appendChild(script);
};

quvic.listVideos = function(queryType, searchTerm, page) {
  quvic.previousSearchTerm = searchTerm; 
  quvic.previousQueryType = queryType; 
  var queryUrl = quvic.QUERY_URL_MAP[queryType];
  if (queryUrl) {
    queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
        '&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
    if (searchTerm != '') {
      queryUrl += '&q=' + encodeURI(searchTerm);
    }
    quvic.appendScriptTag(queryUrl, 
                         'searchResultsVideoListScript', 
                         'quvic.listVideosCallback');
    quvic.updateNavigation(page);
	
  } else {
    alert('Unknown feed type specified');
  }
};

quvic.PresentVideos = function(queryType, searchTerm, page) {
  quvic.previousSearchTerm = searchTerm; 
  quvic.previousQueryType = queryType; 
  var queryUrl = quvic.QUERY_URL_MAP[queryType];
  if (queryUrl) {
    queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
        '&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
    if (searchTerm != '') {
      queryUrl += '&q=' + encodeURI(searchTerm);
    }
    quvic.appendScriptTag(queryUrl, 
                         'searchResultsVideoListScript', 
                         'quvic.listVideosCall');
    quvic.updateNavigation(page);
   }
};

quvic.listVideosCall = function(json) {
  quvic.jsonFeed_ = json.data;
  var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
  var items = json.data.items || [];
  var html = ['<dl class="videos">'];
  for (var i = 0; i < items.length; i++) {
    var title = json.data.items[i].title;
    var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
    var videoID = json.data.items[i].id;
    var duration = json.data.items[i].duration;

    html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
	html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
	html.push('<span class="duration">',getDurationTime(duration),'</span>');
	html.push('</span>');
	html.push('<br/>', title.substr(0,37), '</dt>');}
	html.push('</dl><br style="clear: left;"/>');
    jQuery(div).fadeTo(500, 1.0);
    document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
  if (items.length > 0) {
    loadVideo(json.data.items[0].id);
  }
};

function loadVideo(videoID) {
  swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=ytplayer&fs=1&autohide=1",
  'player', quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT, '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
  }

quvic.listVideosCallback = function(json) {
 quvic.jsonFeed_ = json.data;
  var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
  while (div.childNodes.length >= 1) {
    div.removeChild(div.firstChild);
    jQuery(div).fadeTo(0, '.01');
    }
  var items = json.data.items || [];
  var html = ['<dl class="videos">'];
  for (var i = 0; i < items.length; i++) {
    var title = json.data.items[i].title;
    var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
    var videoID = json.data.items[i].id;
    var duration = json.data.items[i].duration;

    html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
	html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
	html.push('<span class="duration">',getDurationTime(duration),'</span>');
	html.push('</span>');
	html.push('<br/>', title.substr(0,37), '</dt>');}
    html.push('</dl><br style="clear: left;"/>');
    jQuery(div).fadeTo(500, 1.0);
    document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
};
 
quvic.updateNavigation = function(page) {
  quvic.nextPage = page + 1;
  quvic.previousPage = page - 1;
  document.getElementById(quvic.NEXT_PAGE_BUTTON).style.display = 'inline';
  document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).style.display = 'inline';
  if (quvic.previousPage < 1) {
    document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = true;
  } else {
    document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = false;
  }
  document.getElementById(quvic.NEXT_PAGE_BUTTON).disabled = false;
};

function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
 

function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("player");
        ytplayer.addEventListener("onError", "onPlayerError");
      }


function playVideo(videoID,title){
     if(document.title)
		document.title = title;
    
	ytplayer.loadVideoById(videoID);
}

function HDPlayer() {
        resizePlayer(quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT);
      }

function HQPlayer() {
        resizePlayer(quvic.PLAYER_STANDARD_WIDTH, quvic.PLAYER_HEIGHT);
      }

function resizePlayer(width, height) {
        var playerObj = document.getElementById("player");
        playerObj.height = height;
        playerObj.width = width;
      }

function addslashes(str) {
	str=str.replace(/\'/g,'\\\'');
	str=str.replace(/\"/g,'');
	return str;
}

function stripslashes(str) {
	str=str.replace(/\\'/g,'\'');
	return str;
}

var imname;
var timer;
function mousOverImage(name,id,nr){
	if(name)
		imname = name;
	imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
	imname.style.border = 	'3px solid silver';
	nr++;
	if(nr > 3)
		nr = 1;
	timer =  setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
	if(name)
		imname = name;
	imname.style.border = 	'3px solid #fff';
	if(timer)
		clearTimeout(timer);
}
function getDurationTime(sec)
{
	var sec_div = ''+((sec%60) | 0);
	if(sec_div.length == 1)
		sec_div = '0'+sec_div;
	return ((sec/60) | 0)+':'+sec_div;
}

This draws on jQuery JavaScript Library v1.4.2 and swfObject; A similar script providing this functionality would also be acceptable.

Hi Guys

I have been trying to implement a way of using `onclick` to fill out a form field, with a Value assigned by a clickable rollover image.

So i have a image rollover of a PC, i give the PC a Value? ID? of `PC No34`
When the image is clicked it updates its Value of PC No34 to a Form text field which is named `pcid` the Form is on the same page as the PC rollover image. I have been trying most of the day but not getting it. Pls help

Thanks for any help with this

Willo

I sometimes see that some people use this expression:
event = event || window.event
Why people need to do this? What does it mean?

hello,

Im trying to write a program when the user clicks on the button,
the textbox should display "how are you ".
This is what I tried :



<html>
<head>
<title>"Click"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
<input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'">
</p>
<p>
<input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'">
</p>


<p>

<button onclick="textbox1.value="how are you">Click Me!</button>

</p>



</body>

</html>

I am having trouble understanding why this does not work?

Code:

<HTML>

<HEAD>

<TITLE>Event Loops</TITLE>

<SCRIPT TYPE="text/javascript">

function seturl(a,b,c,d,e)
{
	this[0] = a;
	this[1] = b;
	this[2] = c;
	this[3] = d;
	this[4] = e;
}

function selectPage(list) {
	var page = Math.floor(Math.random()*4);
	winow.open(list[page],"Random_Page");
}

choices = seturl("http://www.google.com,
		 "http://www.yahoo.com,
		 "http://www.youtube.com,
		 "http://www.bing.com,
		 "http://www.xbox.com");



</SCRIPT>

</HEAD>

<BODY onLoad="selectPage(choices);">

<H1>Please Wait...</H1>


</BODY>

</HTML>