Developer Code book » CSS http://wordpressapi.com Wordpressapi.com is focused on Wordpress API, wordpress news, wordpress themes, wordpress plugins, wordpress tips, wordpress tutorials, wordpress design wordpress templates, wordpress breaking news and web-development. We deliver useful information about wordpress, wordpress latest trends and wordpress techniques, wordpress useful ideas, wordpress innovative approaches and wordpress tools. Social Media news blog covering cool new websites and social networks: Facebook, Google, Twitter, MySpace and YouTube. The latest web technology news, via RSS daily. Thu, 09 Sep 2010 10:36:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 JavaScript/CSS Compressionhttp://wordpressapi.com/2010/08/02/javascript-css-compression/ http://wordpressapi.com/2010/08/02/javascript-css-compression/#comments Mon, 02 Aug 2010 05:46:51 +0000 Sony http://purab.wordpress.com/2009/09/09/javascriptcss-compression/

Many times we are searching for Javascript and css compression.

Few days before i was searching for Jquery JS library compression.
Yes there is compressed version available but i want to make some changes in JS files as per my project requirements.
So i want to compress my JS and CSS files without getting any error.
YUI Compressor 2.4.2. is the very nice tool for that. But i dont want to spend time on how YUI compressor is working.

So here is solution- I got online YUI compressor.
You can use that:
http://refresh-sf.com/yui/
It has very nice options.

http://compressor.ebiene.de/

http://www.cssdrive.com/index.php/main/csscompressor

]]> http://wordpressapi.com/2010/08/02/javascript-css-compression/feed/ 3 how to create text with shadow using csshttp://wordpressapi.com/2010/06/27/create-text-shadow-css/ http://wordpressapi.com/2010/06/27/create-text-shadow-css/#comments Sun, 27 Jun 2010 10:47:03 +0000 Mahesh http://wordpressapi.com/?p=3746 This tutorial explains how to create a text with shadow using CSS.

First let’s create a structure of our text container together with a text.

HTML code:

<html >
<head>

<link href=”stylesheet.css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

<body>
<div id=”wrapper”>
<span> wordpressAPI.com</span>
<span> wordpressAPI.com</span>
</div>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now we are going to apply CSS code.

CSS code:

* {
margin: 0px;
padding: 0px;
}
body {
background-color:#9BCDFF;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
}
#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 30px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 30px;
font-weight: bold;
color:#666666;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thank you!


]]> http://wordpressapi.com/2010/06/27/create-text-shadow-css/feed/ 1 how to change opacity of image when mouseover with csshttp://wordpressapi.com/2010/06/27/change-opacity-image-mouseover-css/ http://wordpressapi.com/2010/06/27/change-opacity-image-mouseover-css/#comments Sun, 27 Jun 2010 09:30:52 +0000 Mahesh http://wordpressapi.com/?p=3735 In this tutorial we will make an opacity rollover effect with css.

It can use for menu items and much more.

first create a folder to contain this whole project, save the three images above in the folder.

Now open your favorite html editor, (notepad, dreamweaver etc).

First we will add the css styles at the top.

That was the styles tag, you can do it in the html file, or export it to an external .css file (then remember to delete the <style> and </style> tags).

Now we just need to place our elements with html code, and assign some classes to them to make this effect work.

As you might see its quite simple, first I make a div box just as a wrapper to hold the images.

then every image is shown in as a href link with an class calling for the style “opacityit” rollover effect.

If you have trouble making it work you can download a project here, remember if it still doesnt work, check if you use a browser that supports the opacity filter effect.

Thank You!

]]> http://wordpressapi.com/2010/06/27/change-opacity-image-mouseover-css/feed/ 0 how to create horizontal rollover list with csshttp://wordpressapi.com/2010/06/18/create-horizontal-rollover-list-css/ http://wordpressapi.com/2010/06/18/create-horizontal-rollover-list-css/#comments Fri, 18 Jun 2010 15:23:54 +0000 Mahesh http://wordpressapi.com/?p=3316 This tutorial explains how to build horizontal lists using “display: inline”.

There are many methods that can be used to making a horizontal list. The main ingredient is “display: inline”, applied to the “LI” element.

Step 1: Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href=”#”> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the “a” element within the list items. For this example a “#” is used as a dummy link.

