Archives for category: JQuery

I was looking for a way to access querystring values with javascript.  I stumbled across a couple of articles that pointed me in the right driection, but unfortunately I forgot to book mark them.  I will try to find them again and provide a link to provide them the proper credit.  In the meantime here is the implementation:

var urlParams = {};
   (function () {
      var e,
      a = /\+/g, // Regex for replacing addition symbol with a space
      r = /([^&=]+)=?([^&]*)/g,
      d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
      q = window.location.search.substring(1);
      while (e = r.exec(q))
         urlParams[d(e[1])] = d(e[2]);
   })();

// You can reference the querystring value like so...
var variablename = urlParams["QUERYSTRINGNAME"];
Advertisements

I was working on a few pages where I wanted the content to automatically fill the height/width regardless of browser size.  I set my DIV tag with a id of “Content” and then created the following JQuery automatically scale the DIV tag to the appropriate height and width. I only have one DIV tag that required dynamic height and width so I was able to just subtract the height and width of the other elements on the page.  Replace N with the height/width of the other elements on the page.

The JQuery:

$(function () {
   $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
   $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
   $(window).resize(function () {
      $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
      $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
   });
});

JQuery Break down:

$(window).height()

I use $(window).height() to get the height of the browser window

(($(window).height()) - N)

then subtract the height of the other static elements in my page

$('#content').css({ 'height': (($(window).height()) - N) + 'px' });

Lastly we assign it to the height style property of my DIV tag with the id of Content.

The width functionality is similar except we use $(window).width() instead.

You’ll notice we also cover on window resize by including:

$(window).resize(function () {
      $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
      $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
});

I was in a situation where I was expanding the functionality of an existing ASP.NET Gridview and I needed to add on-click highlighting and double-click redirecting.  I was browsing the JQuery website for a general idea on what to implement when I eventually pieced this together:

The JQuery:

var selected = null;

$(document).ready(function () {
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").hover(function () {
      $(this).css('cursor', 'pointer');
   }, function () {
      $(this).css('cursor', 'default');
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").click(function () {
      $(selected).removeClass("selectedrowstyle"); // Removes the CSS class from the previously selected row
      $(this).addClass("selectedrowstyle");        // Assigns the CSS class to the newly selected row
      selected = this;                             // Set the global javascript variable to the newly selected row
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").dblclick(function (e) {
      var id = $(this).closest("tr").find("input[type=hidden][id*=HIDDENFIELDNAME]").val();
      window.location = "PAGENAME.aspx?id=" + id;
   });
});

In the click function I use JQuery to set a class that will change the row background and text color to help the user identify which row was selected.

In the dblclick function I use JQuery to look up an id that is stored in a template column in the gridview.  That template column contains a hidden control that stores a value that I want to pass as a query string to the new page.

The hover function is just there to give me the nice pointer cursor look when a user is hovering over a row.