JavaScript - Help Please Need To Run This Script Onload (page Load)

I am having trouble running multiple windows.onload functions and having trouble how to implement them. I found a couple articles on but couldn't really get them to work.

Here are the two functions I'm trying to load:

Code:

<script type="text/javascript">

//<![CDATA[

window.onload=function(){

//randomize order of contents with DIV class="group1"

randomizeContent("group1")

randomizeContent("group2")

randomizeContent("group3")

}

//]]>

</script>

Code:

        <script type="text/javascript">
            function showHideMore(obj) {
                var contObj = obj.parentNode.getElementsByTagName('div')[0];
                var status = (contObj.style.display == 'block')? 'none' : 'block'
                contObj.style.display = status;
                <!-- obj.innerHTML = (status == 'block')? 'Show less' : 'Show more'; -->
                obj.curPic = (obj.curPic == 0)? 1 : 0;
                obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
            }
            window.onload=function(){
                plusMinusPics = ['plus.png','minus.png'];
                oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
                for(i=0; i < oMoreLessSpans.length; i++){
                    oMoreLessSpans[i].curPic = 0;
                    oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
                    oMoreLessSpans[i].onclick=function(){showHideMore(this);}
                }
            }
        </script>

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

Hello,

How do I run a script .onload, but only when the user is referred from a specific URL?

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,

I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work.

Is there away around this?

Not sure if providing my script helps or not, but just in case here it:
Code:

<!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">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){

	var btn = $(this).attr('id');
	if(btn == 'submitNewSend'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if(btn == 'submitNewSend2'){
		file = 'insertMessage.php';
		Msg = 'Your message has been sent';
	} else if (btn == 'submitNewSave'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	} else if (btn == 'submitNewSave2'){
		file = 'insertSaveMessage.php';
		Msg = 'Your message has been saved';
	}
		var data = $('#MessageNew').serialize();
		$.post (file,data, function(){
				alert(Msg);
			$('#MessageNew').each (function(){
				this.reset();
				});
			});	
				return false;
	});
});
</script>


<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>

And the getloadCompose.php is:
Code:

<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
	<tr>
	<th>Compose Message</th>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
	<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	<tr>
	<td>
		<br />
		<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
		<div id="txtHintEmailTo"></div>
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
	</td>
	</tr>
	<tr>
	<td>
		<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />

	</td>
	</tr>
	<tr>
	<td class="first">
	<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
	<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save"> 
	<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
	</td>
	</tr>
	</table>
</form>

I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do.

hello, I am trying to get the page to fade in when it loads.. instead of using the microsoft enterpage metahead value..

here is the code I am trying, but no luck

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">
function fadeInPage() {
if (document.getElementById("fadeDiv").filters.alpha.opacity < 100){
document.getElementById("fadeDiv").filters.alpha.opacity += 10;
eval('setTimeout("fadeInPage()",100)');
}
else{
document.getElementById('fadeDiv').style.visibility = "visable"
}
}
</script>
</head>

<body onLoad="fadeinpage()">

<DIV ID="fadeDiv" style="visibility:hidden">
your page code goes here
</DIV>
</body>

</html>

Hello

Can anyone help with the following problem

On the following page

http://www.stroudskittles.co.uk/signingon.html

I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker)

If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems.

The Chained Menu works, however the IFrame Ticker does not display.

Both events ahave ben placed on the boady tag.

Can anyone advise how I can get both to display in Firefox

Can anyone

Im running js to do some color coding in a table, i tried adding the onload but its not working, can someone take a look ? I need this to run when the entire page is fully loaded and not before.

THE FUNCTION
Code:

var table1_column_settings = [
    [32,40],          // ito score - First column values more than 5 will be red, 2-5 will be yellow, less than 2 will be green
    [11,12],          // schedule
    [14,15],           // cost
    [11,12],	      // execution
    [9,10],	      // commercial
    [41,50]          // total
    ];


// Loop through all cells in a table, coloring each one according to column-specific thresholds
function color_cells(table, column_settings)
{
    // How many rows are in the table?
    var num_rows = table.rows.length;
    
    // Loop through all rows.
    for (var r = 0; r < num_rows; r++)
    {
        // Get a reference to the current row.
        var this_row = table.rows[r];
        // How many cells are in this row?
        var num_cells = this_row.cells.length;
        
        // Loop through all cells in this row.
        for (var c = 0; c < num_cells; c++)
        {
            // Get a reference to the cell.
            var this_cell = this_row.cells[c];
            
            // Get the numerical value of the first (and only) node inside the cell.
            var cell_value = parseFloat(this_cell.firstChild.nodeValue);
            // If it's a number (literally if it's not not not-a-number)
            if (!isNaN(cell_value))
            {
                // Apply the color according to the thresholds for this column number (c).
                if (cell_value > column_settings[c][1]) this_cell.style.backgroundColor= "red";
                else if (cell_value > column_settings[c][0]) this_cell.style.backgroundColor= "yellow";
                else this_cell.style.backgroundColor = "green";
            }
        }
    }
}

