Sharepoint: JavaScript

Showing posts with label JavaScript. Show all posts

Wednesday, July 22, 2015

JavaScript and Cookie

JavaScript and Cookie
First we will see “how we can read cookie with JavaScript code?”
For that I have created one JavaScript function that will take one argument (name of cookie’s variable)

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Now in below code I will try to show how we can create cookies using JavaScript

function cookieCheck(){
var interval;
if(readCookie("userlogTime") == null)
{
var cDateTime = new Date();
var timeSet = cDateTime.getHours();
document.cookie ="userlogTime="+timeSet;
}
}

The above code show how we can create cookie using javascript

Thursday, July 2, 2015

Carousel Jquery

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    //Script for tabs
        $(document).ready(function () {
            $("#tabClick2-1 div").click(function () {
                $("#cont-2-2").css("display", "block");
                $("#cont-2-1").css("display", "none");
                $("#tabClick2-2").css("display", "block");
                $("#tabClick2-1").css("display", "none");
            });
            $("#tabClick2-2 div").click(function () {
                $("#cont-2-1").css("display", "block");
                $("#cont-2-2").css("display", "none");
                $("#tabClick2-2").css("display", "none");
                $("#tabClick2-1").css("display", "block");
            });
        });
        // script for Carousel
        var x;
        var slidby = 892;
        var x1;
        $(document).ready(function () {
            x = $("#carousel ul li").length;
            x1 = $("#carousel1 ul li").length;
            var y = x * slidby;
            var y1 = x1 * slidby;
            $("#carousel ul").css("width", y + "px");
            $("#carousel1 ul").css("width", y1 + "px");
            x = x - 1;
            x1 = x1 - 1;
            var leftEnd = x * slidby;
            var leftEnd1 = x1 * slidby;
            leftEnd = "-" + leftEnd + "px";
            leftEnd1 = "-" + leftEnd1 + "px";
            $("#carousel1 ul").css("margin-left", leftEnd1);
            $("#carousel ul").css("margin-left", leftEnd);
            $("#prv").click(function () {
                var carouselul = "#carousel ul";
                var leftPAdding1 = $(carouselul).css("margin-left");
                if (leftPAdding1 != "0px") {
                    privious(carouselul);
                }
            });
            $("#prv1").click(function () {
                var carouselul = "#carousel1 ul";
                var leftPAdding1 = $(carouselul).css("margin-left");
                if (leftPAdding1 != "0px") {
                    privious(carouselul);
                }
            });
            function privious(c) {
                var leftPAdding1 = $(c).css("margin-left");
                var leftPAdding = Number(leftPAdding1.replace(/px$/, ''));
                var margin = leftPAdding + slidby;
                if (leftPAdding >= 0) {
                    return;
                }
                if (leftPAdding == ("-" + slidby + "px")) {
                    leftPAdding = "0px";
                } else if (leftPAdding == "0px") {
                } else {
                    leftPAdding = margin + "px";
                }
                var t = setInterval(function () {
                    $(c).animate({ "margin-left": leftPAdding }, 1000, function () {
                    });
                });
            }
            $("#nxt").click(function () {
                var carouselul = "#carousel ul";
                var leftPAdding1 = $(carouselul).css("margin-left");
                if (leftPAdding1 != leftEnd) {
                    nextSlid(carouselul);
                }
            });
            $("#nxt1").click(function () {
                var carouselul = "#carousel1 ul";
                var leftPAdding1 = $(carouselul).css("margin-left");
                if (leftPAdding1 != leftEnd) {
                    nextSlid(carouselul);
                }
            });
            function nextSlid(c) {
                var leftPAdding1 = $(c).css("margin-left");
                var leftPAdding = Number(leftPAdding1.replace(/px$/, ''));
                var widthUL = $(c).css("width");
                widthUL = Number(widthUL.replace(/px$/, ''));
                widthUL = widthUL - slidby;
                if (widthUL + leftPAdding == 0) {
                    return;
                }
                var margin = leftPAdding - slidby;
                if (leftPAdding == "0px") {
                    leftPAdding = margin + "px";
                } else {
                    leftPAdding = margin + "px";
                }
                var t = setInterval(function () {
                    $(c).animate({ "margin-left": leftPAdding }, 1000, function () {
                    });
                });
            }
        });
    </script>
    <style type="text/css">
        #tabClick2-1
        {
            background-image: url(references-tab.png);
            width: 100%;
            background-repeat: no-repeat;
            height: 53px;
        }
        #tabClick2-1 div
        {
            margin-left: 185px;
            width: 144px;
            height: 36px;
            cursor: pointer;
            border: 1px solid red;
        }
        #tabClick2-2
        {
            background-image: url(bckimg.png);
            width: 100%;
            background-repeat: no-repeat;
            height: 53px;
        }
        #tabClick2-2 div
        {
            width: 144px;
            height: 36px;
            margin-left: 29px;
            cursor: pointer;
        }
        /* css for carousel Start */
        .mainUl
        {
            padding: 0px;
            padding-left: 20px;
            margin: 0px;
        }
        .mainUl LI
        {
            float: left;
        }
        .tabcontent
        {
            border: 0px solid white;
        }
        .carousel
        {
            width: 892px;
            height: 200px;
            overflow: hidden;
        }
        .carousel Ul
        {
            padding: 0px;
            margin: 0px;
        }
        .carousel Ul li
        {
            height: 100px;
            text-align: center;
            float:left;
            list-style-type: none;
            list-style-image: none;
        }
        .carousel Ul li div
        {
            width: 223px;
            text-align: center;
        }

        .carousel Ul li div img
        {
            width: 208px;
            height: 139px;
        }
        /* css for carousel End */
    </style>
