for the sake of this blog, i think it would be best if you first saw what i was aiming to do. you can view the result here. this blog includes not only a problem and solution, but a nice little tutorial to get basic javascript effects to function alongside php scripts such as using $PHP_SELF and if(isset($_post['whatever'])).
this situation was quite a tough one for me to try and solve. what i wanted to do for the hub was include some sort of “prettiness” factor to it without using flash. basically what happens is once you click on “submit”, a nice little “updating database” window will popup and then fade down, redirecting you to an updated page file after the posted data is written to the database. you are then greeted to some nice transparent pngs (sorry ie6 users) that tell you the database was successfully updated.
now i know ajax is probably the way to go with this, but the hub wouldn’t redirect you to the updated message unless the database was really written to, so technically, everything here is still functional. also 1 week wasn’t enough time for me to figure out ajax to get this working. thanks finals week. think of it as a workaround more than a hack because everything still validates.
this is the nice little “ajax” effect you get when you click on submit:
here is the final screen you are redirected to when everything is done and accounted for:
now why did something like this have to be such a pain? for those of you not vested enough into php to know what i’m talking about, i’ll try to break it down for you easily.
basically what happened was that everytime you click submit, the file worked so fast that it immediately redirected me to the update page without showing the effect. now while this was still working and just fine, i really wanted that “pretty” factor still for the hub, so i had to find a way to delay the php script while my javascript had time to do it’s thing. i tried all sorts of things:
- executing the javascript source before the php file. obviously that wasn’t working.
- executing the javascript onmouseover of the submit button, hoping the user waits long enough for the window to pop up and fade out. this was stupid of me.
- have the php script execute everything in the background at the same time the javascript was doing it’s thing. this didn’t work either since the file worked fast.
so the only solution i could come up with was to actually pause the php script before doing anything. i figure once the script resumed and there was an error (database connect or $_post error), that the script wouldn’t redirect in the first place.
that’s where the sleep() function comes into place. it’s very simple. you have sleep and you have a value of how many seconds you want the php script to sleep. in this case, i used 4 seconds. once 4 seconds have passed, the rest of the script will execute. by that time, my nice little window would have popped up, faded down and it’s thing would have been done.
here is how the php code looks like:
sleep(4);
if(isset($_POST['name']))
{
post whatever to database here
}
header('Location:update.php');
to get the effect working, you need to download mootools and include that in your library.
here is the javascript configuration i’m using for the “ajax” effect:
function updateUser() {
Growl.Bezel({
image: 'images/logo.png',
title: 'Updating database:',
text: 'Please wait for a moment...',
duration: 3
});
return false;
};
here is the javascript that is making that nice little fade effect (a lot of this code was removed because it made the page hang. just email me for the full file):
var Gr0wl = {};
Gr0wl.Base = new Class({
initialize: function(image) {
this.image = new Asset.image(image, { onload: this.create.bind(this) });
return this.show.bind(this);
},
create: function(styles) {
this.image.setStyles(
{
'position':'absolute',
'display':'none'
}
).setOpacity(0).injectInside(document.body);
this.block = new Element('div').setStyles(
$extend(
{
'position': 'absolute',
'display': 'none',
'z-index':'999',
'color':'#fff',
'font': '12px/14px Verdana'
},
styles.div)
).setOpacity(0).injectInside(document.body);
new Element('img').setStyles(styles.img).injectInside(this.block);
new Element('h3').setStyles(styles.h3).injectInside(this.block);
new Element('p').setStyles(styles.p).injectInside(this.block);
},
Gr0wl.Bezel = Gr0wl.Base.extend({
create: function() {
this.i=0;
});
},
show: function(options) {
var top = window.getScrollTop()+(window.getHeight()/2)-105,
left = window.getScrollLeft()+(window.getWidth()/2)-103;
options.position = {'top':top+'px', 'left':left+'px', 'display':'block'};
this.i++;
this.chain(this.parent.pass(options,this));
if(this.i==1) this.callChain();
},
hide: function(elements) {
this.queue.delay(400,this);
this.parent(elements, { 'opacity': 0, 'margin-top': [0,50] });
},
queue: function() {
this.i--;
this.callChain();
}
});
quite daunting, i know. but it’s all really simple actually. not much to change here except for the configuration file. just include the code as an external file to keep things clean.
and finally, here is the javascript that i’m using for the “database updated” page:
function showHide(id)
{
if(document.getElementById){
obj = document.getElementById(id);
if(obj.style.display == "none" {
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
as you can see, it’s simply a function that, when called using onmouseclick, hides and shows a div full of transparent png files. to do that, just call the showhide(‘overlay’) function (overlay being the id of that div) and everytime you click the button, it will either hide or show the div contents.simple.
Related posts:
you are badass, my friend. simply badass.
Very nice site!
cheap viagra
Very nice site!
[url=http://training.cvc4.org/pharm1/14171/2.html]cheap cialis[/url]
Very nice site!
http://training.cvc4.org/pharm1/14171/4.html
Very nice site!
Very nice site!
cheap viagra
Very nice site!
[url=http://training.cvc4.org/pharm1/14172/2.html]cheap cialis[/url]
Very nice site!
[LINK http://training.cvc4.org/pharm1/14172/3.htmlcheap tramadol[/LINK]
Very nice site!
http://training.cvc4.org/pharm1/14172/4.html
Very nice site!
Excellent site. It was pleasant to me.
viagra
I bookmarked this guestbook. Thank you for good job!
buy viagra
Beautiful site!
viagra
Very nice site!
cheap viagra
Very nice site!
[url=http://training.cvc4.org/pharm1/14190/2.html]cheap cialis[/url]
Very nice site!
[LINK http://training.cvc4.org/pharm1/14190/3.htmlcheap tramadol[/LINK]
Very nice site!
http://training.cvc4.org/pharm1/14190/4.html
Very nice site!
Perfect site, i like it!
cheap viagra
Perfect site, i like it!
buy viagra
Very interesting site. Hope it will always be alive!
buy viagra
I want to say – thank you for this!
viagra
Great .Now i can say thank you!
cheap viagra
Perfect site, i like it!
viagra
If you have to do it, you might as well do it right
viagra
I want to say – thank you for this!
buy viagra
If you have to do it, you might as well do it right
buy viagra
It is the coolest site,keep so!
cheap viagra
Perfect work!
viagra
Perfect work!
cheap viagra
Great .Now i can say thank you!
viagra
Great work,webmaster,nice design!
viagra
Great site. Good info
cheap viagra
Great site. Keep doing.
cheap viagra
Very interesting site. Hope it will always be alive!
cheap viagra
Very interesting site. Hope it will always be alive!
viagra