AJAX Lightbox Spinner PopUp to appear from Page to Page - javascript

Is there a bit of technology available that displays a Lightbox AJAX 'Spinner' in the centre of the page each time the user navigates from one page on a site to another?
So on each 'click' of a hyperlink it would popup a spinner animation while the page loads.
Is this easy to achieve?
Many thanks for any pointers.

There are a few examples out there, the one that springs to mind is BlockUI though. Take a look at http://jquery.malsup.com/block . You will need to combine this with your ajax succes/error/always callbacks, but the examples should help you in the right direction.

You could use .ajaxStart() and .ajaxStop()
$(document).ajaxStart(function() {
$('#spinner').show();
})
.ajaxStop(function() {
$('#spinner').hide();
})

Related

Creating a loading animation between pages on page redirect. VB.net

I am trying to create a loading icon which triggers on a code behind function (Button click) the function redirects to another page. I am trying to find a way of having a loading icon appear on the button click and go away when the second page is loaded.
I have tried using Jquery by hiding the loading icon on page ready using the following function
$('#LoadingIcon').hide()
... in the document ready function.
However the icon doesn't appear until the page is already halfway through its loading process.
Any guidance on how I could solve this would be greatly appreciated.
Please use the following link which may help you to do this. There's a way to do it using a bit of JavaScript.
http://blog.ysatech.com/post/2010/02/06/ASPNET-redirect-a-web-page-with-AJAX-loading-indicator-image

I want only that Accordion load on click

I googled the shit out of this :), I have a website; http://haagsepopmaand.nl/,
There a lot of events on that page, in every event there are some pictures and some youtube movies. And it gets loaded all at once.
So I'm looking for a solution, I want the accordion to only load when clicked. I don't even know where to begin :(, I tried lazy loading the youtube videos but it doesn't work.
Maye you guys have any (quick and dirty) solutions?
Here are some ugly and dirty ways I could think of....
1. You could separate out the accordion content elsewhere and make an ajax call to load the content when clicked.
2. You can have the content in the page stored in a javascript variable and load it when clicked.

Spinning wheel when performing location.reload();

I am doing some stuff in my Javascript function and then I have to refresh the page using location.reload();
Is there a simple way with jQuery to show a spinning wheel from the point where the page starts to refresh to the point where the page is loaded?
Thanks for your help.
While there might be a solution to just wrap .reload() call info your own function and show spinner before it I seriously doubt the effectiveness. As soon as you issues navigational request, your browser starts killing loaded resources (that also means images) and that's when all GIF's are going to halt with animation. Well maybe not instantaneous but soon enough to spoil the effect...
If you need to avoid doing Ajax, my approach will be the following
simply show an animated gif as an image just before calling location.reload();
always have the spinner image displayed (first item after your <body> tag, and hide it onload (window.onload / jQuery ready)
there will be some flickering though...
Thanks #Jovan Perovic you found me a solution for this..the load() seems to be very usefull to me..Thanks once again

Seamless page loads

I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.

Jquery - Customizing the colorbox plugin

I'm using the colorbox plugin for modal popups. It's working nicely, but there's a main thing about it that seems wrong.
I have a form that pops up, and on submitting (or clicking a link) in the form, this might open another "colorbox" modal. It works smoothly, but there's one thing that bothers me.
As it is, colorbox seems to wait until it receives the response (via ajax) and then shows a "loading.gif" and starts to change size.
To me it makes more sense to have the "loading.gif" show as soon as they are opening a new colorbox modal. (and not just the image, I just mean that whatever happens when you open a new colorbox) It doesn't have to resize (obviously) but it's just annoying because some of my colorbox modals use webservices that are slow, so you might submit a form and nothing happens for literally 1 or 2 seconds. It'd be nice if it just would look like it was loading the next one for that time.
Ideas on how to do this?
It looks like the loading graphic is being shown onLoad, and the script tries to figure out the content type before this point. So if you have a slow web service, it may take time to realize the content type, thus not showing the loading.gif.
I did a quick test, and displaying the gif onOpen seems to work:
$(".myClass").colorbox({
onOpen:function(){
// taken from colorbox.css
$('#cboxLoadingGraphic').show();
},
onComplete:function(){
$('#cboxLoadingGraphic').hide();
}
});

Categories

Resources