|
JavaScript - Wait Until Embedded Font Is Loaded
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?
Similar TutorialsHi, 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! Hey there guys, I'm working with an AJAX request that returns some stuff to print in 2 boxes. All working great, so I decided to make something fluffy, when I click a result in the AJAX request, he filters the clicked result, so you only see that clicked row. When clicked again, the old results will return. All working great. Now, my problem, I wanted a checkbox after every row in the search results and when the user clicks twice on a result to filter it and than goes back to the old results to check the checkboxes again that were checked before filtering that component. I made the functions and it didn't work till I put some alerts in, when the return function got some time to finish printing (like with the user had to click on OK in the alert) it worked. When I deleted the alerts, it didn't work again... I searched on the internet, found a function to wait for an image to load or smth similar and I found some guys that used a function to wait for a specific time (1 sec for example) and that's not what I want. If I use a specific waittime it can still fail if the PC is slow, or whatever, it's just not nice coding. So, is there something I can do so it waits till my AJAX request has been printed? Thanks! 'x. Hey, I have a calculation system that uses ajax with php and xml and executes with onkeyup. The only problem with this is the result can be returned before the user finishes entering the entire number. My question is how can I give a delay prior to running the rest of the js. I know how to use setTimeout() but will it get reset out every time the function is called or for example if they enter 5 characters in the form, will the script be called 5 times with a second delay from each or will it only be called once? Is there a performance degradation involved? Hope that made sense. Thanks! ok. so i have all these big images and i need to let the whole page load before the viewer sees it what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that. Help! This is my first post and hope someone can show me how to have JavaScript wait until a function has completed before moving on? I tried a timer, but the database does not always came back with data durning the time alloted. Thank you for any help. Code: function RunMerch()
//Reprompt script
{
var fW = (typeof getFormWarpRequest == 'function' ? getFormWarpRequest() : document.forms['formWarpRequest']);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
//fW._oLstChoicesMyFieldName.selectedIndex = 0;
var preFix = '';
if (fW.elements['cv.id'])
{
preFix = fW.elements['cv.id'].value;
}
setTimeout('oCV' + preFix + '.promptAction(\'reprompt\')', 1000);
{
//Call val () function -- This is where I want it to complete the reprompt
function before moving on
val();
}
}
// This will run the valtradselection() function
function val()
{
valtradselection();
}
I try to get data from database and display them onto a div, after all messages are shown on the div, then only it will know the scrollheight of the div, it will auto scroll to the bottom of div as default by function asd(). My problem is when there are too many messages on database, it took very long time to display them all onto the div, so asd() executed before all messages are displayed. Meaning the scrollheight of the div is incorrect at this point, thus auto scroll to bottom is fail. Code: $(function() { showMsg(); asd(); });
How to wait until showMsg() finish render the contents before execute asd()? I havejQuery.get(); .append(); .replace(); .innerHTML inside showMsg(). The problem is fixed when I use timeout to execute asd() after 3 seconds : Code: $(function() { showMsg(); setTimeout(asd();, 3000); });
That's why I sure asd() is executed when showMsg() is not yet finish loaded the contents. I guess I know where is the problem. If showMsg() is executed BEFORE the DOM is ready, and if asd() is executed AFTER DOM is ready (at this point all messages are rendered already), so the problem is fix. But now my situation is AFTER the DOM is ready, all messages still not yet finish rendered, because showMsg() and asd() are executed only AFTER the DOM is ready. "executed" doesn't mean "finish rendered". My question is how to make sure showMsg() finish rendered the contents into a div before execute asd() ? Watching firebug on facebook, I noticed I'm able to receive chat messages and notifications without constantly polling the server. How is this achieved? Google gives me mixed (seemingly irrelevant) results. I read 3 different methods related to "reverse AJAX" but it doesn't seem to be exactly what I'm looking for - i.e., no constant polling and no "piggy-backing" (waiting for user to do something then send extra data).
Hey all, So this has been stumping me for the past couple days and I am hoping someone can give me a clue on how this can be done. I have this function that is called when a next button is clicked: Code: function navigateToPage(pageurl){
audfile = null;
pauseaudio();
jQuery("#coursecontent").attr("src", pageurl);
jQuery("#coursecontent").load(function() {
audfile = window.coursecontent.__backgroundaudio;
});
//WAIT HERE UNTIL audfile IS NOT NULL
playnextsound();
}
My problem is that I have content loading in an iframe (coursecontent). I can't call playnextsound() until that content is loaded. I know that I could just put the playnextsound() in the load function but that won't work as I am trying to find a workaround for audio autoplay on the ipad. That is why I am setting the audfile in the load function. I need to wait until audfile is no longer null before calling playnextsound(). The problem is that I can't call playnextsound() from inside any timer or anything because it will cause autoplay audio to not work. I thought maybe a while loop would do the trick but that seems to just create an infinite loop. I would be forever grateful if someone could give me any pointers. I have been using a javascript code to display a "Please wait..." message on screen but it seems to work in some instances and not in others. Please assist me with javascript code that works in all instances Issue 1:- it doesnt pops up with d wait msg ven v click on buttons.. the buttons are not submit buttons.. instead on clicking dat button it calls a fnformsubmit() userdfnd funtion.. Issue 2:-- even after d response cums the wait msg window doesnt close.. it hangs in d backgrnd.. The foll code is used in the footer.jsp file... Please assist... <html> <head> <script type="text/javascript" src="/js/os/jquery-1.5.1.min.js" ></script> <script type="text/javascript" src="/js/os/jquery-ui-1.8.14.custom.min.js"></script> <link rel="stylesheet" type="text/css" media="all" href="/js/os/jquery-ui-1.8.14.custom.css"> <script type="text/javascript"> for (var i = 0; i < document.links.length; i++) { var attrib = document.links[i]; if (attrib.addEventListener) { attrib.addEventListener('click', attachModalDialog, false); } else if (attrib.attachEvent) { attrib.attachEvent('onclick', attachModalDialog); } } function attachModalDialog(evt) { //alert('for Click event.'); $(ModalDialog).dialog({ modal: 'true', title: 'Please Wait...', width: 400, height: 300, closeOnEscape: false }).dialog('open'); return true; } </script> </head> <body> <div id="ModalDialog" style="display:none;"> <pre> Server side process is in-progress. Please wait..... </pre> </div> </body> </html> Hi, I have php script that uploads a file. once i click upload it should display a animated GIF image or "Loading please wait" message with the backround transparent screen covering the whole page so that the user is not able to click anything during file upload. How can i do this? Could someone help me on this. Thanks in advance. I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack. I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded. the code to start the javascript is: Code: <script type="text/javascript">
$(document).ready(function(){
$('#photos45').galleryView({
panel_width: 980,
panel_height: 300,
gallery_width: 980,
gallery_height: 900,
frame_width: 120,
frame_height: 50,
pause_on_hover: true,
nav_theme: 'light'
});
});
</script>
and the html is: Code: <div style="height:360px; overflow:hidden; " > <ul id="photos45"> <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li> <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> </ul> </div> I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he http://bit.ly/8QRXWU 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!! Hey all, I am doing an image/data rotating script. I get the data from a XML. I parse that data and build the divs and such. Data Set 1 --- background image in a div, with a button and some text overlayed on the div. ... ... Data Set 4 -- etc.. The thing is, I load the script and the div appears, BUT the text overlay appears first THEN the image pops up for the first Data Set. I can't have that. I need them both to appear at once. Is there a way to determine that a div background image is loaded? -- I have access to the prototype js library. thanks. i have an iframe on my webpage and i am loading appropriate page in it by clicking appropriate button but when user logs out and at that time some page is opened in iframe corresponding to the login pages(like "edit profile") of user then at that moment i want to know that what page is loaded in iframe so that i close it(if it corresponds to pages of login like "edit profile") as user logs out and if it does not correspond to login pages then it remains as it is.For doing that i must know that what page is loaded in iframe and compare it in " if(condition){statement} in logout function" with the logion pages so that i know that if any of them is loaded in iframe and if loaded then close it.Can you help me with that by giving exact code example. Hi, I'm having some issues turning this "Please Wait"/Disabled button into a function. Code: <input type="submit" value="Submit Form" onClick="this.disabled = 'true'; this.value='Please wait...';" /> Code: function pleasewait()
{
this.disabled = 'true';
this.value='Please wait..'
}
<input type="submit" value="Submit Form" onClick="pleasewait();" />
Thanks much Hii...i have created a Gallery for my website..now i want to add a Please Wait gif image between every picture until it loads completely..So Please Help..where to and what to add..? HTML Part : Code: <div id="gellary"> <center> <form name=slideform> <table cellspacing=1 cellpadding=4 bgcolor="#4b7b9f"> <tr> <td align=center bgcolor="white"> <font style="color:#24618e"><b>Our Gallery</b></font> </td> </tr> <tr> <td align=center bgcolor="white" width=960 height=540> <img src="gallery/gall1.jpg" name="show" height="540" width="960"> </td> </tr> <tr> <td align=center bgcolor="#88d6f0"> <select name="slide" onChange="change();"> <option value="gallery/gall1.jpg" selected >Image 1 <option value="gallery/gall2.jpg" >Image 2 <option value="gallery/gall3.png">Image 3 <option value="gallery/gall4.png">Image 4 <option value="gallery/gall5.png">Image 5 <option value="gallery/gall6.jpg">Image 6 <option value="gallery/gall7.jpg">Image 7 <option value="gallery/gall8.jpg">Image 8 </select> </td> </tr> <tr> <td align=center bgcolor="#1797c4"> <input type=button onClick="first();" value="<< First" title="Beginning"> <input type=button onClick="previous();" value="<<" title="Previous"> <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay"> <input type=button onClick="next();" value=">>" title="Next"> <input type=button onClick="last();" value="Last >>" title="End"> </td> </tr> </table> </form> </center> </div> =============================== JavaScript Part: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
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 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
|
|||||||