Tag Archives: javascript

How to switch divs on or off – a super neat trick

I want to hide a div container as it clutters my otherwise clean picture display. And I found some javascript – free, CSS only solution: the  checkbox hack. Modified it a bit while it looks now like this

<label for="t">license me...</label>
<input id="t" type="checkbox" />
<div id="buy">price</div>
input[type=checkbox] {position: absolute;
 top: -9999px; left: -9999px; }
label { border:none; cursor: pointer; }
label:hover { border-bottom:1px solid #444; }
div#buy { display:none; }
input[type=checkbox]:checked ~ div#buy
 { display: block; }

You get the idea: whenever the label of the unvisible checkbox is being clicked, the display state of the div container is changing between on to off.

Avoid spinners

I see spinners everywhere – although I once learned that this is just poor website design. There are even spinner factories to create you own custom waiting room.
gif
As I am doing a lot of time consuming jpg manipulation here and didn’t want to further increase any server overhead, I went back to rather old fashioned method – the turning slash known from old UNIX and DOS times. It expands my previous article on avoid-browser-flickering-with-dark-backgrounds writing to the preloader div and stopping after loading the iframe.

var str = "|/-\\";
var i = 1;
function myLoop () {
   setTimeout(function () {
      j=str.charAt(i%(str.length));
      $('#preload').text( i ) ;
      i++;
      if (i<99) myLoop();
   }, 150)
}
myLoop(); 
$(function(){
    $('#iframe').load(function(){
        i=99;
    });
});