gif loader centered as top layer - php

I have a php form. After this form is submitted, if all data is valid, then it executes a python script which takes 5-10 seconds. For this wait period I would like to have a progress bar (.gif) displaying in the middle of the screen. If I could also 'fade away' the background so that the progress bar was like a top layer and the background a back layer, that would be great.
Thanks.

Are you using any javascript libraries, such as jQuery? In any of the libraries, I'd imagine there'd be a dozen or so lightbox plugins floating about. Even if you don't want to use a library, you can take a look at their code, and instead of displaying a DIV, just display your gif, if you know what I mean.
There are even some plugins built specifically for this purpose, such as the BlockUI plugin for jQuery.
The basic algorithm for doing what you want goes like this:
Start Ajax Request
Display semi-transparent dark image over the whole page, with an animated gif in the middle.
Listen for Ajax response
Remove the overlay and loader gif.
I assume you already have steps 1 and 3 going alright. Step 4 is easy-peasy. Step 2 however isn't as easy, but still shouldn't be too hard. I couldn't tell you the code to do it myself, since I've just used lightbox plugins in the past. Take a look on Google for "simple lightbox" or something like that, since all you really want is the most basic functionality. This blog post talks about a CSS-only lightbox which would be a good starting point to help you style the overlay.

Related

alternative to display:none for mobile

Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.
The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.
It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.
Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.
Thank you
First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.
The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?
If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).
Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).
You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so
var heavyImage = new Image();
heavyImage.src=imageList[id];
Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.
You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.
You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.
If you want you can use visibility:hidden, or if you use jQuery you can use
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout

Flash website preloader for PHP website

I want to use a flash preloader for my php website. I have seen some javascript examples; but I want something attractive and cool. So I want use flash preloader which will show the percentage of the website loaded.My website is kinda heavy(with lot of images). It looks bad when the contents load. So I want to show a flash preloader while the site loads. Any help?
If you have a working javascript example it would not be that hard to change it so it calls a flash movie and tell it to update a progressbar or whatever.
Some example code can be found here:
http://www.permadi.com/tutorial/flashjscommand/
Not sure about the coolness of a flash preloader though. :)
instead of adding some annoying and useless flash-stuff you should think about optimizing your site to load faster so you don't need a loading-indicator (there are some nice artices on this on code.google.com) - i don't want to sound offensive, but if a site isn't loaded within a maximum of 2-3 seconds, a lot of users will be annoyed, leave your site and never come back, even if you have the coolest loading-bar ever.
what would be nice to know is waht makes your site so big. the biggest site i can think of is some kind of image-gallery, but even in that case, there is a much easier solution: show thumbnails of your pictures and open the "big" version only on clicking these.

Sliding huge boxes using jQuery ends up with hiding only

On my website I am trying to slide left/right box away. The box is quite big, because has tons of small pictures and another elements inside. And is downloaded via ajax. The situation with sliding up/down is exactly the same. (so let's work with that, because it's easier to use - without animate or jquery UI).
When I try to slideUp() the element doesn't slide at all but hides. It all takes almost about one second. I tried to put there a simple div of same height and width and I was able to slide that element without any troubles. So my theory is, that the div is simply too big for messing with it like that. Is that possible? Or the problem is somewhere else?
If I am right, don't you have any ideas how to omit that, but make some nice effect?
I think that your answer is there in your question, when you say that you have got it to work successfully with a simple div of the same height etc. It sounds to me that you are asking a lot of the rendering engine, which will have to re-render each of these images, in each incremental position as it slides up off the page.
Javascript engines in the latest browsers are much better than they used to be, but they can only do so much. Combine that with the browser having to render each step of the transition, I am not surprised that it takes so long.
Is the animation really necessary? If so, you could perhaps do it in a number of stages:
Quickly remove all of the content of the div
Animate the large div to slide up or shrink to a small one and disappear

Ajax with slide effects onready witout using a toolkit

I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.
The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...
So yeah, pretty much any advice/tips/thoughts/help would be really handy!
I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:
set the display of the element to none
get the full height of the element, something like:document.getelementById('IDofElement').style.height
set the height to 0 and the display to something like block
set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.
The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.
Personally, I'd just use JQuery. If you want to see how they do it, then download the developer version of the library and look at the code.
If you're not a fan of javascript, then use a library, it means you have to write less.

Simple animation - Flash or jQuery?

I have some animation I would like to try, kind of a shopping cart/checkout action animation. wanted to know if flash or jQuery (JavaScript) would be best?
The backend is all in PHP and I was thinking of using AMFPHP (If Flash) or jQuery (Any frameworks???) but wanted to know the drawbacks/features of each approach.
Thanks for any advice,
--Phill
--UPDATE--
Okay so the animation I would like is when something is purchased to display some text and a image of the item in some sort of slick animation. Want to give it that Flash feel but maybe I could do this in jQuery?
-- UPDATE--
Would like it to have a TV commercial feel but interactive, not sure of the animation(s). Clean, Crisp, Fresh, etc...
JQuery is better because it's easy to program a compelling experience with just notepad. My rule of thumb is "If you don't need flash, then don't use flash." Also a lot of people are using iPhones to surf the internet now, you don't want to alienate that market by plopping a big flash hurdle in front of them that they can't jump.
Check out Themeforest.net and see what designers are doing with just JQuery. It's pretty amazing how far we've come with just simple javascript.
A lot of animation that we typically turned to Flash for can be accomplished via jQuery. Obviously, frame based (onion skinning) type animation (characters, cartoons, etc.) is still best left to flash, but nearly any type of animation you'd do in flash with tweens (position, size, color, opacity, width, height, etc.) can easily be accomplished with most of the modern .js libraries including jQuery.
So, yes, jQuery would certainly work depending on the particular type of animation you are looking for.
UPDATE (per your updated info):
"TV commercial feel but interactive"
What does that mean? If I were to interpret that literally, what you want to do is produce actual video based content and wire it up in Flash.
However, that seems like a heavy overhead to just check out of a shopping cart. I'd really think about this from a UX perspective before going too far down this path.
"Clean, Crisp, Fresh"
So not dirty and blury? ;)

Categories