|
JavaScript - Loading Bar At Loading New Page Content
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 Similar TutorialsHello, 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 Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets. Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets. My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason. Is there any solution that comes to mind for anyone out there? You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found: Get The Bookmarklet on this page Again, it works great if you don't start the script from a sites home page. I'm just curious to know what would be the best way to go about this. I have my navigation and content area divs from my admin panel show below and what I want to do is when one of links is clicks then to load that links file into the content div. I've been told JQuery but I can not find a function exactly detailing and teaching me how to do what I'm trying to do. Code: <!-- Global -->
<div id="page-content">
<div class="container content">
<!-- Sidebar -->
<div id="sidebar" class="bImg">
<div class="bInner"><span class="bTR"></span><span class="bBL"></span>
<ul id="side-nav">
<li class="active">
<a href="#" title="Character" class="button">
<strong>
<img src="img/icons/newspaper_48.png" alt="Character" class="icon "/>
<span class="title">Character</span>
<span class="expand expanded"></span>
</strong>
</a>
<ul>
<li><a href="/mods/bio.php" title="Bio">Bio</a></li>
<li class="active"><a href="/mods/allies.php" title="Allies">Allies</a></li>
<li><a href="/mods/rivals.php" title="Rivals">Rivals</a></li>
<li><a href="/mods/quotes.php" title="Quotes">Quotes</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Submit" class="button ">
<strong>
<img src="img/icons/paper_content_48.png" alt="Submit" class="icon "/>
<span class="title">Submit</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/roleplay.php" title="Roleplay">Roleplay</a></li>
<li><a href="/mods/news.php" title="News">News</a></li>
<li><a href="/mods/match.php" title="Match">Match</a></li>
<li><a href="/mods/segment.php" title="Segment">Segment</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Booking" class="button">
<strong>
<img src="img/icons/image_48.png" alt="Booking" class="icon "/>
<span class="title">Booking</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/champions.ph" title="Champions">Champions</a></li>
<li><a href="/mods/booker.php" title="Booker">Booker</a></li>
<li><a href="/mods/compiler.php" title="Compiler">Compiler</a></li>
<li><a href="/mods/archives.php" title="Archives">Archives</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Fed Admin" class="button">
<strong>
<img src="img/icons/comment_48.png" alt="Fed Admin" class="icon "/>
<span class="title">Fed Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/handlers.php" id="handlers" title="Handlers">Handlers</a></li>
<li><a href="/mods/characters.php" id="characters" title="Characters">Characters</a></li>
<li><a href="/mods/manageapplications.php" id="templates" title="Applications">Applications</a></li>
<li><a href="/mods/eventnames.php" id="templates" title="Event Names">Event Names</a></li>
<li><a href="/mods/titles.php" id="templates" title="Title Names">Title Names</a></li>
<li><a href="/mods/divisions.php" id="templates" title="Divisions">Divisions</a></li>
<li><a href="/mods/matchtypes.php" id="templates" title="Match Types">Match Types</a></li>
<li><a href="/mods/arenas.php" id="templates" title="Arenas">Arenas</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Site Admin" class="button">
<strong>
<img src="img/icons/spanner_48.png" alt="comments" class="icon "/>
<span class="title">Site Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/templates.php" id="templates" title="Templates">Templates</a></li>
<li><a href="/mods/contentpages.php" id="contentpages" title="Content Pages">Content Pages</a></li>
<li><a href="/mods/bioconfiguration.php" id="bioconfiguration" title="Bio Configuration">Bio Configuration</a></li>
<li><a href="/mods/newscategories.php" id="newscategories" title="News Categories">News Categories</a></li>
<li><a href="/mods/menustructures.php" id="menustructures" title="Menus">Menus</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /Sidebar -->
<!-- Content -->
<div id="content" class="roundedBorders">
<div class="bBottom"><div></div></div>
</div>
<!-- /Content -->
Hello everyone, I have implemented the following code into my website 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) {
$('#content').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The div 'content' holds already a few divs, when the user hits the bottom of the screen, the new page (page2.html) loads into the 'content' div, they all load below as is expected. Unfortunately, the page3.html (Which has the same content as 'page2.html) then loads below the footer... (which is set to position:relative; ) below everything else... is there any reason why the next page would load into a different location? Thanks! Hi -- I'm learning js, and after some minor modifications my html page is now not pulling content from the xml pages, although I have: <script src="include.js" type="text/javascript"> and <body onload="getCategory('about');" which is not loading the about.xml content Troubleshooting: Yes, include.js file is on same level as html page. Any ideas? Thanks! So basically, I have this side bar with a whole bunch of links and I wish to load content into a div directly across from it. The links will be hashes (eg example.com/#foo/bar), then the JavaScript loads the content either into a div and updates a SPAN with the page name. I only have the iFrame version so far, so can someone help me on how to improve this and actually load the content instead of an iFrame? So far I have this code: Code: <script>
function goto(url) {
if (location.hash != url) {
window.location = url;
document.getElementById("pgname").innerText = "loading...";
}
}
function setPage() {
var hash = location.hash;
if (hash=="#foo") {
document.getElementById('pgname').innerHTML = 'Foo';
document.getElementById('pglocation').innerHTML = hash;
window.frames['content'].location.href = "blablah/foo.php";
}
if (hash=="#foo/bar") {
document.getElementById('pgname').innerHTML = 'Foo</b> > <b>Bar';
document.getElementById('pglocation').innerHTML = hash;
window.frames['content'].location.href = "doo/moo/23.htm";
}
}
</script>
<body onhashchange="setPage();">
<a href="javascript: goto('#foo')">foo</a><br />
<a href="javascript: goto('#foo/bar')">foobar</a><br />
<a href="javascript: alert(location.hash + ' || ' + location);">Info</a><br />
<a href="javascript: goto(location.hash);">Goto</a><br /><br />
<b><span id="pgname">Home</span></b><br />
example.com/<span id="pglocation"></span><br />
<iframe id="content" src="index.php" />
Hi, I am using one simple lightbox or you can call it modal window. It doesn't load any flash content until you click on the button PLAY and when you click on close, it stops the flash game (it actually stops as when you click PLAY again the game starts from beginning) BUT this is only about FIREFOX its not the behavior in CHROME, IE or Safari except MOZILLA FIREFOX all browser act in a complete different way which is opposite to the way I described above. In chrome, IE, Safari maybe Opera the Flash content starts loading without being triggered (means if you don't click PLAY BUTTON still it loads) and even if you click on close button. Instead of stopping flash like in firefox the flash game continues to run (like being minimized instead of closed). Why is this happening, How to resolve it, I am not able to understand this strange behavior? RELEVANT CODES: CSS: Code: #fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999999;
}
.popup_block{
width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
line-height:1em;
font-size: 1em;
position: fixed;
top: 0px; left: 0px;
z-index: 999999999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
height:20px;
float: right;
margin: 0 2px 0 0;
}
HTML: Code: <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a></td></tr>
</tbody></table>
<div class="popup_block" id="popup_name">
<div class="gamesharebuttons addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_button_more">Share</a></div>
<iframe id="myvideo" width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/Adventure/star%20island.html" frameborder="0" scrolling="no" allowTransparency="false"
></iframe>
</div>
JS: Code: <script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 0;
var popMargLeft = ($('#' + popID).width() + 0) / 0;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/201...n-testing.html Hello, I have been everywhere still trying to find a solution of this, I have the following code which loads a new html page into the bottom of my document when the user reaches the bottom of the page. Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
$("#loading").slideDown();
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
$("#loading").slideUp();
});
}
}
});
#Loading is a div which contains a loading jpeg which is fixed to the bottom of the screen. This div appears when the user hits the bottom of the screen, and then disappears once the content has fully loaded. The problem I have is that once the user has loaded all the content that is available. Say I have 'page2.html, page3.html, page4.html' to load one at a time as the user hits the bottom of the screen. I need the loading bar to stay hidden when it tries to load the 'page5' which does not yet exist... Is this easy to do to alter my javascript code? I am at a loss with this. Any help would be appreciated. I asked a similar question before but have adapted the code now for the loading bar, just need this little glitch to be fixed. Thank you! Website at: www.jb-design.me/marchupdate2/ so you can see that I mean. (note that the graphics on the website are made by me but are not my work, just for placement) Hi, well i have a issue with lightbox like stuff that i am using here http://www.bloghuts.com/2010/11/13-days-in-hell.html If you click on play that lightbox windows open and if you click close it closes down (as you expect from it) but the problem is that in firefox until you click play the game doesn't load and when you click close it closes the game BUT if you use any other broswer like chrome or IE or any you like, before you click play the game starts loading and when you will click close, it will actually minimize the game not close (like it do in firefox) I don't know why is this crossbrowser issue happening and what could be the solution to make it work like firefox in all browsers? Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar. I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks 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. 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. 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> 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. 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? Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate. script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page. The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting). At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads. Any help would be appreciated! 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>
|
|||||||