JavaScript - Editing Flexpaper Source - Open Url Automatically

recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source."

this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before?

Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end.

In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content.

Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code:

(function() {
var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
    ae = as[i];
	ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();

Hi,

I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case --

1) When parent page is opening popup window, it is getting refreshed (required from client for some reason).

2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side).

With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same.

Currently I am using below code to open popup

[CODE]
function OpenWindow()
{
if(winPop && !winPop.closed)
{
alert("Popup is already open");
}
else
{
winPop = window.open('MyPopupPage.aspx');
}
}
[CODE]

Please help me to get rid of this problem.
Thanks in advance.

- Bhasker

I do write some php, but have not much idea about JavaScript.

I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.)

PHP Code:
<a href='http://www.".$new[9]."' 
onclick="window.open('http://www.".$new[0]."/');
window.open('http://www.".$new[1]."/'); 
window.open('http://www.".$new[2]."/'); 
window.open('http://www.".$new[3]."/'); 
window.open('http://www.".$new[4]."/'); 
window.open('http://www.".$new[5]."/'); 
window.open('http://www.".$new[6]."/'); 
window.open('http://www.".$new[7]."/'); 
window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> 

Hello everyone!
Recently I found a nice pop up javascript code and I had no problem editing the HTML part,but I have no knowledge in javascript.
So what I would like to do is to make the pop up show every 24 hours when a visitor votes.I read somewhere that this will involve cookies but as I said I couldnt get it working.

Code:

<script language="JavaScript1.2">

var ns4 = document.layers;
var ie4 = document.all;
var ns6 = document.getElementById && !document.all;

//drag drop function for NS 4////


var dragswitch = 0;
var nsx;
var nsy;
var nstemp;

function drag_dropns( name )
{
if( !ns4 )
 return;
temp = eval( name );
temp.captureEvents( Event.MOUSEDOWN | Event.MOUSEUP );
temp.onmousedown = gons;
temp.onmousemove = dragns;
temp.onmouseup = stopns;
}

function gons( e )
{
temp.captureEvents( Event.MOUSEMOVE );
nsx = e.x;
nsy = e.y;
}

function dragns( e )
{
if( dragswitch == 1 )
{
 temp.moveBy( e.x-nsx, e.y-nsy );
 return false;
}
}

function stopns()
{
temp.releaseEvents( Event.MOUSEMOVE );
}

//drag drop function for ie4+ and NS6////



function drag_drop( e )
{
if( ie4 && dragapproved )
{
 crossobj.style.left = tempx + event.clientX - offsetx;
 crossobj.style.top = tempy + event.clientY - offsety;
 return false;
}
else if( ns6 && dragapproved )
{
 crossobj.style.left = tempx + e.clientX - offsetx;
 crossobj.style.top = tempy + e.clientY - offsety;
 return false;
}
}

function initializedrag( e )
{
crossobj = ( ( ns6 ) ? document.getElementById( "showimage" ) : document.all.showimage );

var firedobj = ( ( ns6 ) ? e.target : event.srcElement );
var topelement = ( ( ns6 ) ? "HTML" : "BODY" );

while( ( firedobj.tagName != topelement ) && ( firedobj.id != "dragbar" ) )
{
 firedobj=ns6? firedobj.parentNode : firedobj.parentElement;
}

if( firedobj.id == "dragbar" )
{
 offsetx = ( ( ie4 ) ? event.clientX : e.clientX );
 offsety = ( ( ie4 ) ? event.clientY : e.clientY );
 
 tempx = parseInt( crossobj.style.left );
 tempy = parseInt( crossobj.style.top );
 
 dragapproved = true;
 document.onmousemove = drag_drop;
}
}

document.onmousedown = initializedrag
document.onmouseup = new Function( "dragapproved=false" );

////drag drop functions end here//////

function hidebox(){
if (ie4||ns6)
    crossobj.style.visibility="hidden"
else if (ns4)
    document.dnwtop_100_showimage.visibility="hide"
}


</script>

<style type="text/css">

#showimage
{
position:absolute;
width:300px;

padding:2px;
}

#showimage #dragbar
{
font-family:Trebuchet MS;
font-size:10pt;
text-align:left;
font-weight:bold;
width:280px;
}

