|
JavaScript - Ajax Div Loading
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. Similar TutorialsHello, 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 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 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 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. 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 Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Hi there, Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'. What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly. Does anyone have any idea how to do this? Any help would be greatly appreciated. Cheers, Tom. Hi everyone, I am having trouble getting a loading bar to appear from my javascript. I have the following code in place Code: $(document).ready(function(){
$(window).scroll(function(){
var h = $('#footer').height();
var y = $(window).scrollTop();
if( y > (h*0) && y < (h*1.0) ){
$('#loading').fadeIn("slow");
$('#loading').delay(10000).fadeOut();
$("#portfolios").delay(1000).fadeIn("slow");
}
});
})
I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears... The loading bar 'gif' is in the 'loading div id'. There is a 'display:none;' in the css on the loading div and the portfolios div. Any reason why the 'loading' div doesn't display but the portfolios does? I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page. Any help would be appreciated! Thank you! The Website: http://hudson.zzl.org The CSS: http://hudson.zzl.org/galleria.classic.css The JavaScript: http://hudson.zzl.org/galleria.js The problem: a. first load = nothing shows up b. upon refresh everything loads very quickly and is fine. Ill explain my other loading problems once I can figure out how to fix this problem. Help please! Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? I have nearly successfully implemented a gallery using Backbox: http://www.javascriptkit.com/script/...ox/index.shtml However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks. Is there a way to tell Javascript to load data or a php file the re-direct to that page? Right now i have a script that will re-direct when a user comes to the page. It waits about 5 seconds to give it time. I wanted to know if there was a way to load it with JS or AJAX. Thanks for any help. I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons">
<div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div>
</div>
is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
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. for some reason I can't get this code to load... Code: <script type="text/javascript">
alert("test");
windowBody = document.getElementById("windowBody");
windowBody.style.height = (frameHeight - 250) + "px";
</script>
that should load when it loads the file foot.php foot.php should be included onto the bottom of all of my labs (and it is) my labs are opened up with Ajax... but the script its not loading at all... someone help =[ the web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ sorry for the poor description I'm having a hard time describing this error lol Is there a way to load up an external JS file outside of the head tag? I've got an "AJAX" web app that's loading several pages simply by changing the innerHTML property of a single div. The JS source is getting to be rather large, so I'd like to split it up into manageable, organized portions. Is there some way to, using javascript or PHP, load another javascript into the browser dynamically?
hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos);
var ifrmId = "ifrm_" + uniqid();
ifrm.setAttribute("id", ifrmId);
ifrm.setAttribute("marginwidth", 0);
ifrm.setAttribute("marginheight", 0);
ifrm.setAttribute("frameborder", 0);
ifrm.setAttribute("scrolling", 0);
ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight));
ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth));
container.appendChild(ifrm);
But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid();
sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query;
$('<iframe />', {
src: sAdURL,
id: sPos
}).appendTo(thisAd);
I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck. Thanks, Blake |
|||||||