JavaScript - Scripts Run Before Site Is Loaded - I Think

I'm having some problem with this DHTML app. The problem is that when i click on an image button, nothing happens.
I have verified that the DOM event handlers are loaded. However, when i click on the images (buttons), nothing happens



Code:

var PenSize = "3";
var PenColor = "Black";
var LoadFile = "";
var UIstatus = "visible";
var CurrentNote = 0;
var BGcolor = "#C7C1A3";
var DataPath = "\Data\\";
var ImageExtension = ".img";
var FileList = [];
var SystemPath;
var UIstatusLandscape = "visible";
var UIstatusPortrate = "hidden";
var Server = "localhost";
var UserName = "guest";
var Password = "guest";
var NxtNote = new Image();
var Mode = "Landscape";
var DataLibrary = "notes.txt";

document.onkeyup = ToggleUI;

// Startup Script
if (document.addEventListener) 
{
  document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
  alert("loaded");
}

function LoadEventListeners()
{
 // Event Listeners for UI Buttons
 var eventUp = document.getElementById("UpNote");
 var eventPlus = document.getElementById("AddNote");
 var eventSave = document.getElementById("SaveNote");
 var eventClear = document.getElementById("ClearNote");
 var eventDelete = document.getElementById("DeleteNote");
 var eventOptions = document.getElementById("Options");
 var eventDown = document.getElementById("DownNote");
 
 eventUp.addEventListener("click", NoteUp, false);
 eventPlus.addEventListener("click", AddNote, false);
 eventSave.addEventListener("click", SaveNote, false);
 eventClear.addEventListener("click", ClearSketch, false);
 eventDelete.addEventListener("click", DeleteNote, false);
 eventOptions.addEventListener("click", ConfigOptions, false);
 eventDown.addEventListener("click", NoteDown, false);
 
 // Event Listeners for the Options Dialogue
 var eventDown = document.getElementById("OptionsClose");
 eventDown.addEventListener("click", ConfigOptions, false);
 
 
 // Finish the Startup Process
 Init();
}   

function Init()
{
 // Get the System Path
 GetSystemPath("SketchBook.html");
 
 // Load All Filenames of the DataPath directory into an array
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
 // Check to see if the Notebook is blank
 if(TmpLoad == null)
   {
	// The botebook is Blank
	alert("Notebook is Blank");
	return;
   }
   
 // Parse the CSV file data into an Array
 FileList = TmpLoad.split(",");

 //Load the first Note onto the canvas
 
   // if there are no notes in the directory, don't try to load anything
   if(FileList.length < 0)
      {
	   var Source = LoadFromDisk(FileList[CurrentNote]);
	   NxtNote.src = Source;
	   
	   // Load the NoteBookCounter  data into the innerHTML of it's DIV
	   // document.getElementById("NoteBookCounter").innerHTML = "<center><font size='2'>" + CurrentNote + " / " + FileList.length + "</font></center>";
	   
	   // Load the image data onto the canvas
       var canvas = document.getElementById('SketchPage').getContext('2d');
       canvas.drawImage(NxtNote , 0, 0);
	   return;
	  }
}

function ConfigOptions()
{
 if (document.getElementById("Options").style.visibility == "hidden")
    {
     document.getElementById("Options").style.visibility = "visible";
	}
 else
    {
     document.getElementById("Options").style.visibility = "hidden";
    }
 
 // Modify the variables of any selections that were made
 PenSize = document.getElementById('GetPenSize').value;
 PenColor = document.getElementById('GetPenColor').value;
}

function ToggleUI(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
 // KeyValue 18 is the  ALT key
 var KeyValue = 18;
 
 // Use a key to hide the toolbars so that most of the screen is used for the UI
 
 // ********** If the device is in Landscape Mode, toggle the Portrate-Style UI Toolbar
 if(Mode == "Landscape")
 {
 if(KeyID == KeyValue)
   {
    if(UIstatusLandscape == "visible")
	  {
	   UIstatusLandscape = "hidden";
	   document.getElementById("UI_Landscape").style.visibility = "hidden";
	   return;
	  }
	if(UIstatusLandscape == "hidden")
	  {
	   UIstatusLandscape = "visible";
	   document.getElementById("UI_Landscape").style.visibility = "visible";
	  }
   }
  }

 // ********** If the device is in Portrate Mode, toggle the Portrate-Style UI Toolbar
 if(Mode == "Portrate")
 {
 if(KeyID == KeyValue)
   {
    if(UIstatusPortrate == "visible")
	  {
	   UIstatusPortrate = "hidden";
	   document.getElementById("UI_Portrate").style.visibility = "hidden";
	   return;
	  }
	if(UIstatusPortrate == "hidden")
	  {
	   UIstatusPortrate = "visible";
	   document.getElementById("UI_Portrate").style.visibility = "visible";
	  }
   }
  }
 
}

