JQuery: advantages and disadvantages

JQuery has been a blessing for several web developers, experienced and newbie alike. It is a library for Javascript that immensely simplifies programming with javascript providing very easy to use, condensed syntax to achieve even apparently complex tasks with Javascript. The use of JQuery has several benefits over using other javascript libraries or the raw javascript itself but it does have a few negative points that you might want to consider if you plan on developing a website with JQuery as well.

Advantages

• Ease of use
  This is pretty much the main advantage of using JQuery, it is a lot more easy to use compared to standard javascript and other javascript libraries. Apart from simple syntax, it also requires much less lines of code to achieve the same feature in comparison.


• Large library
  JQuery enables you to perform hordes of functions in comparison to other Javascript libraries.


• Strong opensource community. (Several jQuery plugins available)
  JQuery, while relatively new, has a following that religiously devote their time to develop and enhance the functionality of JQuery. Thus there are hundreds of prewritten plugins available for download to instantly speed up your development process. Another advantage behind this is the efficiency and security of the script.


• Great documentation and tutorials
  The JQuery website has a comprehensive documentation and tutorials to get even an absolute beginner in programming to get the ball rolling with this library.


• Ajax support
  JQuery lets you develop Ajax templates with ease, Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded.

Disadvantages

• Functionality maybe limited
  While JQuery has an impressive library in terms of quantity, depending on how much customization you require on your website, functionality maybe limited thus using raw javascript maybe inevitable in some cases.


• JQuery javascript file required
  The JQuery javascript file is required to run JQuery commands, while the size of this file is relatively small (25-100KB depending on server), it is still a strain on the client computer and maybe your web server as well if you intend to host the JQuery script on your own web server.

Well, as you can see the advantages heavily outweigh the negative effects of using JQuery so it is without a doubt a winner if you are looking to develop an interface using javascript commands.

Customizing the global navigation with Css and jQuery in SharePoint 2010

The global navigation in SharePoint is an important factor for the SharePoint site, this navigation are there to help orient users so they easily can move around the site. So when it comes to branding and customizing a SharePoint site it´s one of the key factors. When you branding the global navigation don´t forget to think simple but attractive, users may use the site navigation more than they use the search to find information.

In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.

Global navigation

▶

An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.

The options we have depend of the needs, but also the approach you choose depends if we talking about a public faced web site or an Intranet.

• Use the OTB control with changed settings


• Extend the OTB menu control with custom Css 2.1 or 3.0


• Extend the OTB menu control and hook it up with custom jQuery


• Extend the OTB menu control with a custom site map provider


• Code a new navigation control, and use a technique like Silverlight


• Use a complete stand-alone navigation with jQuery that isn’t connected to SharePoint

There is a lot to think about when it comes to customization of the SharePoint global navigation so therefore I´ll split this article in the minimum of three articles. So here´s the plan:

1. Introduction and How to customize the global navigation with CSS 2.1 and 3.0 (this post)


2. How to customize the global navigation with custom CSS and how to use jQuery to work with feeling of the navigation, like animating a menu. Go there


3. Tips and tricks about navigation settings, how to use different site map providers & multiple navigation providers, branding dropdown menus and more.

Below is a bunch of examples for customized navigation menus I have created specific for the article series. Of course, no guaranties for real cross browser CSS; these examples are mostly verified in IE 8 and Firefox 3.6.12, GC and Safari.







Open up your SharePoint top site with your favorite tool SharePoint Designer 2010 and create a CSS file and put in a reference to this in a your (custom) master page. Put in the following line just below SharePoint:CSSlink tag in the master page.

<SharePoint:CssRegistration name="/Style Library/Blog/Blue.css" runat="server" After="corev4.css"/>

First off, a clean blue navigation with a smooth gradient background color. It has four properties for the background selectors and that´s because this is for various browsers. There are also a couple of extra classes below ‘Other stuff’ that you don´t need specific for the navigation. You can take those away if you prefer.



