Ask your technical questions on forums or here :
ASP.NET or MVC | C# | Windows Phone
Microsoft Technology Journals by Abhimanyu K Vatsa
HOME ABOUT RAZOR BOOK SPEAKING MVC ASP.NET JQUERY VIDEOS EBOOK ARCHIVE
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

15 Apr 2015

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.

14 Apr 2015

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.

24 Mar 2015

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.

18 Feb 2014

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

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.

12 Feb 2014

Creating Image Sprite in Visual Studio - Web Essential

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.

9 Feb 2014

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.

8 Feb 2014

Image Optimization in Website - Web Essential

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

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.

11 Sep 2012

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

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.

5 Aug 2012

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:

3 Aug 2012

Bundling and Minification in Visual Studio 2012 or Migrate existing Website

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).

9 Jul 2012

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.

5 Jun 2012

Getting started with jQuery UI

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 all components and select only Interaction checkboxes there. That’s it.

One more important option you will find on download page that is “Theme”. No worries, you can create your own theme from here http://jqueryui.com/themeroller/ and then download the produced library or select the theme from dropdown menu (on download page). If you are here at very first time, keep the setting default and then download the jQuery UI Library.

When you download, you will get a zip file by name jquery-ui-1.8.20.custom.zip. File name of download depends on the version and the current version is 1.8.20 and on theme that is custom.

Step 2 (Library Installation)

Now you have the jQuery UI library, you need to install it in your project on the root or inside any folder. Find the screen:


If you done with the installation open your web page and in the <head> write following library reference.

    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>

Total three references, first one is for style, second one is for normal jQuery library and last one is for jQuery UI library.

Step 3 (Page Setup)

Once you done with library file installation go ahead and create the sample webpage that will contain a textbox in <body> and a method call from <head>. Here is the code.

In the <head>:

          <script type="text/javascript">
              $(function () {
                  $('#dialogMsg').dialog();
              });
          </script>

In the <body>:

<body>
    <form id="form1" runat="server">
        <div id="dialogMsg" title="I'm Title of dialog">
            Hello I'm dialog body.
        </div>
    </form>
</body>

If you done with above; open the page in browser and see it in action.

Here is the screen:


Complete Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  $('#dialogMsg').dialog();
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="dialogMsg" title="I'm Title of dialog">
            Hello I'm dialog body.
        </div>
    </form>
</body>
</html>

If you want to learn more, visit here http://jqueryui.com/. I hope you like it. Thanks.

24 May 2012

Making Clone on Web Page using jQuery


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>
    <div class="mainBody">
        Visual Studio's history probably begins in <strong class="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 informations.
    </p>
    <p>
        Some more informations.
    </p>
</body>

Let's assume; we want to copy the 'mainBody' <div> and place it after first <p>. To do this we will use following jQuery:

$('div.mainBody').clone().insertAfter('p:eq(0)');

Above jQuery, making the clone of <div> that has class 'mainBody' and inserting this new clone after first <p>, in DOM 0 refers the very first <p>, 1 refers the second <p> and so on.

Output in Browser:


Take one more assumption; what if we want to apply different style to cloned copy?

Now, to do this we need to create a style class.

    <style type="text/css">
        .cloneStyle {
            background: #ead3d3;
            font: italic 1.4em "Times New Roman", Times, serif;
        }
    </style>

So, we have a style now; let's add it to cloned copy.

$('div.mainBody').clone().insertAfter('p:eq(0)').addClass('cloneStyle');

Nothing new here, just added one more attribute .addClass('cloneStyle') to existing jQuery above.

Now, look at the output in browser:



So, that's all about the making clone on web page. You can dive deep in this topic to achieve some more functionality.

Moving Tags in DOM using jQuery


Introduction


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>
    <div style="width: 500px; text-align: justify;">
        <h2>History of Visual Studio</h2>
        <div class="mainBodyInfos">
            <div class="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.
            …..
        </div>
        <div id="footerInfos">
            Footer Informations.
        </div>
    </div>
</body>

Can you see any mistake above? If not, let me tell you, by mistake he placed copyright information at wrong location that is inside <div> having class "mainBodyInfos". Means <div> that has class "CopyrightInfo" should be after <div> that has id "footerInfos". Look at the screen:


Above image shows the actual location of copyright information.
Here, jQuery come for rescue. Let's look at jQuery code:


Just a single line of jQuery code (given below) can rescue this.

$('div.CopyrightInfo').insertAfter('#footerInfos');

Using above, I am searching for "CopyrightInfo" <div> class and inserting it after a <div> that has id "footerInfos".

If you want to dive-in for some more learning on this topic, you can try following alternatives yourself.

.insertBefore() or .prependTo() and .appendTo()

I have also attached my sample project above, download and test it.

Inserting 'back to top' link dynamically using jQuery

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

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('<a href="#top">back to top</a>').insertAfter('div.myPageData  p');
            $('<a id="top"></a>');
        });
    </script>

In above jQuery code, first line has a URL <a href="#top">back to top</a> and it will be inserted after each paragraph <p> inside a <div> that has class "myPageData". And in the second line, inserted a URL and it will take place at the top in the web page body automatically, no need to supply insertAfter() or insertBefore() method for this.

ASPX Code

(Note: Place sufficient text inside each paragraph to see actual navigation, I just have erased and placed dots)

<body>
    <div class="myPageData" style="width: 500px; text-align: justify;">
        <h2>History of Visual Studio</h2>
        <p>
            Visual Studio's history...
        </p>
        <p>
            Those of us that really...
        </p>
        <p>
            It's 1988 and I landed at...
        </p>
        <p>
            So the C product was...
        </p>
        <p>
            Anyway the programming...
        </p>
        <p>
            Debugging used even more...
        </p>
    </div>
</body>

So, the concept is very basic but it is useful.