EXECUTE THE FUNCTION
Code:

</TBODY>
</table>

<script> color_cells(document.getElementById("table1"), table1_column_settings);</script>

//I TRIED LIKE THIS <script> window.onload=color_cells(document.getElementById("table1"), table1_column_settings);</script> AND IT DIDNT WORK

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

I have the following javascript function:

[ function addNewWindowEvent(evType, fn)
{
if (window.addEventListener)
{
this.addEventListener("load", fn, false);
return true;
}
else if (window.attachEvent)
{
var onload = "onload"
this.attachEvent(onload, fn);
return true;
}
else
{
return false;
}
} ]

which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no]

and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks.

henryv

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

I want this script to load after the page load
the script is:
Code:

<script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script>

the script in My page is like:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My test page</title>
</head>

<body>
<h1>Tony</h1>
<h2>Welcome Tony Website</h2>
<script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script>
<h3>Tony is ... and is....</h3>
<h3>He will....</h3>
</body>

</html>

So how can I make this script loads after all elements of My page are loaded and without changing it's position (the script position)?

Hello,
Well I have script that claims that it loads the flash content while it is showing seconds or advertisement. So as I don't know about scripts I have no Idea if it actually do that or not as What I visually see is that it let flash content load once the seconds of disappears. So that's why I want an expert advice on it.
And how the seconds of this script works Only if this script actually do what It claims, then I would like to know when does it send alert to load the content (as I would like to put the alert from the start) and how to show it for more or less seconds.

Relevant Markup:
Live Demo http://files.cryoffalcon.com/MyFootP...%20Loader.html

What is the live demo made up of:

Code:

  <div class="colorchooser">
    <!--more-->
    <div class="displaygame_part">
    <center>
    <div id="ads" class="ads">
    <h1>
    ADVERTISEMENT</h1>
    <center>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0726197409084548";
    /* bloghutsgame */
    google_ad_slot = "5324930917";
    google_ad_width = 336;
    google_ad_height = 280;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></center>
    To skip it click <a href="javascript:ShowHide();">here</a>
    <script type="text/javascript">
    window.onload = function() {
    startCountDown(8, 1000);
    }
    
    function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
    return;
    }
    countDownObj.count = function(i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    // execute function
    fn();
    // stop
    return;
    }
    setTimeout(function() {
    // repeat
    countDownObj.count(i - 1);
    },
    pause
    );
    }
    // set it going
    countDownObj.count(i);
    }
    </script>
    <center>
    <img border="0" height="117" width="201" src="@---put the link of the image of fancy pants(its the loader)---@" />
    </center>
    <div id="countDown" style="display: inline;">
    </div>
    seconds for the game to load...
    </div>
    <div id="gamecontent" style="visibility:hidden; display:none">
    <div class="gofulldear">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%">   <param name="movie" value="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf">
    <param name="quality" value="high">
    <param name="allowNetworking" value="internal">
    <embed src="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="internal"></embed> </object>
    </div>
    </div>
    <script type="text/javascript">
        function turn_vis_on(id) {
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'inline';
                obj = document.getElementById(id);
                obj.style.visibility = "visible";
                }
        }
        function turn_vis_off(id){
            if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'none';
                obj = document.getElementById(id);
                obj.style.visibility = "hidden";
            }
        }
        function ShowHide()
        {
            turn_vis_off("ads");
            turn_vis_on("gamecontent");
            // alert('4sec!');
        }
        document.getElementById("ads").style.zIndex = 100;
        timeoutID = setTimeout(ShowHide, 15000);
    
        </script>
    </center></div>
    </div>

Note: It is game so there can be sound or music in it./ For any more information requirement please let me know I will edit it, so to make it as relevant as possible^^.

On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page?

How exactly would i go around doing this?

Thankyou

Hello

Basically I have found and adapted the code:

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#projectscontainer').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in...

I want the new content to appear below "#projectscontainer'"

Why won't this work? Anyone know?

Thanks