Jumping html pages:

I have faced a strange problem these days when creating a html website from a interesting design. The problem was that the website content looked like jumping left-right when going through pages. This was very annoying problem, and especially happened in Mozilla Firefox and more often in Google Chrome. The problem is that the browser detects after the entire page was loaded if vertical scroll bars are needed to be rendered.

Here is the solution i have found and what solved my problem:

Put these instructions in your page css style:

html {
     overflow-y: scroll !important;
}

What this does? In fact it forces the page to always display vertical scroll bars, even when it wasn’t needed. Adding the instruction to always render scroll bars the browser knows this from the very begining and does not adds the scrollbars at the end of page loading.

Cheers.

This is my second post on Jquery, it came from an need to create a map for a client. The idea it was to have a map, and when hover a certain area that area is highlighted; You can also click on an area, and that area remains selected;

You can see in the preview below what i mean:

To create this map, you simply need to follow the steps below:

1) Have the entire region map in one color – the basic color:

2) Slice the regions – having the hover color: – note that this picture bust be with transparent background, and same dimensions as the entire picture; this is crucial for map functioning.

3) Repeat the above step for the rest of the regions

4) Define the image map for the whole picture:

Eg:

<script type="text/javascript" src="jquery/jquery-1.6.4.min.js">

$(document).ready(function(){	

			/* Start Map Controls*/
			jQuery("#map-container area").mouseover(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';
				jQuery(regionMap).css('display', 'inline');

			}).mouseout(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';

				// Check if a click event has occured and only change the Region hover state accodringly
				if (! jQuery(regionMap).hasClass('selected')) {
					jQuery(regionMap).css('display', 'none');
				}

			});

			jQuery("#map-container area").click(function(){
				jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
				jQuery('#practice-container ul').removeClass('selected').css('display', 'none');

				var regionMap = '.'+$(this).attr('id')+'-map';
				jQuery(regionMap).addClass('selected').css('display', 'inline');
			});
			/* End Map Controls*
});

Today i am going to show you how to create nice radio buttons using jquery; it is very easy to do it, just follow the next steps:
1) Import an version of jquery javascript file into your page; i use jquery-1.6.4.min.js;

<script src=”http://www.e-maniacs.com/boligrobotten/jquery/jquery-1.6.4.min.js” type=”text/javascript”>

2) Create a nice image that hols both images for checked and not checked states for your radio buttons:

3) Create an style class for your radio button; we need to create classes for both states:

.checkBox {
	background-position: 0px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('../images/checkboxes.png');
    background-repeat: no-repeat;
	 background-position: 0px 0px;
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

.checkBoxClear {
    background-position: 0px -19px;
}

The whole idea is that we use the same image (is much quicker to load this way) and we set as background for our divs. The background position is computed the way that it shows the proper image according to the state.

4) Create some javascript calls that will change the status of the radio button – this will change the style class for the clicked radio button.

$(".checkBox,.checkBoxClear").click(function(srcc) {
        if ($(this).hasClass("checkBox")) {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }

You can take a look and see them in action on this page, along with some other jquery controls:

http://e-maniacs.com/portfolio/boligrobotten/template2.html

WebHostingSearch.com’s Take on Top 10 JavaScript – a must for your site

Java Script is a popular programming language to add distinctive effects in one’s website. It is browser based, embedded through the site’s personal pages. Website hosts have distinctive scripts installed on their sites that can create different effects in the image, tables and text. Java scripts are available in Java hosting servers but run independently from page to page as programmed.

A well-made site has a bigger chance to capture more audience and gain greater web traffic. These codes enhance the site designs; no matter how simple it is. Adding java scripts to one’s site is an easy task. Listed below are 10 recommended scripts that can be useful, as well as eye-catching for both the site owner and the visitor.

1. No-Right Click Java Script

The no-right click java script is useful for those who want to avoid the information stated to be duplicated. It prohibits the mouse’s capability of right click, making the reader lose the cut and copy function of that page. This is particularly beneficial for those who wants their content to be read but avoids the possible reproduction of his material through copy.

2. Counters

For website owners who want to track down how many visitors are they gaining on their page, a counter is a must. Numbers in the counter add each time the page opens. Having a site counter can help the site owner to know his visitors. This script can also be constructive on the owner’s part, as it helps him develop ways to make his website more functional to gain more visit from Internet users.

3. World Time

The Internet has been a resource for many people all over the world, with users from every continent. It would be helpful then, to add something that would benefit all of these people in one spot. Having a world clock in the website would be an excellent add-on especially for people who are curious in knowing the time of a certain region. Just as the other Java Script types, this can be customized to a certain look to would appeal most when placed in the page.

4. Animations

Putting some eye-catching animations would gain interest from the readers. Graphics changing colors; text in rainbow; and mouse trailing images would be eye catching. There are many animation capabilities one can do when using Java Scripts codes, which he could liberally modify according to his wish.

5. Image Rotation

Having a gallery of images that can be switched on a glance is better than searching over thumbnails of pictures. An image rotation script brings a carousel like effect that shows the image displayed on a gallery, with the previous ones hinted at the back of the highlighted picture. It will be a terrific addition to portfolio sites, which showcases the pictures in the photo album capabilities.

6. Special Navigation

The Java Script allows the site to have a distinct navigation, which ranges from a drop-down menu, to embedding buttons. JavaScript’s also enables the images to be used as navigation, which can be altered upon mouse hover. Having a stimulating navigation design would be a terrific way to attract users.

7. Colorful Scroll Bars

Through JavaScript, one can change the standard grayish scroll bars into a multi-colored scroll that complements the current site design. These scroll bars can be fashioned inside the codes. One can choose the colors for the shadow, highlights, the base, even the arrows. A matching set of scroll bars that harmonizes with the design will complete the whole site’s appearance.

8. Bookmarks

Website owners like to have their pages remembered. Embedding a bookmark script on the site will give the user the chance to add the site to their favorites. This gives the site better chances of having regular visitors.

9. Music Players

Adding music and other forms of amusement can also be programmed through these simple codes. Audio players embedded on the site will make it more appealing to the reader.

10. Password Protection

For those who want to keep their content in private, they can use the scripts for password protection. These are message boxes that alert the user to enter a password for the private page. The user cannot read or enter the site unless they provide the correct password set by the owner.

Website hosts can find many ways on how to use Java scripts to beautify their pages, making it an attraction to many readers. JavaScript is a powerful tool that can enhance the uses of a website. Sites under the Java hosting servers get the best benefits using these codes. For more details, one can check out Webhostingsearch.com.

Inedite fingerprint vectors

Download

Vectors on gomediazine.com

For today i have prepared some nice t-shirt designs.

THese designs are built inhouse, so, feedback is much appreciated as always. You can find and download for free also the psd files.

Free download

Today Smashingmagazine release The DelliPack 2! icon set. This second set of “delicious icons” contains 15 icons: a build icon, a home icon, an interact icon, a monitor icon, a pen icon, a phonebook icon and other icons which can be useful for both corporate and personal projects. You can use the set for free — without any restrictions whatsoever.

Icons are available in the .png-format in the resolutions 256×256px, 128×128px, 64×64px, 48×48px, 32×32px and 16×16px.

Download

I have created for you an digital leaf. It is created in Photoshop cs2.

The leaf (jpg and psd files) can be downloaded from the kool downloads section, or simply from the link below.

Soon i will publish an tutorial, explaining step by step how to create this leaf.

Download

An nice collection of great designs created by aeriform

I have compiled specially for you a list with the most beautifull, and usefull inspiration sources:

edpeixoto.com

kriesi.at

mkleyne.nl

rustybones.net

darkmotion.com

tjmapes.com

welovewp.com

truebluetitan.com

sr28.com

outshouts.com