HTML CODE
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 2: Remove the bullets

To remove the HTML list bullets, set the “list-style-type” to “none”.

CSS CODE
#topnav ul

{

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 3: Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to “0″ for the “UL”.

CSS CODE
#topnav ul

{

margin: 0px;

padding: 0px;

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 4: Display inline

To force the list into one line, apply “display: inline;” to the “LI”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 5: Removing text decoration

At this point you may wish to remove the text underline. It is a common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 6: Padding around list items

To make each list item into a box, we need to add padding to the “a” element.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding: 1em 1em;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 7: Adding background color

At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 8: Add a rollover color

Use “a:hover” to set a second background color, as a rollover. Roll over the list now you will see how it works.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 9: Center the list

To center the list, add “text-align: center;” to the “UL”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

And you done it.

Thank you!

]]> http://wordpressapi.com/2010/06/18/create-horizontal-rollover-list-css/feed/ 1 how to make website search engine friendlyhttp://wordpressapi.com/2010/06/18/how-to-make-website-search-engine-friendly/ http://wordpressapi.com/2010/06/18/how-to-make-website-search-engine-friendly/#comments Fri, 18 Jun 2010 10:05:09 +0000 Mahesh http://wordpressapi.com/?p=3297 Over 80% of consumers use search engines to find products and services.
These days, no website owner can afford not to have a search engine friendly website. There are a lot of things which one should do to achieve high ranking like search engine friendly code, Link building, submit website to various directories, Sitemap, Meta tags etc.
Writing quality code is the first step in making website search engine friendly. In this article we are covering the points which should be taken care of while coding the website:

1. Use HTML for the content as much as possible. Avoid Flash, images, or other non-text formats.
Simple and cleanly coded website always rank higher than the flash based website. The non-text formats must be avoided in order to yield greater website accessibility. Not only the website becomes accessible to larger audience (Visually impaired or cognitive impaired users) but also can be accessed by a range of devices. The search spiders quickly spot the HTML coded and search engine friendly pages. Other advantages of using HTML are: faster loading, Cascading Style Sheet removing access load from server, browser compatibility, easy updating and maintenance.

2. Avoid login functionality to access the page unless it’s required. Search engine cannot index the page that requires login.

3. Do not use frames.
Using frames are considered to be a blunder by webmasters. Frames generally are not indexed by various search engines. Indexing leads to display of the embedded web addresses in frames, as the users are unable to navigate through the search results. Frames also create problem while printing, refreshing or bookmarking the webpage. Frames are becoming obsolete with the advent of AJAX and DIV layers.

4. Navigation should be in plain html. Avoid using flash.
Easy, simple coding in text like HTML facilitates the website to be ranked higher by the search engines.

5. Keep URL as short as possible. .
URL or the domain name is the essence of your website. Going by the KISS (Keep It Short and Simple) rule, the URL ought to be short as it would reduce the chances of misspelling and confusion by the visitors.

6. Static URL is always preferred over dynamic URL.
The search engines are able to index the static URLs in a comfortable manner than the dynamic URLs. Search engines can not access the dynamic and thus the websites lose on their market positioning.

7. Do not use numbers in URL.
Use of numbers in URL must be avoided to circumvent any confusion.

8. If possible, use keywords in URL.
Use of keywords communicates the basic crux of the website to the visitor and also invokes interest in the website, forcing the visitor to go through the website.

9. Separate words using Hyphens in URL.
Use of hyphens should be made clear in the URL else it may puzzle the visitor. Two words should be separated with the use of a hyphen as the search engine reads it as two words.

10. Always use lowercase in URL.
To maintain consistency and avoid any confusion, always use lowercase in URL.

11. Always add alt attribute for images, flash, audio & video file.
Alt attribute are a must while using images, flash, audio and video files as they are alternative names of the images and describe the files. The alt attribute basically lend a caption for such files and helps in search engine ranking.

12. Use Anchor text in links
The anchor text links are powerful tools for site optimization. Anchor text links provide a theme for the entire website.

13. Limit the length of title tag to 65 characters (including spaces) or less.
Different search engines accept different standards. Hence, to be on the safer side, it is important to limit the length of the title tag between 50-65 characters.

