AJAX - Yellow Fade Technique
My first technical post: AJAX - Yellow Fade Technique...
Dear Friends,
We might have seen in many pages about the Yellow Fade Technique. Itâs mainly used in AJAX. Well, I will explain it now.
Explanation
âThere is something happening here, but you donât know what it is. Do you Mr. Jones?â - Bob Dylan
A lot of web sites & applications make you feel a bit like Mr. Jones.
Thatâs why weâve pioneered the Yellow Fade Technique (YFT). Itâs a nifty way to subtly spotlight a recently changed area on a page.
Why does this matter? When you edit or move something on a web page it usually forces a reload of that page. The problem is once the page reloads itâs often difficult to spot and confirm the change (especially if the change occurred somewhere in the middle of the page). The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed.
Letâs take a look at an example.
Letâs say I want to change the name of the second post on this Basecamp page from âCEO Photoâ to âJim Messier Photo.â
First off, Iâll go to the âEdit Postâ page and change the postâs title.
Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). In the subsequent images, you can see how the yellow slowly fades out so it doesnât dominate the layout forever.
Voila, the page is back to normal within seconds.
Implementation
To see it in action, hereâs an example, how to do it. This is the most simplest implementation I can ever give you.
This is the script of the core function to be used. Rather than using some libraries like Scriptaculous, we can use this small snippet. Now you can trigger the fade with the help of any button or element.
I have done a coding with a small div tag and a button. Also thereâs another div tag with an onmouseover event.
Complete Code:
Comments are welcome!
The full article's source link: #-Link-Snipped-# Enjoy! 😁 😁
Dear Friends,
We might have seen in many pages about the Yellow Fade Technique. Itâs mainly used in AJAX. Well, I will explain it now.
Explanation
âThere is something happening here, but you donât know what it is. Do you Mr. Jones?â - Bob Dylan
A lot of web sites & applications make you feel a bit like Mr. Jones.
Thatâs why weâve pioneered the Yellow Fade Technique (YFT). Itâs a nifty way to subtly spotlight a recently changed area on a page.
Why does this matter? When you edit or move something on a web page it usually forces a reload of that page. The problem is once the page reloads itâs often difficult to spot and confirm the change (especially if the change occurred somewhere in the middle of the page). The YFT uses JavaScript to create a yellow highlight that briefly spotlights the change when the page reloads. Then, in a second or two, the highlight fades and the page reverts to its normal state. The YFT makes it super easy to spot edits/changes yet its unobtrusive nature lets people quickly get back to work once a modification is confirmed.
Letâs take a look at an example.
Letâs say I want to change the name of the second post on this Basecamp page from âCEO Photoâ to âJim Messier Photo.â
First off, Iâll go to the âEdit Postâ page and change the postâs title.
Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). In the subsequent images, you can see how the yellow slowly fades out so it doesnât dominate the layout forever.
Voila, the page is back to normal within seconds.
Implementation
To see it in action, hereâs an example, how to do it. This is the most simplest implementation I can ever give you.
This is the script of the core function to be used. Rather than using some libraries like Scriptaculous, we can use this small snippet. Now you can trigger the fade with the help of any button or element.
I have done a coding with a small div tag and a button. Also thereâs another div tag with an onmouseover event.
Complete Code:
For execution, copy this Complete Code and paste it in notepad and save it as any HTML document (eg. fade.htm) and open it with any browser (Internet Explorer or Mozilla Firefox).Yellow Fade Technique
MouseOver
Comments are welcome!
The full article's source link: #-Link-Snipped-# Enjoy! 😁 😁
Replies
-
ReyaHey superb!Its working😀 😀😀
-
PraveenKumar Purushothaman
Congrats!!! 😁praveena211Hey superb!Its working😀 😀😀
You are reading an archived discussion.
Related Posts
Introduction
You’ve heard about the iPad, haven’t you. And chances are you want to get one soon. Well, why not check out how your favorite sites would look on an...
Good morning everyone!
I wasn't entirely sure where to post this, but this forum seemed the most appropriate.
I need to do some hardness testing to Rockwell B (idiotic customer...
hi dudes i am prasanna . doing my E&C engg. Very happy to be in CE. hope i make good friends.! 😀
This is the same thing we studied in our Database Management Systems. This is a practical use of JOINS. Consider this problem description:
Problem:
I want to create a database...
I recently install windows server 2008 R2 as my home server. It has two NIC card, one connected to internet, and other connected to my private network. Now I enable...