JavaScript - Load 1000 Images Smartly

FireFox is throwing a DOM security error. And i don't really know why. i've used toDataURL() before, and it's never done this.
Hopefully i can get this little app fixed, so that i can use it on my TabletPC for taking notes in class.

The line of code that is throwing this error is:

Code:

var Note = document.getElementById("SketchPage").toDataURL();

here's the full error from the Error Console:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///C:/SketchBook-Dev/SketchBook.js Line: 236"]



here is the JS file:

Code:

var PenSize = "3";
var PenShape = "Circle";
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 UIstatus = "visible";
var Server = "localhost";
var NxtNote = new Image();

document.onkeyup = ToggleUI;

function Init()
{
 // Get the System Path
 GetSystemPath("SketchBook.html");
 
 // Load All Filenames of the DataPath directory into an array
 GetFileList(SystemPath + DataPath, FileList);
 
 //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 image data onto the canvas
       var canvas = document.getElementById('SketchPage').getContext('2d');
       canvas.drawImage(NxtNote , 0, 0);
	  }
}

function HideOptions()
{
 document.getElementById("Options").style.visibility = "hidden";
}

function ToggleUI(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
 var KeyValue = 18;
 
 // Use a key to hide the toolbars so that most of the screen is used for the UI
 if(KeyID == KeyValue)
   {
    if(UIstatus == "visible")
	  {
	   UIstatus = "hidden";
	   document.getElementById("UI").style.visibility = "hidden";
	   return;
	  }
	if(UIstatus == "hidden")
	  {
	   UIstatus = "visible";
	   document.getElementById("UI").style.visibility = "visible";
	  }
   }
 
}

function ShowOptions()
{
 document.getElementById("Options").style.visibility = "visible";
}

function UpdatePenSize()
{
 PenSize = document.getElementById('GetPenSize').value;
}

function UpdatePenShape()
{
 PenShape = document.getElementById('GetPenShape').value;
}

function UpdatePenColor()
{
 PenColor = document.getElementById('GetPenColor').value;
}
	  
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()
{
 // 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);
}

function NextNote(Direction)
{
 if(Direction == "up")
    {
	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   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);
	 return;
	}
	
 if(Direction == "down")
    {
	 //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);
	 return;
	}
}

function DeleteNote()
{
 // Delete The current note
 DeleteFile(SystemPath + DataPath + FileList[CurrentNote]);
 
 // Reload the Directory List
    // Clear the FileList Array
	FileList = [];

  GetFileList(SystemPath + DataPath, FileList);

 // Load The Previous Note
 
 	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	 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);
	 return;
 
}

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
 
 CurrentNote++;
 
 // Add the new Note File name to the end of the FileList Array
 FileList.push(CurrentNote + ImageExtension);
 
 // 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;
 var Note = document.getElementById("SketchPage").toDataURL();
}

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")
   {
    
    return;
   }
}
// ******************** 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 GetFileList(Directory, FileList)
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var _nsILocalFile = Components.classes["@mozilla.org/file/local;1"]
      .createInstance(Components.interfaces.nsILocalFile);
// initialize path to work with
_nsILocalFile.initWithPath(Directory);
 
// get file interface implemenation
// this means that an XPCOM Class can implement multiple interface
var lv_oFile = _nsILocalFile.QueryInterface(Components.interfaces.nsIFile);
var lv_oEntries = lv_oFile.directoryEntries;
 
while(lv_oEntries.hasMoreElements())
{
   var lv_cFile = lv_oEntries.getNext()
     .QueryInterface(Components.interfaces.nsIFile).path;
   FileList.push(lv_cFile);
}
}

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);
}

and the HTML UI code:

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sketch Book v1.0</title>

<script src="SketchBook.js" type="text/javascript"></script>
<script src="JSxpcom.js" language="text/javascript"></script>




</head>
<body onLoad="Init();">
<div id="SketchPageView">
<canvas id="SketchPage" width="480" height="640" style="background: #C7C1A3; position: absolute; top: 0px; left: 0px;" onmousedown="Draw(this, event);"></canvas>
</div>

<div id="Options" style="position: absolute; visibility: hidden; top: 100px; left: 50px;">

<table cellwidth="100" border="0" cellpadding="0" cellspacing="0" height="50">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"><center><b>Options</b></center><img src="./Image/delete.png" style="position:absolute; top: 2px; left: 150px; height: 18; width: 18;" onClick="HideOptions();"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>

<td bgcolor="#bce0f8">

<div style="border: 1px solid black;">
<table>
<tbody><tr>
<td><center>Pen Size</center></td><td><center>Color</center></td>
</tr>
<tr>
<td>
<select id="GetPenSize" onchange="UpdatePenSize();">
  <option value="1">1 px</option>
  <option value="2">2 px</option>
  <option value="3">3 px</option>
  <option value="4">4 px</option>
  <option value="5">5 px</option>
