JavaScript - Ajax Loading Content On Request Problem

Hi,

I have searched and searched...

Is there a way of using the Ajax httpRequest cross domain?

thanks

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

Could someone help me figure out why this AJAX request is not completed in Internet Explorer. Thanks.

Code:

function openmanagegraphs() {
  document.getElementById('managegraphs').style.display = 'block';
  var xmlhttp;
  if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("results").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "PHP/mgon.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  CurrentRun;
  xmlhttp.send("mgon=true");
}

I'm using jquery right now but I sort of understand what the problem is. I'm making a file manager and when you click on an li tag it will do some action depending on if it's a file type or a folder type. There are 3 important files you should know about.

1. filemanager.php (Where the file managing takes place. Starts by including filemanager_getfile.php and including filemanager.js in the head).

2. filemanager_getfile.php (Information that receives information from the ajax request [the directory to be read] and prints the new file list in <li> tags)

3. filemanager.js (Jquery that processes li clicks)

The problem is, when you click on a folder (and it loads the new information from the ajax request) the jquery doesn't check the new li tags when clicked (I'm guessing when you first link the javascript file it has to compile all of the current li information?).

Try it for yourself-
[removed]

Instruction (if it's not already obvious):

-Clicking a file selects if. If files are selected and you click the arrow in the file options it will transfer it (not really, but it will later).

-Clicking a folder will send an ajax request with the new directory information to be checked and return the html

-Clicking the '?' in the file options will display the pages html (I implemented it to debug).

I have tried linking the js page every time I include the new directory information, but the js stacks on each other. So if I click on 3 folders and hit the '?' button it will display the page html 3 times. And if I select the index.php li and click transfer, it will "transfer" 3 times.

filemanager.php
Code:

<div id="goldenSub">
        <div class="title">Golden Subdomain</div>
        <div class="files" id="goldenSubFiles">
            <?
                include("filemanager_getfiles.php");
            ?>
        </div>
        <div id="history" visited="goldensub/"></div>;
        <div class="fileOptions"><img src="images/question.png" title='HTML Information' id="ask"><img src="images/transferto.png" title='Copy File To' id="transferTo"></div>
    </div>

filemanager_getfiles.php
PHP Code:
<?
    $path = $_REQUEST["dir"];
    if($path == "" || $path == null)
    {
        $path = 'goldensub/';
    }
    
    echo "\n<div class='path'>$path</div>\n<ul>\n";
    $handler = opendir($path);
    
    //We need to organize the results. Be default, all files and folders will be
    //located by alphabetical order. But we want to list all folders first, followed
    //by files. By adding the results to arrays first we can decide to print our
    //results in the order we want.
    
    $folderArray = array();
    $fileArray = array();
    
    $folderCount = 0;
    $fileCount = 0;
    
    while(false !==($file=readdir($handler)))
    {    
        if($file != "" && $file != null && $file != "." && $file != "..")
        {
            
            $extensionLocation = strrpos($file, ".");
            
            //Is this a folder or a file?
            if($extensionLocation == null && $extensionLocation == "")
            {
                //This is a folder unless it's the error_log file.
                if($file != "error_log")
                {
                    //Nope, it's definitly a folder. Add it to the folder array.
                    $folderCount++;
                    $folderArray[$folderCount] = $file;
                }
            }
            else
            {
                //This is a file. Add it to the file array.
                $fileCount++;
                $fileArray[$fileCount] = $file;
            }
        }
    }
    
    if($path != 'goldensub/')
    {
        echo "\t<li title='goldensub/' type='folder'>\n\t\t<img src='images/up.png'> goldensub\n\t</li>\n";
    }
    
    for($i = 1; $i<=$folderCount; $i++)
    {
        $newPath = $path.$folderArray[$i].'/';
        echo "\t<li title='$newPath' type='folder'>\n\t\t<img src='images/folderOpen.png'> $folderArray[$i]\n\t</li>\n";
    }
    
    for($i = 1; $i<=$fileCount; $i++)
    {
        $extensionLocation = strrpos($fileArray[$i], ".");
        $nameLength = strlen($fileArray[$i]);
        $extensionLength = $nameLength-$extensionLocation;
        $nameClean = substr($fileArray[$i], 0, $extensionLocation);
        $extension = substr($fileArray[$i], $extensionLocation+1, $nameLength);
        echo "\t<li title='$fileArray[$i]' type='file' extension='$extension'>\n\t\t\n\t<img src='images/$extension.png'> $nameClean\n\t</li>\n";
    }
    echo "</ul>";
?>

filemanager.js
Code:

    $("li").click(function(){
        var type = $(this).attr("type");
        //This is a folder
        if(type == "folder")
        {
            //Path to new directory
            var newPath = $(this).attr("title");
            //Ajax request to filemanager_getfiles.php
            $("#goldenSubFiles").load("filemanager_getfiles.php", { dir: newPath }, function(data){
                //Update log
                newLog("Directory changed to <i><b>"+newPath+"</b></i>");
            });
        }
        //This is a file
        else
        {
            if($(this).hasClass("selected"))
            {
                //It's already selected - deselect it.
                $(this).removeClass("selected");
            }
            else
            {
                //Select it
                $(this).addClass("selected");
            }
        }
    });

Right,

I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div.

I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this
http://www.google.co.uk/#content/index.php

or what ever.

Thanks.

Hello,

I have a rather complex problem involving ajax and the dynamic loading of text.

Basically, I have a flash player with a video and a series of annotations that the customer would like to appear next to the flash player. These annotations need to dynamically light up and move as the timecode associated with the annotation is passed on the flash player's timecode.

I had a basic static system up and running fine. The problem is that the videos could be 3 hours long and have thousands of annotations - which causes a looonng load time for the page so I would like them to appear dynamically.

At the moment I have tried using the below code to load the first 100 annotations and then when the 100th annotation appears, the next 100 should load up.

The trouble is that it doesn't work! The first 100 annotations cycle through perfectly but then nothing seems to happen when the 100th annotation is read. Please help!

Here's the code....

On the record's html page, I load up the first 100 annotations in the $annotations array in a container called 'media-meta-container' - which appears next to the Flash plaer:
Code:

<div id="media-item" style="width: 858px;">
<div id="media-meta-container" style="width: 302px;">
<ul>
<? $annotate_count = 0; ?>
<? for($i=0;$i<10;$i++): ?>
<? if($annotations[$i]["start"] > 0 && $annotations[$i]["end"] > 0): ?>
<li class="media-meta-li-off" id="annotation_container_<?=$annotate_count?>" onclick="seekPrompt(<?=$annotations[$i]["start"]?>);"><p><?=$annotations[$i]["text"]?></p></li>
<input type="hidden" id="start_<?=$annotate_count?>" value="<?=$annotations[$i]["start"]?>" />
<? $annotate_count++; ?>
<? endif; ?>
<? endfor; ?> 
</ul>
</div> 
<input type="hidden" id="count" value="<?=$annotate_count?>" size="12" />
<input type="hidden" id="start_count" value="0" size="12" />
<input type="hidden" id="start_time" value="0" size="12" />

On an attached javascript file the following function is run every 100ms to update the annotations next to the player:

Code:

function updateTimeCode()
{
	var player = document.FLVClipEditor;
	
	if (player)
	{
		var state = player.getState();
		var time = player.getCurrentTime();
		var start_count = document.getElementById("start_count").value;
		var start_time = document.getElementById("start_time").value;
		
		document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
		var end_count = document.getElementById("count").value;
				
		if(state != "stopped")
		{
			
			
			if(time <= start_time)
			{
				for(k=0;k<start_count;k++)
				{
					var start = document.getElementById("start_" + k).value;
					if(time < start) break;
				}
				
				var start_count = k - 1;
			}
			
			if(start_count > 0) start_count--;
			
			for(i=start_count;i<end_count;i++)
			{
				var start = document.getElementById("start_" + i).value;
				document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
				if(time < start) break;
			}
			

//IF WE HAVE REACHED THE END OF THE AVAILABLE ANNOTATIONS THEN LOAD UP SOME MORE - THIS IS THE PART I AM HAVING PROBLEMS WITH
//THE FUNCTION FIRES BUT NOTHING HAPPENS
			if(end_count == i)
			{
				var new_end_count = end_count + 50;
				document.getElementById("count").value = new_end_count;
				scroll_annotations(end_count, new_end_count);
			}
			
			
			document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
			document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
			
			if(i > 0) i--;
			
			if(i - start_count > 3) 
			{
				document.getElementById("start_count").value = i;
				document.getElementById("start_time").value = document.getElementById("start_" + i).value;
			}
			
			var filled = document.getElementById("annotation_container_" + i);
			
			
			if(i == 0)
			{
				var end = document.getElementById("start_0").value;
				if(time > end)
				{
					filled.className = 'media-meta-li-on';
				}
			}
			else
			{
				filled.className = 'media-meta-li-on';
					
			}
			
			document.getElementById("media-meta-container").scrollTop = filled.offsetTop - 412;
			
		}
	}
}

Here is the scroll_annotations() code that is being called when we reach the end of the annotations:

Code:

function scroll_annotations(start, end){
	$.ajax({
		type: "GET",
		url: "/xml/record_annotations.php",
		dataType: "xml",
		data: "id="+id+"&media_urn="+media_urn+"&start="+start+"&end="+end+"",
		success: function(xml) {
			
			$(xml).find('annotation_item').each(function(){
				
				var annotation_count = $(this).attr('id');
				var startTimecode = $(this).find('startTimecode').text();
				var start = $(this).find('start').text();
				var annotate_count = $(this).find('annotate_count').text();
				var text = $(this).find('text').text();
				$('<li class="media-meta-li-off" id="annotation_container_' + annotate_count + '" onclick="seekPrompt(' + start +');"><p>' + text + '</p><p>' + startTimecode + '</p></li><input type="hidden" id="' + annotate_count+ '" value="' + start + '" />').appendTo('ul#annotations-list-items');
				
			});
		}
	});
}

Where record_annotations produces an xml file like this to give the annotations variables:

Code:

<annotations>
−
<annotation_item id="0">
<start>64.760000</start>
<annotate_count>0</annotate_count>
<text> ahnfea </text>
</annotation_item>
−
<annotation_item id="1">
<start>65.360000</start>
<annotate_count>1</annotate_count>
<text> we all seek. Two states for two </text>
</annotation_item>
−
<annotation_item id="2">
<start>65.920000</start>
<annotate_count>2</annotate_count>
<text> people living in peace and security. </text>
</annotation_item>
−
<annotation_item id="3">
<start>70.720000</start>
<annotate_count>3</annotate_count>
<text> The verbal gloves came off at an EU </text>
</annotation_item>
−
<annotation_item id="4">
<start>73.680000</start>
<annotate_count>4</annotate_count>
<text> summit in Brussels as the French </text>
</annotation_item>
</annotations>

Thank you. Let me know if there is any other information you need

When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete.

I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size.

I have grabbed the event (which references the form, is that right?) and I have something like this:

Code:

<button type="submit" name="name_can_vary">Search</button>
event.name_can_vary.style.visibility = 'hidden';
//(obviously this isn't complete code but no doubt explains what I am talking about)

..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image.

Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on).

Thanks for any help.

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!

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

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?

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)

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