function Draw(element, event) 
{
  document.addEventListener("mousemove", PenHandler, true);
  document.addEventListener("mouseup", upHandler, true);

  event.stopPropagation();
  event.preventDefault();
	
  function PenHandler(event) 
  {
  
    var x = event.clientX;
	var y = event.clientY;
    
    // mouse event goes here
	var canvas = document.getElementById("SketchPage");
    var ctx = canvas.getContext("2d");

	if (PenShape ="Circle")
	   {
	    // This draws a circle
        ctx.fillStyle = PenColor;
        ctx.beginPath();
        ctx.arc(x, y, PenSize, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
	   }
	 
    event.stopPropagation();
  }

  function upHandler(event) 
  {
    document.removeEventListener("mouseup", upHandler, true);     
    document.removeEventListener("mousemove", PenHandler, true);
    event.stopPropagation();
  }

}

function SaveNote()
{
 alert("triggered");
 return;
 // Get the current file name
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;

 // Convert the Canvas Data into a Base64 encoded PNG image
 var Note = document.getElementById("SketchPage").toDataURL();
 
 // Write the PNG file to the disk
 SaveToDisk(FileName, Note);
 
 // Update the Note Library file
   // Read in the current DataLibrary File's Data
   var Tmp = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
   var NewData = Tmp + CurrentNote + ImageExtension + ",";
   
   // Finally Save the updated DataLibrary file
   SaveToDisk(Tmp, NewData);
 
 alert("saved");
}

function NoteUp()
{
// Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote == -1)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	  var Source = LoadFromDisk(FileList[CurrentNote]);
	  NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	  ClearSketch();
	  
	 var canvas = document.getElementById('SketchPage').getContext('2d');
     canvas.drawImage(NxtNote, 0, 0);
}

function NoteDown()
{
	 //Display the Next note
	 CurrentNote++;
	 	// Make sure you don't incrimnet to a non-existant note
		if(CurrentNote > FileList.length)
		  {
		   CurrentNote = 0;
		  }
	 var Source = LoadFromDisk(FileList[CurrentNote]);
	 NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	 ClearSketch();
	 var canvas = document.getElementById('SketchPage').getContext('2d');

     canvas.drawImage(NxtNote, 0, 0);
	 
	 // Update the NoteBookCounter  data into the innerHTML of it's DIV
     //document.getElementById("NoteBookCounter").innerHTML = "<center><font size='2'>" + CurrentNote + " / " + FileList.length + "</font></center>";
	 return;
}

function DeleteNote()
{
 // Delete The current note
 alert("Deleting Page - " + FileList[CurrentNote]);
 
 // Remove the file from the File System
 DeleteFile(FileList[CurrentNote]);
 
 // Remove the Element containing the FileName to be deleted from the array
 for (var x = 0; x < FileList.length; x++)
     {
	  if(FileList[x] == CurrentNote + ImageExtension)
	    {
	     FileList.splice[x];
		 return;
		}
	 }

 // Rewrite the Library File
 var TmpData = "";
 for (var x = 0; x < FileList.length; x++)
     {
	  TmpData = TmpData + FileList[x] + ",";
	 }
     // Write the new Library File
	 SaveToDisk(SystemPath + DataPath + DataLibrary, TmpData);
	 
 // Load The Previous Note
 
 // Display the previoius note
 CurrentNote--;
	    
 // Make sure you don't incrimnet to a non-existant note
 if(CurrentNote == -1)
   {
    CurrentNote = FileList.length;
   }
 
 // If the DataLibrary is zero length - just clear the Canvas and Return
 
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 if(TmpLoad == null)
   {
    CurrentNote = 0;
    ClearSketch();
	return;
   }
 
   // Your about to place a new image on the Canvas
   // Clear the Current Canvas Data First
   ClearSketch();
   
   var Source = LoadFromDisk(FileList[CurrentNote]);
   NxtNote.src = Source;
    	 
   // Load the image data onto the canvas
   var canvas = document.getElementById("SketchPage");
   var context = canvas.getContext("2d");
   canvas.drawImage(NxtNote, 0, 0);
}

function AddNote()
{
 // Add a note to the notebook and at the end of the File List
 // **** Later this function should be modified to be an INSERT function rather than just an add
 // Just incase the user needs to go back an edit and add more things to their notebook
 
 var NumberOfNotes = FileList.length;
 CurrentNote = NumberOfNotes + 1;
 
 // Clear the Canvas
 ClearSketch();
 
 // Write a blank image file to the Data directory so that we have the actual file there
 
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;
 
 // Write it to the disk
 SaveToDisk(FileName, "Null Content");
 
 // Add the new Note Data to the end of the array
 FileList.length++;
 FileList[FileList.length] = CurrentNote + ImageExtension;
 
 // Rewrite the Data Library File
 TmpData = "";
 for (var x = 0; x < FileList.length; x++)
     {
	  TmpData = TmpData + FileList[x] + ",";
	 }
 
 // Write the new Data Library to the Disk
 SaveToDisk(SystemPath + DataPath + DataLibrary, TmpData);
	 
 // Refresh the Directory List
 FileList = [];
 
 // Load All Filenames of the DataPath directory into an array
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
 // Parse the CSV file data into an Array
 FileList = TmpLoad.split(",");
}

function ClearSketch()
{
 // Clear the contents of the Canvas
 
 //Draw a rectangle that covers the canvas
 var canvas = document.getElementById("SketchPage");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = BGcolor;
 ctx.fillRect (0, 0, canvas.width, canvas.height);
}

function Crypt(method)
{
 // This function will Encrypt or Decrypt All the NoteData
 if(method == "encrypt")
   {
    
    return;
   }
 
 if(method == "decrypt")
   {
    
    return;
   }
}

function Archive(method)
{
 // This function will Restore or Backup all NoteData to a network resource
 if(method == "restore")
   {
    
    return;
   }
 
 if(method == "backup")
   {
    for(var x = 0; x > FileList.legth; x++)
	    {
         // Read the data of each note
	     var NoteData = LoadFromDisk(FileList[x]);
	
	     // Upload the Note to the Server
	     var Url = Server + "/Backup.php?" + x + "?" + NoteData;
	     ajaxRequest(Url);
		}
    return;
   }
}

// These are the Ajax Functions for Sending and Recieving Files

function callback(serverData, serverStatus) 
{ 
 alert(serverData);                                                    // Called automatically when we get data back from server
}                                                                      // Display an alert box with the recieved data

var url='http://somedomain.com/getdata.php?doc=sometext.txt';          // This is the URL we will call.
function ajaxRequest(url) 
{
   var AJAX = null;                                                    // Initialize the AJAX variable.
   if (window.XMLHttpRequest) 
      {                                                                // Does this browser have an XMLHttpRequest object?
       AJAX = new XMLHttpRequest();                                    // Yes -- initialize it.
      } 
   
   AJAX.onreadystatechange = function() {                              // When the browser has the request info..
      if (AJAX.readyState == 4 || AJAX.readyState == "complete") 
	     {                                                             //  see if the complete flag is set.
          callback(AJAX.responseText, AJAX.status);                    // Pass the response to our processing function
         }                                                             // End Ajax readystate check.
   }
   
   AJAX.open("GET", url, true, UserName, Password);                    // Open the url this object was set-up with.
   AJAX.send(null);                                                    // Send the request.
}
// ******************** These are the XPCOM Functions ************************

function GetSystemPath(ApplicationName)
{
 // This function should Detect the system directory of the app
 // and return that string as the  SystemPath variable
 // You must supply the filename of the HTML file that it is being called from
 // I suppose later i could add the code to detect the HTML's actual file name
 // It's on the ToDo List...
 
 var GetSysPath = self.location;
 GetSysPath = GetSysPath + "";
 Get = GetSysPath.replace("file:///" , "");
 Get = Get.replace(/\//g , "\\");
 Get = Get.replace(ApplicationName, "");
 SystemPath = Get;
 return SystemPath;
}

function DeleteFile(FileName)
{
 // Delete a local file
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
 if (aFile instanceof Components.interfaces.nsILocalFile)
    {
     aFile.initWithPath(FileName);
     aFile.remove(false);
    }
}

function SaveToDisk(filepath, content) {
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to save file was denied.");
	}
	var file = Components.classes["@mozilla.org/file/local;1"]
		.createInstance(Components.interfaces.nsILocalFile);
	file.initWithPath( filepath );
	if ( file.exists() == false ) {
		file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
	}
	var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
		.createInstance( Components.interfaces.nsIFileOutputStream );

	outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
	var output = content;
	var result = outputStream.write( output, output.length );
	outputStream.close();
}

function LoadFromDisk(filePath)
{
 if(window.Components)
   try
   {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(filePath);
    if (!file.exists())
    return(null);
    var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    inputStream.init(file, 0x01, 00004, null);
    var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
    sInputStream.init(inputStream);
    return(sInputStream.read(sInputStream.available()));
   }
   catch(e)
   {
    //alert("Exception while attempting to load\n\n" + e);
    return(false);
   }
return(null);
}

Hello everyone,
I have a code in JavaScript that crops an image, but I have a problem:
the image have to be loaded before I cropped it.. so I have to add an examination that ONLY when the image was loaded, crop it.. (I need a code that works all browsers).. I think I need an operation that is called: Complete().

can somenone help me please?
my english is not very good so I hope I explained my problem well..
Thank you all!!

In my page, I have a main iframe where I want all the content of my links to be loaded. I want the iframe's height to resize according to the content. All the linked pages are in the same domain. I have tried some scripts I found, but nothing has the result I want.

The HTML code is:
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="nav">
  <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a>
  <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> 
  <a href="contact.html" target="frame">Contact</a>
  </div> 
  <iframe id="frame"></iframe>
  <div id="footer"></div>
</div>
</body>
</html>

The CSS code is:
Code:

div#container {
    height: 100%;
    width: 100%;
}
div#header {
    top: 0px;
    width: 100%;
    height: 80px;
    position: fixed;
    background-color: transparent;
    text-align: center;
}
div#nav {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
    top: 120px;
    width: 100%;
    height: 40px;
    position: fixed;
    text-decoration: none;
    font-weight: bolder;
    font-variant: normal;
}
div#footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    bottom: 0px;
    position: fixed;
    height: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
 }
#frame {
    position: absolute;
    top: 200px;
    bottom: 40px;
    width: 800px;
    border: none;
    left: 120px;
    height: auto;
}
a:link {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
}
a:visited {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
}
a:hover {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    font-style: italic;
    color: #FC0;
}

I don't know how to make scripts on my own, so I would appreciate any help. Thank you!

Hello to all, new to this forum so pardon any mistakes in my question.


I have an overlay that contains a video which loads upon page load.

Code:

<script type="text/javascript">
$(function() {	
	$("#intro_video").overlay({
	mask: {
		color: '#000',
		loadSpeed: 1000,
		startOpacity: 0,
		zIndex: 9997,
		opacity: .85
	},
	top: 131,
	closeOnClick: true,
	load: true,

onLoad: function(){
var $overlay = this;
setTimeout(function(){$overlay.close()}, 44000)
	}});
  });

</script>

I'd like to delay this by about 5 seconds or so but can't figure out how to do so as I am a JS n00b.

The overlay is contained in a div: <div id="intro_video">

Thank you for your help.

Hi

As title says :
"How to hide div so his content won't be loaded until he is visible?"

And is it possible to add preloader for that div?

Hi all,

I am facing problem in preventing my web page being loaded into an iFrame. I search in internet and found this solution :

if (self == top)
document.documentElement.style.display = 'block';
else
top.location = self.location;

The above java script code is simple redirecting me to the home page of my web site. But I donot want that kind of solution.

When anybody tried to access my web page through iFrame, it should show an error message like "The content of the web site cannot be loaded into an IFrame". This message should be displayed inside the iFrame.

For example, if we tried to access "google.com" site in an iframe, the website should not allow the iframe object to load into it, insted it will display an error message along with a provision to open webiste with an external link with it.

Any help?

thanks,
-Sanath

I have an embedded font in my CSS however somtimes the texts loads before the font loads (i.e. the text is loaded in a normal font the it changes after). Is there anyway i can say dont load page until the font file is loaded, or maybe dont show the div until the font is loaded?

Im running js to do some color coding in a table, i tried adding the onload but its not working, can someone take a look ? I need this to run when the entire page is fully loaded and not before.

THE FUNCTION
Code:

var table1_column_settings = [
    [32,40],          // ito score - First column values more than 5 will be red, 2-5 will be yellow, less than 2 will be green
    [11,12],          // schedule
    [14,15],           // cost
    [11,12],	      // execution
    [9,10],	      // commercial
    [41,50]          // total
    ];


// Loop through all cells in a table, coloring each one according to column-specific thresholds
function color_cells(table, column_settings)
{
    // How many rows are in the table?
    var num_rows = table.rows.length;
    
    // Loop through all rows.
    for (var r = 0; r < num_rows; r++)
    {
        // Get a reference to the current row.
        var this_row = table.rows[r];
        // How many cells are in this row?
        var num_cells = this_row.cells.length;
        
        // Loop through all cells in this row.
        for (var c = 0; c < num_cells; c++)
        {
            // Get a reference to the cell.
            var this_cell = this_row.cells[c];
            
            // Get the numerical value of the first (and only) node inside the cell.
            var cell_value = parseFloat(this_cell.firstChild.nodeValue);
            // If it's a number (literally if it's not not not-a-number)
            if (!isNaN(cell_value))
            {
                // Apply the color according to the thresholds for this column number (c).
                if (cell_value > column_settings[c][1]) this_cell.style.backgroundColor= "red";
                else if (cell_value > column_settings[c][0]) this_cell.style.backgroundColor= "yellow";
                else this_cell.style.backgroundColor = "green";
            }
        }
    }
}

EXECUTE THE FUNCTION
Code:

</TBODY>
</table>

<script> color_cells(document.getElementById("table1"), table1_column_settings);</script>

//I TRIED LIKE THIS <script> window.onload=color_cells(document.getElementById("table1"), table1_column_settings);</script> AND IT DIDNT WORK

Code:

<div id="themenu" style="position:relative">
<script type="text/javascript" src="menu.js">

function Go(){return}
Menu1=new Array("Home","","",0,20,133);
Menu2=new Array("News","","",0,0,133);
Menu3=new Array("Dressage","","",4,20,133);
Menu3_1=new Array("Entry Form","","",0,20,133);
Menu3_2=new Array("Results and League","","",0,20,133);
Menu3_3=new Array("Diary Dates","","",0,20,133);
Menu3_4=new Array("Times","","",0,27,133);
Menu4=new Array("BHS Trec","","",1,0,133);
Menu4_1=new Array("Entry Form","","",0,20,133);
Menu5=new Array("Showjumping","","",1,0,133);
Menu5_1=new Array("Results","","",0,20,133);
Menu6=new Array("Horse Trials","","",0,20,133);
Menu7=new Array("Help Days","","",0,20,133);
Menu8=new Array("Membership","","",0,20,133);
Menu9=new Array("Classified","","",0,20,133);
Menu10=new Array("Payments","","",0,20,133);
Menu11=new Array("What's On","","",0,20,102);

