Category Archives: Css

30 Pure CSS Alternatives to Javascript

With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all.

The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used.

Having said all that, we are in no way saying that these techniques are in anyway better than there Javscript equivalent, just an optional alternative and as a proof of concept.

In this article we have concentrated on showing as many varied CSS techniques that cover the full spectrum of web site interactivity, thus we have intentionally minimized the number of pure CSS navigation methods, of which there are literally hundreds.

Read more : here

 

15 CSS Habits to Develop for Frustration-Free Coding

It’s been said that the key to a civilization’s success is mastery of the food system. Unless a group of people can effectively control the basic needs for survival, they will never achieve greatness.

Likewise, before CSS skills can be expanded to an advanced level, the basics must become instinct to any CSS coder. Develop these habits and you lay a solid foundation to apply advanced CSS techniques.

Read more : here

Hope this will help !!!

Jay Ganesh

About these ads

Best Practices for Speeding Up Your Web Site

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 34 best practices divided into 7 categories.

1) Content

  • Minimize HTTP Requests
  • Reduce DNS Lookups
  • Avoid Redirects
  • Make Ajax Cacheable
  • Post-load Components
  • Preload Components
  • Reduce the Number of DOM Elements
  • Split Components Across Domains
  • Minimize the Number of iframes

2) Server

  • Use a Content Delivery Network
  • Add an Expires or a Cache-Control Header
  • Gzip Components
  • Configure ETags
  • Flush the Buffer Early
  • Use GET for AJAX Requests

3) CSS

  • Put Stylesheets at the Top
  • Avoid CSS Expressions
  • Choose <link> over @import
  • Avoid Filters

4) Javascript

  • Put Scripts at the Bottom
  • Make JavaScript and CSS External
  • Minify JavaScript and CSS
  • Remove Duplicate Scripts
  • Minimize DOM Access
  • Develop Smart Event Handlers

5) Cookie

  • Reduce Cookie Size
  • Use Cookie-free Domains for Components

6) Images

  • Optimize Images
  • Optimize CSS Sprites
  • Don’t Scale Images in HTML
  • Make favicon.ico Small and Cacheable

7) Mobile

  • Keep Components under 25K
  • Pack Components into a Multipart Document

           Read more

How to dynamically adjust an iframe’s height?

Last day when I was using iframe in one of my project , i came across one problem & I have solved it now.

so I think why not to share with you all. I was looking to display content of the other aspx page inside iframe but i wasnt able to adjust the height of the iframe. so try out this solution to resolve it.

Insert iframe on page

   <iframe scrolling='no' frameborder='0' id='frmid' src=’getad.aspx'
            onload='javascript:resizeIframe(this);'>
   </iframe>

Use this javascript to resize iframe based on the height & width of child page

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';                        
 }
 </script>

What does this code do? When the body of the parent frame loads, it looks up the document element “childframe” which corresponds to the iframe. Then the page calls a function resizeFrame(). The function sets the height of the frame to be the scrollHeight, which effectively removes the scrollbar.

Hope this will help !!!

kick it on DotNetKicks.com

Shout it