|
JavaScript - Hide A Loading Div If Not New Content Available To Load
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) Similar TutorialsOk, 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. 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 Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there? Thanks in advance!! hi i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files) Now what i need is, onclick of HOme button.. i have written a code like <a href="main_Home.html" onclick="updateObject(this); return false;"> and the javascript i got from dhtml goodies is <script type="text/javascript"> function updateObject(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } </script> now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there.. Pls help.. I am a middleware developer for a design and manufacturing software. We recently have gone from using Crystal reports to using xml based reporting. I am just begining to write reports using xsl, css and java script and transforming to html. The report I am working on has several tables each in a separate div. These tables are populated based on the xml file output form a job file. Base on job settings one or more tables may have no information in them. What I would like to do is hide the divs with empty tables when the page is loaded. I have looked through the forums here and on other sites and have found perhaps hundreds of examples of java script for showing and hiding divs with user input or by being set to a hide state by default. However I need it to be more dynamic. I think this can be done with java script but not sure hopefully someone can help me. Thanks PShorty Hello, I am currently using Code: onload="document.getElementById("hidepage").style.visibility="hidden";"
to try to hide a div box. Yet this will not work. I've tried FF, IEpp4 (IE platform preview 4) and IE9beta. This is the correct <div> id, and I do not know why this will not work. Thanks! 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! 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 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, 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? 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 Hi, Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash. Can someone tell me what's wrong? Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html 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. 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 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 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^^. |
|||||||