var NoOffFirstLineMenus=11; 
var LowBgColor='#0F228B'; var LowSubBgColor='#0F228B';var HighBgColor='#0F228B'; var HighSubBgColor='#0F228B'; var FontLowColor='#FFFF00'; var FontSubLowColor='#FFFF00';var FontHighColor='#FFCC00'; var FontSubHighColor='#FFCC00';var BorderColor='#0F228B'; var BorderSubColor='#0F228B'; var BorderWidth=3; var BorderBtwnElmnts=0; var FontFamily="Tahoma, Verdana, Arial" var FontSize=10; var FontBold=0; var FontItalic=1; var MenuTextCentered='center'; var MenuCentered='left';var MenuVerticalCentered='top'; var ChildOverlap=.2; var ChildVerticalOverlap=.2; var StartTop=3; var StartLeft=28; var VerCorrect=0; var HorCorrect=0; var LeftPaddng=3; var TopPaddng=6; var FirstLineHorizontal=0; var MenuFramesVertical=1; var DissapearDelay=1000; var TakeOverBgColor=1; var FirstLineFrame='navig'; var SecLineFrame='space'; var DocTargetFrame='space'; var TargetLoc='themenu'; var HideTop=0; var MenuWrap=1; var RightToLeft=0; var UnfoldsOnClick=0; var WebMasterCheck=0; var ShowArrow=0; var KeepHilite=1;var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; var AgntUsr=navigator.userAgent.toLowerCase();var DomYes=document.getElementById?1:0;var NavYes=AgntUsr.indexOf('mozilla')!=-1&&AgntUsr.indexOf('msie')==-1?1:0;var ExpYes=AgntUsr.indexOf('msie')!=-1?1:0;var Opr=AgntUsr.indexOf('opera')!=-1?1:0;var Opr6orless=window.opera && navigator.userAgent.search(/opera.[1-6]/i)!=-1 f ( Opr6orless!=1 ) { ExpYes = 1 }var DomNav=DomYes&&NavYes?1:0;var DomExp=DomYes&&ExpYes?1:0;var Nav4=NavYes&&!DomYes&&document.layers?1:0;var Exp4=ExpYes&&!DomYes&&document.all?1:0;var PosStrt=(NavYes||ExpYes)&&!Opr6orless?1:0;var FrstLoc,ScLoc,DcLoc;var ScWinWdth,ScWinHght,FrstWinWdth,FrstWinHght;var ScLdAgainWin;var FirstColPos,SecColPos,DocColPos;var RcrsLvl=0;var FrstCreat=1,Loadd=0,Creatd=0,IniFlg,AcrssFrms=1;var FrstCntnr=null,CurrntOvr=null,CloseTmr=null;var CntrTxt,TxtClose,ImgStr;var Ztop=100;var ShwFlg=0;var M_StrtTp=StartTop,M_StrtLft=StartLeft;var StaticPos=0;
var LftXtra=DomNav||DomExp&&!Exp4&&!Opr6orless?LeftPaddng:0; 
var TpXtra=DomNav||DomExp?TopPaddng:0;
var M_Hide=Nav4?'hide':'hidden';
var M_Show=Nav4?'show':'visible';
var Par=parent.frames[0]&&FirstLineFrame!=SecLineFrame?parent:window;
var Doc=Par.document;
var Bod=Doc.body;
var Trigger=NavYes&&!Opr?Par:Opr?Doc:Bod; 
MenuTextCentered=MenuTextCentered==1||MenuTextCentered=='center'?'center':MenuTextCentered==0||MenuTextCentered!='right'?'left':'right';
WbMstrAlrts=["Item not defined: ","Item needs height: ","Item needs width: "];
if(Trigger.onload)Dummy=Trigger.onload;
if(DomNav||Opr)Trigger.addEventListener('load',Go,false); 
else Trigger.onload=Go;
function Dummy(){return}
function CnclSlct(){return false}
function RePos(){
FrstWinWdth=ExpYes?FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
FrstWinHght=ExpYes?FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
ScWinWdth=ExpYes?ScLoc.document.body.clientWidth:ScLoc.innerWidth;
ScWinHght=ExpYes?ScLoc.document.body.clientHeight:ScLoc.innerHeight;
if(MenuCentered=='justify'&&FirstLineHorizontal){
FrstCntnr.style.width=FrstWinWdth+'px';ClcJus();
var P=FrstCntnr.FrstMbr,W=Menu1[5],i;
for(i=0;i<NoOffFirstLineMenus;i++){P.style.width=W+'px';P=P.PrvMbr}}
StaticPos=-1;
if(TargetLoc)ClcTrgt();
if(MenuCentered)ClcLft();
if(MenuVerticalCentered)ClcTp();
PosMenu(FrstCntnr,StartTop,StartLeft)} function UnLoaded(){
if(CloseTmr)clearTimeout(CloseTmr);
Loadd=0; Creatd=0;
if(HideTop){
var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;
FCStyle.visibility=M_Hide}}
function ReDoWhole(){
if(ScWinWdth!=ScLoc.innerWidth||ScWinHght!=ScLoc.innerHeight||FrstWinWdth!=FrstLoc.innerWidth||FrstWinHght!=FrstLoc.innerHeight)Doc.location.reload()}

