Clay, Author at Hungred Dot Com

IE, Opera and Netscape issues on ‘Stop page loading’ with javascript

In case you don't know what i am referring on the topic, i really mean to stop the page from loading on the background of the browser. Usually, pressing STOP icon in the browser will stop any activity in a browser. Background activity that we are interested are uploading, preloading, retrieving and etc. of any dynamic activity that the browsers are dealing with when the page fire up ajax functionality. There are only three browser that are in my concern list because these are the browsers that are being used today.

Netscape

Netscape browsers are Mozilla Firefox, Google Chrome and Safari. These are Netscape browser which most developers or Mac users used when developing web application and design. Obviously, finding a solution for Netscape page load function is pretty easy and we can also manually press the X button on the top of the browser to stop all activity in a netscape browser. Ultimately, we will know that there is a function in Netscape browser that can stop all activity since the stop button on the browser is performing such action. In case you are still wondering what the heck is the javascript code,

window.stop();

The above will stop all activity which include stopping the page from loading and preventing any uploading to occurs. Any preload of image will also be stop by this javascript method.

Internet Explorer (IE)

IE having the majority users in the world is still lagging such function. It is possible to stop page from loading by using the following javascript code.

document.execCommand('Stop')

which will return you an empty page when executed during page load. However, this will only stop the page from loading! Other activity such as uploading and preloading of images will still occur. There is practically no way to stop the background activity in an IE browser. If you fire up an ajax application in an IE browser, you won't see any 'activity' at the bottom of the page indicating it is retrieving the request. Pressing stop button won't disable IE from retrieving unless you escape the page which a dynamic web site do not want it. In short, once a request is fired to IE, there is no cancellation for that request.

Opera

Opera work quitte similiar with IE. Although by interface and efficiency, Opera is much MUCH superior than IE, it still doesn't gain much market share in the browser industry. So how do we stop activity in Opera? There are definitely some way of stopping the activity in Opera which i personally believe. However, due to the small community available for Opera, you won't find any good answer avaliable in Google. However, Opera can use event bubbling to stop certain event from happening. (this mean it cannot stop event that has already happen)

Summary

The reason for this article is to prevent people like ME who hunt for such solution so that my RIEG jQuery plugin test site can work perfectly in all browser. And the reason why people will want to stop activity in the background of the browser is because in a dynamic environment, we will want to remove the existing DOM element and replace these DOM element with a new one. However, as existing request is still being sent through the browser, it is necessary to stop those existing request before sending out the new request so that the display will be flawless! Unfortunately, this cannot be done. (sad)

Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.

jQuery

On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

