JavaScript - Loading Multiple Javascripts On The Same Page

Hi All,

I know this has been covered many times on this site, but I just cannot figure out what I'm doing wrong. I've got a jquery slideshow and some lightbox galley images that I'm trying to get to work together. I thought I had taken out the parts that were conflicting but I apparently haven't. Any help would be much appreciated.

Here's the page I'm working on: oneeightyone.com/new/index.html

Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script.

I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts.

The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down.

The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html

Thanks in advance for your valuable time.

Hey guys, well first of all i'm new at the forum and very, very new to javascript so pleas go easy on me for asking dumb questions.
Second of all i'm Rutger, from the netherlands, hi folks!

So, here's my problem. I'm rebuilding my portfolio webpage and i'm doing it all by my self to learn html and css. Thats going great so far but i'm having problems using javascripts.

In all pages i use a javascript for a dropdown menu, this works great exept for the homepage.
There i also use a javascript for a slideshow to show recent work. The slideshow works but because i add the slideshow the dropdown stops working comepletely and i can't figure out why...

I've been searching google and i keep finding the window.onload solution but both scripts don't use that command....

Anyone's got a clue? Please help cause i'm about to pull my hair out!
Haha, just kidding but it's pretty frustrading!

Rutger

P.S. Here are both codes:
Here is the slideshow:
Code:

Object.prototype.addEvent = function(evtType, func) {
   if (this.addEventListener) {
      this.addEventListener(evtType, func, true);
   } else if (this.attachEvent) {
      this.attachEvent('on' + evtType, func);
   } else {
      this['on' + evtType] = func;
   }
}



function slideshow(slideel, faddingSpeed, stopTime, stopOnMouseOver) { 
        var mouseIsOver = false;
       
        if (stopOnMouseOver) {
                slideel.addEvent('mouseover', function() {
                        mouseIsOver = true;
                });

                slideel.addEvent('mouseout', function() {
                        mouseIsOver = false;
                        self.next();
                });
        }
               
        this.next = function() {
                if (mouseIsOver)
                        return;

                this.current.fadeOut();
                this.current = this.current.nextSlide;
                this.current.fadeIn();
        }
       
        function createSlides() {
                var imgs = slideel.getElementsByTagName('img');
                var slides = [];
               
                for (var i = 0; i < imgs.length; i++) {  
                        slides[i] = new slideshowImage(imgs[i], self);
                }
               
                for (var i = 0; i < slides.length; i++) {
                        if (i == slides.length - 1)
                                slides[i].nextSlide = slides[0];
                        else
                                slides[i].nextSlide = slides[i + 1];
                }
               
                self.current =  slides[0];
                slides[0].fadeIn();
               
                function slideshowImage(img, slideshow) {
                        img.style.opacity = '0';
       
                        this.fadeIn = function() {
                                var i = 0;
                                while (++i <= 40) {
                                        window.setTimeout(function() {
                                                img.style.opacity = parseFloat(img.style.opacity) + 0.025;
                                        }, i * faddingSpeed);
                                }
                               
                                window.setTimeout(function() {
                                        slideshow.next();
                                }, 150 * faddingSpeed + stopTime);
                        }
       
                        this.fadeOut = function() {
                                var i = 0;
                                while (++i <= 40) {
                                        window.setTimeout(function() {
                                                img.style.opacity = parseFloat(img.style.opacity) - 0.025;
                                        }, i * faddingSpeed);
                                }
                        }
                }
        }
       
        var self = this;
        createSlides(slideel);
}

The dropdown:
Code:

$(document).ready(function(){

	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
	
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
	
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
});

Object.prototype.addEvent = function(evtType, func) {
   if (this.addEventListener) {
      this.addEventListener(evtType, func, true);
   } else if (this.attachEvent) {
      this.attachEvent('on' + evtType, func);
   } else {
      this['on' + evtType] = func;
   }
}

And these are files that came with the dropdown that need to be included:
- jquery.js
- jquery-1.txt
This is just a library right?

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

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

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hey, so I'm pretty much a total noob when it comes to javascript, and was basically wondering how I would go about loading multiple flash games per area, as apposed to having every SWF listed on the page, which would take up an ungodly amount of space. What I basically want is for one box aligned to the left side of the page and a link to each game on the right side, and when the user clicks on a specific link, that corresponding SWF will load in that one box. If this is possible, how exactly would I go about doing this? Thanks in advance.

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 an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html
Thank you for your help in advance.