function Check(WMnu,NoOf){
var i,array,ArrayLoc;
ArrayLoc=parent.frames[0]?parent.frames[FirstLineFrame]:self;
for(i=0;i<NoOf;i++){
array=WMnu+eval(i+1);
if(!ArrayLoc[array]){WbMstrAlrt(0,array); return false}
if(i==0){ if(!ArrayLoc[array][4]){WbMstrAlrt(1,array); return false}
if(!ArrayLoc[array][5]){WbMstrAlrt(2,array); return false}}
if(ArrayLoc[array][3])if(!Check(array+'_',ArrayLoc[array][3])) return false}
return true}

function WbMstrAlrt(No,Xtra){
return confirm(WbMstrAlrts[No]+Xtra+' ')}

my problem is when the page loads, the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading..

what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth..

Code:

<div id="slideshow">
    <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="Image/image2.jpg" alt="Slideshow Image 2" />
    <img src="Image/image3.jpg" alt="Slideshow Image 3" />
    <img src="Image/image4.jpg" alt="Slideshow Image 4" />
</div>

javascript
Code:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );//speed of changing image
});

Hi,

I have a site that runs a javascript slideshow automatically when a user visits it.

It is designed in such a way that I cannot pre-load individual images for aesthetic reasons. (Also the whole concept makes my brain hurt.)

I therefore need 1 of 2 things:

1. A preloader that doesn't show the page or start the slideshow until all the images are loaded.

or

2. I could start with the slideshow paused, and when the page is fully loaded, the play command (currently attached to a 'play' button) is 'sent'.

