Posts

Showing posts with the label CSS

Flip or Rotate Image using CSS

In this quick code you will learn how to flip or rotate image with transition effect using CSS. We will have opportunity to trigger the flip or rotate action on mouse hover or click, for this we will be using jQuery.

Create Expandable or Toggle Drop Down using jQuery

In this quick code you will learn how to create expandable or toggle drop down menu with little icon which shows menu is opened or not. Let's straight look at working example below.

CSS Based Multi-Branch Tree View Menu for Website

Recently I had a requirement to create a multi-branch tree view menu for website which should be completely CSS based and no single line of JS code.

What is LESS (style-sheet language)? Exploring LESS coding features inside Visual Studio - Web Essential?

Image
In this post we are going to talk about LESS and its introduction, coding, compilation and features available in Visual Studio Editor with Web Essential extension. Before talking about anything let’s understand what is LESS and how it can help developers.

Creating Image Sprite in Visual Studio - Web Essential

Image
In this article you will learn how to create image sprite using Visual Studio Web Essential Extension. Suppose you have a website that uses lots of images and each image loads individually which increases number of requests and makes website slow. We need quick website optimization to fix it.

Paste Image from clipboard onto Visual Studio Editor : Video - Web Essential

In this article you will learn how to paste clipboard image onto Visual Studio Editor. Like we can paste clipboard image in MS-Word, it is possible to paste in Visual Studio Editor with the help of Web Essential Visual Studio Extension.

Image Optimization in Website - Web Essential

Image
In this article you will learn about Image Optimization using Web Essential Visual Studio extension. You will learn how we can optimize individual image by right clicking on image file, how to optimize group of images in the folder, how to optimize image in CSS file and how to optimize Base64 Encode Image (dataUri) in CSS file.

Base64 Encode Image in Website - Web Essential

Image
In this article you will learn about Base64 Encode Image, why we encode image and how it can improve website performance. We are going to make use of Web Essential which is a must have Visual Studio extension.

Media Only Queries in CSS3 / @media only screen and (max-width: 900px) { attributes; }

Image
If you remember, CSS2 added support for the media="screen" way of defining which stylesheet to use for which representation of the data.

Now CSS3 added a new feature to this functionality, by adding media queries. Basically, this means you can change stylesheets or styles on the web page based on for instance the width and height of the viewport/browser.

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 35 best practices:

Bundling and Minification in Visual Studio 2012 or Migrate existing Website

Image
Bundling and minification are two new techniques introduced with ASP.NET 4.5 Beta to improve request load time.It improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).

Free E-book: Time-Saving VS11 and ASP.NET 4.5 Features You Shouldn’t Miss

Last weak, two Telerikers Joshua Holt and Carl Bergenhem introduced a very nice free e-book for developer community to get job done quickly with less code. Very nice book, read it once.

Getting started with jQuery UI

Image
In this post you will learn how to get started with jQuery UI. Believe me, jQuery UI is really very easy to learn and it provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library which you can use to build highly interactive web applications.

The whole jQuery UI categorized into three groups that is core, interactions, widgets and effects.
In this post I am going show you how to setup a demo page for jQuery UI. You just need to follow the steps given below.
Step 1 (Downloading UI Library)
At very first you need to download the jQuery UI library from here http://jqueryui.com/download. You might get confused on this download page because there is various checkboxes to select. Look if you want to download library that contains core elements of UI then deselect all components and select only UI Core there. Similarly, if you want library that contains interaction elements only then deselect …

Making Clone on Web Page using jQuery

Image
Introduction
This post shows how to make the clone of elements on web page using jQuery, for this we will use .clone() method.
Sometimes we want to copy (clone) elements on web page, for example, navigate menu can be placed on header and footer too and there may be many situations come to us where we need to clone. Why write something twice if we have opportunity to use jQuery.
So, let's create a demonstration page for this talk.
<body> <h2>History of Visual Studio</h2> <divclass="mainBody">         Visual Studio's history probably begins in <strongclass="year">1975</strong> with Bill and Paul's decision to create Altair BASIC.  Maybe you could start before that but I think that's as far back as you could go and still say it's about Visual Studio at all – it's at that time that Microsoft decided it was going to have software development products and not, say, toaster automation. </div> <p>         Some …

Moving Tags in DOM using jQuery

Image
Introduction
Download
I this quick post you will learn how to move any tag in DOM using jQuery. Firstly, I will show you a problem and then I will talk on its fixes. Here's a problem:
My friend has designed a web page that has following information inside <body> tag. He is actually novice in web.
<body> <divstyle="width: 500px; text-align: justify;"> <h2>History of Visual Studio</h2> <divclass="mainBodyInfos"> <divclass="CopyrightInfo">                 Copyright © 2009-2012 ITORIAN. All rights reserved. </div>             Visual Studio's history probably begins in 1975 with Bill and Paul's decision to create Altair BASIC.  Maybe you could start before that but I think that's as far back as you could go and still say it's about Visual Studio at all - it's at that time that Microsoft decided it was going to have software development products and not, say, toaster automation.             ….. <…

Inserting 'back to top' link dynamically using jQuery

Image
Introduction

Download


I have seen many articles/blogs etc. on web that has huge information on a single page; some of them already using this technique that I am going to talk.
Okay, for now look at the animated image given below.
Note: Image size is 1.4 MB, please wait to respond.



You can see, whenever I click on 'back to top' URL, page scrolls to top. At very first, you will think that I have inserted something like
<a id="top1"></a>
at the top and at the end of each <p> I have inserted URLs which is like <a href="#top1">back to top</a> to navigate to top. But you're wrong, this is not my technique. I have inserted these all dynamically, without looking the number of places to insert URL or how huge content do you have at the web page. You can use this feature anytime; all your earlier web page will start functioning. So, what's the magic behind.
Let's look at the jQuery codes
<scriptsrc="Scripts/jquery-1.4.1.js&q…

Popular posts from this blog

5 Ways to send data between ASP.NET Pages