14. Incorporate keyword phrases in title tags.
Including 2-3 important keyword phrases of the website in the title tag facilitates good rankings by the search engines. However, the title tags must not be over burdened with keyword phrases as the chances are that the website would be blacklisted as spam. Each page with its own keyword phrase lends higher readership. A helpful tool for choosing which keywords to target is the Google Keyword Selection Tool.

15. Add Meta tags in the code.
Search engines use meta-tags to identify the objective of the website; therefore, meta-tags help in optimizing the website. The search crawlers determine the relevance of the meta-tags with respect to the content of the webpage.

16. Add Header Tags i.e, h1, h2, h3 etc.
Header tags as the name itself suggest are used to incorporate the headings in the text. The h1 header can be used to determine the main keyword and the h2 header tag can identify the next relevant keyword and so on.

17. Offload JavaScript and other non-text code (style sheets, etc.) to external files

18. Optimize images for fast loading
Larger images must be broken into smaller size images which enable uploading smaller images simultaneously and faster. Cropping unnecessary portions and reducing the image depth also help in loading the image faster.

19. Try to keep page size as low as possible
Lower the page size, lesser time will it take to load and thus would not distract the visitor from the website. Sometimes pages with larger size take ages to load and divert the potential user or client.

20. Validate your markup & CSS against w3c standards
Validating markup helps to identify the flaws or wrong coding on the webpage. The W3C standards are laid down to determine the errors and make the code neat & tidy.

]]> http://wordpressapi.com/2010/06/18/how-to-make-website-search-engine-friendly/feed/ 19 how to create 3D push button effect using csshttp://wordpressapi.com/2010/06/18/how-to-create-3d-push-button-effect-using-css/ http://wordpressapi.com/2010/06/18/how-to-create-3d-push-button-effect-using-css/#comments Fri, 18 Jun 2010 08:48:39 +0000 Mahesh http://wordpressapi.com/?p=3290 Create a simple button with 3D look for your website using CSS.


The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect – the only limit is your imagination!

Thank You!

]]> http://wordpressapi.com/2010/06/18/how-to-create-3d-push-button-effect-using-css/feed/ 2 how to create sticky footer using css or javascripthttp://wordpressapi.com/2010/04/04/create-sticky-footer-css-javascript/ http://wordpressapi.com/2010/04/04/create-sticky-footer-css-javascript/#comments Sun, 04 Apr 2010 09:24:17 +0000 Sony http://wordpressapi.com/?p=1985 You can achieve the sticky footer using css very perfectly. Use following css code for creating the sticky footer. Many people gave example of google sticky footer.


html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.


<script>
document.body.onload = function () {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}

</script>

You just need to minus the header and footer height from middle_container.

]]> http://wordpressapi.com/2010/04/04/create-sticky-footer-css-javascript/feed/ 2 How to change the image of on MouseOver Event using JavaScript or CSShttp://wordpressapi.com/2010/04/04/change-image-mouseover-event-javascript-css/ http://wordpressapi.com/2010/04/04/change-image-mouseover-event-javascript-css/#comments Sun, 04 Apr 2010 08:13:15 +0000 Sony http://wordpressapi.com/?p=1980 If you want to change the image on rollover or mouseover event. This is very old technique. You can achieve this using CSS or javascript.

With CSS you can use the following code


.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });
]]> http://wordpressapi.com/2010/04/04/change-image-mouseover-event-javascript-css/feed/ 1 How to write inline conditional csshttp://wordpressapi.com/2010/03/31/write-inline-conditional-css/ http://wordpressapi.com/2010/03/31/write-inline-conditional-css/#comments Wed, 31 Mar 2010 11:11:11 +0000 Sony http://wordpressapi.com/?p=1960 We all know what is conditional css and how to write the conditional css.
Here is few examples about conditional css.

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<![endif]–>

With in style.css file

 a.button_active, a.button_unactive {
 display: inline-block;
 [if lte Gecko 1.8] display: -moz-inline-stack;
 [if lte Konq 3.1] float: left;
 height: 30px;
 [if IE 5.0] margin-top: -1px;
 text-decoration: none;
 outline: none;
 [if IE] text-decoration: expression(hideFocus='true');
 }

When we are use the inline css in document. If in that case we need to use conditional css then there is way

// Following is hack for all IE, including 7. It must go first, or it overrides the following hack
<div style="width:15px;^width:13px;">
some dynamic content
</div>
// Following is hack for all IE6 + browsers
<div style="width:15px;_width:14px;">
some dynamic content
</div>
]]> http://wordpressapi.com/2010/03/31/write-inline-conditional-css/feed/ 0 How to do word wrap with csshttp://wordpressapi.com/2010/03/31/word-wrap-css/ http://wordpressapi.com/2010/03/31/word-wrap-css/#comments Wed, 31 Mar 2010 10:14:39 +0000 Sony http://wordpressapi.com/?p=1956 Many times we need to do word wrap using lanugages. I recommend use css for word wrapping.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
This is a problem with CSS layouts that use floated divs.
Use following code for fix the word wrap with all divs.

div { word-wrap: break-word }

instead of this we always use following css code:

overflow:hidden;

But this is not good practice. Use word-wrap css property.
Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

]]> http://wordpressapi.com/2010/03/31/word-wrap-css/feed/ 23 Best IDEs for WordPress, Joomla, Drupal Plugin and Theme development with Windows and Linuxhttp://wordpressapi.com/2010/02/27/ides-wordpress-joomla-drupal-plugin-theme-development-windows-linux/ http://wordpressapi.com/2010/02/27/ides-wordpress-joomla-drupal-plugin-theme-development-windows-linux/#comments Sat, 27 Feb 2010 09:21:05 +0000 Sony http://wordpressapi.com/?p=1567 Many developer who are experienced in development. But still that comes to another cms or project development. We are always search for good IDE which are free and open source that is first requirement.

Our basic need are as follows in any IDE, the IDE need to support following things:

  • CSS
  • XHTML/HTML
  • JavaScript
  • PHP
  • MySQL

I created a list of IDE which I used daily  to do a development. Here I need to clarify IDE is language specific. I work in PHP, Ruby on Rails, Adobe Air, Flex, Javascript, CSS.

I recommend following IDEs which I really found useful for all the developer who are working in wordpress, joomla, drupal development.

1. eclipse (Compatible  on Windows and Linux)

Description: Eclipse is best IDE for all language development. Eclipse IdE is basically Java development but still that provides PHP, ROR and other language support. I like this IDE for java development but I did not recommend for PHP or Ruby on Rails.

2. NetBeans (Compatible  on Windows and Linux)

Description: This IDE has also all language support. I specially like this IDE from Ruby on Rails development. I Used this IDE for Ruby on Rails development as well as some times for PHP development. Among the Ruby on Rails developer this IDE is so popular.

3. Komodo (Compatible  on Windows and Linux)

Description : This IDE is also support for all languages. This IDE is really good support for PHP. I really love this IDE for PHP development. Simple and fast and still nice features about PHP. This IDE is really popular among the PHP developers.

4. Aptana (Compatible  on Windows and Linux)

Description : This IDE is mainly made for Ruby on Rails development. This is also popular among Ruby developers. This IDE has features like eclipse. I like this IDE for Adobe Air and flex development.  This IDE has also PHP support.

5. EditPlus (Compatible  on Windows)

Description: This IDE is plain simple text editor. Shows you simple color highlight features. I specially recommend this IDE for PHP development and new PHP developer always start with this IDE so they will get filmier with PHP functions and methods because this IDE is does not provide any help. I love the use this IDE in daily use for any language development.

If you want to add any more IDEs. You can comments on this article.

]]> http://wordpressapi.com/2010/02/27/ides-wordpress-joomla-drupal-plugin-theme-development-windows-linux/feed/ 13 How to do footer stickable to end of the browser window without fixed positionhttp://wordpressapi.com/2010/02/26/footer-stickable-browser-window-fixed-position/ http://wordpressapi.com/2010/02/26/footer-stickable-browser-window-fixed-position/#comments Fri, 26 Feb 2010 07:40:16 +0000 Sony http://wordpressapi.com/?p=1552 Many web developer always think about why footer is not sticking to end of browser.

