Archive for the ‘Uncategorized’ Category

http://uxdesign.smashingmagazine.com/2013/05/03/infinite-scrolling-get-bottom/

http://uxdesign.smashingmagazine.com/2013/05/03/infinite-scrolling-get-bottom/

20 css frameworks

20 css frameworks

20 css frameworks to choose from

Grid base layout approach

I found this article really useful
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

I am preparing my next post

Sorry for the long delay. I was busy with my exam. I have started working my next post. Will be published very soon.

5 important css tips for Web designers and Developers

These css tips are not very common to find. But very often we need to use these css properties. Sometimes they become real headache if we do not know how to use these properties properly.

1. Set body font-size to 62.5%  if you are using em for fonts.

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

2. Removing outline for Safari and chrome input text boxes

When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).

If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):

input[type=”text”]:focus {
outline: none;
}

3. Target IE6 and IE7 Browsers with special hacks

The code below will change the background-color of divs depending on what browser the user is viewing the web page under. Since * cascades down to IE7 and below, we use _ after that declaration so that IE6 (and below) has a different background color from IE7.

div {
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property – IE7 and below */
_background-color: #000; /* add a _ before the property – IE6 and below */
}

4. Transparency/Opacity in All Major Browsers

div {
/* standards-compliant browsers */
opacity:0.7;

/* The following is ignored by standards-based browsers */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

5.  !important to Override Normal CSS Precedence Rules

In CSS, when two properties apply to the same element, the one that is farther down the stylesheet is the one that will take effect. However, by using !important at the end of a property value, this can be changed.

Let’s take, for example, this set of style rules:

h1 { color: green; }
h1 { color: red; }

The h1 element will have a red color with the CSS above.

If we wanted to change the style rule’s priority without changing the order of the property declaration, then we simply do the following:

h1 { color: green !important; }
h1 { color: red; }

Now, the <h1> element will be green.

These css properties are very often used but not very popular. Lets hope these tips are usefull to you.

5 tips to write better css

We can not deny the important role of css in controlling the look of any web application or software. Nowadays it does not matter whether you are a web designer or web developer , everybody should have the knowledge of css. Here are few tips for writing better css.

1.Use of  a Proper CSS Reset

If properly declared it can solve lots of cross browser problems. This should be declared at the very beginning of the css like

body, html{padding:0, margin:0;}

but this is not a full reset. There are many CSS reset codebases on the web that you can incorporate into your work like Eric Meyer reset

2.Using Shorthand Properties

Properly used shorthand propertis can solve lots of time and editing problem.

See this

#content {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}

Now see this

#content {
margin: 50px 0;
}

you can see how much time you can save if you write css like this.

Another example

background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;

Shorter one

background: url(background.png) repeat-y center top;

3.Using Color Names Instead of Hexadecimal

color: red

technically it is not wrong but you’re essentially saying that the browser should display what it thinks red is. This can create cross browsing problem in future. It is always safe to declare it like this

color: #ff0000;

You can use a color cheatsheet that provides a preview and the hex value of a color.

4. Combining the common attributes

See this

#wrapper-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.wrapper {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Now see this

#wrapper-1, .wrapper-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

see how much space and time we have saved.

5.Always Provide Fallback Fonts

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

For example:

#selector {
font-family: Helvetica;
}

Can be expanded with fallback fonts as such:

#selector {
font-family: Helvetica, Arial, sans-serif;
}

Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.
By defining fallback fonts, you gain more control as to how your web pages are rendered.

Hopefully you have found these tips useful. En

Simple jquery image slider with source code and explanation


Use of image slider are very common now a days. Almost every site uses it in their home page or in their gallery section. There are thousands of free image sliders available in the web. Most of the time we just pick up a good looking image slider and place it in the site. It really looks good  but the problem starts when client wants changes in that slider or he wants to customize it according to his liking. Then we have two options

1. Start looking for a new slider which matches his needs

2. Modify the existing one. But for that we need to understand how that slider is working or its functionality.

In my opinion the second option is lot better. That is why I am giving all the source code (html, css, jquery ) here. See the demo

Do not forget to have jquery-1.3.1.min.js file in your js folder.

Here is the full code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Image Slider</title>

The jquery
<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow(){
//Set the opacity of all images to 0
$(‘#fullgallery a’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$(‘#fullgallery a:first’).css({opacity: 1.0});

//Set the caption background to semi-transparent
$(‘#fullgallery .caption’).css({opacity: 0.7});

//Resize the width of the caption according to the image width
$(‘#fullgallery .caption’).css({width: $(‘#fullgallery a’).find(‘img’).css(‘width’)});

//Get the caption of the first image from REL attribute and display it
$(‘#fullgallery .content’).html($(‘#fullgallery a:first’).find(‘img’).attr(‘rel’)).animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘myGallery()’,6000);

}

function myGallery(){
//if no IMGs have the show class, grab the first image
var current = ($(‘#fullgallery a.show’)?  $(‘#fullgallery a.show’) : $(‘#fullgallery a:first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#fullgallery a:first’) :current.next()) : $(‘#fullgallery a:first’));

//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass(‘show’);

//Set the opacity to 0 and height to 1px
$(‘#fullgallery .caption’).animate({opacity: 0.0}/* { queue:false, duration:0 }).animate({height: ‘0px’}, { queue:true, duration:300 }*/) ;

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#fullgallery .caption’).animate({opacity: 0.7},100 )/*.animate({height: ‘100px’},500 )*/;

//Display the content
$(‘#fullgallery .content’).html(caption);
}

</script>

The CSS
<style type=”text/css”>

body{ font-family:Arial, Helvetica, sans-serif}

#fullgallery{
height:360px;
position:relative;
float:left;
}
#fullgallery a{
float:left;
position:absolute;
}
#fullgallery a img {
border:none;
}
#fullgallery a.show {
z-index:1;
}
#fullgallery .caption {
z-index:2;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#fullgallery .caption .content {
margin:5px;
}
#fullgallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

</style>
</head>

The Markup

<body>
<div id=”fullgallery”>

<a href=”#” class=”show”>
<img src=”images/mother_nature.jpg” alt=”Mother Nature” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Mother Nature</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. “/>
</a>
<a href=”#”>
<img src=”images/lonely.jpg” alt=”Lonely” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>lonely</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. “/>
</a>

<a href=”#”>
<img src=”images/sweet_home.jpg” alt=”Sweet Home” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Sweet Home</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.”/>
</a>

<a href=”#”>
<img src=”images/never_ending.jpg” alt=”Never Ending” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Never Ending</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”/>
</a>
<div class=”caption”><div class=”content”></div></div>
</div>
<div></div>
</body>
</html>

Copy paste the full code in your favorite text editor, see the result and start tweaking as you want .This is a very simple image slider look-wise and functionality-wise but my aim is to understand the simple thing first so that we can build a more complex image slider  easily because we know exactly where and how we need to do the changes.

Because of the wordpress policy I could not upload the zip file containing all the files. Tese are the 4 images I used , you can use anuy Images you want. Enjoy reading.