</select>
</td>
<td>
<select id="GetPenColor" onchange="UpdatePenColor();">
  <option value="Black">Black</option>
  <option value="White">White</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green">Green</option>
  <option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<td><input value="Restore" onclick="RestoreData();" type="button"></td><td><input value="Backup" onclick="BackupData();" type="button"></td>
</tr>
<tr>
<td><input value="Encrypt" onclick="EncryptData();" type="button"></td><td><input value="DeCrypt" onclick="DecryptData();" type="button"></td>
</tr>
</tbody></table>
</div>
</td>
<td bgcolor="#bce0f8"></td></tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td><td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</div>
<table id="UI" style="position: absolute; top: 0px; left: 412px; visibility: visible;" border="0" cellpadding="0" cellspacing="0" width="40">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>
<td bgcolor="#bce0f8" height="600">
<img src="./Image/up.png" style="width: 30px; height: 30px;" alt="up" onclick="NextNote('up');"><br><br><br><br>
<img src="./Image/plus.png" style="width: 30px; height: 30px;" alt="add" onclick="AddNote();"><br><br><br><br>
<img src="./Image/save.png" style="width: 30px; height: 30px;" alt="save" onclick="SaveNote();"><br><br><br><br>
<img src="./Image/clear.png" style="width: 30px; height: 30px;" alt="clear" onclick="ClearSketch();"><br><br><br><br>
<img src="./Image/delete.png" style="width: 30px; height: 30px;" alt="delete" onclick="DeleteNote();"><br><br><br><br>
<img src="./Image/gear.png" style="width: 30px; height: 30px;" alt="options" onclick="ShowOptions();"><br><br>
<img src="./Image/down.png" style="width: 30px; height: 30px;" alt="down" onclick="NextNote('down');">
</td>
<td bgcolor="#bce0f8"></td>       </tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td>   <td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</body></html>

hello i'm building a search engine and one of the options i'm implementing is this: the user is able to control the scale of the thumbnail, small, medium and large the problem is that when i have 1000 pictures inside a div when i hit resize i get like a 5 sec delay for them to resize here is the javascript code:

Code:

Code:

var factor;
function fillImg(imgPath, imgElement){
    imageObj = new Image(32,32);
    imageObj.src = imgPath;
    if(imgElement.src != imgPath ){
        imgElement.src = imgPath;
    }
}

function errHandler(err){
    alert("Error occured!");
}

function resizeImgList(scale){
    if(scale == "s"){
        factor = 50;
    }else if(scale ==  "m"){
        factor = 100;
    }else{
        factor = 150;
    }

    var lists = document.getElementById("rs_ls").getElementsByTagName("li");
    for(var li_index = 0; li_index < lists.length; li_index++){
        var canvas = lists[li_index].getElementsByTagName("span");
        for(var c_index = 0; c_index < canvas.length; c_index++){
            var link = canvas[c_index].getElementsByTagName("a");
            for(var a_index = 0; a_index < link.length; a_index++){
                var image = link[a_index].getElementsByTagName("img");
                for(var i_index = 0; i_index < image.length; i_index++){
                    var w = $(image[i_index]).attr("width");
                    var h = $(image[i_index]).attr("height");
                    var results = resizeItem(w,h,factor,factor);
                    var w = results[0];
                    var h = results[1];
                    var m = results[2];
                    $(image[i_index]).attr("width",w);
                    $(image[i_index]).attr("height",h);
                    $(image[i_index]).attr("style","width:"+w+"px;height:"+h+"px;");
                }
                wa = w+12;
                ha = h+12;
                $(link[a_index]).attr("style","width:"+wa+"px;height:"+ha+"px;");
            }
            wc = w+12;
            hc = h+12;
            $(canvas[c_index]).attr("style","width:"+wc+"px;height:"+hc+"px;margin-left:"+m+"px;margin-right:"+m+"px;");
        }
        wli = w + 12 + m * 2;
        hli = h + 12;
        $(lists[li_index]).attr("style","width:"+wli+"px;height:"+hli+"px;");
    }
}


function resizeItem(eWidth, eHeight, tWidth, tHeight) {
    percentage = (tHeight / eHeight);
    newHeight = parseInt(eHeight * percentage);
    newWidth = parseInt(eWidth * percentage);
    if (newWidth > tWidth) {
        percentage = (tWidth / newWidth);
        newHeight = parseInt(newHeight * percentage);
        newWidth = parseInt(newWidth * percentage);
    }
        
    margin = (tWidth - newWidth + 12) / 2;
    results = [newWidth, newHeight, margin];
    return results;
}