Something is up with my coding, when I try to load the page.. it will only load in notepad. Help!


<html>
<head>
<title>Other ways to help</title>

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}


function validateForm(form) {
var fName = form.txtFname.value;


var dataIsValid = true;

var errMsg = "The following inputs are missing or invalid:\n\n";


if(fName == '') {
errMsg = errMsg + "First Name\n";
dataIsValid = false;
}


if(lName == '') {
errMsg = errMsg + "Last Name\n";
dataIsValid = false;
}




if(dataIsValid) {
return true;
} else {
alert(errMsg);
return false;
}
}

//-->
</SCRIPT>

</head>

<body>
<a name="other">
<body background="otherbackground.jpg">
<center><table border="2" cellspacing="2" width="900" height="190" bordercolor="#000000">
<tr>
<td width="60%" td bgcolor="white">
<b>To make a donation, fill and submit the following form. You can also make a cash donation directly by filling out your credit card information.<br/>
Also, be sure to check yes if you would like to subscribe to our online monthly newsletter.</b><br/>
<form name="Donations" method="post" action="#" onsubmit="validateForm(this);">
First Name<input type="text" name="txtFname" size="25" tabindex="1">
M.I.<input type="text" name="M.I." size="1">
Last Name<input type="text" name="Last Name" size="25"><br/>
Street Address<input type="text" name="Street Address" size="25">
Street Address 2<input type="text" name="Street Address 2" size="25"><br/>
City<input type="text" name="City" id="myCity" size="20">
State<input type="text" name="State" size="2">
Zip<input type="text" name="Zip Code" size="10"maxlength="9"><br/>
Email<input type="text" name="Email" size="25"><br/>
Credit Card Number<input type="text" name="Credit Card Number" size="10"maxlength="8">
Expiration Date<input type="text" name="Expiration Date" size="5">
Security Number<input type="text" name="Security Number" size="3"maxlength="3">
<textarea cols="50" rows="4" name="Comments">Comments or Questions:</textarea><br/>
Subscribe to newsletter? <input type="radio" name="choices" value="Yes">Yes<input type="radio" name="choices" value="No">No<br/><br/>
<input type="submit" value="Submit">
<input type="reset">
</form><br/>
</table><br/>

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="home.html">Home Page
<OPTION VALUE="dogs.html">Learn About Dogs
<OPTION VALUE="cats.html">Learn About Cats
<OPTION VALUE="exotics.html">Learn About Exotics
<OPTION VALUE="other.html">Other Ways To Help
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
<br/><br?>

</body>

</html>

Hello,

I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points).

The content is shown in a div and called and loaded via Ajax.

Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments.

Here is the content page that appears in the div after you click "Go":
http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html

If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded.

I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both...

Any help with this would be greatly appreciated.

Thank you,
Deborah

Hi i have the following

Code:

<script type="text/javascript">
$(document).ready(function () {
    window.name = "main";
    $("#uploadSubmit").bind("click", function () {
        //edit below to suit
        var src = "uploader.php";
        //end
        var results = '<iframe src="' + src + '" name="uploader" id="uploaderIframe"></iframe>';
        $("#uploader").append(results);
        $("#uploadResult").html('Uploading please wait... <img src="images/loader.gif" />');
        $("#uploaderIframe").load(function () {
                var iframeHtml = $('#uploaderIframe').contents().find("body").html();
                $("#uploadResult").html(iframeHtml);
                $("#uploaderIframe").remove();
                main.execCommand('Stop');
                main.stop();
        });
    }); 
});
</script>

works perfectly but the main page keeps loading once the iframe is removed. Any know why and how i can terminate the loading?

Hi, nothing to serious, but definitely annoying. Every time i load my page, it loads to the halfway Y position down the page. I want to page to always load top every time it is refreshed or referenced to. You can see the problem here. Try and go to www.simeoncreative.com and click on any of the menu nav links. the page will load, but just halfway down the page. I tried both the

Code:

$(document).load().scrollTop(0);

and

Code:

$(document).ready(function(){
    $(this).scrollTop(0);
});

JS codes in the linked .js file. How can I fix this? Thanks in advance for any help.

