Creating your own customizable tabs / carousel plugin for jQuery

Yesterday I was browsing the web for a tabs or carousel plugin for jQuery that fitted my needs. I wanted a simple but highly customizable control for displaying tabs which could also automatically page like a carousel. I found a lot of different plugins for JQuery but none fitted my exact needs. So I created my own in only 17 lines of javascript. this blog post describes how I did it and how you can use it on your website.

 

first of all of course is a demo. You can can check it here: http://www.vdcruijsen.net/demo/jquerycarousel/carouseldemo.html

so how does this work? We’ll start with the HTML used for the carousel:

<div id="carousel">

    <div class="carouselbody">

        <ul class="carouselcontainer">

            <li class="page"><div style="width:400px; height:300px; background-color:Green">test tab 1</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Red">test tab 2</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Orange">test tab 3</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Blue">test tab 4</div></li>

        </ul>

    </div>

    <ul class="pager">

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

    </ul>

</div>

The HTML is actually pretty easy, The first div is a container with an id called carousel so the script knows what belongs to the carousel and what not. you can set a height and width on this div to size your carousel. The carousel div contains 2 main parts. the carouselbody a container for all the carousel pages and the pager where you can define your pager links. this pager can also be put before the carouselbody if you want the pager or tabs above your pages.

The carouselbody has a unordered list containing all the actual pages. all the list items are shown have a css class called page so the script knows that inside is the content for a page. in the list item I’ve put some div with inline styling to show that you can put whatever you want inside this page list item.

the pager has links which have a pagerpage class. the script will automatically match the first available pagerpage link to the first page etc.

Below is the css I used in the demo. you can customize this to set pictures for the paging mechanism or set heights, colors etc. this current css is just an example. (some display elements are needed though, its best to start of with the supplied css and change it to your likings.)

#carousel { height: 400px; overflow:hidden; }

#carousel .carouselbody { float: left; width: 400px; height: 360px; overflow: hidden; position: relative; background-color:#212020;}

#carousel .carouselcontainer { list-style: none; padding: 0px; margin: 0px;  position: absolute; left: 0; top: 0; }

#carousel .carouselcontainer li{ float: left; margin: 0px ; border-width: 0px;}

 

#carousel .pager { overflow:hidden; list-style: none; clear: both; }

#carousel .pager li { float: left; }

 

#carousel .page

{

    display:none;

}

 

#carousel .currentpage

{

    display:block;

}

 

#carousel .pagerpage

{

    margin-left:2px;

    background-image:url('/Content/images/pager2.png');

    width: 20px;

    height: 20px;

    display:block;

    text-decoration:none;

}

#carousel .currentpagerpage

{

    background-image:url('/Content/images/pager.png');

    text-decoration:none;

}

 

So now the HTML and CSS is explained its on to the actual jQuery script which makes all this magic happen. You only need 1 line to change a div to a working carousel if you also include the other script pieces somewhere on the page. the line to add in your script that is executed on document.ready is the following:

$("#carousel").carousel();

 

this method will of course only work if the carousel method is available. This is added through the following code:

$.fn.carousel = function (options) {

    var defaults = {

        start: 0

    };

    var options = $.extend(defaults, options);

 

    $(this).find(".page:eq(" + (options.start) + ")").addClass("currentpage");

    $(this).find(".pagerpage:eq(" + (options.start) + ")").addClass("currentpagerpage");

 

    $(this).find(".pagerpage").bind("click", function () {

        $(this).parents(".pager").find(".currentpagerpage").removeClass("currentpagerpage");

        $(this).parents("#carousel").find(".currentpage").removeClass("currentpage");

        $(this).addClass("currentpagerpage");

        var index = $(this).parent().index();

        $(this).parents("#carousel").find(".page:nth-child(" + (index + 1) + ")").addClass("currentpage");

    });

};

 

the $.fn.carousel line makes the carousel method available in the rest of your jQuery code. I’ve added some options as an example to make the carousel start at a different page.

the first thing the script does is searching for the page on which it should start and adds the currentpage css class to this page so the page becomes visible. The script does the same for the active pager item.

after this the script binds click events to the pager links so the pager links can do their work when they are clicked. on each click event the current page is made invisible by removing the currentpage css class and after it puts the current page css class on the newly selected page.. that’s all :)

 

Hopefully this code is something you can use on your own website or otherwise learn from it or use pieces of it.

 

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

SharePoint Automatic prefilling of lookup fields in insert forms using JQuery

At my last project I was working on a SharePoint online solution and one of the requirements is to prefill some values at one of the insert forms for a list. Since this is SharePoint online and the only tool you can use to customize is SharePoint Designer I had to do this with JavaScript.

I’ll explain how to build it by an example. for example you have a list of customers and a list of customer actions. What I wanted to build was a way to make it easier to add a customer action for a specific customer. To do this I added a custom column to the customer list containing a link to the edit form with the customer id as an url variable. Of course the out of the box you can’t create links or any other html with calculated fields so I added more javascript there.

to enable html as output of a calculated field just copy this piece of javascript and put it in a content editor webpart or paste it on your master page.

var theTDs = document.getElementsByTagName("TD"); 

var i=0; 

var TDContent = " "; 

while (i < theTDs.length)

{ 

  try

  { 

    TDContent = theTDs[i].innerText || theTDs[i].textContent; 

    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0))

    { 

      theTDs[i].innerHTML = TDContent; 

    } 

  } 

  catch(err){} 

  i=i+1; 

} 

Thanks Marijn Somers for this piece of code. original source: http://marijnsomers.blogspot.com/2010/01/write-html-code-in-sharepoint-via.html

so now my calculated field was a link in html. what did my calculated field look like?

="<DIV><a href=’../../Lists/CustomerActions/NewForm.aspx?Customer="&[Customer ID]&"’>Add Customer Action</a></DIV>"

First a DIV element since the javascript above only replaces elements starting with a <DIV> to html, then just a plain html link to the NewForm.aspx sending the customer id as an url parameter.

 

So now the changes in the customer list are done and we only need to add some more javascript at the NewForm.aspx or again just at your masterpage to get the parameter from the url and selecting the right lookup field value at the form.

I’ve created the following code  using Jquery:

var customer = $.getUrlVar("Customer");

 

if(customer != "")

{

  $("input[title='Customer']").val(customer);

  

  $("select[title='Customer']").children("option").each(function() {

    if($(this).text() == customer)

    {

      $(this).attr('selected', 'selected'); 

    }

  });

}

My customer actions list contained a Customer field which is a lookup to the Customer list by Customer ID. The script above gets the Customer ID from the url parameters first and then tries to set the lookup item. SharePoint renders lookup items in 2 different ways. as a select box when there are less then +/- 25 items and as a auto complete textbox when there are more then 25 items in the lookup list. Because of that I firs try to set the textbox to the right value and after that the select. I’m using the title attribute to locate the right input field because it gets the same name as the field from SharePoint by itself.

Now when I open the newform.aspx?customer=1234 my customer lookup field is automatically prefilled with 1234

 

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter