…slick slide and fade effects AJAXified

Posted on March 9, 2006 | Category: PHP

Following on my last post for which I got some encouraging comments and suggestions I thought I’d try to make the tabbed navigation better. I’ll let you be the judge of that.
This evolution still uses the script.aculo.us javascript libraries. You can download them here. Once you have done that you can copy the ‘

c3Jj

’ and ‘

bGli

’ directories into your working directory.

The main points of this version are:
- The solution has been AJAXified. The content of the tabs (except for tab 1 which is loaded with the page) is only fetched if a visitor clicks on the appropriate tab. The main advantages I see here, are that content is only loaded if the visitor wants to see it and the content of each tab is maintained in its own separate file (easier to maintain).
- The ‘back’ button issue. That is partially fixed. If you navigate through several tabs, you still have to click the ‘back’ button twice (maximum) in order to really step back a page (funnily enough, in Internet Explorer one click suffices no matter how many tabs you go through!). If anyone out there can fix it…I’m all ears.

So let’s look at the code :

This will correspond to the tabs:

PHVsIGlkPSJtYWlubmF2Ij4=

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMSIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMTwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMiIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMjwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMyIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMzwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiNCIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgNDwvYT48L2xpPg==

PC91bD4=

As opposed to the previous version, the

YSBocmVm

link is now

PSIjIg==

. However I have added a

bmFtZQ==

tag attribute. Each tab has its own name (#tab1, #tab2, etc…). We can also this see that every time I click on a tab I will execute the

c2hvdyh0aGlzKQ==

function.

The following will correspond to the part where the contents of each tab will be loaded:

PGRpdiBpZD0idGFiMSIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiMiIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiMyIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiNCIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

In other words, if I click on TabX, then the contents of it will be loaded in

ZGl2IGlkPSJ0YWJYIg==

.

All the tabs need to be hidden when I load the page. Remember, we only want to show them if the visitor wants to see them. To do so, each

ZGl2

has a

c3R5bGU9ImRpc3BsYXk6IG5vbmU7Ig==

attribute. Also, note that the content of each

ZGl2

is an image (to show whilst the page loads). I could just as easily have put nothing.

So now that I have my tabs and my

ZGl2

‘s we need some magic to make it all happen.

The first thing we want (and this is optional) is to load and show the content of tab1 (you’ll remember that tab1, along with all the other tabs has been hidden). So what we need to do, is add an

b25sb2Fk

command to the

PGJvZHk+

tag of the page. It should look something like this.

PGJvZHkgb25sb2FkPSJzdGFydCgpIj4=

Basically we’re saying, when you load the

PGJvZHk+

, execute the function

c3RhcnQoKQ==

.
This is what the

c3RhcnQoKQ==

function looks like.

ZnVuY3Rpb24gc3RhcnQoKQ==

CQl7

CQkJbmV3IEFqYXguVXBkYXRlcigndGFiMScsICd0YWIxLnBocCcsIHthc3luY2hyb25vdXM6dHJ1ZX0pOw==

CQkJbmV3IEVmZmVjdC5CbGluZERvd24oJ3RhYjEnICx7ZHVyYXRpb246MS4wfSk7

CQl9

In the first line
We are saying that we want to update the content of

ZGl2IGlkPSJ0YWIxIg==

with the contents of a file called

dGFiMS5waHA=

.

In the second line
We are just revealing

ZGl2IGlkPSJ0YWIxIg==

by using a BlindDown effect. Now we need a function that will do the same thing for all the other tabs.

Earlier on we saw that every tab is declared like so:

PGxpPjxhIGhyZWY9IiMiIG5hbWU9IiN0YWJYIiAgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiBYPC9hPjwvbGk+

I’m referencing a

c2hvdyh0aGlzKQ==

function. This is what that function looks like.

ZnVuY3Rpb24gc2hvdyhsKQ==

CQl7

CQkJaGlkZW0oKTs=

CQkJdmFyIGlkPWwubmFtZS5tYXRjaCgvIyhcdy4rKS8pWzFdOw==

CQkgICAgbmV3IEVmZmVjdC5CbGluZERvd24oaWQgLHtkdXJhdGlvbjoxLjB9KTs=

CQkgICAgbmV3IEFqYXguVXBkYXRlcihpZCwgaWQrJy5waHAnLCB7YXN5bmNocm9ub3VzOnRydWV9KTs=

CQl9

The first line:
The function

aGlkZW0oKQ==

was already explained in my previous post. All it does, is hide all the

ZGl2

‘s that have a

ZGl2IGlkPSJ0YWIuLiI=

1 to 4.

The second line:
Each tab has a name attribute (

bmFtZT0iI3RhYlgi

). In that line I’m getting rid of the

Iw==

character. In other words I have

I3RhYlg=

coming in and

dGFiWA==

coming out. The variable

aWQ=

will now have that value assigned to it.

The last two lines are identical to those found in the function

c3RhcnQoKQ==

, except that here we are using the variable

aWQ=

(because

aWQ=

could be tab1, tab2, tab3 or tab4).

aWQ=

will be replaced by the value tabX when the function is called. You’ll also notice that to keep things simple the scripts I call up are named

dGFiMS5waHA=

,

dGFiMi5waHA=

(

aWQrJ3BocCc=

).

This link will bring you to a page where you can test the new and old version.

That’s it. As usual, your comments and suggestions.

» Filed Under PHP

11 Responses to “…slick slide and fade effects AJAXified”

1. Eli Says:
   March 9th, 2006 at 6:34 pm

   Very well writen and very informative! I’m going to implement this right now.

   Design thoughts/ideas:
   1) The Code Snippit plugin – to make the code easier on the eyes (and brain).
   2) Modifying the hover for links within posts. You use the ‘nicetitles’ for other elements, but not the primary (theloop.php).