This is senorio:
If content is less then footer need to go bottom of browser and if content is more then footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. Becasue this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following javascript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 //Non-IE
 browserHeight = window.innerHeight;
 } else if( document.documentElement && (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body && (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 }
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";
</script>

Here in this javscript I am assuming middle_container is your main block of content. You can change the variables as per your need.

]]> http://wordpressapi.com/2010/02/26/footer-stickable-browser-window-fixed-position/feed/ 0 Web designers are saying what to do with IE6http://wordpressapi.com/2010/02/24/web-designers-are-saying-what-to-do-with-ie6/ http://wordpressapi.com/2010/02/24/web-designers-are-saying-what-to-do-with-ie6/#comments Wed, 24 Feb 2010 19:23:09 +0000 Sony http://wordpressapi.com/?p=1519 In 2003,  Microsoft launched the Internet Explorer6 and it had dominated the market with 97 percent share that time. Over the years its market share has declined, and Now as per new.cnet.com in Jan 2010, IE6 has only holding 5 percents of internet users.

Still Most of all web designers are fighting all the time for IE6 issues and hacks. All web designers and Web development companies are still spend so much to to solve the issue with IE6 browsers.

There is reason behind that. In all over the world, still some big corporate companies and offices are using IE6. Many big companies and brands announced to ban IE6 in 2009 itself.

The Google and March 1 references come from that company’s recent announcement that it would drop IE6 from the list of supported browsers for its Google Docs online applications and its Google Sites hosting services starting on Monday, March 1. Yesterday, Google’s popular video site YouTube named March 13 as the end-of-support date for IE6.

There is big issue with IE6 browser but still some web developer are not aware of that. IE6 is majorly lacking to provide a web security. I can say, IE6 is kind of hackers browser.

Microsoft‘s browser has weathered a “kill IE6″ campaign since February 2009, when Facebook prompted IE6 users to upgrade. It accelerated last summer when Digg announced it would curtail IE6 support, and an “IE6 Must Die” Twitter petition collected thousands of names. Microsoft has endorsed the anti-IE6 efforts, going so far as to say that “Friends don’t let friends use IE6,” although it has refrained from forcing users or companies to upgrade to IE7 or IE8, arguing that the old browser is still required by some enterprises.

There are new technologies are coming like HTML5, CSS3 but still IE8 is also not providing the basics of that. So web deverloper’s need to struggle for that. The biggest issue I will say here is project estimation. Due to IE6 browser estimation will go always wrong. This is really frustrating.

There are multiple issues with IE6. I will talk about some here.

  • z-index issue – most bad part in IE6
  • inline-block – display property not work
  • min-height and max-height css property
  • child selectors in CSS
  • PNG transparent images- biggest issue
  • Poor Javascript support

Microsoft is planning to launch IE9 but still they are not included the some nice features of HTML5 and advanced javascript methods and CSS3 attributes.

What I say more.. Web designers are saying what to do with IE6…..

]]> http://wordpressapi.com/2010/02/24/web-designers-are-saying-what-to-do-with-ie6/feed/ 1 Create fixed side or top buttons in wordpress themehttp://wordpressapi.com/2010/02/19/create-fixed-side-top-buttons-wordpress-theme/ http://wordpressapi.com/2010/02/19/create-fixed-side-top-buttons-wordpress-theme/#comments Fri, 19 Feb 2010 21:42:57 +0000 Sony http://wordpressapi.com/?p=1274 We can easily introduce the fixed side or top or bottoms in wordpress or any website.

Fixing the position of any document element using CSS this is very old technique but still  I am going to give you some good trick to show the twitter button or search buttons or add new button on bottom or sidebar.

Using following CSS code you can integrate the any button on sidebar.


#submit_news { background:transparent url(images/submit-news.png) no-repeat scroll 0px 0px; height:170px; left:0; position:fixed; top:180px; width:40px; }
div#submit_news:hover { background-position:-41px 0px; }
#submit_news a{ display:block; height:170px; width:40px; }

In this tutorial we are using the only one image as a button. As we know we are using the sprite image css here.

Open your header.php file from wordpres theme. and under body tag put following code.

<div id=”submit_news”><a href=”/submit-news” ></a></div>

First you need to create the submit news page in wordpress.

