How to use two separate "onloads"?

Ricster · 09-02-2010, 03:11 PM

Hi,

Sorry to ask this while others have too, but the answers for them didn't work for me and I really know nothing when it comes to JS.

I have a portfolio page that had an onload so that the first image of the thumbnails would automatically load with the page. Worked fine. I added some bells and whistles and now it doesn't work. The bells and whistles being a NiftyCorner JS and an expandable menu. The menu works, but the other two, both with the onload command won't work. I've tried a semicolon between them in all the possible configurations that I can think of and yet no luck. Here's the code...let me know if you need this to be live and I'll push it.
Thanks in advance!!!

Code:

<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="css/design.css" />
<script language="JavaScript" type="text/JavaScript"></script>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript"> window.onload=function(){Nifty("div#p7TMM_1","big" );}</script>
<link href="p7tmm/p7TMM10.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7tmm/p7TMMscripts.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
//This is the script to take querystrings from the URL and convert them into
//a Javascript array. "?search=whatever" becomes querystring["search"]

//this loads the portion of the url containing the querystring, and also
//decodes any special character codes
var que = unescape(location.search);

//gets value of querystring
var que = que.substring(que.lastIndexOf("=") + 1);
var layer = 'Div' + que

//toggle between layers - on/off
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
var obj = document.layers ? document.layers[szDivID] :
document.getElementById ? document.getElementById(szDivID).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}

//-->
</script>

</head>

<body onload="javascript: toggleBox(layer,1);">

Lerura · 09-02-2010, 04:04 PM

Code:

<body onload="onloadFunctions()">

Code:

function onloadFunctions(){
FirstFunction();
SecondFunction();
}

Ricster · 09-02-2010, 04:12 PM

Thank you...

So the way I understand it, where I currently have

Code:

<body onload="javascript: toggleBox(layer,1);">

I will replace that with the first one.

Will the second block of code be added to the top, replace the code at the top, or should I create a js folder and refer to it like CSS?

Lerura · 09-02-2010, 04:36 PM

Exactly.

And you just add the function to the head along with all the other functions

like

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
//This is the script to take querystrings from the URL and convert them into
//a Javascript array. "?search=whatever" becomes querystring["search"]

//this loads the portion of the url containing the querystring, and also
//decodes any special character codes
var que = unescape(location.search);

//gets value of querystring
var que = que.substring(que.lastIndexOf("=") + 1);
var layer = 'Div' + que

//toggle between layers - on/off
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
var obj = document.layers ? document.layers[szDivID] :
document.getElementById ? document.getElementById(szDivID).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}
function onloadFunctions(){
FirstFunction();
SecondFunction();
}
//-->
</script>

FirstFunction(); should then be replaced by toggleBox(layer,1);
and SecondFunction(); by the other functions that you wanna execute (or ,I guess, in your case - same function with different arguments)

Ricster · 09-02-2010, 05:53 PM

Thanks for your help, it's almost there.

The image still isn't loading with the page and the corners still don't curve...that is until I click on the first thumbnail, then the corners curve. I've played around with the location of the function, including within the one above the body, but not having any luck. Here's the code as of now:

Code:

<style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="css/design.css" />
<script language="JavaScript" type="text/JavaScript"></script>
<script type="text/javascript" src="niftycube.js"></script>
<!--<script type="text/javascript"> window.onload=function(){Nifty("div#p7TMM_1","big" );}</script>-->
<link href="p7tmm/p7TMM10.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7tmm/p7TMMscripts.js"></script>
<script language="JavaScript" type="text/JavaScript">
    <!--
        //This is the script to take querystrings from the URL and convert them into
        //a Javascript array. "?search=whatever" becomes querystring["search"] 
 
        //this loads the portion of the url containing the querystring, and also
        //decodes any special character codes  
        var que = unescape(location.search);
 
        //gets value of querystring
        var que = que.substring(que.lastIndexOf("=") + 1);
        var layer = 'Div' + que
        
        //toggle between layers - on/off      
        function toggleBox(szDivID, iState) // 1 visible, 0 hidden
        {
           var obj = document.layers ? document.layers[szDivID] :
           document.getElementById ?  document.getElementById(szDivID).style :
           document.all[szDivID].style;
           obj.visibility = document.layers ? (iState ? "show" : "hide") :
           (iState ? "visible" : "hidden");
        }
 		function onloadFunctions(){
			toggleBox(layer,1);
			Nifty("div#p7TMM_1","big" );
		}

        //-->
    </script>
 
</head>

<body onload="onloadFunctions();">

<div id="header"><a href="index.html"><img src="images/faust_logo.jpg" alt="Faust Logo" width="240" height="129" /></a></div>

I'll FTP the site tonight and post a link later if it helps. Thanks again.

jpavlik · 09-02-2010, 06:11 PM

Did you consider using an addLoadEvent listener instead of body onload?

For example:

Code:

addLoadEvent(
	function() {
		var a = "value1";
		var b = "value2";
		function1(a);
		function2(b);
	}
)

//then in your .js file...
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

That way you can have multiple onload events and not tie them to the body element. In fact, I believe you can have onloads called from multiple included files using this method. The function in the .js file just adds the new commands to the list to be run onload.

Ricster · 09-02-2010, 07:02 PM

Thank you...

As I mentioned I really know nothing about JS

.

I have two "onloads" one being the corners (Nifty) and one being the first image corresponding to the first thumbnail.

So when you say,

Code:

addLoadEvent(
	function() {
		var a = "value1";
		var b = "value2";
		function1(a);
		function2(b);
	}
)

I'm not sure what the values would be. The functions would be:
Nifty("div#p7TMM_1","big" );
toggleBox(layer,1);

Is that correct?

jpavlik · 09-02-2010, 07:36 PM

