Tuesday, July 17, 2012

Adding Bullets in left navigation Sharepoint 2010

$(function(){ $('').insertBefore('.s4-ql ul.root > li > .menu-item .additional-background .menu-item-text') $('#s4-statusbarcontainer').css("display","none"); $("#layoutsTable").removeAttr("style"); $('.s4-ql ul.root > li > .menu-item .additional-background ').removeClass(); $('').insertBefore('.s4-ql ul.root > li li> .menu-item .additional-background .menu-item-text') $('.s4-ql ul.root > li li> .menu-item .additional-background').removeClass(); });

jquery Accordian in sharepoint 2010 using Default left navigation

Solution:
Here we go...........


jQuery(document).ready(function ($) {
    //Mark as hidden
    $('.s4-ql ul.root > li > a.menu-item').attr('data-hide', '1');
    $('.s4-ql ul.root > li > span.menu-item').attr('data-hide', '1');
    //Hide the children
    $('.s4-ql ul.root ul').hide();
    var url = window.location.toString().toLowerCase();
    $('.s4-ql ul.root > li > a.menu-item, .s4-ql ul.root > li > span.menu-item').each(function (index) {
        var $this = $(this);
        var thisURL = $this.attr('href');
        if(thisURL)
         thisURL = thisURL.toLowerCase();
       
        var menuExpanded = 0;
        if (url.indexOf(thisURL) != -1) {
            showChildren($this);
            menuExpanded = 1;
        }
        if (menuExpanded == 0) {
            $this.next().find('li > a').each(function (j) {
                var childURL = $(this).attr('href');
               
                if(childURL)
                 childURL = childURL.toLowerCase();
               
                if (url.indexOf(childURL) != -1) {
                    showChildren($this);
                    menuExpanded = 1;
                }
            });
        }
    });
    function showChildren($this) {
        $this.next().show();
        $this.attr('data-hide', '0');
        $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
    }

    //Show/Hide when the heading is clicked.
    $('.s4-ql ul.root > li > span.menu-item').bind('click', function (e) {
        var $this = $(this);
        toggleChildrenElems($this);
        e.preventDefault();
    });
    function toggleChildrenElems($this) {
        if ($this.attr('data-hide') == '1') {
            $this.next().show("slow");
            $this.attr('data-hide', '0');
            $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
        }
        else {
            $this.next().hide("slow");
            $this.attr('data-hide', '1');
            $this.attr('style', "background:url('/Style Library/Images/image/ul-li.png') repeat;");
        }
    }
    //Disable the webpart header link
    $('.ms-WPHeaderTd .ms-standardheader a').bind('click', function (e) {
        e.preventDefault();
    });
    if ($.browser.msie) {
        var version = parseInt($.browser.version);
        if (version == 7) {
            $('ul#custom-top-nav > li.first_level').bind('mouseover', function (e) {
                var $this = $(this);
                var width = $this.width() + 5;
                var marginStyle = 'margin-left: -' + width + 'px;';
                var $thisDiv = $(this).find("div#top-nav-children");
                $thisDiv.attr("style", marginStyle);
            });
        }
    }
});

CSS3 - PIE.htc and SharePoint 2010

Solution
Step1:
Open the Folder location
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\projectName
Step2:
Paste border-radius.htc
Step3:
Add url in css in my case i used
.middlePic  img
{
width:99%;
height:286px;
border-radius:20px;
border:2px solid #bebebe;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
-ms-transition:all 0.9s ease-in-out;
 behavior: url(/_LAYOUTS/project/border-radius.htc);
 }
Step4:
Congrates..