2. Pascal Says:
   March 9th, 2006 at 8:17 pm

   @ Eli,
   Thanks for the info on the code plugin.

3. Patrick Fitzgerald Says:
   March 10th, 2006 at 4:54 am

   Very nifty. Regarding Ajax, my philosophy is to put as much info directly on the page as possible, and only use Ajax to fetch information that is secondary or too large to be loaded on the page at the start. The main advantage to having the info on the page is for search-engine optimization: Google will not see your Ajax-fetched data. For example, check out this page which is the bomb for search engines (but obviously has scalability problems as the amount of data increases): WebMD video archive

4. Pascal Says:
   March 10th, 2006 at 1:10 pm

   @Patrick,
   Hmm. I guess that what you say is applicable for static information. In the case of dynamic information, you probably would not want a search engine to pick it up anyway.

5. philippe Says:
   March 18th, 2006 at 1:27 am

   salut pascal,
   oui je refais la déco, mais il faut que je me plonge dans le css (dur et pas trop le temps)
   ma nièce est rentrée emballée par l’ australie. son boyfriend (voir sur http://www.causse.biz ) adore les vins et les fromages. en plus une copine berlinoise était à melbourne à la même date, quand il y a eu un orage diluvien. tout le monde trouve l’ australie super. il va falloir que j’ y aille aussi. à part ça, j’ essaie de comprendre ce qu’ est l’ ajax, mais je n’ accroche pas encore. ce que je vois, c’ est que des geeks comme elifoner etc… charge tellement leur page avec des plugins ajaxifiés et des rolling archives etc…, que même moi qui ai une bonne connection dsl, je trouve ça long des fois (loading, loading, loading)
   amitiés et à bientôt sur le web,
   philippe

6. boerewors Says:
   March 23rd, 2006 at 5:46 pm

   mr frenchie – your are a schocker !!!!

7. S G Says:
   August 31st, 2006 at 10:12 am

   hi

   this thing is great, they only problem is it dosnt work for me! Can you help me? I have copied your test pages to my website for demonstration purposes and something is not working…
   http://www.e-rooster.gr/test.php

   I would appreciate any help…

8. Pascal Says:
   August 31st, 2006 at 6:00 pm

   S G, your example does not work because your are nowhere referencing the ‘magic2.js’ javasript file.
   That should fix it.

9. S G Says:
   September 1st, 2006 at 10:32 pm

   thanks a lot for the swift response. I have to say in my defence, it seems you have not mentioned this file anywhere, have you?

   anyway, something is moving now, although it does not work yet. I think I can fix it though. Thanks again for your nice work.

10. S G Says:
    September 3rd, 2006 at 12:30 am

    OK i am sorry to annoy you again but i cannot fix it myself. The tabs dont work, and after some seconds the page opens my central homepage witout any reason!?

11. Pascal Says:
    September 3rd, 2006 at 7:31 pm

    SG, is your site a commercial one?

    For each tab the server tries to parse a php page (tab1.php, tab2.php…) that does not seem to exist on your server (if you type http://www.e-rooster.gr/tab1.php – you’ll get the front page of your site).

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website