JQuery tutorial, Get set values,window,height,width frequently used tags, JQuery basics for professionals Part 2

We have seen basics of Jquery with sample code with short and easy examples in our Part 1 (JS Basics, Selectors and scroll bar). Now this is part 2, in this blog we will see how to select elements of different types and set and get values of them using JQuery. 

 // get value from text box  
  alert("Text : "+$("#myText").val());   
   
  // dropdown get selected value  
  alert("Selected : "+$("#MySelect :selected").val());  
         
  // get value from Textarea  
  alert("Text : "+$("#myTextArea").val());   
   
  // get value of check box  
  alert("Checked : "+$("[name='sex']:checked").val());   
   

and Sample Html is:

 <input name="foop" id="myText" type="text" value="Praveen" />   
   <select name="foo" id="MySelect" >  
     <option value="one">one</option>  
     <option value="two">two</option>  
     <option value="three">three</option>  
   </select>   
 <textarea name="foop" id="myTextArea" rows="2" cols="20" >Good blog for learning </textarea>  
   
 <input type="radio" name="sex" value="male" checked='true'>Male   
 <input type="radio" name="sex" value="female" >Female  

How to Set values in html controls or elements using Jquery,

 $('input[name="sex"][value="male"]').attr("checked", true); // checked value of radio box  
   
 $("#MySelect").val("three"); // dropdown value set  
   
 $("#myText").val("Praveen");// text box  
   

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 !! 

PowerShell Create lookup, how to create cross site lookup in SharePoint

SharePoint  gives us an easy way to create lookup columns in same site (in developers language same Web ;) ) but some time we have to create lookup column between two different sites, well there is no direct option provided by Microsoft. But there is simple way to do it using PowerShell.

All you need to know is web/Site names and list names and executive below lines of code....

You can download this piece of code here.

Thanks,

Praveen Pandit

MCTS; MCPD

Keep Sharing Knowledge!!