|
JavaScript - Image Greyscale Activated After Page Loaded
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();
}
Similar Tutorialsi 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. 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!! 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
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 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! 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 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] My source : Code: <html>
<head>
<title></title>
<script type="text/javascript">
function runcode(cwin)
{
cwin.location.replace("javascript:alert("Loaded complete")");
}
function newtab()
{
win=window.open("http://www.google.com");
setTimeout("runcode(win)",5000);
setTiemout("win.close()",7000);
}
</script>
</head>
<body>
<input type="button" value="Click to open newtab" onclick="newtab()" />
</body>
</html>
I want after newtab is opened 5s, alert window will be opened with message:"Loaded complete". Then 2s it is closed. But it isn't what I expect. Please fix it for me. Thanks in advance! I am having problems calling a JS function from asp.net code behind button click after some code is ran. The first time the button is clicked and it calls the JSfunction the readyState = loading and it cannot find the element. The second time the button is clicked the readystate is complete and it finds the element. Anybody have any suggestions? Here is the code behind ClientScript.RegisterStartupScript(Me.GetType(), "CC", "<SCRIPT language='javascript'>parent.abc('button1')</SCRIPT>") and javascript function abc(src) { if (document.readyState == 'loading') { alert(document.readyState); } else { document.getElementById(src).click(); } } Can a random page be loaded without a prior visit to a site? I have a list of 15 people with a photo and contact information in a table with 3 columns and 5 rows. The issue is that the people near the bottom want a chance to be at the top the first time the page is viewed. It is unlikely that a second visit would happen. Is this possible to load a random page for a site without it being viewed or logged into before, therefore no cookies will be used. My knowledge of Java script code is limited so any help would be great. Thanks Motty I doubt this is possible, but I have no idea what actually happens when a page loads, so I thought I would give it a shot... if a js file that is loaded externally has parameters, is it possible to turn those parameters into variables, giving the user the option to select the variable's value after the page has loaded? maybe a concrete example would be better... in google maps, the api is loaded like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> but if you wanted to specify that you want the api to function in Spanish, you load it like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script> and that language=es is the one that I want to change. But I can't seem to make it into a variable on page load, like this: Code: <script type="text/javascript"> var lang="es"; </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=lang"></script> much less make it changeable once the page has loaded. I have a feeling that this is a really dumb question, but can it be done without reloading the entire page? I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records. However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1. I'm using Javascript and div tags. This is what I have so far. <script type="text/javascript"> function hide(obj) obj1 = document.getElementById(obj); obj1.style.display = 'none'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.display = 'block'; } function show_other(optionValue) { if(optionValue=='C') { show('divClass');} else{hide('divClass'); } if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); } } </script> /* Field1 - is a drop down list */ <select name="ClassType" size="1" onchange="show_other(this.value)"> ... </select> /* Field2 */ <div id="divClass"> ... </div> /* Field 3 */ <div id="divWorkshop"> ... </div> Appreciate any assistance. Thanks Peter Hi, ive been asked to make a blackjack game in javascript but I have a little bit of a problem. When the page loads, it deals cards to the player and the dealer, showing which cards have been dealt and the current scores. When I press the HIT button, i need to add another card to the array player_hand_img, and the value of this card to player_hand. I have successfully created this code, but my question is, how do I update the information (the score and the cards) on the screen after it has loaded? Can you do this in JavaScript or do I need another language? Thanks very much in advance! I have a basic code for geocoding. I use this code for learning. There is only ONE button on the screen My Questions: 1. How can I set focus on this button so it will be activated when I click Enter ? 2. is it possible to initialize the textbox with the clipboard contents when the hta is loaded ? 3. Is it possible to simulate a click on the button each time the hta is loaded ? Here is the code Many thanks !!! Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Gonen title</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAkpclZCcw0Dd8N7urilPb8RTwi2g_12bF65p4zEDwX2jt7cD0dhQvH8snORVwA2VqfU-YMqHbC23bgg" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAkpclZCcw0Dd8N7urilPb8RTwi2g_12bF65p4zEDwX2jt7cD0dhQvH8snORVwA2VqfU-YMqHbC23bgg" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<style type="text/css"> @import url("http://www.google.com/uds/css/gsearch.css"); @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");</style>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(38.134557,-95.800781), 3);
geocoder = new GClientGeocoder();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl()) ;
// bind a search control to the map, suppress result list
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Address cannot be geocoded");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
// place coordinates on clipboard
var input = String(place.Point.coordinates)
window.clipboardData.setData('Text',input);
// will close the window
window.close();
marker.openInfoWindowHtml(place.address + '<br />' + '<b>Coordinates:</b> ' + place.Point.coordinates);
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
// value from input box
// var address = document.forms[0].q.value;
// value from clipboard
var address = window.clipboardData.getData ("Text")
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
//]]>
GSearch.setOnLoadCallback(load);
</script>
<script type="text/javascript">
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table>
<tr>
</tr>
</table>
<br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<form action="#" onsubmit="showLocation(); return false;" name="geoForm">
<b>Click:</b>
<input type="text" name="q" value="" size="0" />
<input type="submit" name="find" value="Get from Clipboard and Map It" />
<br /> </form>
<div id="map" style="width: 100%; height: 480px"></div>
<hr size=1 align=left width=90% color=#000000 style='border: dotted;'>
</form>
</body>
</html>
I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> 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 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 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. |
|||||||