(I'm not techy, so this is the best I can do as explanation.)

The latter would probably be more elegant, especially if ultimately I could hide the controls for the slideshow with a loading bar until all the html is loaded, and then show them when the slideshow starts.

I'm sorry if this is a really basic question. I tried searching the site but couldn't find anything.

If you do feel like answering, can you imagine that you are speaking to a 5 year old. Then dumb it down a bit. I need all the explanation and clarity I can get!

Thanks!

Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb!

The iframe in question is named "cad"
the initial source once loaded is 'https://urlname.com/mainmenu.asp'
the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28'

[CODE]
function ChangesSrc()
{
var iframeid = document.getElementById(cad);
var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28'
if (iframeid.src = 'https://urlname.com/mainmenu.asp')
iframeid.src = unitstaus;
return false;
}
[[CODE]

I currently found a script that loads an ASX playlist dinamically, allowing the user to choose the item that he wants to watch in Windows media player embedded.
The trouble is that once the user click on the link in the playlist it wont work.
Take a look here http://tv.mghospedagem.com/wmp-pl3.html

Works only on IE.


Code:

<head>
<script language="javascript1.2">

playListLoaded=false;


function loadPlayItems() {
        df=document.getElementById("playItem");
        dp=document.getElementById("playlist");
        WMP9=document.getElementById("MediaPlayer1");

WMP9.url="http://tv.mghospedagem.com/play.asx";
        WMP9.controls.play();

}

function showPlayItems() {
        WMP9=document.getElementById("MediaPlayer1");
        playlistItems=WMP9.currentPlaylist.count;
        for (i=0; i<playlistItems; i++) {
                playitem=document.createElement("a");
                playnext=document.createElement("br");
                playitem.setAttribute("href","#");
                playitem.setAttribute("onclick","playItem("+i+")");
                playitem.innerText=WMP9.currentPlaylist.item(i).name;
                dp.appendChild(playitem);
                dp.appendChild(playnext);
        }
        playListLoaded=true;
        WMP9.controls.play();

}



function setPlayItem(index) {
        WMP9=document.getElementById("MediaPlayer1");
        playlistItems=WMP9.currentPlaylist.count;
        if (playlistItems > 0) {

WMP9.controls.currentItem=WMP9.currentPlaylist.item(index);
                WMP9.controls.play();
        }
}

</script></head>

<body onLoad="loadPlayItems()">
<object id="MediaPlayer1"
classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type="application/x-oleobject" width="600" height="400">
<param name="autostart" value="1">
        <param name="showcontrols" value="1">
        <param name="uimode" value="full">
        <param name="stretchtofit" value="1">
        <param name="enablecontextmenu" value="0">
</object>

<div id="playlist" style="position: absolute; top: 10px; left:
640px; visibility: visible; z-index: 999999999999999;">
<h2>Playlist</h2></div>

<script language="javascript1.2" for="MediaPlayer1"
event="playStateChange">
WMP9=document.getElementById("MediaPlayer1");
if (WMP9.playState==3 && ! playListLoaded) {
        showPlayItems();
}






</script>

The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe.

PHP Code:
<script type="text/javascript">

document.getElementById('video').setAttribute('src',address2);

function closeVideo() {
   document.getElementById('video').style.height='0px'; return false;
   document.getElementById('video').setAttribute('src', address2);
   }
function openVideo() {
        document.getElementById('video').style.height='391px'; return false;
        document.getElementById('video').setAttribute('src', address);
}  
</script> 


So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src.

I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari.

Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking

hi, on my page: here
the logos are greyscale but when the page is loading they flash up in colour?! could this be avoided and hidden?


here is my Javascript o apply greyscale to my logos
Code:

$(window).load(function(){ // On window load. This waits until images have loaded which is essential

		
						// Fade in images so there isn't a color "pop" document load and then on window load
						$("#our-work img").animate({opacity:1},500);
		
						// clone image
						$('#our-work img').each(function(){
							var el = $(this);
							el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0","margin-left":"64px;"}).insertBefore(el).queue(function(){
								var el = $(this);
								el.parent().css({"width":this.width,"height":this.height});
								el.dequeue();
							});
							this.src = grayscale(this.src);
						});
						
						// Fade image 
						$('#our-work img').mouseover(function(){
							$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
						})
						$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
	});		
});
					
	
					// Grayscale w canvas method
					function grayscale(src){
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						var imgObj = new Image();
						imgObj.src = src;
						canvas.width = imgObj.width;
						canvas.height = imgObj.height; 
						ctx.drawImage(imgObj, 0, 0); 
						var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
						for(var y = 0; y < imgPixels.height; y++){
							for(var x = 0; x < imgPixels.width; x++){
								var i = (y * 4) * imgPixels.width + x * 4;
								var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
								imgPixels.data[i] = avg; 
								imgPixels.data[i + 1] = avg; 
								imgPixels.data[i + 2] = avg;
							}
						}
						ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
						return canvas.toDataURL();
				}