Archive for the ‘javascript’ Category


Last week, I came across a requirement to create different sets of charts, which will act as a BI reports for the end user. But unfortunately client is not willing to go for a server side code. We were wondered whether it is viable to achieve that complex level charts & graphs. Then I got introduced to the fusion charts, and you don’t believe, the features it provides are awesome…

The plugins they provide just requires an XML input from where the graph values are plotted. And it automatically creates a graph for you. Simple or a complex graph/chart, you just need to create a XML that it requires. Remembering, I have spent hours on creating a simple reports in SSRS..

Writing a simple jquery code to get the data from SharePoint list & creating an XML out of it can be done in minutes. And along with that code, 3 to 4 lines of code to add the chart, I am done with an impressive chart. And don’t forget it’s too fast.

Not only supporting asp, it works with most of the web scripts like PHP, ASP, RoR, JSP etc. You can download the plugins & get more insights here http://www.fusioncharts.com/ .


The below code adds and displays a timer in your page. Just add this script to your content editor webpart. Time will be displayed in format MM:SS

To change the time set the variable start in seconds. In the two if loops, 1st one is used to display a message when a particular time is reached, 2nd is used to closed the window when the time is over. You can also add custom actions by validating the current time using the variable seconds.

<div id=”countdown”></div>
<div id=”notifier”></div>

<script type=”text/javascript”>

var start = 600;
Number.prototype.toMinutesAndSeconds = function()
{
    var nbr = Math.floor(this / 60);
    return (nbr+”:”)+(((nbr=(this-(nbr*60)))<10)?”0″+nbr:nbr);
}

function display(seconds, output)
{
    output.innerHTML = “<b><font size=’3′>Time left for you to submit the form </font></b><font size=’5′ color=’Green’>” + (–seconds).toMinutesAndSeconds()     + “</font>”;

    if(seconds > 0)
    {
            window.setTimeout(function(){display(seconds, output)}, 1000);
    }

    if(seconds < 121)
    {
            document.getElementById(“notifier”).innerHTML = “&nbsp;<font size=’2′ color=’Red’>Less than 2 minutes  available. Please submit the form.”;
    }

    if (seconds == 1)
    {
        window.alert(‘Sorry!! Time is over.’);
        window.open(”, ‘_self’, ”);
        window.close();
    }
}

display(start, document.getElementById(“countdown”));

</script>


Normally when we create a SharePoint List before adding any new item you will find a default text stating no item is there. For example in announcements list you may find


There are no items to show in this view of the “Announcements” list. To create a new item, click “New” above.

That’s great. But what if the user is not having permission to create a new item or if you have removed the toolbar of the web part. Or think you have displayed an Announcement web part in your home page, asking the visitor to create a new announcement.

To change this default text displayed use the script below

<script>
function ChangeNewMessage()
{

var a = document.getElementsByTagName(“TD”)
for (var i=0;i<a.length;i++)
{
if (a[i].className==”ms-vb”)
{
if (a[i].innerText.indexOf(“
There are no items to show in this view of the “Announcements” list. “)>-1)
{
a[i].innerHTML = “Coming Soon..”;
}
}
}
}

_spBodyOnLoadFunctionNames.push(“ChangeNewMessage”)
</script>


You just want to change the “There are no items to show in this view of ” text for different lists.



Sometimes we need to play a background sound on a page. It should automatically play when the page loads.

Here is the script for that and the PlayIt() method called onLoad of the page plays the audio file provided in the <param> tag in body of the HTML.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>
<meta http-equiv=”Content-Type”
content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
<style type=”text/css”>
<!–
body {
text-align:center;
}
form {
margin:0;
padding:0;
}
–>
</style>
<script type=”text/javascript”>
<!–
function PlayIt(){
document.getElementById(“music1″).innerHTML='<object id=”mediaPlayer” width=”270″ height=”45″ ‘
+’classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″ ‘
+’codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701&#8243; ‘
+’standby=”Loading Microsoft Windows Media Player components…” type=”application/x-oleobject”>’
+'<param name=”fileName” value=”‘+document.getElementById(‘cancion’).value+'”>’
+'<param name=”animationatStart” value=”true”>’
+'<param name=”transparentatStart” value=”true”>’
+'<param name=”autoStart” value=”true”>’
+'<param name=”showControls” value=”false”>’
+'<param name=”loop” value=”true”>’
+'<embed type=”application/x-mplayer2″ ‘
+’pluginspage=”http://microsoft.com/windows/mediaplayer/en/download/&#8221; ‘
+’bgcolor=”101010″ showcontrols=”false” width=”270″ height=”45″ ‘
+’src=”‘+document.getElementById(‘cancion’).value+'” autostart=”true” designtimesp=”5311″ loop=”true”>’
+'</embed>’
+'</object>’
}
//–>
</script>
</head>

<body onload=”document.forms[‘player’].reset()”>
<form name=”player” action=”PlayIt()” method=”” >
</form>
<span id=”music1″>
<object type=”application/x-mplayer2″ width=”300″ height=”45″ data=””>
<param name=”src” value=”http://onemahindra/sites/specials/X-Mas 2009/i/Shakin’ Stevens – Merry Christmas Everyone.mp3″>
<param name=”filename” value=”http://onemahindra/sites/specials/X-Mas 2009/i/Shakin’ Stevens – Merry Christmas Everyone.mp3″>
<param name=”type” value=”application/x-mplayer2″>
Your system does cannot find the windows media player that was specified.
</object>
</span>

</body>

</html>


  • Scrolling announcement web part which on click will take you to the given link.
  • Dynamic values and not static content.
  • Values are coming from the list with two different columns Title(Text to show) & Link (Link to redirect).
  • Uses JavaScript to scroll the content.

You can get the code here