Ramani Sandeep's Blog

DotNetting – Fast , Easy Way of Developing Applications

Archive for the ‘Css’ Category

30 Pure CSS Alternatives to Javascript

Posted by Ramani Sandeep on May 1, 2010

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

Posted in Css | Tagged: , | Leave a Comment »

Best Practices for Speeding Up Your Web Site

Posted by Ramani Sandeep on January 30, 2010

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

Posted in ASP.NET, ASP.NET 3.5, ASP.NET 4.0, ASP.NET Ajax, Css, JavaScript, Performance | Tagged: , | Leave a Comment »

How to dynamically adjust an iframe’s height?

Posted by Ramani Sandeep on December 16, 2009

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

Posted in Css, JavaScript | Tagged: , , , | 27 Comments »

Page Peel with Jquery

Posted by Ramani Sandeep on September 24, 2009

Article 1 : Simple Page Peel Effect with jQuery & CSS

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

1. HTML – Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an <a> tag. Note – If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.

Read more…

Article 2 : Page Peel with Jquery Plugin

A jquery plugin to implement a page peel effect to place ads on your site.

If you haven’t seen it by now, check out the demo.

Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one’s set up as 500×500). Also, I’ve set the bottom padding of this box to 105px so I don’t cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.

Read more…

Hope this will help you!!!

Posted in Css, JQuery | Tagged: , , , | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.

Join 37 other followers