Jump to content

[SOLVED] Calling a function as page loads

Dethman

By Dethman
in Javascript Help

 Share

Recommended Posts

Dethman Regular Member

Dethman

Posted
Posted

hello I need to know how to call this asoon as the page loads and not by clicking the "testclick" link

T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,500,350,1)}

 

 

This is what I have its not correct but can someone help make it correct?

<script type="text/javascript" language="JavaScript">
function(){TINY.box.show('advanced.html',1,500,350,1)}
</script>

 

Thanx Brian

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

hello I need to know how to call this asoon as the page loads and not by clicking the "testclick" link

T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,500,350,1)}

 

 

This is what I have its not correct but can someone help make it correct?

<script type="text/javascript" language="JavaScript">
function(){TINY.box.show('advanced.html',1,500,350,1)}
</script>

 

Thanx Brian

 

Try this:

<script type="text/javascript">
   window.onload = function()
   {
      TINY.box.show('advanced.html', 1, 500, 350, 1)
   }
</script>

 

This will run after the HTML is all loaded.

Link to comment
Share on other sites
Dethman Regular Member

Dethman

Posted
  • Author
Posted

This is what I am actually trying to do it contains PHP for this one all I need to know is how to get the onLoad part to work in the body segment

 

<?php

if($_SESSION['userwrong']==1){?>

<body bottommargin="0" onLoad="function(){TINY.box.show('advanced_wrong.htm',1,500,350,1)}" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="black" background="stars.jpg" link="#5580FF" text="#FFFFFF">

<?}else{?>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="black" background="stars.jpg" link="#5580FF" text="#FFFFFF">
<?}?>

Link to comment
Share on other sites
Dethman Regular Member

Dethman

Posted
  • Author
Posted

Also here is the Code I got.....

 

index.php

<?php
$_SESSION['userwrong']==1;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game Engine Template</title>
<link rel="stylesheet" href="http://www.ultimate-battle-online.com/css/common.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="tinybox.js"></script>
</head>
<?php

if($_SESSION['userwrong']==1){?>

<body bottommargin="0" onLoad="function(){TINY.box.show('advanced_wrong.htm',1,500,350,1)}" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="black" background="stars.jpg" link="#5580FF" text="#FFFFFF">

<?}else{?>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="black" background="stars.jpg" link="#5580FF" text="#FFFFFF">
<?}?>
<body bottommargin="0" onload="function(){TINY.box.show('advanced.html',1,500,350,1)}" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="black" background="stars.jpg" link="#5580FF" text="#FFFFFF">
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
	<td width="600" height="300"><img src="largestarstop2.jpg" width="600" height="300" border="0" alt=""></td>
</tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
	<td width="170">
		<table width="170" cellpadding="0" cellspacing="0" border="0" background="menubg.jpg">
			<tr valign="top">
				<td><img src="menutop.jpg" width="170" height="19" border="0" alt="">
					<table width="170" cellpadding="6" cellspacing="0" border="0">
						<tr valign="top">
							<td>								
<!------------------------ Menu section, links go below ---------------------------->
<div id="testdiv" >
<a id="testclick1">Login</a><BR /> 
<a id="testclick2">Register</a><BR />
<div id="testclick3">News</a><BR />

</div>
<BR><BR><BR><BR><BR><BR>
<!---------------------------------------------------------------------------------->
							</td>
						</tr>
					</table>
				<img src="menubottom.jpg" width="170" height="17" border="0" alt=""></td>
			</tr>
		</table>
	<BR><BR><BR><BR></td>

	<td width="100%">
		<table width="100%" cellpadding="20" cellspacing="0" border="0">
			<tr valign="top">
				<td>
<!------------------------ Content zone, add your content below ---------------------------->

<!-- insert logo here--><img src="logo.jpg" width="150" height="39" border="0" alt=""><BR>

<BR><center><h3>Template #23</h3></center>
<p align="justify">Welcome to your new home on the web!  Thank you for using one of my templates to build your website.  Each template will fully expand to fit any screen resolution and is compatible with all major browsers (IE, Netscape, Opera).  Making a website with one of these templates is very easy and doesnt require any special software for editing. Good luck setting up, and I hope you find my work helpful.</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<!------------------------------------------------------------------------------------------>
				</td>
			</tr>
		</table>			
	</td>
</tr>
</table>
<BR><BR><BR><BR>

<center>© Copyright NimbusGames,llc <?php echo date("Y") . "-".(date("Y")+6); ?>, All Rights Reserved.</center>



<script type='text/javascript'>
    var bla = "";
    
    T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,500,350,1)}
var content2 = "<img src='images/rhino.jpg' width='298' height='373' alt='' />";
T$('testclick2').onclick = function(){TINY.box.show(content2,0,0,0,1)}
var content3 = "This will disappear in 3 seconds.";
T$('testclick3').onclick = function(){TINY.box.show(content3,0,0,0,0,3)}
</script>	


</body>
</html>

 

Here is the JS file with the function inside it:

 

var TINY={};

function T$(i){return document.getElementById(i)}