/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #167FB3 solid;
background-image:none;
}
.menu-horizontal ul li{
color:#fff!important;
min-height:31px;
line-height:30px;
border:0px;
padding:0px;
margin:0px;
border-left:1px #167FB3 solid;
}
.menu-horizontal ul li a{
color:#fff!important;
font-weight:bold;
border:0px!important;
padding:0px!important;
margin:0px;
height:31px!important;
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
padding-right:20px!important;
padding-left:20px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
/*if use 333 the DD color will not work*/
color:#333!important;
background-color:#036ba8; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#036ba8), to(#4fb3d3));
background: -moz-linear-gradient(top, #036ba8, #4fb3d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3)";
height:31px!important;
border:0px;
padding:0px;
margin:0px;
}
.s4-toplinks .s4-tn > .menu-horizontal a.selected {
color: #fff!important;
background-color:#4fb3d3; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#4fb3d3), to(#036ba8));
background: -moz-linear-gradient(top, #4fb3d3, #036ba8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036ba8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036caa)";
line-height:30px;
height:31px;
border:0px;
padding:0px;
margin:0px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none!important;
}
.s4-tn ul.dynamic {
background-image:none!important;
border:1px solid #f7f7f7;
border-top:0px;
border-bottom:1px solid #ccc;
margin:0px;
padding:0px;
}
.s4-tn li.dynamic {
background-image:none!important;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:0px solid #ccc;
border-left:1px solid #ccc;
}
.s4-tn li.dynamic > .menu-item {
display:block;
padding-left:19px!important;
white-space:nowrap;
font-weight:normal;
background-color:#ffffff!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7))!important;
background: -moz-linear-gradient(top, #ffffff, #f7f7f7)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)"!important;
color:#333!important;
}
.s4-tn li.dynamic > a:hover {
background-color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff))!important;
background: -moz-linear-gradient(top, #ffffff, #ffffff)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)"!important;
color: green!important;
}
/*----- Some other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:0px;
background-color:#f7f7f7!important
}
.s4-title{
min-height:70px;
padding:0px;
}
.s4-titlelogo{
padding-left:10px
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:3px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background-color:#a0d9e6; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#f7f7f7));
background: -moz-linear-gradient(top, #a0d9e6, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}

Next: A tabbed navigation with use of three images. In the next post I will show you have to interact with the tabs to make them jump on hover.
Want to try the tabbed navigation?



/*---| By @Cstahl 2010 |---*/
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
}
.menu-horizontal ul li a{
width:105px;
background-image:url('/Style Library/Blog/Images/tab.png');
background-position: 0 0;
background-repeat:no-repeat;
padding:0;
cursor:pointer;
color:#0a7285;
text-decoration:none;
}
.menu-horizontal ul li.active{
width:105px;
height:18px;
margin:0;
}
.menu-horizontal ul li.active a{
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
color:#0a7285;
width:105px;
height:18px;
padding-top:8px;
}
.menu-horizontal ul li a:hover{
background-image:url('/Style%20Library/Blog/Images/TabActiveHover.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:105px;
}
.s4-toplinks .s4-tn a.selected{
border-style: none;
border-color: inherit;
border-width: 0px;
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
background-color: transparent;
width:118px;
height:16px;
color:#333;
margin-top:1px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
}
.s4-tn ul.dynamic{
background-color:#f7f7f7!important;
border:1px solid #ccc;
border-top:0px;
margin-left:2px;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:5px 10px;
white-space:nowrap;
font-weight:normal;
background-image:none;
text-align:left
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
background-color:#9FD8E6;
background-image:none;
}
/*----- Other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:6px;
background-color:#f7f7f7!important
}
.s4-titlelogo{
padding-left:10px
}
.s4-title{
padding-left:0px;
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:2px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0));
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:100px;
}
.s4-lp, body #s4-topheader2{
background-color:#7ec1d0;
margin-left:0px;
border-top:0px;
border-bottom:0px;
}