Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to use two separate "onloads"?

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

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Code:
    <body onload="onloadFunctions()">
    Code:
    function onloadFunctions(){
    FirstFunction();
    SecondFunction();
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    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)

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #9
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>

  • #11
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    You ignored the code I posted, no wonder it doesn't work.

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

  • #14
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •