Browsing articles in "Web Design"

Mar
26

Create Simple SlideShow Using Jquery and CSS Tricks

By udamadu // JavaScript, Web design, Web Design, Web Development // No Comments

What We are going to do ?

before we are going further , let’s take a look the demo example of our task.

In Present Web World, Image slide-shows, Image galleries are much useful part added by web developers and designers for archiving good looking features to their websites. Today we are going to build simple Image slide-show Using old but gold web technology CSS, Ugly HTML and amazing Jquery Library.

Step by Step explanation of what we are going to do

Create slider outer block.

HTML

<div id=”slider”></div>

CSS

div#slider{

width:500px;

height:300px;

margin: auto;

}

applying above css to our block, it will be covert with 500px width and 300px height.

2.Create slider mask.

Suppose our Slider show consists of 5 images with 500px width and 300px height. Then our slider mask should be 5 times of width when comparing with outer block. Our slider mask then should be put inside the outer block.

HTML

<div id=’slider’> <!-- outer slider  -->

<div id=’slider-mask’> </div> <!-- slider mask div -- >

</div>

Now what happened is, our outer block will be take image slider mask width ( 500 x 5 ==2500px). But we have to keep original width for the outer block.

Here comes into play CSS to achieve our purpose.

If we can hide this overflow width we can succeed. Yes we can do that. Lets modify our CSS for the outer block.

CSS

div#slider{

Width:500px;

Height:300px;

<strong>Overflow :hidden;</strong>

}

Using overflow property and related hidden value, We have done this. overflow :hidden will hide both overflowed width and height from its original width and height.

Now our slider mask block will stay with its original height and width inside outer block.but we only can see its one five from its original width.

CSS

div#slider-mask{

width: 500%; /* set width as five time of outer block */

height: 100%; /*set same size of the outer block */

}

3. Create slider Item blocks.

Now we can create 5 blocks for our 5 images inside the slider mask. As mentioned earlier our images will be the same dimensions of the outer slider. Then we can create same slider item block with the same dimensions of a image.

Lets do that.

HTML

Since Originally div element are block level elements and they assort them top to bottom themselves. But what we need to do here is float them as left to right. Lets continue our works.

CSS

div.slider-item{

width: 20%; /*set same outer block width.since our slider item block is inside the mask we need to get one five times from slider mask width */

height: 100% /*same slider mask width. This is the same width of outer block */

position:relative ;

<strong>float:left; /*this will float our slider images left to right. */</strong>

}

Lets look at slider item CSS again. You can see that we have added relative value to position css property. This property will be helpful to animate our slide-show in latter Jquery part.

4.adding images to each slider item.

Now we can put our 5 images inside slider items.

HTML

<div id="slider"> <!-- outer slider -->

<div id="slider-mask">

<div class="slider-item">

<img src="./images/slider-image1.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image2.png"  alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image3.png" alt=""/>

</div>

<div class="slider-item">

<img src="./images/slider-image4.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image5.png" alt=""/>

</div>

</div> <!--slider mask div -- >

</div>

5.Asking Jquery help

Before animating our slider we need to load jquery library and put them inside our header tags.

<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

Here’s the code to link to Google’s jQuery repository. It grabs the latest jQuery version.

We are now creating JavaScript function for animating our slider.>

<script type="text/javascript">// <![CDATA[

var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

// ]]></script>

Explaining above funciton line by line.

var n =0; We set 0 as the initial value to the JavaScript variable called n.

id=n%5+1; Get the reminder value by solving n divided by 5 and assign reminder value to the js variable called id. Here 5 is no of images of our slide-show. Initially this will be 1 since n=0 .

leftPos=(1-id)*500+”px”; This equation initially will set to the (1-1)*500 = 0 and adding string “px” to the computed value. Final value is assigned to js variable called leftPos. Here 400 is the image width/outer block width of our slider.Initially leftPos value will be 0px.

$(“div.slider-item”).animate({ left:leftPos},1500); This is how we are animating our slider. We wrap slider elements with class slider –element and push all of them to 500px left side direction from their original position within one and half seconds. we are doing it by changing left css property of slider item. We couldn’t apply left property unless we set their position as relative, absolute or fixed. But we have done it in our one of previous steps. Got it…
Initially left property is set to 0px. Therefore slider items will be pushed to left from their initial positions.

n=n+1; Incrementing the n variable from 1.

s=setTimeout(“slideShow()”,3000);    This will be the nicest part in our function. SetTimeOut function is the predefined js function and it can be used to called another js function once for the specified time period as a continuous loop unless we advice it to stop looping.Here we called our same function in every 3 second. For the second time our function called by the setTimeout function variable n will set as 1.If n==1Then id will be assign as 2 and leftPos will be -400px and slider item will position -500 px to left from their original position. Now 1^st slider item disappear and 2^nd slider item will be comes to the stage.
if n==2    Then id will be assign as 3 and leftPos will be -1000px and slider item will position -1000 px to left from their original position. Now 1^st ,2^nd slider items will disappear and 3^rd slider item will be comes to the stage.
If n==3   Then id will be assign as 4 and leftPos will be -1500px and slider item will position -1500 px to left from their original position. Now 1^st ,2^ndand 3^rd slider items will disappear and 4^th slider item will be comes to the stage.
If n==4     Then id will be assign as 5 and leftPos will be -2000px and slider item will position -2000px to left from their original position. Now 1^st ,2^ndand 3^rd and 4^th slider items will disappear and 5^th slider item will be comes to the stage.

if n==5Then id will be assign as 1 and leftPos will be 0px and slider items will position 0px again and get their original position again. This will again show the 1^stslider in the stage and others are hidden by the outer slider.You can see that this will be continuously happened since id value only change 1-5 with respect to the n.

5.Final Step.

We have almost done everything. Only one step away. Yet our slider show will not run as we expected . Our function will not automatically run as our code executed inside web browser. For automatically execute our slider function we need to call our function inside the jquery document.ready function.

 
<script type='text/javascript'>
<pre><strong>$(document).ready(function() { slideShow });</strong></pre>
var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

</script>
okay...now you are done....  
download source code from here

Oct
16

CSS Box Model

By udamadu // Web design, Web Design // 1 Comment

Most HTML elements (ex-div,a etc..) can be valued as boxes. In CSS, the label “box model” is used for the design and layout of the website. The CSS box model is basically a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model enable us to insert a border around elements and space elements relative to other elements.

CSS box model illustration

Explanation of the different parts

Margin: Clears an area around the border. The margin does not have a background color, it is completely transparent

Border: A border that goes around the padding and content. The border is affected by the background color of the box

Padding: Clears an area around the content. The padding is affected by the background color of the box

Content: The content of the box, where text and images appear

To set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element

Important: When we specify the width and height properties of an element with CSS, we are just attributing the width and height of the content area. To know the full size of the element, we must also add the padding, border and margin.

The total width of the element in the example below is 300px:

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

Let’s do the math:

250px (width)

+ 20px (left and right padding)

+ 10px (left and right border)

+ 20px (left and right margin)

= 300px

Oct
2

Text shadow in CSS

By udamadu // Web design, Web Design // No Comments

In our CSS file, add the following to the element we wish to target:

text-shadow: -1px 1px #FEE3A9

The first value moves our text shadow horizontally on the x axis.
Negative figures move it to the left of the text, positive figures to the right.
The second value moves our text shadow vertically on the y axis.
Negative figures move it above the original text and positive figures move the shadow below.
The 6 digit code (hex value) sets the color.

Sep
22

Importance of !important keyword in CSS

By udamadu // Web Design // No Comments

Whenever you use CSS (Cascading Style Sheets), defined styles are applied in the same order as they are read by your browser.
If a style is present at the top of a stylesheet and is changed afterwards in the document, the new property will be applied.
Let’s see that in details.

h3 {
color: #0000ff;
}

This line will set your

header tag to blue. However, if further down in your stylesheet you redefine the

tag:

h3 {
color: #ff0000;
}

The color of your

heading will now be red.

The !important rule in CSS is used whenever your want to prevent some property to be redefined.

h3 {
color: #0000ff !important;
}

This way, even if you redefine the

tag again in your stylesheet, the

tag will stay blue. However, this does not work Properly with IE(Internet Explora).
Example Code>>
(x)HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Importance of !important keyword in CSS</title></head>
<body>
<h3> Testing keyword </h3>
</body>
</html>

CSS file :

h3 {
color: #0000ff !important;
}
h3 {
color: #00ff00;
}

Now Remove the !important and refresh the page. You’ll notice the text turns to green.

Sep
22

Rounded corners Effects with Cross-Browsing Alternatives

By udamadu // Web Design // No Comments

Currently there are multiple variations for creating a HTML elements with rounded corners.
The simplest of these is the method that uses CSS3.

Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50
pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet
Explorer (even IE8) does not support this property.

*Using following CSS, We can achive our goal.

OUR STYLE

border-radius for modern browsers

This is the way that works in all modern browsers (except IE8) like FireFox, Safari,
Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {

-moz-border-radius: 10px; /* Firefox */

-webkit-border-radius: 10px; /* Safari, Chrome */

border-radius: 10px; /* CSS3 */

}

border-radius for Internet Explore

Download the border-radius.htc file, put it somewhere on your site, and then use this CSS
code:

.rounded-corners {

behavior: url(http://yoursite.com/border-radius.htc);

}

And replace http://yoursite.com/ on your absolute path, where you have placed the
border-radius.htc file.

border-radius for All Browsers

.rounded-corners {

-moz-border-radius: 10px; /* Firefox */

-webkit-border-radius: 10px; /* Safari, Chrome */

border-radius: 10px; /* CSS3 */

behavior: url(http://yoursite.com/border-radius.htc); /* IE */

}

HTML CODE

&lt;div class=”rounded-corners”

style=”width:200px;height:20px;background:#00f;text-align:center;”&gt;Rounded

Corner div&lt;/div&gt;

Jun
10

Six sigma in web design

By ian // Uncategorized, Web Design // No Comments

If we take the world trends we can clearly identify that every business is transforming more in to services and more into internet based marketing and sales strategies. At the old days we your to go to a shopping store to check for the goods and service to full fill our day to day needs. But the most inefficient factor on this method is; it is so time consuming. With the busy life style and because of the high competition now a day’s people doesn’t have much time to spare to do shopping, seeking telephone numbers, asking their friends who gives the better service and ect.

On this moment modern marketers started apply direct selling methods. For example they started bringing goods and services for the customer door step. After few time this method also started to fail because of the area that can be covered for single sales person is very low. Even the advertising on public media didn’t support this fact. So the entrepreneurs need to have something, some solution that is opened 24/7, accessible from anywhere , minimum waiting times, Unlimited information availability, usability and rapid updatability. This is the heart and the base of the internet based marketing strategies.

These are the main important fact that, most web designers and entrepreneurs has forgotten.

1. Sometimes websites may contain lot of information but user will never know how to look for them so it violates the rule usability.

2. Sometimes designers make the sites very attractive very high resolution images or flash but over roll site gets slow in the end. It violates the rule minimum waiting time.

3. Or some websites are very attractive, minimum waiting times, high contents and everything but they may not get updated.

We can give 100s and 1000s of examples for these violations. Form today onwards I will be writing articles on this blog on how to promote and build your website for better performance.

If we take the world trends we can clearly identify that every business is transforming more in to services and more into internet based marketing and sales strategies. At the old days we your to go to a shopping store tocheck for the goods and service to full fill our day to day needs. But the mostinefficient factor on this method is; it is so time consuming. With the busy life style and because of the high competition now a day’s people doesn’t have much time to spare to do shopping, seeking telephone numbers, asking their friends who gives the better service and ect.

On this moment modern marketers started apply direct selling methods. For example they started bringing goods and services for the customer door step. After few time this method also started to fail because of the area that can be covered for single sales person is very low.Even the advertising on public media didn’t support this fact. So the entrepreneurs need to have something, some solution that is opened 24/7, accessible from anywhere , minimum waiting times,Unlimitedinformation availability, usability and rapid updatability. This is the heart and the base of the internet based marketing strategies.

Theseare the main important fact that, most web designers and entrepreneurs has forgotten.

1.Sometimes websites may contain lot of information but user will never know how to look for them so it violates the rule usability.

2.Sometimes designers make the sites very attractive very high resolution images or flash but over roll site gets slow in the end. It violates the rule minimum waiting time.

3.Or some websites are very attractive, minimum waiting times, high contents and everything but they may not get updated.

We can give 100s and 1000s of examples for these violations. Form today onwards I will be writing articles on this blog on how to promote and build your website for better performance.

Create Simple SlideShow Using Jquery and CSS Tricks

What We are going to do ?

Step by Step explanation of what we are going to do

Create slider outer block.

2.Create slider mask.

3. Create slider Item blocks.

4.adding images to each slider item.

5.Asking Jquery help

Explaining above funciton line by line.

5.Final Step.

CSS Box Model

CSS box model illustration

Explanation of the different parts

Width and Height of an Element

Text shadow in CSS

Importance of !important keyword in CSS

header tag to blue. However, if further down in your stylesheet you redefine the

tag:

h3 { color: #ff0000; }

The color of your

heading will now be red.

The !important rule in CSS is used whenever your want to prevent some property to be redefined.

h3 { color: #0000ff !important; }

This way, even if you redefine the

tag again in your stylesheet, the

Rounded corners Effects with Cross-Browsing Alternatives

Six sigma in web design

Get Premium Tutorials Free

Recent Posts

Archives

Categories

Related Stuff

Create Simple SlideShow Using Jquery and CSS Tricks

What We are going to do ?

Step by Step explanation of what we are going to do

Create slider outer block.

2.Create slider mask.

3. Create slider Item blocks.

4.adding images to each slider item.

5.Asking Jquery help

Explaining above funciton line by line.

5.Final Step.

CSS Box Model

CSS box model illustration

Explanation of the different parts

Width and Height of an Element

Text shadow in CSS

Importance of !important keyword in CSS

header tag to blue. However, if further down in your stylesheet you redefine the

tag: h3 { color: #ff0000; } The color of your

heading will now be red. The !important rule in CSS is used whenever your want to prevent some property to be redefined. h3 { color: #0000ff !important; } This way, even if you redefine the

tag again in your stylesheet, the

Rounded corners Effects with Cross-Browsing Alternatives

Six sigma in web design

Get Premium Tutorials Free

Recent Posts

Archives

Categories

Related Stuff

tag:

h3 { color: #ff0000; }

The color of your

heading will now be red.

The !important rule in CSS is used whenever your want to prevent some property to be redefined.

h3 { color: #0000ff !important; }

This way, even if you redefine the