Category Archives: Jquery

Jquery – Getting QueryString Parameters’ Value

Getting Values from Querystring parameter is quite easy using Jquery

e.g if the below mentioned is url with querystring
http://localhost/CreateQryString.aspx?Node1=9000%20&Node2=3000

var url = window.location.href;
var Node1= null;
var Node2= null;

if (url.indexOf(‘?Node1=’) != -1)
{

Node1= $.query.get(‘Node1’);
 Node2= $.query.get(‘Node2’);

}

In the above code window.location.href  is Javascript property of DOM window object allows us to get or set the current URL. We can access the href property through location.href or window.location.href

For $.query.get()  function  You need to add following Jquery script references

<script type=”text/javascript” src=”jquery.query-2.1.7.js”></script>

<script type=”text/javascript” src=”jquery.rc4.js”></script>

Advertisements

Jquery : Create Expandable text box/ DIV areas

Recently I had one requirement, where I wanted to create the following functionality on an asp.net page.  If a block of text is too long I want to truncate the text at 300 characters and display a “more” link.  When the “more” link is clicked the original block of text should be displayed.

For Example my criteria was as followed

After clicking on more link/button:

I used JQuery Component for this, using 2 functions involved.

My code modules as follows

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script&gt;

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script&gt;

<script type=”text/javascript”

src=”http://ajax.googleapis.com/02 ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<script type=”text/javascript”>

$(function() {

var finalText = $(‘#divBlock’).text();

// Pass control of the text block for limiting the number of chars

LimidDivText(‘#divBlock’,300);

// Expand on click of more link, pass both text block and link here

LinkExpand(‘#divBlock’,’#lnkMore’,finalText);

function LinkExpand(divBlock,lnkControl,finalText) {

$(lnkControl).live(“click”, function() {

$(divBlock).slideDown(“fast”);

$(divBlock).html(finalText);

});

};

function LimidDivText(divBlock,maxLimit) {

var validLength = $(divBlock).text().length – maxLimit;

if(validLength > 0)

{

$(divBlock).html($(divBlock).text().substring(0,maxLimit)).

append(‘ <a id=”lnkMore” href=”#”>more</a>’);

}

};

});

</script>