If you want to add the submit news button for your site you can download from here.

]]> http://wordpressapi.com/2010/02/19/create-fixed-side-top-buttons-wordpress-theme/feed/ 30 Advanced rounded corner with only css and not using images and with borderhttp://wordpressapi.com/2010/02/16/advanced-rounded-corner-css-images-border/ http://wordpressapi.com/2010/02/16/advanced-rounded-corner-css-images-border/#comments Tue, 16 Feb 2010 16:56:57 +0000 Sony http://wordpressapi.com/?p=1140 In one of my project I got requirement about half rounded corner in header and footer.
I got so many scripts which had solution with javascripts and some are given solutions with images.

But I want customize every thing like color of rounded corner header background, footer background and border also.

I did so much R&D about same but did not found any solution.

So I tried to code myself in CSS and I got succeed in that.
In this article I am going to share the code with you.

first put my style sheet in your webpage.

<style type="text/css">
body {background-color: #fff;font: normal 10pt ,Arial,sans-serif;}

img{border:none;}

.wordpressapi-main{
 clear:both;
 float:left;
 width:300px;
 /*border:1px solid #f00;*/
}

.wordpressapi_round_header {
 background-color: #ddd;

 -moz-border-radius: 15px 15px 0px 0px;
 -webkit-border-radius: 15px 15px 0px 0px;
 border-radius: 15px 15px 0px 0px;
 /*behavior: url(border-radius.htc);*/
 text-align:center;
 padding:5px 0px 5px 0px;
 clear:both;
 float:left;
}

.wordpressapi_round_footer {
 background-color: #ddd;

 -moz-border-radius: 0px 0px 15px 15px;
 -webkit-border-radius: 0px 0px 15px 15px;
 border-radius: 0px 0px 15px 15px;

 /*behavior: url(border-radius.htc);*/
 text-align:right;

 clear:both;
 float:left;

}
.wordpressapi_round_middle {
 text-align:center;
 color:blue;
 clear:both;
 float:left;
}
.inner_ad {
 padding:10px;
 text-align:left;
 color:black;
 font-size:12px;
 vertical-align: middle;

}
.round_heading{
font-size:16px;
line-height:26px;
font-weight:bold;

}

/* rounded corners */
.wordpressapi-blue-round-container{ /*margin-top:10px;*/}
.wordpressapi-blue-round-container-top, .wordpressapi-blue-round-container-bot, .wordpressapi-acco-top, .wordpressapi-acco-bot {
 display:block;
 background:#fff;
 font-size:1px;
 clear:both;

}
.blue-round-t1, .blue-round-t2, .blue-round-t3, .blue-round-t4 {display:block; overflow:hidden;}
.blue-round-t1, .blue-round-t2, .blue-round-t3 {height:1px;}
.blue-round-t2, .blue-round-t3, .blue-round-t4 {
 background:#0000FF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.blue-round-t1 {
 margin:0 5px;
 background:#0000FF;
 border-top:1px solid #ccc;
 height:0px;
}
.blue-round-t2 {margin:0 3px; border-width:0 2px;}
.blue-round-t3 {margin:0 2px;}
.blue-round-t4 {height:2px; margin:0 1px;}

.white-round-t1, .white-round-t2, .white-round-t3, .white-round-t4 {display:block; overflow:hidden;}
.white-round-t1, .white-round-t2, .white-round-t3 {height:1px;}
.white-round-t2, .white-round-t3, .white-round-t4 {
 background:#FFF;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}
.white-round-t1 {
 margin:0 5px;
 background:#FFF;
 border-top:1px solid #ccc;
 height:0px;
}
.white-round-t2 {margin:0 3px; border-width:0 2px;}
.white-round-t3 {margin:0 2px;}
.white-round-t4 {height:2px; margin:0 1px;}

.wordpressapi-blue-round-contents{
 display:block;
 border:1px solid #000;
 border-width:0 1px;
 padding: 0 15px;
 background:#0000FF;
 color:#000;
 text-align:justify;
 width: 878px;
 clear:both;
 float:left;

}

.hold{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 clear:both;
 float:left;
 width:298px;
}

.inner-adds-bottom{
 padding-top:1px;
 clear:both;
 float:left;
}

/* rounded corners */

.cross-img, .cross-img:link, .cross-img:hover{
 background:url(close_button.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}

.info-img, .info-img:link, .info-img:hover{
 background:url(information_btn.gif) no-repeat center;
 width:12px;
 height:12px;
 display:inline-block;
}
</style>

Then Put following code in your HTML body.

You will get the following result as follows:

Download the main html file from  here: Advanced rounded corner with CSS

]]> http://wordpressapi.com/2010/02/16/advanced-rounded-corner-css-images-border/feed/ 11 How to append the html code using javascript and phphttp://wordpressapi.com/2010/02/16/append-html-code-javascript-php/ http://wordpressapi.com/2010/02/16/append-html-code-javascript-php/#comments Tue, 16 Feb 2010 13:13:21 +0000 Sony http://wordpressapi.com/?p=1124 In this example I am going to show you how to add the dynamic HTML code into Document using javascript and PHP

<?php

$random_id = 125845465; // PUTTING SOME RANDOM ID YOU CAN USE YOURSELF.

$DYNAMIC_HTML = '<div>
<b>Sponsored Links</b>

<div>
 <span><a style="font-size:12px;font-weight:bold;" href="http://www.ucoz.com/" rel="nofollow">Create a website for free - uCoz</a></span><br />
Build a website quickly and easily
Customizable templates and graphics

</div>

<div>
 <span><a style="font-size:12px;font-weight:bold;" href="http://www.wordpressapi.com/domain_names/">$1.99 Domain Names</a></span><br />
 With every new non-domain purchase thru <a href="http://www.wordpressapi.com/domain_names/" rel="nofollow">wordpressapi</a>, you get a domain name for only $1.99.
</div>

<div>
 <span><a style="font-size:12px;font-weight:bold;" href="http://www.wordpressapi.com/" rel="nofollow">FREE Hosting!</a></span><br />
 With every domain you register with <a href="http://www.wordpressapi.com/" rel="nofollow">wordpressapi</a> you get FREE hosting.
</div>
</div>';

 $HTML = "var objHead = document.getElementsByTagName('head');
 var objCSS = objHead[0].appendChild(document.createElement('link'));
 objCSS.id = '.$random_id.';
 objCSS.rel = 'stylesheet';
 objCSS.href = 'http://YOURSITE/STYLE.css';
 objCSS.type = 'text/css';";

 $HTML .= '
 var WORDPRESAPI_html_'.$random_id.' = document.createElement("div");
 WORDPRESAPI_html_'.$random_id.'.id = "WORDPRESAPI_html_'.$random_id.'";
 WORDPRESAPI_html_'.$random_id.'.style.position = "absolute";
 WORDPRESAPI_html_'.$random_id.'.style.zIndex = "100";
 WORDPRESAPI_html_'.$random_id.'.style.left = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.top = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.visibility = "hidden";
 WORDPRESAPI_html_'.$random_id.'.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
 WORDPRESAPI_html_'.$random_id.'.innerHTML = "'.addcslashes($DYNAMIC_HTML,"\\\'\"&\n\r<>").'";
 document.body.appendChild(WORDPRESAPI_html_'.$random_id.');';

echo $HTML;

?>

In this code if you observe then following line is very important.

 WORDPRESAPI_html_'.$uniqid.'.innerHTML = "'.addcslashes($HTML,"\\\'\"&\n\r<>").'";

php

Whenever you are using javascript and PHP both together then use following way to push your HTML in Dom.

]]> http://wordpressapi.com/2010/02/16/append-html-code-javascript-php/feed/ 12 How to create the rounded corner using css or javascripthttp://wordpressapi.com/2010/02/16/create-rounded-corner-css-javascript/ http://wordpressapi.com/2010/02/16/create-rounded-corner-css-javascript/#comments Mon, 15 Feb 2010 19:44:01 +0000 Sony http://wordpressapi.com/?p=1102 We always need the rounded corners for our various web projects.

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function.