each result set of 50 images has this structu

HTML Code:

Code:

<span>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
.
.
.
<li>...</li>   <!-- 50 <li> -->
</ul>
</span>

so 50 results are contained inside a span
each <li> has this structure inside:

HTML Code:

Code:

<li>
<span>
<a href...>
<img>
</a>
</span>
</li>

I altered the resizeImgList function with 1 for loop but even then it didnt seem to improve. i was thinking that i could resize only the results the user is currently seeing inside the div, the current <span> of results but i'm anaware of how to accomplish this please if anyone has any idea I would be gratefull.

Thank you.

Peter.

PS. results (spans) are fetched via AJAX on scrolldown inside the a div (which is the result container).

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

Can someone explain what this does?

Code:

...
<script language=\"Javascript\" type=\"text/javascript\">
	function SecCheck(t) {
		if(t) refresh = setTimeout(\"document.location='index.php';\", t*1000);
	}
</script>

</head>

<body onLoad=\"SecCheck(30)\">
...

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

Hi guys,

I am trying to insert the following call into my page;

Code:

      <script type="text/javascript" defer="true">
$('#query').autocomplete({
    serviceUrl:'service/autocomplete.ashx',
    minChars:1,
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:250,
    deferRequestBy: 0, //miliseconds
    params: { country:'Yes' }, //aditional parameters
    // local autosugest options:
    lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
  });
</script>

It works fine in all browsers except ie(6,7,8) Code:

Internet Explorer can not open website. Operation Aborted.

I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded.

I tried adding Defer="true" to the script however this doesn't seem to work.

Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded?

Thanks guys

George

Hey everyone!

I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click.

I've uploaded the progress he
http://www.aldousmassie.com/newprogress

I'm using this code at the moment to scroll through the background:

Code:

<!-- SCRIPT FOR CHANGING BG ON CLICK -->

<script type="text/javascript">
					imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==3) {
x=-1;
}
}

if (!imgs[x+1]) {
x=-1;
}
</script>
					
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->

<script type="text/javascript">
					imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");

var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==5) {
x=-1;
}

}

if (!imgs[x+1]) {
x=-1;
}
</script>

Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick?

I'd appreciate any tips that point me in the right direction. Thank you.

Hi there,

I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help.

All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that.

What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones.

It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them.

I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images.

I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image.

Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time.

hi guys, i have some code, that is a percent bar that changes colour, it works fine, aprt from when i refresh the page and its still going, the bar resets back to the start, if anyone could help that would be great:

there is some php inside the javascript, to pick up the time left. that should be clear but if not its this:


the java script is this:

PHP Code:
".maketime2($fetch2->lastcrime)." 


Code:

<script language='JavaScript' type='text/javascript' src='/js/countDown.js'></script>
		<script>
		
		var sl = 60;
		var ts = 60;
		var r = 125;
		var g = 0;
		var b = 0;
		
		function updBar(f){
			
			var percent = 1 - (sl / ts);	
			var bar = document.getElementById('percentBar');
			
			if(percent < .5){ g += 125 / ts * 2; }
			else { r -= 125 / ts * 2; }
			
			if(r < .1) r = 0;
			
			bar.style.backgroundColor = 'rgb(' + Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b) + ')';		
			bar.style.width = 300 * percent;
			
			sl -= 1;
			
			if(sl >= 0) setTimeout('updBar()', 1000);
			else document.getElementById('recovering').style.display = 'none';
				
		}
		
		var no_timeleft = 'None';
		//bootloaderAdd('countDown()');
		bootloaderAdd('updBar()');
		bootloaderOn();
		
		</script>

	<div id='recovering'>

		<table width=400 cellspacing=0 cellpadding=2 class=sub2>
		<tr>
		<td height=100 align=center valign=center>
		
		You are currently recovering from your previous crime...<br><br>
		
		<span id='timeleft' style='font-size:16px;'>".maketime2($fetch2->lastcrime)."</span><br><br>
		
		<table width='300' style='background-color:#333333;'>
		<tr>
		<td>

		
		<span style='width:300px; background-color:#333333; text-align:left;'>
		<div id='percentBar' style='background-color:rgb(125, 0, 0); font-size:11px; text-align:right; width:0px;'>&nbsp;</div>
		</span>
		
		</td>
		</tr>
		</table>
	
		
		</td>
		</tr>
		</table>

		<br><br>
		</div>

