38 jQuery And CSS Drop Down Multi Level Menu Solutions

the-c-tree.blogspot.comdbmsguide.blogspot.comvoiceoffaizan.blogspot.comadvertise here

Hello again, it’s time for the comprehensive programming article. Here you’ll find 38 mainly jQuery and CSS-based drop-down or just multi level menu tutorials with downloadable files and explanations as well. My favorite here is the first pick – Outside the box with a very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with a little touch of CSS.

---

the-c-tree.blogspot.com 

check out fine C# articles

---

But well, also be aware when each code has been created, has it got some updates through time? In our development niche standards, technologies change so quickly that sometimes when you decide to use specific menu, it’s very hard to implement it and at the end, you’ll even may need to rewrite the code just because of incompatibility. So be cautious!

Here you’ll find mainly free solutions, but I would also suggest for some special occasions, quick projects to consider some of design/code marketplaces, where you can buy optimized,documented and update codes for really cheap prizes. I can assure the quality is high,otherwise marketplaces won’t get so popular…and my experiences are only positive and I really am ready to spend 5-10 for important code snippet, saving probably hours of my time. I myself have tried CodeCanyon and Mojo-Themes marketplaces, I am sure there are many more out there, but these two are definitely the ones I recommend.

At least I am doing my designing process like this -

• 1st- I do simple browsing to find if there are appropriate codes, snippets,tools available for free (like this article for example).
• 2nd- If after like a 5-min browsing I cannot find anything what suits to me, here is time for those marketplaces where usually I always find something good, and I can move forward.

What’s your experiences?

And why you are figuring answers – enjoy this quality article!

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

Preview Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial, you will learn how to create a sexy drop down menu that can also degrade gracefully.

What are Javascript, AJAX, jQuery, AngularJS, and Node.js?

This post is addressed toward people who have little to no experience with JavaScript, Node.js, or their associated libraries, but are interested in learning what they are and aren’t.

Another student at Hacker School asked me to explain the difference between Javascript,AJAX, jQuery, AngularJS, and Node.js.

Let’s start with the basics:

JavaScript

JavaScript is a programming language designed for use in a web browser. (It’s no longer a “scripting” language, nor does it have anything to do with Oracle’s “Java”, so the name is a bit misleading.)

You can code in JavaScript – it’s a full-featured language which (with one notable exception) runs in a web browser like Chrome, Firefox, or Internet Explorer. It’s usual use is to manipulate a thing called the “Document Object Model”, essentially elements on a webpage.

JavaScript executes on the client side: A website server sends the javascript to a user’s browser, and that browser interprets and runs the code. This happens inside a “sandbox”, which keeps the javascript from touching the internals of the system, whichmost of the time keeps malicious code from messing up the user’s computer.

A simple JavaScript program is alert("hello world!");, which on an HTML page would probably be put inside a <script> tag to tell the user’s web browser to interpret the following as JavaScript, like: <script> alert("hello world!"); </script>. This code makes a small alert box pop up on the user’s browser. To see this code execute, click here.

So, to recap: JavaScript is a programming language that operates in the browser, inside a security “sandbox”. It allows manipulation of elements on a webpage.

7 jQuery Code Snippets every web developer must have

jQuery extensively simplified web developer's life and has become a leader in javascript available libraries. There are a lot of useful jQuery snippets available but here in this post I am going to share 7 basic and widely used code snippets that every front-end web developer must have. Even for those who are new to jQuery can easily understand and get benefit from these routinely used code snippets.

1. Print Page Option

Providing option to print a page is a common task for web developers. Following is the available code:

 Collapse | Copy Code

<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
           window.print();
           return false;
}); 
<!-- HTML: Print Page -->
<div>
   <a  class="printPage" href="#">Print</a>
</div>

2. Helping Input Field/Swap Input Field

In order to make an Input Text field helpful, we normally display some default text inside it (For Example "Company Name") and when user click on it, text disappears and user can enter the value for it. You can try it yourself by using the following code snippet.

 Collapse | Copy Code

<!-- jQuery: Helping Input Field -->
$('input[type=text]').focus(function(){    
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == title)
           {
               $this.val('');
           }
}).blur(function() {
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == '')
           {
               $this.val(title);
           }
});
<!-- HTML: Swap Input Field -->
<div>
       <input type="text" 
       name="searchCompanyName" 
       value="Company Name"
       title="Company Name" />
</div>

3. Select/Deselect All options

Selecting or Deselecting all available checkbox options using a link on HTML page is common task.

 Collapse | Copy Code

<!-- jQuery: Select/Deselect All -->
$('.SelectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);
return false; });
$('.DeselectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);
return false; });
<!-- HTML: Select/Deselect All -->
<div class="divAll">  <a href="#" class="SelectAll">Select All</a>&nbsp;  
<a href="#" class="DeselectAll">Deselect All</a>  <br />  \
<input type="checkbox" id="Lahore" /><label for="Lahore">Lahore</label>  
<input type="checkbox" id="Karachi" /><label for="Karachi">Karachi</label>  
<input type="checkbox" id="Islamabad" /><label for="Islamabad">Islamabad</label> </div>

4. Disabling Right Click

For web developers, its common to disable right click on certain pages so following code will do the job.

 Collapse | Copy Code

<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
       e.preventDefault();

   });

5. Identify which key is pressed.

Sometimes, we need to validate the input value on a textbox. For example, for "First Name" we might need to avoid numeric values. So, we need to identify which key is pressed and then perform the action accordingly.

 Collapse | Copy Code

<!-- jQuery: Which key is Pressed. -->
$('#txtFirstName').keypress(function(event){
     alert(event.keyCode);
  });
<!-- HTML: Which key is Pressed. -->
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

6. Validating an email.

Validating an email address is very common task on HTML form.

 Collapse | Copy Code

<!-- jQuery: Validating an email. -->
$('#txtEmail').blur(function(e) {
            var sEmail = $('#txtEmail').val();
            if ($.trim(sEmail).length == 0) {
                alert('Please enter valid email address');
                e.preventDefault();
            }        
            var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
                             {2,4}|[0-9]{1,3})(\]?)$/;        
            if (filter.test(sEmail)) {
                alert('Valid Email');
            }
            else {
                alert('Invalid Email');
                e.preventDefault();
            }
        });
<!-- HTML: Validating an email-->
<asp:TextBox id="txtEmail" runat="server" />

7. Limiting MaxLength for TextArea

Lastly, it usual to put a textarea on a form and validate maximum number of characters on it.

 Collapse | Copy Code

<!-- jQuery: Limiting MaLength for TextArea -->
   var MaxLength = 500;
       $('#txtDescription').keypress(function(e)
       {
          if ($(this).val().length >= MaxLength) {
          e.preventDefault();}
       });
<!-- HTML: Limiting MaLength for TextArea-->
<asp:TextBox ID="txtDescription" runat="server"
                         TextMode="MultiLine" Columns="50" Rows="5"></asp:TextBox>

This is my selection of jQuery code snippets but jQuery is a very powerful client-side framework and a lot more can be done using it.

By Imran Abdul Ghani, 4 Sep 2013 on code project

Making ASP.NET GridView Responsive With jQuery FooTable

As the current trend is to make website compatible with all platforms like desktop, tablet and mobile..etc, Responsive Design technique comes into the picture. Using it, the website adapts the layout to the environment that it is being viewed in. In this post, we will make ASP.NET gridview responsive using jQuery FooTable plugin. It hides certain columns of data at different resolutions based on data-* attributes and converts hidden data to expandable rows. First, I recommend to read this post to understand how it works.

