Category Archives: Javascript - Page 2

JQuery UI: Change theme dynamically using a drop-down

Posted by on April 17, 2014 4 comments

This is a neat pice of code to change the theme “live” on any site you build using css. I’m here going to use web links to the different css files but you can use any path, even local to get the css files

HTML:

<head> 
  <link id="stylesheet" rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
...
<select id="themes">
  <option value="http://code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">Le Frog</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">Start</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">Smoothness</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">Redmond</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">Sunny</option>
</select>  
...

First we put an id attribute into the link tab of the css link. This is so that we can easily find it later without selecting any other stylesheet links. Then we place the <select> with all the links in the <option> value attributes tags. No we are done with the HTML. Moving on to the javascript snippet

Javascript code:

$('#themes').change(function(){
  $("#stylesheet").attr({href : $('#themes').find(":selected").val()});
});

Here we just find the link object and changes the href attribute every time we change values in the <select>. And that is all!

Tested on Chrome 34.0.1847.116, JQuery 1.9.1 and JQueryUI 1.10.4

JQuery color every other row in a table

Posted by on August 18, 2013 No comments

This is so simple and so useful that there is really no excuse to not to have this on your html tables, and it is pretty too 🙂

To change the color of every other row in a table simply add this code to an event that happens after the table has been created:

$("tr:odd").css("background-color", "#bbbbff")

The $(“tr:odd”) selects every tr row with an odd number and the .css() changes its color to #bbbbff – It is as simple as that

Tested on JQuery 1.9.1 and Chrome v28

JQuery sort table rows on column value

Posted by on August 16, 2013 21 comments

Sorting tables dynamically with javascript is often a smooth solution to your sorting problems. I’m here going to put a simple solution that I have been using for a while. I have in no means created this solution – I found it somewhere on the web and now I just want to put it here for easy access.

The table needs to have the following structure for this solution to work:


  
    
column1column2column3

  
  
    
value1value2value3

    
value4value5value6

    
value7value8value9

The critical parts here is that the table needs an id and a tbody. Without those the sorting will not work

Here is the JQuery code (standard JQuery, no plugins needed)

function sortTable(){
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(1).text().toUpperCase();
  var B = $(b).children('td').eq(1).text().toUpperCase();

  if(A < B) {
    return -1;
  }

  if(A > B) {
    return 1;
  }

  return 0;

  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

To sort according to the second column we use ‘.eg(1)’ in row 6 and 7. Second column ‘.eg(3)’ and so on

Here is a JSFiddle of the solution: JQuery sort table rows on column value

Tested on Chrome v44.0.2403.155 (64-bit) and JQuery 1.9.1