TINY.box=function(){
var p,m,b,fn,ic,iu,iw,ih,ia,f=0;
return{
	show:function(c,u,w,h,a,t){
		if(!f){
			p=document.createElement('div'); p.id='tinybox';
			m=document.createElement('div'); m.id='tinymask';
			b=document.createElement('div'); b.id='tinycontent';
			document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b);
			m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1
		}
		if(!a&&!u){
			p.style.width=w?w+'px':'auto'; p.style.height=h?h+'px':'auto';
			p.style.backgroundImage='none'; b.innerHTML=c
		}else{
			b.style.display='none'; p.style.width=p.style.height='100px'
		}
		this.mask();
		ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,80,3);
		if(t){setTimeout(function(){TINY.box.hide()},1000*t)}
	},
	fill:function(c,u,w,h,a){
		if(u){
			p.style.backgroundImage='';
			var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
			x.onreadystatechange=function(){
				if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
			};
			x.open('GET',c,1); x.send(null)
		}else{
			this.psh(c,w,h,a)
		}
	},
	psh:function(c,w,h,a){
		if(a){
			if(!w||!h){
				var x=p.style.width, y=p.style.height; b.innerHTML=c;
				p.style.width=w?w+'px':''; p.style.height=h?h+'px':'';
				b.style.display='';
				w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight);
				b.style.display='none'; p.style.width=x; p.style.height=y;
			}else{
				b.innerHTML=c
			}
			this.size(p,w,h,4)
		}else{
			p.style.backgroundImage='none'
		}
	},
	hide:function(){
		TINY.box.alpha(p,-1,0,3)
	},
	resize:function(){
		TINY.box.pos(); TINY.box.mask()
	},
	mask:function(){
		m.style.height=TINY.page.theight()+'px';
		m.style.width=''; m.style.width=TINY.page.twidth()+'px'
	},
	pos:function(){
		var t=(TINY.page.height()/2)-(p.offsetHeight/2); t=t<10?10:t;
		p.style.top=(t+TINY.page.top())+'px';
		p.style.left=(TINY.page.width()/2)-(p.offsetWidth/2)+'px'
	},
	alpha:function(e,d,a,s){
		clearInterval(e.ai);
		if(d==1){
			e.style.opacity=0; e.style.filter='alpha(opacity=0)';
			e.style.display='block'; this.pos()
		}
		e.ai=setInterval(function(){TINY.box.twalpha(e,a,d,s)},20)
	},
	twalpha:function(e,a,d,s){
		var o=Math.round(e.style.opacity*100);
		if(o==a){
			clearInterval(e.ai);
			if(d==-1){
				e.style.display='none';
				e==p?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
			}else{
				e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
			}
		}else{
			var n=o+Math.ceil(Math.abs(a-o)/s)*d;
			e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
		}
	},
	size:function(e,w,h,s){
		e=typeof e=='object'?e:T$(e); clearInterval(e.si);
		var ow=e.offsetWidth, oh=e.offsetHeight,
		wo=ow-parseInt(e.style.width), ho=oh-parseInt(e.style.height);
		var wd=ow-wo>w?-1:1, hd=(oh-ho>h)?-1:1;
		e.si=setInterval(function(){TINY.box.twsize(e,w,wo,wd,h,ho,hd,s)},20)
	},
	twsize:function(e,w,wo,wd,h,ho,hd,s){
		var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
		if(ow==w&&oh==h){
			clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block'
		}else{
			if(ow!=w){e.style.width=ow+(Math.ceil(Math.abs(w-ow)/s)*wd)+'px'}
			if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}
			this.pos()
		}
	}
}
}();

TINY.page=function(){
return{
	top:function(){return document.body.scrollTop||document.documentElement.scrollTop},
	width:function(){return self.innerWidth||document.documentElement.clientWidth},
	height:function(){return self.innerHeight||document.documentElement.clientHeight},
	theight:function(){
		var d=document, b=d.body, e=d.documentElement;
		return Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight))
	},
	twidth:function(){
		var d=document, b=d.body, e=d.documentElement;
		return Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
	}
}
}();

 

Hopefully that helps

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

To be honest, it looks like the popup code is buggy.  I tried a simple test, and nothing pops up per se...instead, a transparent layer appears at the bottom of my browser pane displaying the filename of the HTML I wanted to appear.

 

There aren't any errors that would trip an error console or Firebug.  It's just buggy code.

 

FWIW, I'll post my test code below.

 

<html>
<head>
   <title>Blah</title>
   <script type="text/javascript" src="packed.js"></script>
   <script type="text/javascript">
      window.onload = function()
      {
         TINY.box.show('calendar.html', 0, 350, 350, 1, 2);
      }
   </script>
</head>

<body>
   Hopefully something will popup
</body>

</html>

Link to comment
Share on other sites
bighare Newbie

bighare

Posted
Posted

the script uses styles that need to be defined.

 

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}
#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}
#tinycontent {background:#fff}

 

one can adjust them to match the page

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

the script uses styles that need to be defined.

 

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}
#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}
#tinycontent {background:#fff}

 

one can adjust them to match the page

 

That doesn't explain why it only echoes out the filename rather than the file's content.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.