DCSportbikes.net  
» Help Support .NET!
DCSportbikes Premier Membership for 25$ per year. Discounts! Click here for full information.

Now available in the .NET Shop:



Get your DCSBN Gear!
» Shoutbox
Sorry, only registered users have the ability to use our real-time shoutbox to chat with other members.

Register now, it's free!
» Online Users: 546
5 members and 541 guests
HenryW, nootherids, Sal_the_man, TonUp, Triple X
Most users ever online was 4,519, September 2, 2015 at 03:26 AM.
Go Back   DCSportbikes.net > Non-Sportbike Forums > Non-Sportbike Chat

Reply
LinkBack Thread Tools
Javascript Help (Coding Question)
Unread
  (#1)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
Question Javascript Help (Coding Question) - August 2, 2009, 10:04 PM

Hi all,

I'm a Javascript noob and am wrestling with a problem ...

I have several websites where I use a Javascript function to display a "loading.gif" while the page loads. It works great.

Example at my website: http://www.magicratproductions.com

Well, I built a new page for a different site and used some graphics with rollover functions on my buttons (when you hover over a button, the text of the button changes).

The problem is that my loading function and my rollover functions are incompatible.

Can someone give me some advice on how I might deconflict them? Would greatly appreciate it.

Code below:

Quote:

<head>

<script type="text/JavaScript">
window.onload = function(){

document.getElementById('loading').innerHTML = '';

if(document.getElementById('overallcontainer').sty le.visibility ==

"visible"){
document.getElementById('overallcontainer').style. visibility = "hidden";
}else{
document.getElementById('overallcontainer').style. visibility = "visible";
}
}
</script>


<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =

changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_01_over = newImage("images/home_01-over.gif");
preloadFlag = true;
}
}

// -->
</script>

</head>

.
.
.


<body onload="preloadImages();">


<center>
<div id="loading" ><img src="loading.gif" border=0></div>
</center>


<div id="overallcontainer">

.
.
.

... all the page content goes here ...

.
.
.

</div> <!--End overallcontainer -->


</body>
</html>


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#2)
Out of Action
 
SLOride's Avatar
 
Posts: 948
Join Date: August 26, 2008
Location: Great Falls, VA
August 2, 2009, 10:22 PM

Quote:
<head>

<script type="text/JavaScript">

function() startup() {
removeLoadingImage();
preloadImages();
}

function() removeLoadingImage() {

document.getElementById('loading').innerHTML = '';

if(document.getElementById('overallcontainer').sty le.visibility ==

"visible"){
document.getElementById('overallcontainer').style. visibility = "hidden";
}else{
document.getElementById('overallcontainer').style. visibility = "visible";
}
}
</script>


<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =

changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_01_over = newImage("images/home_01-over.gif");
preloadFlag = true;
}
}

// -->
</script>

</head>

.
.
.


<body onload="startup();">


<center>
<div id="loading" ><img src="loading.gif" border=0></div>
</center>


<div id="overallcontainer">

.
.
.

... all the page content goes here ...

.
.
.

</div> <!--End overallcontainer -->
Maybe that above.. just change the first window.onload into a function.

Then wrap the calling of that function (which I believe serves to hide the loading.gif?) and the preload images at the same time.

I'll look at this again in the morning after some sleep and actually try it


*sigh*
  Send a message via AIM to Send a message via AIM to SLOride  
Reply With Quote
Unread
  (#3)
SaS
Sas pronounced Sauce.
 
SaS's Avatar
 
Posts: 2,562
Join Date: August 13, 2008
Location: In the city
August 2, 2009, 10:37 PM

incompatible in what way? Describe what is happening in more detail.
  Send a message via AIM to  
Reply With Quote
Unread
  (#4)
I came I saw I shat mysef
 
jron's Avatar
 
Posts: 2,068
Join Date: July 21, 2003
Location: Fairfax, VA
August 2, 2009, 11:31 PM

Also.. What browser are you using? IE ?


-john
wera, ccs - novice # 979 - sv650
Aprilia Falco (sold), Gs500 (sold), KTM300 (sold)

"I'll believe corporations are people when Texas executes one of them."

Separation of Corp. And State!

R.I.P Alex Lyskawa - My heart will never heal from your passing.
  MySpace.com Page Send a message via AIM to Send a message via AIM to jron  
Reply With Quote
Unread
  (#5)
Site Owner
 
ClemsonJeeper's Avatar
 
Posts: 12,971
Join Date: March 9, 2004
Location: CashBurn, VA
August 2, 2009, 11:41 PM

You have two onloads. There can be only one.

The first is the

window.onload = function(){
...
}

at the top, the later is:

<body onload="preloadImages();">

So the fix would be to take all the code from window.onload = function {
<cut this>
};

and put it in your preloadimages() function. Then delete the window.onload= ... block.


(O|||||||O) and (0OO\(||||)(||||)/OO0)

Help support DCSportbikes.net! Become a Premier Member today!

Katie #135.



Nudist: If Ben isnt still riding me, then I need it
B: that sounds odd
  Facebook Page Send a message via AIM to Send a message via AIM to ClemsonJeeper  
Reply With Quote
Unread
  (#6)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
August 3, 2009, 05:34 AM

Ah. Well, as is, the loading.gif displays ... forever. It just hangs.

If I romove the onload="preloadImages();" from the BODY tag, then the loading.gif works fine ... but, it then the rollovers for the buttons don't work.

If I remove the entire window.onload script, then of course the loading.gif does not display ... but the rollovers work fine.

I'll try some of the things you all recommend when I get home tonight.

Thks!


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#7)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
August 3, 2009, 05:40 AM

I tried sloride's suggestion. Has same result as the original.

I've zipped the contents if anybody wants to d/l and take a look. It's a very simple site.

Here: http://flandersland.tzo.com/bogus/bettysriverroad.zip

Hooah.


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#8)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
August 3, 2009, 05:42 AM

Quote:
Originally Posted by jron View Post
Also.. What browser are you using? IE ?
I'm using Chrome, IE 7, Mozilla, and IE 6. Get same results in all of them.


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#9)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
August 3, 2009, 08:14 AM

Jeeper ... your idea worked. I added all the functions to one onload event.

Like this. Works. Thks!

Quote:
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {

document.getElementById('loading').innerHTML = '';

if(document.getElementById('overallcontainer').sty le.visibility == "visible"){
document.getElementById('overallcontainer').style. visibility = "hidden";
}else{
document.getElementById('overallcontainer').style. visibility = "visible";
}




if (document.images) {
home_01_over = newImage("images/home_01-over.gif");
preloadFlag = true;
}
if (document.images) {
downstairs_01_over = newImage("images/downstairs_01-over.gif");
preloadFlag = true;
}
if (document.images) {
adirondacks_01_over = newImage("images/adirondacks_01-over.gif");
preloadFlag = true;
}
if (document.images) {
contact_over = newImage("images/contact-over.gif");
preloadFlag = true;
}
if (document.images) {
directions_01_over = newImage("images/directions_01-over.gif");
preloadFlag = true;
}
}
// -->
</script>


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#10)
Site Owner
 
ClemsonJeeper's Avatar
 
Posts: 12,971
Join Date: March 9, 2004
Location: CashBurn, VA
August 3, 2009, 08:27 AM

cool, glad it works. problem was your second onload definition overrode the first.


(O|||||||O) and (0OO\(||||)(||||)/OO0)

Help support DCSportbikes.net! Become a Premier Member today!

Katie #135.



Nudist: If Ben isnt still riding me, then I need it
B: that sounds odd
  Facebook Page Send a message via AIM to Send a message via AIM to ClemsonJeeper  
Reply With Quote
Unread
  (#11)
Resident Rodent
 
Magic-Rat's Avatar
 
Posts: 2,717
Join Date: November 25, 2003
Location: Manassas
August 3, 2009, 08:51 AM

Yup. Here's the finished product:

http://www.magicratproductions.com/bettysriverroad/


- Rat

"Ride to the sound of the guns."

http://www.magicratproductions.com
  Send a message via AIM to  
Reply With Quote
Unread
  (#12)
Out of Action
 
SLOride's Avatar
 
Posts: 948
Join Date: August 26, 2008
Location: Great Falls, VA
August 3, 2009, 09:04 AM

Interesting.. obviously it ws the 2 onloads.. but I figured if I made the 1 onload call a function.. that just called both functions.. that it would have worked.

Not sure why my solution didn't pan out


*sigh*
  Send a message via AIM to Send a message via AIM to SLOride  
Reply With Quote
Unread
  (#13)
Out of Action
 
SLOride's Avatar
 
Posts: 948
Join Date: August 26, 2008
Location: Great Falls, VA
August 3, 2009, 09:06 AM

BTW, to add on. Magic - you should look at things like jQuery/jQuery UI.. or prototype/scriptaculous.

Just some libraries that simplify handling onloads & UI updates.. all of which will work in any browser.

I even have some books you can borrow if you'd like.


*sigh*
  Send a message via AIM to Send a message via AIM to SLOride  
Reply With Quote
Unread
  (#14)
Site Owner
 
ClemsonJeeper's Avatar
 
Posts: 12,971
Join Date: March 9, 2004
Location: CashBurn, VA
August 3, 2009, 09:15 AM

Quote:
Originally Posted by SLOride View Post
BTW, to add on. Magic - you should look at things like jQuery/jQuery UI.. or prototype/scriptaculous.

Just some libraries that simplify handling onloads & UI updates.. all of which will work in any browser.

I even have some books you can borrow if you'd like.
That would have worked fine, but in your code:


function() startup() {
removeLoadingImage();
preloadImages();
}

function() removeLoadingImage() {


function() startup() and
function() removeLoadingImage()

is not valid javascript.. would probably result in parse errors.

typos ;D


(O|||||||O) and (0OO\(||||)(||||)/OO0)

Help support DCSportbikes.net! Become a Premier Member today!

Katie #135.



Nudist: If Ben isnt still riding me, then I need it
B: that sounds odd
  Facebook Page Send a message via AIM to Send a message via AIM to ClemsonJeeper  
Reply With Quote
Unread
  (#15)
Out of Action
 
SLOride's Avatar
 
Posts: 948
Join Date: August 26, 2008
Location: Great Falls, VA
August 3, 2009, 09:38 AM

Quote:
Originally Posted by ClemsonJeeper View Post
That would have worked fine, but in your code:


function() startup() {
removeLoadingImage();
preloadImages();
}

function() removeLoadingImage() {


function() startup() and
function() removeLoadingImage()

is not valid javascript.. would probably result in parse errors.

typos ;D
Ahh yeah.. drats.. that is what painkillers and no sleep will get me.

BTW, did people look at it all in IE 7? I found the load gif to not be centered in IE7.. but it looks good in chrome/safari 4 and FF3.5


*sigh*
  Send a message via AIM to Send a message via AIM to SLOride  
Reply With Quote
Reply


Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Powered by vBadvanced CMPS v3.2.3


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0
vBulletin Skin developed by: vBStyles.com
All logos and trademarks in this site are property of their respective owner. The comments are property of their posters, all the rest 2002-2010 by DCSportbikes.net. DCSportbikes.net is owned by End of Time Studios, LLC.