How does the GMail "Loading..." banner work? - javascript

I am trying to replicate a feature of GMail in my own application.
When changing folders in GMail, the display will stay on screen and a small loading banner will appear on the top of the site.
This is desirable, since it prevents the screen from going all white and disturbing the users workflow on postback.
I have tried to disassemble this using Firebug, and I feel that I'm getting close.
The GMail site consists of a 100% sized Iframe which contains the entire interface.
After this frame is a div that contains the loading banner. The div is invisible and is placed behind the Iframe.
What script gets executed that move the banner in front of the Iframe?
Thank you,
Martin Wiboe

GMail is built entirely using AJAX; there are no regular postbacks at all.
It creates a <div> before sending the AJAX request asking for the contents of the folder, then hides the <div> when it receives a reply.
You can easily duplicate it using jQuery.

You can accomplish what you are trying to do with AJAX and a callback handler. On the AJAX post, you will make the loading div visible. On a successful postback, you will hide it.

Related

Hyperlinks slide new pages rather than opening them

My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content

Create a html window within another html window

I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.
James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!
In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here

HTML5/Javascript: Content changing without adress changing

I have a question which I haven't been able to find the answer for. I hope you can help me.
I am about to build a simple website, containing text and hyperlinks. I want the site to have the same adress no matter which hyperlink is clicked. For example, if my website is www.website.com - when one clicks a hyperlink, the content of the whole page should change, but the adress should still be www.website.com, instead of www.website.com/hyperlink.html for example. In other words, I want to disable people to use the "back" button to return to an earlier page, and prevent them from navigating the page by writing in the adress bar. They should experience a single page, but still be able to navigate through a lot of changing content through links - which means that if they click the "back"-button, they will be navigated away from the website, and if they refresh the page, it will go back to 'index'. Can you point me in the right direction to which methods might be useful here? Earlier, I would have done it in Flash, and embedded the flash-construction into the website, but as far as I have heard, Flash is not the best solution anymore?
Thanks in advance.
First of all, that is not the best idea for SEO.
But that puts aside, you should use javascript to make AJAX call and alter the partial part of your page with the response.
So basically, what you will do is from your home page, capture all link clicked event, and process the request through an AJAX call, and display the result of that call on the same page.
That allow you to refresh a list of item, or a menu, or the entire page if you want.
Since it will be AJAX call, the user won't see any difference in the URL.

How can I hide a div when my webpage is viewed in Lynx?

My website has a div element (in form of a block) that I want to make invisible whenever a user visits the website through a text based browser like Lynx, that doesn't support JavaScript.
Basically what command or code do I need to write in order for this to happen?
Since you can't run javascript there, you have to not send that div in the first place for it to be invisible in the text-mode browser.
You can make a server side user-agent check and do not render that div.
Lynx user agents:
http://www.useragentstring.com/pages/Lynx/
You can set the div invisible by default.
and make it visible in your js code.
Thus it'd not appear on a text-mode browser.

Check the mouse position in the screen

I have an iFrame with custom website page loaded into it. I am trying to find a way to get the word or text the mouse was hold down over it on that page using JS. To make it more clear, when the mouse was hold down on a specific word on the web page I want to do some actions in JS.
How can I do this check? I dont' have control over the web page content, I may load this StackOverFlow Question in the iFrame and if the user clicked on this bold word I want to do some actions in JS.
Any idea?
You won't be able to access the contents of external iframes for security reasons (this includes setting event handlers). This response explains it further.

Categories