I have tried to give the reference in the dotnetnuke module’s user control like as below. <script src=”Scripts/jquery-1.6.2.js” type=”text/javascript” /> It complied successfully.When I run  the application gave me 404 error. But the file is there in Project Scripts folder. I found that application is looking for script in localhost/dnn/…/Scripts/ jquery.ui.182.js path where the file […]

Problem: While dealing with a scrollable view where a large numbers of data are shown I faced the following issue. When a popup shows above it, the background scrollable view still has focus and can be  scrolled in mobile devices. After much of the research I got the solution and I am sharing it below […]

A few tips for copying text to clipboard and how to use buttons like forward and backward like  in browser and changes color of scrollbar. 1. If you want a  page to have a forward and backward button to navigate forward and backward (similar to basic functionality of a web browser) you can use the following code. <input type=”button” […]

Recently I have implemented image resizing feature in a project bit differently. What I have done is, implemented a new slider control which can be used to control the size of the image. You can increase or decrease the size of the image by dragging the marker in the slider control, very much like you […]

If you want to load your website faster and have good ranking for your website in y-slow of similar tools please go through this tip. I have discovered a technique for adding javascript and CSS files at run time, it has been checked in various ways and I am also giving the sample code to […]

When we create a “button” and see it in different browsers, what we observe is it looks different in different browser. This is just because every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more appropriate and styled well.Near about all browsers by default make the links […]

Elastic Design is a cool way of designing the layout of our websites so that the layout doesn’t change according to the size of the browser and user’s font preference. It uses ems for setting widths and a max-width style to ensure that the content is not too long. Since the size of an em […]

Introduction: While working in some applications I found that the images that are in local folder also taking time to load while opening the app for the 1st time. That  means if you are setting an image as background for a div, then while opening the page for the 1st time you will find that […]

Most of the time you may come accross a simple implementation like printing a web page. But here I will not discuss about how to print a web page, instead I will discuss on how to not print specific elements on the page with the help of a CSS hack. For example we have a […]

ASP.NET provides ScriptManager using which we can combine our script files. There is already a tip which describes “How to merge your Javascript files in ASP.NET”. But ScriptManager in ASP.NET does not provide us the facility to merge CSS files. We can achieve it by the following steps: Step 1: Create an HTTP handler which […]

While working with CrystalReport we usually meet situations in which the report will take more then usual time in loading.Here i am talking about crystal report but it may be the situation of any heavy page. In these situation due to lack of information user may try to click or may be close the browser […]

Most of us face a great deal of difficulty while designing Web pages or content across browsers with same same look and feel effect. A website that looks cool in a particular browser,  may not look as cool (or may even look ugly) in another browser. The reason behind this is that all browsers do […]

If you are into web page development,  you are likely to have come across many tutorials and tips explaining how to create rectangles with rounded corners. Some of these tips, tutorials and techniques require you to use multiple images, one for each corner but the fact is you can also create rounded corners with just […]

I want to share some cross-browser compatible CSS techniques to create shadow effect without using an image. We have to first remember that shadow means it should be black and should fade gradually as light effect on the div. If the light effect is from a particular side of the div, the shadow will be […]

There can be multiple CSS classes and inline style applied to a single html element. By the default CSS rule, if same style attribute is set with different values on top of a single element, the closest attribute value will dominate in the out put at the browser end. !important is a special attribute that […]

In the current situation it’s a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc…) Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to […]

I was using Theme in my application and instead of putting in all pages , I used it through web.config file . <pages theme=”Default”> But for some of my pages the application was throwing following Exception System.InvalidOperationException: Using themed css files requires a header control on the page. (e.g. <head runat=”server” />). at System.Web.UI.PageTheme.SetStyleSheet() at […]

A cool CSS effect : Set different color when user select text in web pages Difficulty Level: Beginner You all might be knowing this. When we select some text the default background color is Blue. But we can override font and background color on selection. CSS property : A generic setting for all the text […]

Creating rounded corners in pure CSS is pretty simple and straight forward.  The following lines of code demonstrate it. -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / If we write the above CSS for any element (say a div), it works fine for every […]

For us the following two file names may not hold much difference but when using CSS we have to take care of the space between the file names. 1. Page background.jpg 2. Page_background.jpg For instance, to set a background image of a page using CSS we would have to add the following two lines of […]

If want to display vertical text you can either use an image or CSS properties. However, for cross-browser compatibility you have to use different properties for different browsers. To rotate any text by 90 degree (as shown above) you can write the following – -moz-transform: rotate(90deg); /* For Firefox */ -o-transform: rotate(90deg); /* For Opera […]

We can rotate the image by writing simple CSS as follow : .imgToRotate { -webkit-transform: rotate(90deg); //For chrome and safari -moz-transform: rotate(90deg); //For ff filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); // For ie } Here “imgToRotate”  is the class name given to <img> tag that contains image. filter property for IE has “rotation=1” here 1 indicates a 90 degree […]

If you are selecting any text in a browser then you will find that the selected text’s background color and color will change so as to indicate that the text is selected. In most of the browsers the background color will change to shades of blue and the color of the text will change to […]

Gradients are smooth transitions between two or more specified colors. The CSS gradient feature was introduced by Webkit about two years back, but was not very successful as most popular browers didn’t support the feature. But now that is set to change with the arrival of CSS3 which supports gradients, specifically, linear and radial gradients. […]

Using CSS you can flip an image. WHY FLIP AN IMAGE ? ————————————————————————————————————- 1. Minimizes the number of HTTP Requests. 2. Minimizes the loading time of the page. 3. Easy to use. SCENARIO: ————————————————————————————————————– Let us assume that you want to use a previous and a next image in your web page then you will […]

CSS3 Transition is one of the coolest feature that can help achieve some of the effects of animation using CSS only. It is one of the specs of W3C working drafts but it is not supported in IE 8 and 9 beta.The browsers which support this property are Google chrome 7+,Opera 10+,Mozilla firefox 4.0 beta,webkit […]

In most web pages we do have images which affects the time required to load the page. Let us take an example, if we have 5 images with each having a size 50KB the web page will load five images(250KB)  and for these five images the server would need five httpRequest which is a time […]

In previous tip Can Css3 Transition replace jQuery animation ?  I mentioned some of the properties of CSS3 transition.Here i am explaining with a example to make make a Horizontal accordion with CSS3. .. Browser support The browsers which support CSS3 Transition properties are Google Chrome 7+,Opera 10+, Mozillafirefox 4.0 beta,Webkit browser Safari.Transition property is […]

You might find that your application looks almost the same in every browser but in Google Chrome it looks different. For instance,you might find that the users are able to resize textboxes of your application or an orange border appearing when the text is highlighted, even though you have not written any code to provide […]

HTML5 is the future of the web so one can start implementing it from now onwards as some of the browsers are compatible with it(not completely). However, while implementing you should take care of those browsers also which are not compatible with HTML5. The are several ways to detect whether your browser supports HTML5 element […]

It is possible to add the shadow effect to the text in HTML only using CSS3. The “text-shadow” feature is used for this pupose. The text-shadow property is used as follows: text-shadow: 2px 3px 4px #0000FF;   This will produce text with a shadow 2px right and 3px below the text,which blurs for 4px. You […]

We can create an impression of a 3-dimensional cube using only CSS properties.Using skew property and rotating the rectangles,individual faces of cubes can be aggregated to draw a 3D object. Supported browsers: Fire­fox 3.5+,  Safari 3.2+, Google Chrome. We need to create separate div, class and contents for each face.The top face of the cube […]

Few days ago i came to know about CSS outline property and i thought how it is different from border property. According to W3Schools “An outline is a line that is drawn around elements (outside the borders) to make the element ‘stand out’ “. W3C says outline differ from border in the following ways (ref: […]

Earlier, if we wanted to apply a outline/stroke effect to text in a web page, we would have to rely on images. But with the latest CSS  we can get the effect without using images. By using CSS text shadow property we can achieve this. Please note,this method is most relevant for the time being […]

CSS3 Selectors provide new, more powerful ways to select nodes using CSS. A Selector represents a structure. Every CSS rule devided into two parts : a) Selector : determining which content to effect b) Declaration Block : determining which of the element will be modified.properties A simple selector can contain many types: Type Selectors : […]

HTML is very simple, just a list of links. <ul id=”navMenu”> <li><a href=”#”>Test 1</a></li> <li><a href=”#”>Test 2</a></li> <li><a href=”#”>Test 3</a></li> <li><a href=”#”>Test 4</a></li> <li><a href=”#”>Test 5</a></li> <li><a href=”#”>Test 6</a></li> </ul>   CSS is little bit complicated this time, therefore, I have put a lot of comments. I hope it will explain everything you need to […]

Yes you have read it correctly. If you are asking youself how come, then the answer is using Data URI scheme. Data URI is a scheme by which you can add in-line data to a web page. How to do that: This includes the following steps 1. Encode the image to Base64 encoding. The following […]

Many of us know this and have used it also but some people do not know what CSS sprites are. So this tip will give an idea to those people who do not know what it is. What is CSS Sprite? It is a technique where more than images are taken, combined into one complex […]

Recently there was a requirement in my project where i have to make all the buttons and divs rounded corner. To do this task i found a nice solution in css3 i.e using ‘border-radius‘ we can do the task. A nice Tip also added by Sachin, describing how to make rounded corner divs using ‘border-radius‘. […]

CSS can be used to change the appearance of a browser element by adding animation effects to it such as rotation, transform, scale and many more.CSS transitions are used to control the speed of animation changes to elements over an interval of time following an acceleration curve that can be customized. NOTE: These effects are […]

To hide a button while printing we can use the style “display:none;”. But this will not work if the the button is disabled. Even after applying style “display:none;” to a disabled button it will get printed. Hi, While printing any web page usually we don’t print the whole page we see. So we declare some […]

It will be great if we can mix the percentage units with absolute units in CSS layout to specify sizes of elements. For example to specify 50% width plus an additional width of 10 or 20px. We can do it by using calc() property. Example: #calc{ width: calc(100% – 100px); width: -webkit-calc(100% – 100px); width: […]

The CSS3 there are properties that allows web developers to easily utilise rounder corners in their design elements, without the need for corner images. We often use to search for round corner images of Tables and Div for our Websites to make it look beautiful. So here is our search end.CSS has provide us some […]

Form validation is a common thing in web applications. First we concentrate on server side validations, next to increase user interactivity of application, we go for client side validations using javascript, jQuery, etc. Now HTML5 and CSS3 are gradually evolving. HTML5 offers new input types and attributes that makes validation much more easier using CSS3 […]

We generally have to show images of some specific dimensions in web pages but the images are not always available with those specific dimension. But if we specify height and width property of the image tag to control the dimension, then the image may get distorted, i.e, it may get squeezed(if larger sized image than […]

Problem: Scroll view achieved using CSS overflow scroll property for android & ios devices are never that smooth as they are in the native way. Solution: So, to achieve that smoothness, we need to use CSS positioning property as well as css3 -webkit-overflow-scrolling property. let’s see how we can achieve this. For iOs & Android […]

While working on the HTML designs, I came across some of the design issues that I would like to share them along with the solutions. Requirement #1: A scrollable view with fixed header and footer with 50px of height ( should work for multiple resolutions ). Basic Layout : <div class=”header”>Header</div> <div class=”content”> Content…. </div> […]

Concept: The basic concept behind this tip is to make a div of particular height and use an empty star image ( assume grey bordered star that will act as blank star ) which will be repeated in x-axis and look something like below Then we need to create another div inside it with same […]