So I have an HTML page with javascript that takes input values, computes some results, and then puts these results in a table. Works great. Now I realize some users might want to print just the results table. So I add a button that allows the user to request the table in a separate window; clicking the button invokes a script to re-create the table in a separate window. Works fine except:

* In the status bar, the window appears to never finish loading
* If you go to File -> Print then nothing seems to happen; however,
if you close the generated window _then_ the print dialog appears;
the window you want to print, however, is gone.

Any suggestions?

The code invoked by clicking the newly added button:

[CODE]
function grabResults()
{
var w = window.open("","ROIResults"+winCount++,
"height=400,width=600,menubar=yes");
var d = w.document;
d.write('<head>');
d.write('<link href="style.css" title="compact" rel="stylesheet" type="text/css" />');
d.write('<title>Return On Investment Calculations</title>');
d.write('</head>');
d.write('<body>');
d.write('<div id="logoholder">');
d.write(' <img src="TTFlogo2.gif" alt="Cannott display logo" "width="322" width="322" height="51"></p>');
d.write('</div>');
d.write('<div id="header">');
d.write(' <h2>Return on Investment Estimator for Classroom Training</h2>');
d.write('</div>');
d.write('<table rules="all" frame="box">');
d.write('<caption>Results - Estimated ROI</caption>');
d.write(' <tr><th>Course</th>');
d.write('<td class="center" id="courseName">'+cname+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Duration (Days)</th>');
d.write('<td class="center" id="courseDur">'+cdays+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Class Size</th>');
d.write('<td class="center" id="courseSize">'+csize+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Location</th>');
d.write('<td class="center" id="courseLoc">'+teach_loc+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Training Cost</th>');
d.write('<td class="justr" id="courseCost">'+TC+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Initial Value</th>');
d.write('<td class="justr" id="courseInitial">'+startValue+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Returned Value</th>');
d.write('<td class="justr" id="courseValue">'+RV+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Increase in Value</th>');
d.write('<td class="justr" id="courseIncr">'+Inc+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Net ROI after costs</th>');
d.write('<td class="justr" id="courseROI">'+ROI+'</td>');
d.write(' </tr>');
d.write(' <tr><th>ROI Rate</th>');
d.write('<td class="justr" id="courseROIRate">'+ROIR.toFixed(2)+'%</td>');
d.write('</tr> '); */
d.write('</table>');
d.write('<p class="in3">(All amounts are in US Dollars.)</p>');
d.write('</body>');
d.write('</html>');

d.close();
return true;
}

[ICODE]

Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please?
I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains).

The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading.
Thanks.
Code:

<html>
<head>
<script type="text/javascript">

    currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");

    currentPageObj.addEventListener("load", function(){alert("loaded")}, false);

</script>
</head>
<body>

    <form action="http://www.example.com" rel="nofollow" target="currentPage">
         <input type="submit">
    </form>

</body>
</html>

I have been asking around other forums for this question....no one seems to be able to help.

But reading through here you guys seem quite a bit smarter and I'm sure you can point me in the right direction

What I need is a simple loading page that is for LOOKS only...the site I am redirecting to is very small and does not take very long to load...but for marketing purposes a loading page will make my business strategy look much more legit.

I am linking to an affiliate page with a discount link. The problem is most people aren't actually sure if the discount link works...so I want to make a loading page where it says something like "Activating Discount". SO basically I have:

My website>>>(link)>>>HTML Loading Page>>>(Redirects after 5 sec or so)>>>Afilliate Landing Page

I'll put a loading wheel on the page like this one:



But what I really want it to do is switch the messages its displaying so maybe it says "Loading Site Content" for 1 second then switches to "Activating Discount" for 1 second then switches again to "Validating Referrer" or something like that.

THANK you so much for any help you can give me You guys rock!

HI,what is wrong here?

I am trying to write code to print a message 5 seconds after document has loaded.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script>
			var i;		
			function printMsg(){
				document.write("delayed string");
				//tried adding to this line: clearTimeout(i);
			}
			function timedfunc(){
				i=setTimeout(printMsg,5000);
			}
		</script>
	</head>
	<body onload="timedfunc()">
	</body>
</html>

The message appears ok but the page loading bar in the browser + hourglass wont go away (in firefox).