ASP.net Chat App with SignalR (C#)

OverviewVideosProject WikiSamplesForumBooksOpen Source

This tutorial shows how to use SignalR to create a real-time chat application. You will add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

Overview

This tutorial introduces SignalR development by showing how to build a simple browser-based chat application. You will add the SignalR library to an empty ASP.NET web application, create a hub class for sending messages to clients, and create an HTML page that lets users send and receive chat messages. For a similar tutorial that shows how to create a chat application in MVC 4 using an MVC view, see Getting Started with SignalR and MVC 4.

SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. Examples include social applications, multiuser games, business collaboration, and news, weather, or financial update applications. These are often called real-time applications.

SignalR simplifies the process of building real-time applications. It includes an ASP.NET server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients. You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

The tutorial demonstrates the following SignalR development tasks:

• Adding the SignalR library to an ASP.NET web application.
• Creating a hub class to push content to clients.
• Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

The following screen shot shows the chat application running in a browser. Each new user can post comments and see comments added after the user joins the chat.

Sections:

• Set up the Project
• Run the Sample
• Examine the Code
• Next Steps

Set up the Project

This section shows how to create an empty ASP.NET web application, add SignalR, and create the chat application.

Prerequisites:

• Visual Studio 2010 SP1 or 2012. If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio 2012 Express Development Tool.
• Microsoft ASP.NET and Web Tools 2012.2. For Visual Studio 2012, this installer adds new ASP.NET features including SignalR templates to Visual Studio. For Visual Studio 2010 SP1, an installer is not available but you can complete the tutorial by installing the SignalR NuGet package as described in the setup steps.

The following steps use Visual Studio 2012 to create an ASP.NET Empty Web Application and add the SignalR library:

1. In Visual Studio create an ASP.NET Empty Web Application.
   
2. In Solution Explorer, right-click the project, select Add | New Item, and select the SignalR Hub Class item. Name the class ChatHub.cs and add it to the project. This step creates the ChatHub class and adds to the project a set of script files and assembly references that support SignalR.
   
   Note: You can also add SignalR to a project by opening the Tools | Library Package Manager | Package Manager Console and running a command: install-package Microsoft.AspNet.SignalR. If you use the console to add SignalR, create the SignalR hub class as a separate step after you add SignalR.
3. In Solution Explorer expand the Scripts node. Script libraries for jQuery and SignalR are visible in the project.
   
4. Replace the code in the new ChatHub class with the following code.

   using System;
   using System.Web;
   using Microsoft.AspNet.SignalR;
   
   namespace SignalRChat
   {
       public class ChatHub : Hub
       {
           public void Send(string name, string message)
           {
               // Call the broadcastMessage method to update clients.
               Clients.All.broadcastMessage(name, message);
           }
       }
   }

5. In Solution Explorer, right-click the project, then click Add | New Item. In the Add New Item dialog, selectGlobal Application Class and click Add.
   
6. Add the following using statements after the provided using statements in the Global.asax.cs class.

   using System.Web.Routing;
   using Microsoft.AspNet.SignalR;

7. Add the following line of code in the Application_Start method of the Global class to register the default route for SignalR hubs.

   // Register the default hubs route: ~/signalr/hubs
   RouteTable.Routes.MapHubs();

8. In Solution Explorer, right-click the project, then click Add | New Item. In the Add New Item dialog, select Html Page and click Add.
9. In Solution Explorer, right-click the HTML page you just created and click Set as Start Page.
10. Replace the default code in the HTML page with the following code.

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion">
            </ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="/Scripts/jquery-1.8.2.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <!--Add script to update the page and send messages.--> 
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub. 
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = function (name, message) {
                    // Html encode display name and message. 
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                // Set initial focus to message input box.  
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub. 
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment. 
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>

11. Save All for the project.

Run the Sample

1. Press F5 to run the project in debug mode. The HTML page loads in a browser instance and prompts for a user name.
   
2. Enter a user name.
3. Copy the URL from the address line of the browser and use it to open two more browser instances. In each browser instance, enter a unique user name.
4. In each browser instance, add a comment and click Send. The comments should display in all browser instances.
   Note: This simple chat application does not maintain the discussion context on the server. The hub broadcasts comments to all current users. Users who join the chat later will see messages added from the time they join.
   The following screen shot shows the chat application running in three browser instances, all of which are updated when one instance sends a message:
   
5. In Solution Explorer, inspect the Script Documents node for the running application. There is a script file named hubs that the SignalR library dynamically generates at runtime. This file manages the communication between jQuery script and server-side code.
   

Examine the Code

The SignalR chat application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and receive messages.

SignalR Hubs

In the code sample the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Deriving from theHub class is a useful way to build a SignalR application. You can create public methods on your hub class and then access those methods by calling them from jQuery scripts in a web page.

In the chat code, clients call the ChatHub.Send method to send a new message. The hub in turn sends the message to all clients by calling Clients.All.broadcastMessage.

The Send method demonstrates several hub concepts :

• Declare public methods on a hub so that clients can call them.
• Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to access all clients connected to this hub.
• Call a jQuery function on the client (such as the broadcastMessage function) to update clients.

  public class ChatHub : Hub
  {
      public void Send(string name, string message)
      {
          // Call the broadcastMessage method to update clients.
          Clients.All.broadcastMessage(name, message);
      }
  }

SignalR and jQuery

The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. The essential tasks in the code are declaring a proxy to reference the hub, declaring a function that the server can call to push content to clients, and starting a connection to send messages to the hub.

The following code declares a proxy for a hub.

var chat = $.connection.chatHub; 

Note: In jQuery the reference to the server class and its members is in camel case. The code sample references the C# ChatHub class in jQuery as chatHub.

The following code is how you create a callback function in the script. The hub class on the server calls this function to push content updates to each client. The two lines that HTML encode the content before displaying it are optional and show a simple way to prevent script injection.

    chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    }; 

The following code shows how to open a connection with the hub. The code starts the connection and then passes it a function to handle the click event on the Send button in the HTML page.

Note: This approach insures that the connection is established before the event handler executes.

    $.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

Next Steps

You learned that SignalR is a framework for building real-time web applications. You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to create a hub class, and how to send and receive messages from the hub.

You can make the sample application in this tutorial or other SignalR applications available over the Internet by deploying them to a hosting provider. Microsoft offers free web hosting for up to 10 web sites in a free Windows Azure trial account. For a walkthrough on how to deploy the sample SignalR application, see Publish the SignalR Getting Started Sample as a Windows Azure Web Site. For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Deploying an ASP.NET Application to a Windows Azure Web Site. (Note: The WebSocket transport is not currently supported for Windows Azure Web Sites. When WebSocket transport is not available, SignalR uses the other available transports as described in the Transports section of theIntroduction to SignalR topic.)

To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources:

• SignalR Project
• SignalR Github and Samples
• SignalR Wiki

By Tim Teebken|February 18, 2013 asp.net