There are many javascripts are available to create the rounded corner using scripts. But specially recommend use pur css to avoid unnecessary script loading. So many sites uses the background image also, We need to avoid that also.

Following css will give you the rounded corners using only css:

.main_container {background:#ccc; color:#fff; margin:0 15px;}
.wordpressapitop, .wordpressapibottom{
display:block;
background:#fff;
}
.wordpressapitop *, .wordpressapibottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.wordpressapi1{margin: 0 5px}
.wordpressapi2{margin: 0 3px}
.wordpressapi3{margin: 0 2px}
.wordpressapi4{
margin: 0 1px;
height: 2px
}

Use following code in your html file and you are able to use rounded corners without using the javascript

round-code

Above script will work on all browsers FF, Chrome, Safari, IE6, IE7, IE8.
roundtotal

]]> http://wordpressapi.com/2010/02/16/create-rounded-corner-css-javascript/feed/ 0 In page pop up javascripts or modalboxhttp://wordpressapi.com/2009/09/07/in-page-pop-up-javascripts-or-modalbox/ http://wordpressapi.com/2009/09/07/in-page-pop-up-javascripts-or-modalbox/#comments Mon, 07 Sep 2009 10:22:30 +0000 Sony http://purab.wordpress.com/2009/09/07/in-page-pop-up-javascripts-or-modalbox/ I got requirement to create in-page pop up in my project.

I got many open source javascripts and CSS libraries. I found some of them are useful. Here i given the list of libraries:

1.  lightbox2.04

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

URL: http://www.lokeshdhakar.com/projects/lightbox2/

My comments: useful for image slideshow.  Not useful for custom requirements.

2. modalbox_1.5.5

My comments: Very nice and simple, You can use this JS for multiple requirements.

URL : http://okonet.ru/projects/modalbox/

3. tinybox

My comments: simple and good, really tiny JS, you can modify and create custom events and effects.

URL: http://www.leigeber.com/2009/05/javascript-popup-box/

4. Good URL for Reference

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

]]> http://wordpressapi.com/2009/09/07/in-page-pop-up-javascripts-or-modalbox/feed/ 4 Basic CSS rules for development of WordPress themeshttp://wordpressapi.com/2008/06/13/basic-css-rules-for-development-of-wordpress-themes/ http://wordpressapi.com/2008/06/13/basic-css-rules-for-development-of-wordpress-themes/#comments Fri, 13 Jun 2008 20:17:33 +0000 Sony http://wordpressapi.com/?p=469 Whenever you are developing the new wordpress theme, you need to put some css in your style.css file. If you are not adding that css in your theme then there is lot of changes to break your theme view.

Some classes which are needful for image and alignment purpose. You need to just copy paste following CSS code in your style.css file.

.aligncenter,

div.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

}

.alignleft {

float: left;

}

.alignright {

float: right;

}

.wp-caption {

border: 1px solid #ddd;

text-align: center;

background-color: #f3f3f3;

padding-top: 4px;

margin: 10px;

/* optional rounded corners for browsers that support it */

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

.wp-caption img {

margin: 0;

padding: 0;

border: 0 none;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

padding: 0 4px 5px;

margin: 0;

}

You can edit some CSS as per theme requirement also.

Following CSS classes are also useful for creating the WordPress theme. You can create these CSS classes as per your theme requirement.

.categories {…}

.cat-item {…}

.current-cat {…}

.current-cat-parent {…}

.children {…}

.pagenav {…}

.page_item {…}

.current_page_item {…}

.current_page_parent {…}

.current_page_ancestor {…}

.widget {…}

.widget_text {…}

.blogroll {…}

.linkcat{…}

]]> http://wordpressapi.com/2008/06/13/basic-css-rules-for-development-of-wordpress-themes/feed/ 0 How to set Media Icons in wordpress themehttp://wordpressapi.com/2008/06/07/how-to-set-media-icons-in-wordpress-theme/ http://wordpressapi.com/2008/06/07/how-to-set-media-icons-in-wordpress-theme/#comments Sat, 07 Jun 2008 19:26:46 +0000 Sony http://wordpressapi.com/?p=453 Just put some jpg, png or gif files in your theme images folder.

  1. your_theme/images/audio.jpg
  2. your_theme/images/audio.gif
  3. your_theme/images/audio.png
  4. your_theme/images/mpeg.jpg
  5. your_theme/images/mpeg.gif
  6. your_theme/images/mpeg.png
  7. your_theme/images/audio_mpeg.jpg
  8. your_theme/images/audio_mpeg.gif
  9. your_theme/images/audio_mpeg.png

Whenever you are putting the media files in post above icons will appear in your theme.

]]> http://wordpressapi.com/2008/06/07/how-to-set-media-icons-in-wordpress-theme/feed/ 0