OK, on second look of your code I noticed you have a window.onload up in your .js includes. So, the rounded corners that are created using that function are being ignored when you do your eventual body onload. add both of the functions like you put in your response to me to the add load event and it might work. I am curious though why you need javascript to get the rounded corners to work? I would think style alone should work.

ie.

Code:

<style type="text/css">
	.variablewidthbox h1 { margin:0; font-size:1.0em; padding:0 10px 5px 10px;  }
	.variablewidthbox p { margin:0; padding:5px 10px; background:#fff; font-size:80%; }
	.boxcorner1, .boxcorner2, .boxcorner3, .boxcorner4 { display:block; overflow:hidden; }
	.boxcorner1, .boxcorner2, .boxcorner3 { height:1px; }
	.boxcorner2, .boxcorner3, .boxcorner4 { background:#fff; border-left:1px solid #fff; border-right:1px solid; }
	.boxcorner1 { margin:0 5px; background:#004E8C; }
	.boxcorner2 { margin:0 3px; border-width:0 2px; }
	.boxcorner3 { margin:0 2px; }
	.boxcorner4 { height:2px; margin:0 1px; }
	.boxcontent { border:0 solid #004E8C; border-width:0 1px; background:#ffffff; }
	.boxtop, .boxbottom { display:block; background:transparent; font-size:1px; }
	.color_a { background:#004E8C; border-color:#004E8C; }
	.color_a1 { color:#efefef; border-color:#004E8C; }
  </style>
  </head>
  <body>

  <div class="variablewidthbox" style="width:200px;">
  <b class="boxtop">
	<b class="boxcorner1 color_a"></b>
	<b class="boxcorner2 color_a"></b>
	<b class="boxcorner3 color_a"></b>
	<b class="boxcorner4 color_a"></b>
  </b>
  <div class="boxcontent color_a">
	<h1 class="color_a1">Header Text</h1>
	<p style="height:30px;">
		Content...
	</p>
  </div>
  <b class="boxbottom">
	<b class="boxcorner4 color_a1"></b>
	<b class="boxcorner3 color_a1"></b>
	<b class="boxcorner2 color_a1"></b>
	<b class="boxcorner1 color_a"></b>
  </b>
  </div>

Ricster · 09-02-2010, 09:07 PM

Thanks, but I'm still not having any luck. The first image doesn't load and the corners don't curve. As I mentioned, I do not know JS. I am taking the bits and pieces of code for each action and putting it into my page's code. Aside from the corners being created in CSS instead of JS, could you explain where the addLoadEvent would go? This is what I have so far:

Code:

<link rel="stylesheet" type="text/css" href="css/design.css" />
<script language="JavaScript" type="text/JavaScript"></script>
<script type="text/javascript" src="portfolio.js"></script>
<script type="text/javascript" src="niftycube.js"></script>
<!--<script type="text/javascript"> window.onload=function(){Nifty("div#p7TMM_1","big" );}</script>-->
<link href="p7tmm/p7TMM10.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7tmm/p7TMMscripts.js"></script>
<script language="JavaScript" type="text/javascript">
addLoadEvent(
	function() {
		toggleBox(layer,1);
		Nifty(div#p7TMM_1, big );
	}
)
</script>
<script language="JavaScript" type="text/JavaScript">
    <!--
        //This is the script to take querystrings from the URL and convert them into
        //a Javascript array. "?search=whatever" becomes querystring["search"] 
 
        //this loads the portion of the url containing the querystring, and also
        //decodes any special character codes  
        var que = unescape(location.search);
 
        //gets value of querystring
        var que = que.substring(que.lastIndexOf("=") + 1);
        var layer = 'Div' + que
        
        //toggle between layers - on/off      
        function toggleBox(szDivID, iState) // 1 visible, 0 hidden
        {
           var obj = document.layers ? document.layers[szDivID] :
           document.getElementById ?  document.getElementById(szDivID).style :
           document.all[szDivID].style;
           obj.visibility = document.layers ? (iState ? "show" : "hide") :
           (iState ? "visible" : "hidden");
        }
 
        //-->
    </script>
 
</head>

<body>

I'm a frustrated student on a tight time line so I really appreciate the help.

Sciliano · 09-02-2010, 09:16 PM

Delete the language attribute for the <script> tag. It's obsolete.

Try it this way. Put all your other external .js <script> tags above the one shown below, the same way you have it already.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	
	
	function init(){

		toggleBox(layer,1);
		Nifty(div#p7TMM_1, big );
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
</head>
	<body>
		

		
              
	</body>
</html>

jpavlik · 09-02-2010, 09:48 PM

you should delete the window.onload on line 5. you should also delete the onload event on the body tag.

Someone else correct me if i'm wrong....but add the function i sent earlier inside a script tag or in one of the referenced external .js files.

Ricster · 09-03-2010, 03:30 PM

I want to thank everyone for their help on this. I've tried both the above scripts, from jpavlik and Sciliano and I can get the curves to show, but the first image still won't come up unless the thumbnail is clicked. I had this working before and checked all the code with the prior version and nothing has changed. Here is the link to the site:

http://www.bostonspotlite.com/oldsit...bug/index.html

It's not fully polished and not quite ready for prime time since I'm stuck on this js issue, but to get to the page I'm debugging in the menu click "Design" and then "Print Design".

Thanks again for all your help...this is why I prefer print design over Web design.

Sciliano · 09-03-2010, 04:03 PM

You ignored the code I posted, no wonder it doesn't work.

Typical, though. It's what I've come to expect.

Ricster · 09-03-2010, 04:24 PM

No, if you read my post, I stated that I tried both and I could get the curves to work, but the image still didn't load with the page. Don't take it personally, I've tried every suggestion provided. If you'd like, I'll go back in and switch it to yours to show you what I mean.