I'd to create some transitions between pages. I've made it this way:
$("div.fading").css('display', 'none');
$("div.fading").fadeIn(500);
$("a.fade").click(function(event){
event.preventDefault();
link = event.href;
$("div.fading").fadeOut(500, redirect(link));
});
in redirect have I used window.location and it has been working, but the fadeIn effect has been running for every page which has been loaded. I didn't like that, so I'm trying make it with ajax. It should allow me to call the fadeIn function as a callback function in jquery. I have this code,
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(){
$(".fade").fadeIn(300);
}
});
});
which is not fully working..All effects are OK, but page which I get after fadeIn is simply the same that faded out..IMHO can I do it another way with .load() function, I tried to implement that, but there were too some problems:-)Does anybody know what I should do to make it fully working?Thanks..
You're calling the page via ajax, but you're not replacing the contents of the current .fade div before you call fadeIn(). I've modified your code to do that below. .load() should do the same thing a little cleaner.
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(pageHTML){
$(".fade").html(pageHTML);
$(".fade").fadeIn(300);
}
});
});
I think you're just missing any used of the data returned. In the success function you'll need to do something like:
$('.fade').html(data);
Then and you can fade it back in with the page having been updated.
Related
$(window).bind('scroll', function(){ //when the user is scrolling...
//some-code
});
I face the same problem for click and I solved it this way:
$(document).on('click','#id',function(){
//some code
})
I dont know how to assign scroll action for content loaded with ajax.
http://www.arrowlife.com/index-v3
try calling the function again after the ajax call
$.ajax({
//some code
}).done(function(){
//scroll function
});
I think the issue is that you are calling the function before the element exists and therefore is not working properly.
I am trying to use Javascript to load different pages when you press a link. Here is the function I am using to change the page.
function loadPage(url){
$(".body").fadeOut(400, function(){
$(".body").load(url, function(){
$(".body").fadeIn(400);
});
});
};
The problem is, it fades the stuff into the page, but it disappears once the fadeIn is done. The code html from the file is still in the main files html, it just doesn't show up.
I had an issue, and I used this. File in your case would be the url:
var loader = function(file) {
$('.body').fadeOut(500);
$.ajax({
url: file
success: function(data) {
$('.body').html(data);
$('.body').fadeIn(500);
}
});
}
Changed the code to try and match what your looking to do, tested it with just a div with a background and it seems to work okay.
Is this the same as what you have ?
Andrew
Can i send the request to load certain div with a url only something like abc.com/#header1 cause the approach i am using i have to make 5 separate files for my task and update all of them.
If it can be done by including any piece of code in my one file then it'll be best for me.
I want the scroll on div with the url request something like abc.com/#def where def is the id of the div the page should load.
In relation to your previous question, this is how you can do it:
$(function(){
// get hash value
var hash = window.location.hash;
// now scroll to element with that id
$('html, body').animate({ scrollTop: $(hash).offset().top });
});
You need to put that code in page where you want element to scroll. So if you visit yourdomain.com/#foo, it would scroll to an element with id set to foo.
You can use jQuery to load some url in particular div within the page.
Here is an example with fraction of code :
$('#result').load('test.html', function() {
alert('Hello,I am in the div');
});
If you need the data of that particular url to be shown.Then,you can use Ajax along with Jquery.
Here is a small code for it:
$(document).ready(function(){
$("#result").load(function(){
$.ajax({
type: 'GET',
url: "http://localhost/a.html",
success:function(data){
alert(data);
}
});
return false;
});
});
Hope this helps you.
try this : document.getElementById('elmID').scrollIntoView(true);
I need to keep displaying the loading gif until all images
in the returned data (html) have been finished loading.
The data and everything is returned properly, but the .live('load', function() {})
is never executed, have tried without the .live as well. The contents of #ContentBody
just get replaced with the returned html data (#LoadingLayer disappears too of course) and I can see images loading as usual.
<script type="text/javascript">
$("#RightLink").click(function (event) {
event.preventDefault();
var tourl = $(this).attr('data-ajax-url');
$.ajax({
type: "POST",
url: tourl,
dataType: "html",
async: true,
beforeSend: function () {
$("#LoadingLayer").show(); //show layer with image loading gif
$('#ColumnContainer').hide();
},
success: function (data) {
$('#ContentBody').html(data).live('load', function () { $("#LoadingLayer").hide(); });
}
});
});
</script>
HTML layout:
<body>
<div id="ContentBody">
<a id="RightLink" href="/store/ContentBodyGenerator" />
<div id="LoadingLayer"><img src="loading.gif" /></div>
<div id="ColumnContainer">... Main contents, lots of images here</div>
</div>
</body>
Why don't you just hide #LoadingLayer directly?
$('#ContentBody').html(data);
$("#LoadingLayer").hide();
Edit:
I misread your question, I don't think there is an easy way to detect that all images have been loaded. I suggest you try the waitForImages plugin.
Try changing the contents of the "success" function to this...
$('#ContentBody').html(data).live('load', function () {
var imgcount = $(this).find("img").length;
$(this).find("img").one("load", function() {
imgcount--;
if (imgcount == 0) {
$("#LoadingLayer").hide();
}
}).each(function() {
if (this.complete) $(this).load();
});
});
It waits till html(data) is loaded and then gets an image count. It then adds an event handler to each of the images to decrement the image count when the image is loaded. The one("load" code means only allows the following code to run once, and the each code basically says "if it's already loaded (as per cached images) then run the load event".
Once the image count is 0 it hides the loading layer.
Without a URL where I can run this through the console I can't be 100% sure it's accurate, so it may need a fiddle about. If you get stuck give us a shout.
Try binding the load event to the images. Keep track of how many have loaded, and remove the loading layer only after they've all loaded. This is untested code but should give you an idea:
success:function(data){
// Set the content
$('#ContentBody').html(data);
// How many images do we have?
var images = $('#ContentBody img'),
leftToLoad = images.size();
// Listen for load event *FOR IMAGES*
images.bind('load', function (){
// Hey look we loaded one, was that the last one?
if(--leftToLoad === 0){
// Yep, we're done
$("#LoadingLayer").hide();
}
});
}
If you'd rather use live than handling in the ajax callback, do this in your $(document).ready callback:
$('#ContentBody img').live('load', function(){...});
Should do the trick.
Cheers
Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback