Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Monday, March 19, 2012

Expand the multiselect box in SharePoint

To make the multselect boxes larger, put the following code in a 'content editor web part' and set it to hidden.  Adjust to your own needs.


//**********************************************************************
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
            $(document).ready(function() {                
                        $('.ms-long select').parent('div').css('width', '320');
                        $('.ms-long select').css('font-size', 'xx-small');
                        $('.ms-long select').css('width', '100%');
            });        
</script>
//**********************************************************************


Monday, October 17, 2011

SharePoint 2010 branding: left nav accordion, highlight location

Collapse/expandable left nav:
$(document).ready(function() {
 $("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #eaeaea");

 $("div.s4-ql div.menu-vertical > ul.root > li.static >a").each(function()
   {    
    // Does this have children UL elements
     if($(this).parent().children("ul").size() > 0){

   //initial load hide
   $(">ul", $(this).parent()).hide();
    $($(this).parent()).addClass("cssClosed");
  
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().parent().addClass("cssOpen");
  
    //add toggle
    $(this).toggle(function() {
    $(">ul", $(this).parent()).show("slow");
    $($(this).parent()).removeClass("cssClosed");
    $($(this).parent()).addClass("cssOpen");

     },
     function() {
    $(">ul", $(this).parent()).hide("slow");
    $($(this).parent()).removeClass("cssOpen");
    $($(this).parent()).addClass("cssClosed");
     }
   );
        
  }      
  });

});

The css:
.cssClosed {
 background:url('/_layouts/images/Menu-right.gif') no-repeat 160px 7px;
}
.cssOpen{
 background:url('/_layouts/images/Menu2.gif') no-repeat 150px 7px;
}

The result (closed):




The result (opened):


Result selected: