Tag Archives: jquery

Software

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;
    });
});

 

CC-BY-NC Science Surf accessed 07.11.2025
Software

Let your visitors switch background color

There seem to be million of ways to do that – here is the most parsimonious solution that works for me even under difficult conditions and in different browsers.

// should be run in a $(document).ready(function(){ bracket });
// if there is no cookie we set one
if (document.cookie.indexOf("color")!== -1 {
  document.cookie = "color=white";
}
// we need a body class without any background definition
// and a class for body.black that has background:black
if (document.cookie.indexOf("black") === -1) {
  // switch to the new .black class
  $("body").toggleClass("black");
  // this is also possible in the iframe
  $(#iframe").contents().find("body").toggleClass("black");
}
// link or whatever is being clicked for the effect
$(".place").click(function () {
if (document.cookie.indexOf("white") !== -1) {
  document.cookie = "color=black";
}
else {
  document.cookie = "color=white";
}
// reload page with a small delay
setTimeout( function() { location.reload() }, 250 );

 

CC-BY-NC Science Surf accessed 07.11.2025
Software

Forcing two divs in one row

In my picture gallery I show two divs side by side. Div1 is variable and needed only on a few pages. Div2 is large, complicated and takes quite some time to load as there are numerous pictures and jquery actions.
div
Rather simple setup, isn’t it? The rendering should be smooth (both divs loading at final position and not jumping around at the end of page loading) and fluid (working on smaller devices as well) and without any dynamic stylesheet language.
This simple task turned out to be complicated. Continue reading Forcing two divs in one row →

 

CC-BY-NC Science Surf accessed 07.11.2025