Archive for the ‘JavaScript’ Category
How to do Facebook/Gmail like Page Loads/Updates using IFrames and JavaScript
You may have noticed how websites like Facebook and Gmail load/update pages on browser without actually reloading the entire thing. It can come handy in your own websites specially when you need to change a small potion of the content that is already shown in the screen. Or you need to change the data shown in the page without having to reload the entire thing.
This can be done easily using only a hidden iframe and some java script code provided that few conditions are met.
Basically following is what you need to do. You need to have a hidden iframe, to which you will load specific information from the server. Then, you need to have created div tags surrounding the regions of the visible page that you need to update. Each div need a unique tag id. You need to create another web page (not visible to user) which will have the information that you need to show. This web page also need to have div tags surrounding the different information that you need it to transfer from server to client.
For simplicity lets assume that your visible web page has one place which you need to dynamically update. We will mark that region using a div tag with id “placeHolder”. Your non visible web page/content source which has the information needed to be shown in place holder will contain another div with id “content”. Now what we need to do is to load this page in to your hidden iframe. And once that is loaded, we need to look for its div tag with id “content”. We need to copy the internal content of that div into our place holder div in visible page. While this process is being done in the background, we can show an animated image on our place holder until things are loaded.
Automatically Add Name Attribute for Google Syntax Highlighter
If you write programming related posts in your blog, you are most probably using Google Syntax Highlighter to highlight your code snippets. In case if you don’t, it’s a set of javascripts that allows you to add syntax highlighting for source code that you post on your blog. It supports a large number of programming languages. After installing “Google Syntax Highlighter for WordPress” plugin (If you are using WordPress of course), all you got to do is to enclose your code inside “pre” tags, add a name attribute with value ‘code’ and then set the language of programming code in class attribute.
Ex:-
<pre name="code" class="java"> .... </pre>
But there is a slight problem. When you use it with WordPress WYSIWYG post editor all the name attributes get removed. Therefore every time you change the post using WYSIWYG editor you have to go back to HTML view and add name attributes again. Which is really a pain if your post is a large one with lots of text and code snippets.
