JQuery tutorial, cookies, frequently used tags, javascript most used syntex, JQuery basics for professionals Part 3

Working with Cookies in jQuery using JQuery plugin and without plugin, or you can say using JavaScript only a traditional way.

<script src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.cookie.js"></script>

$.cookie("UserAge", 43); // this will save 43 in you cookie named UserAge.

$.cookie("UserAge"); // will give cookie value = 43.

$.removeCookie("UserAge"); // cookie removed.

$.cookie("city", "Indore", {path: "/", domain: "abc.com"});
$.cookie("name", "Lap", {expires: new Date(2018, 12, 31, 11, 59, 00) }); // expire on specific date

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' }); 

This article showed you how to manage cookies using jquery.cookie, a jQuery plugin. It solves many problems by abstracting cookie implementation details into a few simple, flexible methods. In case you need further clarification or additional examples, please refer to the official documentation.
 
Now other tradition way is,


var ck = getCookie("CookieName"); // get
setCookie("CookieName","value",1); // set

Code:

function setCookie(c_name,value,expdays)
 {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + expdays);
  var c_value=escape(value) + ((expdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value+"; path=/";
 }
function getCookie(c_name)
 {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1){ c_start = c_value.indexOf(c_name + "="); }
  if (c_start == -1){ c_value = null; }
  else
    {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1){ c_end = c_value.length;  }
    c_value = unescape(c_value.substring(c_start,c_end));
    }
  return c_value;
 }

var windowWidth = $(window).width(); //retrieve current window width
  

var windowHeight = $(window).height(); //retrieve current window height

var documentWidth = $(document).width(); //retrieve current document width

var documentHeight = $(document).height(); //retrieve current document height

var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll Top position

var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position 

Blog Part 1 (Basics, Selectors and scroll bar)
Blog Part 2 (Get and set values of different elements)
Blog Part 3 (JavaScript windows code and Cookies) 

 

--

Regards,

Praveen Pandit

MCTS; MCPD

Keep Learning !!

JQuery tutorial, frequently used tags, javascript most used syntex, JQuery basics for professionals Part 1

Explained Jquery code with short and easy examples those are frequently used by professionals, instead to tutorial or training sites I have selected bunch of code that we need to use on daily basis, well about these tags and code; documentation is available on Jquery.com but that’s too large and wide, what I am talking here is most or frequently used tags in JQuery.

How should include references,

There are online CDN (JQuery, Microsoft, Google etc..) you can go for CND or your local file path, Should always add JQuery plugin first then your JS file references.

·       <script src=" //code.jquery.com/jquery-1.8.3.min.js"></script>

·       <script src="/myJSCode/jqueryValidation.min.js"></script>

Or we can use our downloaded JQuery as below,

·       <script src="/Fld/CS/JS/jquery-1.8.3.min.js" type="text/javascript"></script>

for production use minified js files *.min.js

How to start

That’s simple but always we should check all should working fine and basic things are ready to start like below,

<script src="/myfiles/JS/sp/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="/myfiles/JS/sp/LoginPage.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

        $(document).ready(function() {

        alert(“fine”);

        myFun();// function from LoginPage.min.js

        });

</script>

Always add JQuery plugin first then include you file that have you Functions.

JQuery Selectors 

There are so many selectors are there but of them these are used widely,

1)     $(“#HtmlElementID”); - Get element whose ID is known HtmlElementID if more then on element has same id it will select all elements we can index to select desired one or do iteration.

2)     $(“.ClassName”); - Get element whose applied class name is ClassName.

3)     $(“div[id=’divID’]”); its is conditional selection, give div element whose id is divID.

Instead of ID we can also do this comparison with Title, class name, src, name or any attribute if element

4)     $(“div[id*=’divID’]”);  this will give div element whose id contains divID.

5)     $(“div[id$=’divID’]”);  this will give div element whose id ends with divID.

6)     $(“div[id!=’divID’]”);  this will give div element whose id not equal divID.

7)     $(“div[id^=’divID’]”);  this will give div element whose id begins with divID.

8)     $(“span[id=’MySpan’] div img”);  this will give select all img elements inside span whose id is MySpan and look for div element then inside div img element.

9)     $(“span[id=’MySpan’] first:div “);  that will get first div tag inside span.

10)  $(“span[id=’MySpan’] div “).last();  that will get last div tag inside span.

For more selectors you can visit here.

Page Scroll bar add, remove and hide

Hide vertical scroll $("#MyContainer").css("overflow-x","hidden");          

Hide horizontal scroll $("#MyContainer").css("overflow-y","hidden");     

How to add scroll bar set height, width and so do overflow:scroll;

How to add scroll bar set height width and do overflow:auto; // that’s my favorite 

Blog Part 1 (Basics, Selectors and scroll bar)
Blog Part 2 (Get and set values of different elements)
Blog Part 3 (JavaScript windows code and Cookies) 

--

Regards,

Praveen Pandit

MCTS; MCPD

Keep Learning !!