#showimage #closebutton
{
font-family:Tahoma;
font-weight:bold;
height:12px;
width:12px;

font-size:8pt;
border:2px solid;
border-top-color:#EEE;
border-right-color:#AAA;
border-bottom-color:#AAA;
border-left-color:#EEE;
padding:0 3px 0 4px;
color:#000;
text-decoration:none;
}

#showimage #message
{
font-family:Trebuchet MS;
color:#FFFFFF;
font-size:10pt;
font-weight:bold;
padding:4px;
background-color:#000000;
}

</style>

<div id="showimage" style="left:500px;top:100px;">
<table border="0" cellspacing="0" cellpadding="0">
 <tr>

  <td id="message" width="100%" colspan="2" align="center">
   <img src="http://img822.imageshack.us/img822/79/38866885.jpg" border="0" alt="">
<br><br>
   <a href="http://bgtop.net/in.php/1293974162" target="_blank" onClick="hidebox(true)"><img src="http://img221.imageshack.us/img221/2269/yesw.png" border="0"></a>
   &nbsp;
   <a href="#" onClick="hidebox();return false"><img src="http://img195.imageshack.us/img195/6383/72081945.png" border="0"></a>
  </td>
 </tr>
</table>
</div>

I have a calendar that gets pulled up via javascript. It allows someone to pick a date in a form with this little calendar icon that pops up. However, I am trying to make certain days of the week not available. If I wanted to make Tuesdays and Thursdays not available, where would I edit it? Here is the lengthy code
http://www.happydogwebproductions.com/CFcalendar.js
It was too long to post here. Thanks for any help

I have an events form with date fields filled out manually, and wish to convert to pop up calendars. i have a pop calander script but it is updating all the fileld with the same date! as the call to the script is the same.

i am open to new ideas on this so i can have say 5 calendar icons for dates to be set in the date-text field when a date is selected in the popup. and then have the option to click more dates to open up more fields.

my fields a

event title
description
date
start time
end time


has anyone do something like that can help me out?

edited:

sorry forgot to say that when the form is submitted it then reads all info and adds to the MySQL database with the same field names and in the form.

Hello all, I am new to javascript and I have run into a problem. I cant seem to be able to write to a text file called users.txt

Here is my code:

Code:

<html>
<head>
<script language="javascript">


function rf()
{

    var fs,file;

    fs = new ActiveXObject('Scripting.FileSystemObject');

    file = fs.OpenTextFile('C:/Users/Imran/Documents/Imran          IT/Web/Test/user.txt',2);

    file.Write('The text to write to file');

    file.Close();

}
</script>
</head>
<body onLoad="rf();">

</body>
</html>

What I do is I put the code in notepad, I then save it as a .html file and try run it in IE 7, google chrome and firefox, Each time users.txt is unchanged.

Any help appreciated.

All I want is for the client to send a variable to the server and for that variable to be saved in a .txt file.

If there is another way to do that, please share

HI to all I am new be and not able to resolve the issue when i tries to edit text area everything works fine for crome and ie but does not work for firefox
in fire fox when i try to edit intially everythings works fine but if i click other feild in form and after that try to edit text area backspace key stuck up and does not work please help me ?? code which i am using is menitoned below

function stopPropagation(e)
{
e = e||event; /* get IE event ( not passed ) */
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;

}


function checkShortcut(e)
{
stopPropagation(e);
if({8:1,13:1}[e.keycode||e.which])
{
if( x )
return true;
return false;
}
}

I need help editing a script used for ease of play on an online game. I received the original script from a friend who no longer plays and who doesn't know how to fix it with the game design having changed. The script string that needs edited is as follows:

function unocc_list(arr) {
var html= "";

var user_coords = [];
user_coords = xy_from_id(_current_planet.substr(0,6));

var data = new Array();
var i =0;
while (arr[i]) {
var c = arr[i];
var z = c.id;
var y = c.system;
var link = "";
link += "http://speed.imperion.org/fleetBase/mission/1/planetId/";
link += z;
link += "/m/301/ships/,0,25,0,0,0,0,0,0,0,0,0,0"; // XEN, Mylons
// link += "/m/301/ships/,0,0,1,0,0,0,0,0,0,0,0,0"; // TITAN, Large Transports
// link += "/m/301/ships/,0,4,0,0,0,0,0,0,0,0,0,0"; // TERRAN, Small Transports

var this_planet_coords = xy_from_id(c.system);
var d = distance_between (user_coords, this_planet_coords);

var raw_time = c.lastAttackTime;

var tt = raw_time.split(".");
var dx = tt[0]+ "."+tt[1]+".20"+tt[2];
var t1 = Date.parse(dx);
var now = new Date();
var time_delta = (now - t1) /(60 *60* 1000);
time_delta = Math.floor(time_delta);
var a ="";
switch (true) {
case (time_delta < 10):
a = "<span style='background: hsl(0,00%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>";
break;
case (time_delta >= 10 && time_delta < 100 ):
a = "<span style='background: hsl("+time_delta+",70%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>";
break;
case (time_delta > 99):
a = "<span style='background: hsl(100,70%,70%); text-align: right;' title='Last attacked over "+time_delta+" hours ago'>"+time_delta+"</span>";
break;
}

var q = c.quality.toFixed(2)+"\t";
if (c.quality > 1) {
if (c.quality > 1.15) {
q = "<b>"+q+"</b>";
}
q = "<span title='"+c.typeName+"'>"+q+"</span>";
} else {
q = "<span style='opacity: 0.4;'>"+q+"</span>";
}
data[i] = {};

data[i].dist = d;
data[i].code = "\n"+q+a+"\t<a href='"+link+"'>"+ z +"</a>\t("+this_planet_coords["x"] + "|" + this_planet_coords["y"]+") \tDistance: "+d;
i++;
}
data.sort(cmp_d);

var j = 0;
while (data[j]){
html += data[j].code;
j++;
}

open_pop_up (html, "boo", "[*] UnAnnexed/UnOcc Planets");

The code is supposed to pull up a list of all 'planets' in the game(for a certain distance) that are noT currently occupied or annexed by any other players. It however won't even recognize that there are any. I have the full script available if anyone wishes to look at it. As well as source code from the game itself. I'm not sure how much of the source code is even relevant so Instead of posting the four page blah blah blah Anyone who wants to help I can send a saved copy of it to them.

Here are a series of screen shots I took to give you an idea of whats going on.
Frame 1
Frame 2
Frame 3

I have a need to display, edit and save the contents of a text area to a text file or what ever is best suited, directly to the website root or folder within the root of the site. Is there anyway this can be done with out database software? As I dont have the option to install mysql or any other software to the webserver. Any help would be greatly appreciated. Thx


Just a little backround: The webserver is acually an open source linux firewall which i was able to edit the apache config file to host a second site. I just want the ability to store edit and display some network information within a very small site I made without the use of a database. Is this even possible?

I'm almost positive this question will make you groan "neewwwbie!"....

I have a simple javascript that decides which 'div' to make visible, based on another element within the html.

What i want now is to create a page where someone can view all the possible divs in that javascript that might appear and edit them (including href's, ital, bold and image tags.) Much like a CMS system, but the information is within a javascript, not a database.

I would assume it's possible. What's a good way to approach this? It sounds like Javascript cannot edit .txt files. Is there a way to have the user access and edit an .xml file and just pull that into the div tag, instead of text?

Hi,

I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly.

I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links.

The code that does this is as follows:

HTML CODE:

Code:

<span id="userName" class="editText">John Doe</span>

JAVASCRIPT - controls when text is clicked for input to appear:
Code:

//edit field created
function editBox(actual) {
	//alert(actual.nodeName+' '+changing);
	if(!changing){
		width = widthEl(actual.id) + 20;
		height =heightEl(actual.id) + 2;

		if(height < 40){
			if(width < 100)	width = 150;
			actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
		}else{
			if(width < 70) width = 90;
			if(height < 50) height = 50;
			actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
		}
		changing = true;
	}

		actual.firstChild.focus();
}

JAVASCRIPT - Initiated the update of the field.

Code:

function fieldBlur(campo,idfld) {
	if (campo.value!="") {
		elem = document.getElementById( idfld );
		remotos = new datosServidor;
		nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
		elem.innerHTML = nt;
		changing = false;
		return false;
	}
}

I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie.

Code:

onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');"

But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box?

If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/

Thanks in advance

Hello everyone.

First, if you do not understand something I have tried to explain, PLEASE ask, don't just skip the question! Thank you!

I will start by explaining what I am doing and why I am running into a problem. Perhaps one of you kind people can help me figure out how to fix it.

I have a grid set up for logic puzzle solving. The grid is made up of 3 rows of primary squares, each containing 16 sub-squares.

The top row has 3 primary squares.
the 2nd row has 2 primary squares.
the 3rd row has 1 primary square.
That gives a total of 96 sub-square, or grid coordinates.

Each sub square has an image in it that can be altered by clicking the square. The image begins as a blank gif. With the first click, it becomes an X, with a second click, it becomes an O, and the third click returns it to blank.

With me so far? Hope so!

Now for the tricky part. The grid is made up using a table, with each TD having it's own identifier, as in:
Code:

a1b1 a1b2 a1b3 a1b4 | a1c1 a1c2 a1c3 a1c4 | a1d1 a1d2 a1d3 a1d4
a2b1 a2b2 a2b3 a2b4 | a2c1 a2c2 a2c3 a2c4 | a2d1 a2d2 a2d3 a2d4
a3b1 a3b2 a3b3 a3b4 | a3c1 a3c2 a3c3 a3c4 | a3d1 a3d2 a3d3 a3d4
a4b1 a4b2 a4b3 a4b4 | a4c1 a4c2 a4c3 a4c4 | a4d1 a4d2 a4d3 a4d4
-----------------------------------------
d1b1 d1b2 d1b3 d1b4 | d1c1 d1c2 d1c3 d1c4				
d2b1 d2b2 d2b3 d2b4 | d2c1 d2c2 d2c3 d2c4				
d3b1 d3b2 d3b3 d3b4 | d3c1 d3c2 d3c3 d3c4				
d4b1 d4b2 d4b3 d4b4 | d4c1 d4c2 d4c3 d4c4				
-----------------------------------------
c1b1 c1b2 c1b3 c1b4								
c2b1 c2b2 c2b3 c2b4								
c3b1 c3b2 c3b3 c3b4								
c4b1 c4b2 c4b3 c4b4

Each sub-square also contains the image that is changed, and the image has it's own unique identifier, to go alone with the grid:

Code:

1-0-0 | 1-0-1 | 1-0-2 | 1-0-3 | 1-1-0 |1-1-1 | 1-1-2 | 1-1-3 | 1-2-0 | 1-2-1 | 1-2-2 | 1-2-3 |
----------------------------------------------------------------------------------------------
2-0-0 | 2-0-1 | 2-0-2 | 2-0-3 | 2-1-0 | 2-1-1 | 2-1-2 | 2-1-3 | 2-2-0 | 2-2-1 | 2-2-2 | 2-2-3 |
----------------------------------------------------------------------------------------------
3-0-0 | 3-0-1 | 3-0-2 | 3-0-3 | 3-1-0 | 3-1-1 | 3-1-2 | 3-1-3 | 3-2-0 | 3-2-1 | 3-2-2 | 3-2-3 |
----------------------------------------------------------------------------------------------
4-0-0 | 4-0-1 | 4-0-2 | 4-0-3 | 4-1-0 | 4-1-1 | 4-1-2 | 4-1-3 | 4-2-0 | 4-2-1 | 4-2-2 | 4-2-3 |
-------------------------------------------------------------
5-0-0 | 5-0-1 | 5-0-2 | 5-0-3 | 5-1-0 | 5-1-1 | 5-1-2 | 5-1-3 |
-------------------------------------------------------------
6-0-0 | 6-0-1 | 6-0-2 | 6-0-3 | 6-1-0 | 6-1-1 | 6-1-2 | 6-1-3 |
-------------------------------------------------------------		
7-0-0 | 7-0-1 | 7-0-2 | 7-0-3 | 7-1-0 | 7-1-1 | 7-1-2 | 7-1-3 |
-------------------------------------------------------------
8-0-0 | 8-0-1 | 8-0-2 | 8-0-3 | 8-1-0 | 8-1-1 | 8-1-2 | 8-1-3 |
------------------------------
9-0-0 | 9-0-1 | 9-0-2 | 9-0-3 |							
------------------------------
10-0-0 | 10-0-1 | 10-0-2 | 10-0-3 |							
----------------------------------
11-0-0 | 11-0-1 | 11-0-2 | 11-0-3 |							
----------------------------------
12-0-0 | 12-0-1 | 12-0-2 | 12-0-3 |

Here is a sample of a TD including the image and other ID's:

Code:

<TD style=" border-bottom: 3px solid black;" class="gridoff" onMouseOver="className='gridon';" onMouseOut="className='gridoff';" id="gridtdD4C2">

<DIV align="center">
<IMG src="/testproject/n.gif" height="20" width="20" id="8-1-1" name="D4C2" onClick="flipBox(this);" class="gridbox">
</DIV>

</TD>

As you can see, the image ID is 8-1-1, which if you compare the two tables, is equal to D4C2.

So far, everything is working perfect, as long as I have a grid that is 3x3x4, or, 3 squares across the top, 2 squares in the middles, and 1 square on the bottom, with 16 sub-squares in each.

Now, the problem is, I do not always need a 3x3x4, sometimes I will need a 3x3x5, or a 4x4x4, or a 4x4x5 grid. I have made all the grids, and given them all the right ID's for both the TD, the IMG, as well as the <input> tags.

When I test out a 3x3x5 grid, the first 4 columns in each square work fine, the 5th will only change to an X once, and cannot be changed again.
Similarly, the first 4 rows in each square work, but not the 5th, with the same problem. Again, I have made sure that each of my ID's are correct, so that isn't the issue. The only thing I can figure it would be is the javascript.

So, here it is, the script that does all the changes:

Code:

<SCRIPT LANGUAGE="JavaScript">
function checkDoubles(val) {
// A4C5 = check A4C1, A4C2, A4C3, A4C4, A1C5, A2C5, A3C5, A5C5
	var part1 = val.substr(0,1);
	var part2 = val.substr(1,1);
	var part3 = val.substr(2,1);
	var part4 = val.substr(3,1);
	var part12 = val.substr(0,2);
	var part34 = val.substr(2,2);
	var isdouble = "false";
	// check A4C*		
	for(i=1;i<5;i++) {
		var checkthisbox = part12 + part3 + i;
		if(checkthisbox!=val) {
			if(document.getElementById(checkthisbox).value==3) {
				alert("You can not set more than one box in any row to true at the same time!  If you wish to set this box to true you must first remove the other true statement in this row.");
				var isdouble = "true";
			}
		}
	}	
	// check A*C5		
	for(i=1;i<5;i++) {
		var checkthisbox = part1 + i + part34;
		if(checkthisbox!=val) {
			if(document.getElementById(checkthisbox).value==3) {
				alert("You can not set more than one box in any column to true at the same time!  If you wish to set this box to true you must first remove the other true statement in this column.");
				var isdouble = "true";
			}
		}
	}		
	return isdouble;
}

function flipBox(img) {
	var tmpname;
	if(img.src=="http://localhost/testproject/n.gif") {
		img.src = "http://localhost/testproject/x.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 1;
		document.getElementById(img.name).value = 1;
	} else if(img.src=="http://localhost/testproject/x.gif") {
		var finaltest = checkDoubles(img.name);
		if(finaltest=="false") {
			img.src = "http://localhost/testproject/o.gif";
			tmpname = img.name;
			document.mainform.elements[tmpname].value = 3;
			document.getElementById(img.name).value = 3;		
		} else {
			img.src = "http://localhost/testproject/n.gif";
		}		
	} else if(img.src=="http://localhost/testproject/o.gif") {
		img.src = "http://localhost/testproject/n.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 0;
		document.getElementById(img.name).value = 0;		
	}	
	showVals();
}
</SCRIPT>

I know nothing about javascript, so I have no idea why the grid is not working as it should. For some reason, 1-0-0 through 1-0-3 (A1B1 to A1B4) work, but 1-0-4 (A1B5) nor 5-0-4 (which would be A5B5 grid coord).

It makes no sense to me. If you could please look over the script and tell me if you can see why it's letting the original part of the grid to work, but not the additional parts I add?

Thank you!

right now I almost have this script working the way I want it to, here it is:

Code:

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp('slow',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
			$('#selected').slideDown('slow',hideLoader);
		}
		function hideLoader() {
			$('#load').slideUp('slow');
		}
		return false;
		
	});

How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?