" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi

API to Include Javascript/Css files for an usercontrol in DotNetNuke

Posted on November 24th, 2015 by Damodaranaidu Betha

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 […]

Resolving Background Scrolling Issue Of Modal Popup Vew In Mobile Devices

Posted on November 23rd, 2015 by Ashis Kumar

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 […]

Few Tips on Javascript

Posted on November 23rd, 2015 by Abhay Raut

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” […]

A slider control with Javascript and CSS to Resize Image

Posted on November 23rd, 2015 by Abinash Grahacharya

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 […]

Make your website faster: Adding Javascript and CSS files at run time

Posted on November 23rd, 2015 by Abinash Grahacharya

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 […]

Resolving Cross Browser CSS Issue By The Use Of CSS Reset

Posted on November 23rd, 2015 by Tapan Pati

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 In Web Development

Posted on November 23rd, 2015 by Shweta Chottray

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 […]

Preloading images for better user experience

Posted on November 23rd, 2015 by Sourabha Sahoo

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 […]

Make a control non-printable using CSS

Posted on November 23rd, 2015 by Santosh Bisoyi

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 […]

How to merge CSS files in ASP.NET

Posted on November 23rd, 2015 by Devi Das

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 […]

Please Wait Message/ Image While Loading A Crystal Report

Posted on November 23rd, 2015 by Ashish Kumar

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 […]

Using Conditional Statement in CSS Statement or Block For Cross Browser Compatibility

Posted on November 23rd, 2015 by Jeetendra Dhal

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 […]

How to create rounded div in CSS by using a single image

Posted on November 23rd, 2015 by Abinash Grahacharya

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 […]

Applying shadow effect in CSS without using image

Posted on November 23rd, 2015 by Abinash Grahacharya

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 […]

Applying multiple styles HTML elements and significance of “!important ” attribute in forcing styles

Posted on November 23rd, 2015 by Sumit Dhal

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 […]

CSS hack for Safari Browser

Posted on November 23rd, 2015 by Chittaranjan Pattnaik

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 […]

Exception while Using Themed CSS

Posted on November 23rd, 2015 by Monalisa Brahma

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

Posted on November 23rd, 2015 by Anita Bhanja

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 […]

Round your corners without using images in IE

Posted on November 23rd, 2015 by Sachin Kumar

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 […]

CSS Hack: Using images with space character in file name

Posted on November 23rd, 2015 by Aditya Acharya

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 […]

How to rotate text using CSS properties

Posted on November 23rd, 2015 by Devi Das

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 […]

Rotate image using CSS

Posted on November 23rd, 2015 by Sachin Kumar

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 […]

CSS Tip : Changing Selected Text Color?

Posted on November 23rd, 2015 by Devi Das

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 […]

Creating CSS Gradient

Posted on November 23rd, 2015 by Tushar Mishra

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. […]

How to flip an image using CSS?

Posted on November 23rd, 2015 by Devi Das

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 […]

Can Css3 Transition replace jQuery animation?

Posted on November 23rd, 2015 by Subodh Mishra

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 […]

CSS: Combine multiple images into a Sprite to load pages faster

Posted on November 23rd, 2015 by Chittaranjan Nahak

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 […]

Can Css3 Transition replace jQuery animation? Part 2

Posted on November 23rd, 2015 by Subodh Mishra

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 […]

Override default style of textarea in Google Chrome

Posted on November 23rd, 2015 by Devi Das

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 […]

Find out if you browser supports HTML5 or not

Posted on November 23rd, 2015 by Manoranjan Mohapatra

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 […]

How to add shadow effect using CSS.

Posted on November 23rd, 2015 by Kartikeya Madeshia

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 […]

Create 3-dimensional cube using CSS properties only

Posted on November 23rd, 2015 by Kartikeya Madeshia

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 […]

Difference between border and outline property in CSS

Posted on November 23rd, 2015 by Devi Das

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: […]

Applying stroke effect to text using CSS

Posted on November 23rd, 2015 by Manoranjan Mohapatra

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

Posted on November 23rd, 2015 by Amrita Sahoo

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 : […]

Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Posted on November 23rd, 2015 by Sudhir Tiwari

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 […]

Use an image in your website without linking it to source

Posted on November 23rd, 2015 by Devi Das

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 […]

How to use CSS Sprite in your webpage

Posted on November 23rd, 2015 by Devi Das

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 […]

A Solution To Rounded Corner Issue In IE

Posted on November 23rd, 2015 by SANDEEP PRADHAN

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‘. […]

How To Add Animation Effects Using CSS

Posted on November 23rd, 2015 by Prachi Mishra

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 […]

Hide disabled button while printing.

Posted on November 23rd, 2015 by Narendra Mallik

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 […]

Mixing Percentages With Absolute Units In CSS

Posted on November 23rd, 2015 by Sourabha Sahoo

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: […]

Create rounded corners in DIV with CSS

Posted on November 23rd, 2015 by UPASANA DAS

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 […]

Client side form validation using CSS3 pseudo-classes

Posted on November 23rd, 2015 by Chinmoy Dey

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 […]

How to maintain image aspect ratio/dimension in CSS?

Posted on November 23rd, 2015 by Dipak Panda

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 […]

Making A Smooth Scroll View For Android & iOS in HTML

Posted on November 23rd, 2015 by Ashis Kumar

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 […]

Simple Way To Set The Height/Width Dynamically Using CSS

Posted on November 23rd, 2015 by Ashis Kumar

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> […]

Simple Concept to Design Rating in HTML & CSS

Posted on November 23rd, 2015 by Ashis Kumar

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 […]