Tag Archives: Javascript - Page 2

JQuery UI: Change theme dynamically using a drop-down

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

Create a countdown timer using setInterval

SetInterval is a very usefull function when making webpages that should look ‘alive’. I am here going to make a countdown timer using the setInterval and clearInterval functions:

First we need two variables:

var clock = 10; //Start value of counter
var countdownId = 0; // Id of counter

Now we need the countdown function to call every interval:

function countdown() {
    if(clock > 0) {
        clock = clock - 1;
        document.getElementById('cdDiv').innerHTML = clock;
    }
    else {
        // Stop timer
        clearInterval(countdownId);
    }
}

Now we need a div to show the timer in:

<div id="cdDiv">10</div>

Now we put it all togheter:

<html>
  <head>
    <title>My little countdown timer</title>
    <script type="text/javascript">
        var clock = 10;
        var countdownId = 0;

        function start() {
            //Start clock
            countdownId = setInterval("countdown()", 1000);
        }

        function countdown(){
            if(clock > 0){
                clock = clock - 1;
                document.getElementById('cdDiv').innerHTML = clock;
            }
            else {
                //Stop clock
                clearInterval(countdownId);
            }
        }
    </script>
  </head>
  <body onload="start()">
      <div id="cdDiv">10</div>
  </body>
</html>

This small example is mostly so I remember the clearInterval function name which keeps escaping me 🙂

Swap HTML elements randomly using Javascript

I once need to swap a bunch of P elements around randomly in a HMTL page. This is how I did it.

This is my example HTML:

<html>
  <head>
    <title>Swapping HTML elements randomly in Javascript</title>
  </head>
  <body>
      <p>First P element</p>
      <p>Second P element</p>
      <p>Third P element</p>
  </body>
</html>

First we need to grap all the elements we want to swap around. In this case we grab all P elements

var elements = document.getElementsByTagName("p");

Then we add a nifty function to the Javascript Node object (this function is not needed in IE since IE already has this function built in):

Node.prototype.swapElements = function(element) {
        element.parentNode.replaceChild(this, element);
        this.parentNode.insertBefore(element, this.nextSibling);
}

Now we also need a function that will give us some random numbers

function rand(n) {
        return (Math.floor(Math.random() * n));
}

And finally we put it all togheter and add a for-loop

Node.prototype.swapElements = function(element) {
        element.parentNode.replaceChild(this, element);
        this.parentNode.insertBefore(element, this.nextSibling);
}
function rand(n) {
        return (Math.floor(Math.random() * n));
}
function shuffle() {
        var elements = document.getElementsByTagName("p");
        var length = elements.length;

        for (var i = 0; i < length; i++){
            elements[i].swapElements(elements[rand(length)]);
        }
}

Now all you need to do is to call shuffle() anytime you want to shuffle the P elements. NOTE: The function does NOT guarantee that the elements will change positions each time.

Tested in Firefox 4, Chrome 10 and IE 8 (without Node.prototype.swapElements function).