Fading effect on Google homepage? Is it AJAX? [duplicate] - javascript

This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
How does Google achieve the fading effect on the home page?
Hi All,
If you visit Google, notice that when the page loads it is very sterile. Upon moving the mouse many elements of the web page now appear in front of you.
How is this done? I think that it is pretty neat.
Is it AJAX?

No it's not AJAX. It is regular JavaScript.
You may want to check the following post:
How does Google achieve the fading effect on the home page?

Technically, no, it's not AJAX.
AJAX officially stands for Asynchronous Javascript And XML, and colloquially refers to any communication between the browser and the web server without a full page load. Those elements are already on the page from the initial page load, and are simply revealed via Javascript (not retrieved from the server).
Any major Javascript effects library can achieve the effect you describe. See e.g. jQuery and Scriptaculous.

It's not AJAX. Ajax is this.
What you're seeing is probably a mix of CSS/Javascript animation techniques. One example can be found on this CSS Animation page from the webkit site

Have a look at jQuery, they have a function called fadeIn.
That is not what Google is using, but it is (probably) the simplest way you can recreate it.
Also, AJAX stands for Asynchronous JavaScript And XML, which is just another (friendlier) name for XMLHttpRequest. XMLHttpRequest is a way of sending data to and from the server without refreshing the entire page. When you view images in an album on Facebook and click on it, it loads the new image witohut refreshing the page. That is AJAX. Google (and jQuery's fadeIn) are what used to be called DHTML (Dynamic HTML), that is, clever JavaScript programming.

This is done using regular Javascript.
Google uses the mousemove event to find out when the mouse moves, and the setTimeout function to create a timer that gradually fades in the content.

This can be done by using CSS+Javascript, changing the value of opacity (for non-IE browsers) or the opacity level of the DXImageTransform.Alpha filter (IE only), through a setInterval().

Please try to understand what AJAX is before making questions like this!
If you knew what ajax was you would know that the fade in of the options in google has nothing to do with AJAX

Related

PHP Javascript, Website which loads everything into a div is there a way to make the back button work

I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.

Javascript load iframe asynchonous and auto resize

For our website we would like to give users the availability to include content of our website on their own website in an iframe. For this we would like to give the user a little piece of javascript code that they can include on their page without the need of too much programming knowledge. (like e.g. Facebook does for adding facepile to your page)
There are two concerns from my side. I want the content to be loaded asynchronous so the inclusion of our code will not affect original page load times ans secondly I want the script to automaticaly sets the height of the iframe based on the loaded external content.
I do not want to make use of frameworks like jquery, again to make it as simple as possible for a non code aware user.
I hope that someone can point me to the right direction. I've seen a lot of partial answers on the net, but I am looking for a more all in one solution. Any help would be high appreciated!
Maybe this helps: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance. Take a look at the "Dynamic async iframe" section. They are using a nice trick by putting a onload event in the iframe document.
Check out this little library for resizing iFrames.
https://github.com/davidjbradshaw/iframe-resizer
The code that goes into the iframe, has no dependancies and does nothing until called by the parent page. So it's a good guest on other peoples sites.
All you would need to do is give people a link the js file hosted on your site.

How to hide javascript window.open address bar / location bar? [duplicate]

This question already has answers here:
Hiding the address bar of a browser (popup)
(11 answers)
Closed 4 years ago.
How can I hide the location/address bar of popup window created using JS ? am attaching a image where I marked the place wanted to be hidden.
Is it possible ? I use the below script for this.
var ctr=0;
function openpopup(popurl){
var winName = "New_"+(ctr++);
winpops=window.open(popurl,winName,"height=300,width=500,top=300,left=500,scrollbars=yes,resizable")
}
and used this to call onClick='openpopup(this.href);return false;'
Please help me for the same.
You cannot hide the address bar in modern browsers. That is a security measure. The user must always know on what page he is.
Also in that address bar is shown what type of page he is in (HTTP or HTTPS) and information of that webpage if it is secure.
So, sorry, but you cannot do that.
you can use a modal dialog. Not exactly a pop up, but it will open another container. Like an overlay. You see people doing this a lot with images, but you can also use this for html. There are a ton of plugins for jquery.
Heres one with some examples though:
http://jquery.com/demo/thickbox/
I personally like http://fancybox.net/
Only problem is you can't use ajax to call another website, but you can create a page in php or whatever and get the contents of another page and then return that in ajax.
you would want to use something like curl for this.
Forget window.open(). Use jquery ui or jquery tools overlay instead.
A js popup window will work.
You could have a generic page that has an embedded iframe to hide the actual page. Would be a little tricky to pass the right data though. Not really worth it imo.

Ajax Requests Saved on Browser's History

Is there an easy way to save ajax requests into a browser's history so that when you use the back button it will preserve the last state of the DOM?
Websites like twitter and digg that use an ajax pager have a usability flaw where if you click next page several times then click away from the site and then return using the back button, you lose your place in the viewport since the DOM is restored to the first initial request.
I noticed safari actually preserves the dom after a few ajax requests on some sites.
Here is an example, Goto http://13gb.com, Click next a few times then click on an image and then click your back button. On webkit it preserved the last DOM state, but on gecko and ie it does not.
What would be the easiest way to replicate this functionality on other browsers?
I'm not the first person to tackle
this type of problem. I've drawn
inspiration and know-how from several
places to get this up and running:
The original bookmark/back button fix,
as used by Flash developers for a
little while now:
http://robertpenner.com/experiments/backbutton/flashpage.html
I've not actually looked at how they
implemented their solution but this is
where I got the idea for replacing
Robert Penner's frames with iframes:
http://dojotoolkit.org/intro_to_dojo_io.html#so-about-that-thorny-back-button
Rich Rutter's use of the hash for
bookmarking:
http://clagnut.com/sandbox/slideshow.html#5
For this little experiment I've used Harry Fuecks' JPSpan
It's a fantastic framework that makes the methods you define in your server-side PHP classes available to your Javascript via XmlHttpRequest.
It's the simplest way I've come across
to get started with AJAX. I had the
guts of my demo up and running in
about 10 minutes! I'm using
Algorithm's Timer object:
http://codingforums.com/archive/index.php/t-10531.html
And Scott Andrew's cross-browser event
handler:
http://scottandrew.com/weblog/articles/cbs-events
Source: http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
For jQuery:
https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin
You may be interested in the jQuery History plugin:
http://tkyk.github.com/jquery-history-plugin/

HTML CSS: Iframes/Dynamic Problem

I am having some trouble creating a experimental 'dynamic' style website. The site is set up as follows. The user has a menu of links to choose from, specifically using an image map. When they hover over a selection, an iframe pops up (becomes visible) displaying some data. When the user removes the mouse the iframe goes away, until the user hovers over another link.
-- It seems to be working well, but only intermittently. Sometimes after leaving one of the anchors, the syle, text etc. still occupies the frame even after i hover over another link. This behavior seems to be fairly random, but there must be a way to fix it.
Here's an example of what i'm using. The show function sets the frame to visible if the argument is a 1, and hidden if 0. frameset sets the main frame to the desired html document. I tried implementing a reset to set the frame to something blank after leaving the link to try and fix it, but the problem persists.
<area shape="circle" coords="..." href="..." onmouseover="Show('frame', 1);
frameset('page.html');" onmouseout="Show('frame', 0); reset();" />
And the functions
function frameset(a)
{
document.all.frame.src=a;
}
function reset()
{
document.all.frame.src=blank.html;
}
It's a very hard problem to describe, so let me know if more information or code is needed. Any better alternatives to my method are also welcome, considering i'm not fluent in javascript :)
Thank you
I think what you are doing could be performed better by using a more modern approach.
The image map could have absolutely positioned block level anchor tags.. but this doesn't seem to be the problem.
Instead of using iframes, I'd recommend using AJAX to get the information and a framework like jQuery to help you display the data.
You could load the AJAX and display the box with a loading throbber (http://www.ajaxload.info) on mouseover, and parse the data into viewable format inside the div.
Learning AJAX
AJAX is when a page makes a http request to the server and can also return data which is then used with Javascript to update the DOM.
jQuery is a Javascript framework designed to abstract away browser specific code and inconsistencies and just make using Javascript a better experience.
Check out jQuery's AJAX functions
Good luck!!

Categories