$.ajax({
url: 'test.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

$.ajaxSetup({cache: false}});

This will have to be placed on top of the script in order for it to work.

Javascript

The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.

Tutorial: How to optimize wordpress plugin for SEO

This tutorial demonstrate a simple way to optimize your wordpress plugin for SEO purposes. It is always better to optimize some of your plugin if they are not doing their job properly.

What plugin required to optimize?

As we all know that the most important things should be placed on the header of the page. If our plugin place a script or a style on the header, it is important to bring them down so that search engine don't look at them as important. The most appropriate place is on the footer where the search engine spider prioritize the lowest among other section. ( unless you place your side bar below footer, footer usually is placed as lowest priority).

Identifying wordpress plugin that are not optimize

Identifying wordpress plugin that are not optimized for SEO can be both easy and difficult. If the plugin provided clues for your changes, it will be easily known which plugin has caused this mistake. However, if the instruction have no inserted any code to identify which plugin does the instruction belong, it will be more tricky than usual. In order to do this, i have illustrate it below.

1. Go to your website and right click on your page. Select view source to look at the source of your page to identify any unnecessary instruction that you do not want the search engine spider to see first.

2. notice that the source code i have provided above has a style tag with all its style in it? This is the plugin that should be updated to optimize for SEO. In the style tag, there are classes that indicate that it is from addtoany, with this i can identify that the plugin is "Add to Any: Share/Save/Bookmark Button".

How to optimize my wordpress plugin?

Optimizing your wordpres plugin for SEO is not that difficult. We just have to instruct the affected plugin to list those script or style to the footer as wordpress has provided a method wp_footer while your plugin most probability is using wp_head which caused it to place those unnecessary instruction on the header instead. After we identify our plugin, it is time to move those style sheet to the footer!

3. Go to your wordpress control panel and select plugin->editor->Add to Any: Share/Save/Bookmark Button

4. press Ctrl-F or edit->find in your browser and search for the word wp_head

5. change the found wp_head to wp_footer and click update

6. search for any other wp_head and change them all to wp_footer if necessary.

7. look at your home page source code again and it should have disappeared and went down to footer.

Note

There are things to take note about when trying to do the above steps. For all style it can be placed on the footer with no problem. However, for those javascript, please check properly before placing javascript or <script> tag to the bottom of the page as it will cause problem for some of the plugin since the methods are being called in the body before your scripts have imported into the page. Therefore, it cannot find those javascript methods if it is placed on the bottom. So we must check that the script has been imported before calling it within the body tag if we want to move the script tag to the bottom of the page.

Tutorial: How to Create your own jQuery Flip effect plugin

It is always annoying to look at codes that are created in a plugin or website that perform millions of complicated actions without comments to find the one effects contain in the plugin.

In this tutorial, i will demonstrate an easy to create jQuery flip effect with minimum amount of complication so that you will be able to inherit this effect into your plugin.

Before we start, i believe the below resources will be useful to create your own simple flip effect program plugin

How to Plugin tutorial with jQuery
How to Slide downward with jQuery
and its concept
How to shrink/zoom center of a container with jQuery

Once you read the above tutorial, you should have an idea how jQuery flip actual work. The key point to flip is speed. And in order to create a jQuery flip effect plugin, we will apply the same concept on all other types of effect that is being used in other tutorial. Of course, the demo guy will be the ghost again. Opps. You can view the demo page below,

demo-rawrflip

Explanation

In order for the flip to work. There must be a swap between two images or containers. If there is only one element, we don't really need the flip effect on it. The code for the demo above can be seen via view source or the one that i'm going to show below,

$(function(){

var alt = 0;
$('#flipMe').click(function(){
alt%2 == 0?
$(this)
.css('background-color', '#000')
.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)
.css('background-color', '#555')
.animate({height:50+'px', width: 50+'px', marginLeft: 0+'px'},240):
$(this)
.css('background-color', '#555')
.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)
.css('background-color', '#000')
.animate({height:50+'px', width: 50+'px', marginLeft: 0+'px'},240);
alt++;
})
});

i attached an event click to the image tag so that whenever user click on the image it will flip. There is a bit of maths in here so that we can determine user click by using modulus. The important part for flipping to occurs is shown below,

.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)

whereby it compress the image at the center and flip it out from the center again which creates a flip effect when its quick enough. If the speed of the animate function is set to a larger value such as 2000, you will notice the flip effect became a zoom effect instead. Throw this into a plugin code and you get yourself a very simple jQuery flip effect plugin!

Tutorial: jQuery effect – how to shrink/zoom at the center of a container

jQuery provides a basic effect of sliding in and out. However, in other to create other form of effect we will have to apply animate function provided by jQuery. This tutorial will demonstrate of using animate function in jQuery to perform a shrink function at the center of an element that you often see in Gallery and other types of plugin.

It is not difficult to create a method to demonstrate a shrink in and out effect with animate function. The concept used here is to opposite the natural direction of the sliding jQuery provides in order to zoom in the image shows below.

image to be zoom

Yes! Its RAWR! cute ghost, i was lazy to find a proper picture so i just grab him down to play with. Now, in order to shrink him properly, we will have to use the plugin i created just for him. I will also explain what does this simple plugin does. You can have a look at the demo below,

demo-rawrzoom

PS: There is another method which is a bit more complex than this one which you can see from here

So, how does the plugin work? Simple! it's just pure animate function from jquery with css. Illustrator the code below.

$(selector).stop(true,false)
.animate({
height: options.zoomSize+'px',
width: options.zoomSize+'px',
marginTop: ((oriH-options.zoomSize)/2)+'px',
marginLeft: ((oriW-options.zoomSize)/2)+'px'
}, options.duration)

What it does here is to shrink it to the size you define and move opposite accordingly. Let's assume height: and width: move upwards and right respectively while it shrink. So marginTop: and marginLeft: will move downwards and left respectively so that our eyes will illustrate the shrink on the center of the box! hopes this help!

Usage

An example on how to use this plugin from the demo site. The parameter is optional.

$('#zoomMe').zoom(
{
zoomWidth: 10,
zoomHeight: 10,
duration: 3000
}
);

$('#zoomMe').zoom();