if your wondering why there are no """ anywhere, its because this javascript is only active when there istime left and is echo'ed out by php.

Cheers.

Dan

Hello,

I have been looking for a good walk-through online, but can't seem to find an exact resolution to what I am trying to do.

Can someone please supply some example code for not displaying everything that is inside a <div>. Basically I do not want social media content to be displayed on secure pages, but want them on every other page. This is what I have:
Code:

<div id="share">
	<ul>
		<li>
			<div class="addthis_toolbox addthis_default_style ">
				<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=###### class="addthis_button_compact">Share</a>
					<span class="addthis_separator">|</span>
				<a class="addthis_button_preferred_1"></a>
				<a class="addthis_button_preferred_2"></a>
				<a class="addthis_button_preferred_3"></a>
				<a class="addthis_button_preferred_4"></a>
			</div>
		</li>	
		<script>
			var addthis_config = {"data_track_clickback":true};
			if (document.location.protocol !== 'https:') {
				$jq.getScript('http://s7.addthis.com/js/250/addthis_widget.js?username=######', function() { });
			}
		</script>
	</ul>
</div>

I am a middleware developer for a design and manufacturing software. We recently have gone from using Crystal reports to using xml based reporting. I am just begining to write reports using xsl, css and java script and transforming to html. The report I am working on has several tables each in a separate div. These tables are populated based on the xml file output form a job file. Base on job settings one or more tables may have no information in them. What I would like to do is hide the divs with empty tables when the page is loaded. I have looked through the forums here and on other sites and have found perhaps hundreds of examples of java script for showing and hiding divs with user input or by being set to a hide state by default. However I need it to be more dynamic. I think this can be done with java script but not sure hopefully someone can help me.

Thanks
PShorty

[CODE]
<script language="JavaScript" type="text/javascript">
fuction init(){
document.getElementById("Name_First").value= "<?php echo $cooker[17]?>" ;
}


window.onload = init;
</script>

</head>
[CODE]
<Body onload="init()">
[CODE]


i have to set the value of the input area. But it doesn't work. when i see the source of the page when displayed on firefox

fuction init(){
document.getElementById("Name_First").value= "Bob Dwight"
}

I see this, The value is right but this doesnot show in the form.

I would like to thank anyone who helps in advance.

My webpage won't load at all in Safari, unless I open it as a link from anbother site or if I manually type in the index.html after the url.

when I take out the javascript though, it work perfectly.

I always works in Firefox though.

Any hints:


<script type="text/javascript" src="stuff/x_core.js"></script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="stuff/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-*******-*");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
var start_z_index = 3000;
function bringtotop( item )
{
item.style.zIndex = start_z_index++;
}

</script>

<script type="text/javascript" src="stuff/x_event.js"></script>

<script type="text/javascript" src="stuff/xenabledrag.js"></script>
<script type="text/javascript" src="stuff/xenabledrag2.js"></script>

Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this?

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test Screenname</title>

<style type="text/css">
body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;}


/*tooltip*/

div.tooltip {
    width: 200px;
    color: #fff;
    text-align: center;
}

div.tooltip h4 {
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 1px #222;
    margin: 0;
    padding: 13px 10px 5px;
    background: url(img/balloon.png) top left no-repeat !important;
    background: url(img/balloon.gif) top left no-repeat;
    font-size: 11px;
}

div.tooltip p {
    margin: 0;
    padding: 0 10px 15px;
    text-shadow: 2px 2px 1px #222;
    background: url(img/balloon.png) bottom left no-repeat !important;
    background: url(img/balloon.gif) bottom left no-repeat;
    font-size: 10px;
}

</style>
<script type="text/javascript" src="mootools.js"></script>

<script type="text/javascript">


  window.onload=function()
  {
    
    
    /* setup tooltips */
    var as = [];

    $S('a').each(function(a){
        if (a.getAttribute('title')) as.push(a);
    });
    
    new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});

  }

  </script>
</head>
<body>
  <a href="#" title="
<?php

    $url = "http://www.blockstatus.com/aim/status-checker/index.php";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname");
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); 
    $result2 = curl_exec ($ch);
    curl_close ($ch);
    $data = $result2;
    $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i';
    preg_match($pattern, $data, $status);
    $output = str_replace("Status: ", "", $status[1]);
    $aimstatus = trim($output);
    echo "$aimstatus";

?>

">Test tooltip</a>

</body>
</html>

Hello

Bit of a nightmare scenario but, the services page isn't loading and from what I can tell, IE 6,7 & 8 are throwing up the same error. It says:

Line: 602
Char 5
Error: 'undefined' is null or not an object
Code: 0

which refers to:
vmlSegments.push('m');
if (glyph.o) {

The page is here
The script it is referring to is typeface.js: http://typeface.neocracy.org/
Hope someone can be a great help and tell me how I can get page loading again.

All the other pages are fine.

p.s. I'm not a coder but designer and hoping to get this fixed myself.


Thank you.