</head>
<body>
    <div id="tabClick2-1">
        <div>
             
        </div>
    </div>
    <div id="tabClick2-2" style="display: none">
        <div>
             
        </div>
    </div>
    
    <div class="tabcontent paddingAll" id="cont-2-1">
        <ul class="mainUL">
            <li>
                <div class="prv" id="prv">
                    <img src="/Images1/Back.png" alt="" />
                     </div>
            </li>
            <li>
                <div style="width: 870px; overflow: hidden">
                    <div class="carousel" id="carousel">
                        <ul>
                            <li>
                                <div style="float: left">
                                    <img width="208" height="139" src="/Images1/ref222.png" alt="" />
                                </div>
                                <div style="float: left">
                                    <img width="208" height="139" src="/Images1/ref222.png" alt="" />
                                </div>
                            </li>
                        </ul>
                         </div>
                     </div>
            </li>
            <li>
                <div class="nxt" id="nxt">
                    <img src="/Images1/Next.png" alt="" /></div>
            </li>
        </ul>
        
    </div>
    
    <div class="tabcontent paddingAll" id="cont-2-2" style="display: none">
        <ul class="mainUL">
            <li>
                <div class="prv" id="prv1">
                    <img src="/Images1/Back.png" alt="" />
                     </div>
            </li>
            <li>
                <div style="width: 870px; overflow: hidden">
                    <div class="carousel" id="carousel1">
                        <ul>
                            <li>
                                <div style="float: left">
                                    1 IMAGE
                                </div>
                                <div style="float: left">
                                    2 IMAGE
                                </div>
                                <div style="float: left">
                                    3 IMAGE
                                </div>
                                <div style="float: left">
                                    4 IMAGE
                                </div>
                            </li>
                            <li>
                                <div style="float: left">
                                    5 IMAGE
                                </div>
                            </li>
                        </ul>
                         </div>
                     </div>
            </li>
            <li>
                <div class="nxt" id="nxt1">
                    <img src="/Images1/Next.png" alt="" />  </div>
            </li>
        </ul>
    </div>
</body>
</html>

Thursday, February 5, 2015

JSON in sharepoint 2010

Tuesday, September 3, 2013

Find checked radio button throug jQuery

$("#_chkbox").change(function () {
var items = $(".childCheckBox").find("input");
if ($('#_chkbox').is(':checked') == false) {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
items[i].checked = false;
}
}
}
if ($('#_chkbox').is(':checked') == true) {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
items[i].checked = true;
}
}
}
});

Friday, August 16, 2013

How to read list items using REST in Sharepoint 2010

Here I am giving on simple example that will read data from a list using REST.
Earlier we need to use SPAPI for this task but we can do very easily with REST.

var queryUrl ="http://YourSitename/_vti_bin/ListData.svc/ListName";

$.ajax({
url: queryUrl,
accepts: {
json: "application/json;odata=verbose"
},
dataType: "json", //By Default it returns in xml formate
method: "GET",
success: onQuerySuccess,
error: onQueryError
});

function onQuerySuccess(data) {
var i =parseInt(0);
if (data) {
$.each(data.d.results, function () {
alert(data.d.results[i].Title); // give your internal column name of list
i=parseInt(i)+parseInt(1);
});
}
}
function onQueryError(error) {
alert("ee");
}

We can get any column’s value.
data.d.results[i].Title

Here “Title” is the name of column so you can change the column name and get your data.

Thanks

Wednesday, August 7, 2013

How to detect escape key press with javascript

Hi Frnds ...

I was using some code for escape key handle but it was working fine only in IE, Not in Chrome. So i have stared doing some R&D and finally got solution :-)
And really it is working fine in all

<script type="text/javascript">
document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert("Escape");
    }
};
</scrip>

Thursday, August 1, 2013

How to identify Browser using Javascript

navigator.userAgent

it will give the client browser information and accornding to that we can identify the browser.
Let see an example, like if we want to know is this browser Chrome or not then we can
use this conditions..

if(navigator.userAgent.toLowerCase().indexOf('chrome')>-1)
{
alert("it is chrome");
}
else
{
alert("it is not Chrome");
}

Thanks

How to Call Javascript function inside any event of servre control like button click

It is simple just need to use some property of page, like i am using in my example. With this example i am also trying to show u how can we write Button click on ASPX page that called inline code.

<html>
<head runat="server">
<title></title>
<script type="text/javascript" >

function hello() {
alert("hello");
    }

</script>
</head>
<body>

<script language="c#" runat="server" >

protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = "Jatin Don";
  Page.ClientScript.RegisterStartupScript(this.GetType(), "javascript", "hello()", true);

}
</script>

<form id="form1" runat="server">
<div>

</div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button"/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

How to send email using Javascript....

Simple and very usefull

function sendMail() {
var link = 'mailto:?subject=You can insert subject here&body=';
var curntLoc=window.location.href;
link +=escape(curntLoc);
window.location.href = link;
// window.location.href = link;
}