Web development experiments too boring for a pub

Ok. So this one's a little below the belt. Flashing a pop-up message very quickly to the user in an attempt to influence their behaviour. There's of course no evidence that it works but its fun to try at least...

 
 
var shown = false;
 
$(function(){
 
$('input:text').hover(function(){		   
 
if(!shown){
 
	var msg = "Buy me Beer";
 
	$('
<div>').css({position:'fixed',
					top:0,
                    left:0,
                    right:0,
                    bottom:0,
                    backgroundColor:'black',
                    color:'white',
                    fontSize:'100px',
                    textAlign:'center',
                    lineHeight:'400px'})
              .html(msg)
              .appendTo('body')
              .addClass('test');	
 
	setTimeout(function(){$('.test').remove()},20);
 
	shown = true;
 
	cls();
 
}
 
 });
 
});
 
function cls(){
 
	setTimeout(function(){ shown = false; },15000);	
 
}
 

In this example a black div is created, appended to the body and set to cover the content. The message is displayed in large white font, and a time-out set for 40 milliseconds to remove it again. A final time-out is set for 15 seconds to prevent the message from being triggered too often.

Here's a link if you're interested in running it, although I wouldn't follow it if you are sensitive to flashing images.
JS Subliminal Messages
I'll let you know how drunk I get off this.

This started off as an experiment with a combination JQuery and WordPress custom fields. The idea was to total up the distances of all the walks on my other site, a walking blog and make something a bit more interesting than a simple table.

An obvious choice would be to use the new HTML5 canvas element however there's a great plugin which allows elements to be rotated rather than using the Mozilla/Web-kit CSS rules.it uses a combination of images layered on top of each other to mask, and display the animation.

The Image

An image sprite to create a pie chart

The HTML

 
<div id="walkDistanceFrame">
<div id="walkDistanceMask"></div>
<div id="walkArrowLine" style="display: block; -moz-transform: rotate(6.98421deg);"></div>
<div id="walkArrowLineMask"></div>
<div style="display: none;" id="walkArrowLine2"></div>
<div id="walkArrow"></div>
<h3 title="click me..." id="walkDistance">131.73
<span>miles</span></h3>
 
<a href="/about/#distance">Explain?</a>
</div>
 

The Javascript

 
$(document).ready(function() {
   $('#walkDistance').click(function(){animateHowFar();});
   animateHowFar();
});
 var randValue = -1;
 
function animateHowFar(){
   var animTime = 2000;
   var calcDistance = 0;
   var myLocations = ['far around the moon',
   'far along the M25',
   'far along the thames',
   'many marathons',
   'far round an olympic swimming pool',
   'far from Lands End to John o\'Groats' ];
 
   var myDistances = [6790,176,215,26.2, 0.093,874];
   var myImages    = ['a','b','c','d','e','f'];
   randValue = randValue + 1;
   if(randValue >= myLocations.length){
      randValue = 0;
   }
   var target = myDistances[randValue];
   var remainder = 0;
   var circuits = 0;
 
if(!runningAnim) {
  runningAnim = true;
  $('#walkAroundLoc').html(myLocations[randValue]);
  $('#walkArrowLine').hide();
  $('#walkArrowLine2').hide();
  $('#walkCircuits').hide();
 
  if(target < walkDistance){
  	remainder = (walkDistance % target);
  	circuits = ((walkDistance) / target).toFixed(2);
  	calcDistance = remainder;
  	$('#walkCircuits').html('<strong>Circuits:</strong> '+circuits).show();
  } else {
  	calcDistance = walkDistance;
  }
 
  var deg = ((calcDistance/target)*360);
  var walkPercentage = (calcDistance/target);
 
  var time1 = (animTime/deg) * 180;
  var time2 = (animTime/deg) * (deg - 180);
 
   $('#walkArrow').transform({rotate: 0});
   $('#walkArrowLine').transform({rotate: 0});
   $('#walkArrowLine2').transform({rotate: 0}); 
 
   $('#walkArrow').animate({rotate: deg+'deg'},animTime, 'easeOutBounce',function(){
   if(deg <= 180){
	   $('#walkArrowLine').transform({rotate: deg+"deg"}).show();
	    runningAnim = false;
   } else {
   	   $('#walkArrowLine').transform({rotate: "180deg"}).show();
   	   $('#walkArrowLine2').transform({rotate: (deg-180)+"deg"}).show();
	   runningAnim = false;
   }
   });
  }
}
 

A working demo can be seen on the homepage of MudWetandBeers.com.

As an alternative to a database auto suggest which often results in a lot of small database calls over a small period of time I decided to dump all results onto a page and use a combination of jQuery and Regex to filter out the results.

function escapeRegex(a){return a.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&")}
function filterLinks(){
   var t = escapeRegex($('#filterBox').val())
   var r=new RegExp(t,"i");
 
   $('a').each(function(){
      var a = $(this);
      if(a.text().match(r)){
         var matches = a.text().match(r);
         a.html(a.text().replace(r,"<strong>"+matches[0]+"</strong>"));
	 a.show();
      } else {
	 a.html(a.text());
	 a.hide();
      }
   });
}
 

This function can be called on a change event of a text box and escapes the content ready for inclusion in a regex. Any anchor link that matches the given pattern is displayed wrapped in '<b>' tags to highlight to found text, and shown remains on the page. Anything that doesn't match is hidden and'<b>' tags are removed.

Improvements

Obviously at the moment it searches for EVERY link on the page, which isn't good. The selector can be made more specific by selecting links within a given div, or links with a specific class. Also the link cannot contain any other HTML as this is stripped out with the '<b>' tags. A different solution would be to wrap the found text with a span with a specific class or ID that could be removed preserving the HTML in the link.

Finally selecting all the links on each key press isn't particularly good for performance and this will only get worse the larger the list of links. An alternative solution would be to preload each link into an array when the script first runs and then subsequent searches query the array rather than searching the DOM each time.

I have cobbled together a quick demo of JavaScript Regex searching which rather than showing and hiding links adds and removes a class to show which links it's removing.

Update:

I included this on a project I've been working on, Mobilevaluer.com and unfortunately it seems that Chrome seemed to struggle with the selectors and iterating through such a large amount of elements. Chrome would hang for several seconds, before announcing it had crashed. To fix this we decided to use a jQuery selector rather than selecting all links and checking them individually.

A screen shot of tables that scroll

In the hostel section of my other site, MudWetandBeers.com, users can search for available hostels over a large date range, and displaying this data in a narrow page template creates a problem. As ever Internet Explorer isn't playing ball and ignoring the widths of my table cells and squashing them all to fit in the narrow space of the site template. Enter jQuery to add some extra HTML and CSS mark-up to create a dynamic scrolling table.

The basic functionality is to take an existing table and split it in two and wrap them in specific <div> tags with css rules to create the slide. All of my result tables use the same structure, with <th> running across the top and along the left hand side. My jQuery function finds all of the tables given a class and strips the first column creating a new table. This is my title table which is given a width, wrapped in a <div> and floated left. The remaining table is wrapped in a div, is given a fixed width to fit the template, and the CSS rule 'overflow:auto' added to create the scroll along the bottom and floated left to align it with my titles table.

So long as the cells in my table are given the same CSS properties for height and width, the rows in both the data table and the titles table should line up.

The JavaScript

 
$('.searchResults').each(function(){
	$(this).wrap("
<div class='wrapScrollDiv'></div>
 
");
	var _ct = $(this).parent();
	var _ht = $('
<table>');
	$(_ht).attr("id", "titleTable");
	$(this).find('th.hostelTitle').each(function(){
		var _tr = $('
<tr>');
		$(this).appendTo($(_tr));
		$(_tr).appendTo($(_ht ));
	});
	$(_ht).wrap("
<div class='_ht'></div>
 
");
	$(_ht).parent().insertBefore($(_ct));
	$("
<div style='clear:both'></div>
 
").insertAfter($(_ct));
});
 

The CSS

 
div.wrapScrollDiv {
    overflow:auto;
    width:576px;
    float:left;
}
div._ht {
    float:left;
    width:200px;
    margin-left:3px;
}
 

I do have another version that compares the heights of the rows in each of the two tables to make sure they're the same height. The shorter table row is then stretched to fit the larger. Alternatively you could simply make sure that none of your titles or data break onto two lines by experimenting with the table widths.

Windows 7, with its new shiny hover-over effect on the nav bar. Is it possible to re-create that using jQuery?

Windows 7 Aero Interface

I must admit that I'm more of a Mac user and there are hundreds of examples across the internet of how to create a Apple-style dock interface for a website. However I have Windows 7 on my work PC and the aero interface is shiny and new, and for the most part, not re-created in JavaScript. For those that don't have Windows 7, the task bar now has a glass effect that glows around the mouse when moved left or right. To re-create this we need to track mouse movement across the element and layer a few extra images to give the glow and glass effects.

My example is going to take a list full of anchor links and add a couple of styled <span> tags to provide the image effects. One will overlay everything to add a simple shine, the other will act as a mask and track the mouse movement along the x axis. Using this method, I can add different CSS background colours to each anchor link to create different coloured shine. This mask span will be hidden when it's added to the anchors and fades in and out when the user hovers over the link.

Images

Shine png overlay

Hover png overlay

jQuery

Adding the spans

 
$('#nav li a').each(function(){ var html = $(this).html();
html = "<span class='content'>"+html+"</span>";
$(this).html(html);
});
$('<span>').addClass('hover').appendTo('#nav li a').hide();
$('<span>').addClass('shine').appendTo('#nav li a');
 

Adding the hover over to fade in and fade out the mask span.

 
$('#nav li a').hover(
	  function(){ $(this).find('.hover').stop(true,true).fadeIn();},
  	  function(){ $(this).find('.hover').stop(true,true).fadeOut();}
    );
 

Finally add the mouse move event to move the mask span. We move the mask left by half the width to center the most transparent part of the mask under the mouse pointer.

 
$('#nav li a').mousemove(function(e){
   $(this).find('.hover').css({left: ((e.pageX - $(this).offset().left) -250)+"px"});
  }
);
 

HTML

 
<ul id="nav">
<li id="home"><a class="button" href="#">Home</a></li>
<li id="about"><a class="button" href="#">About</a></li>
<li id="jquery"><a class="button" href="#" >JQuery</a></li>
<li id="projects"><a class="button" href="#/" >Projects</a></li>
<li id="contact"><a class="button" href="#">Contact</a></li>
</ul>
 

CSS

 
 /* add different colours to each link to give a different coloured shine */
#home span.hover {
	background-color:red;
}
#about span.hover {
	background-color:yellow;
}
#jquery span.hover {
		background-color:pink;
}
#projects span.hover {
	background-color:blue;
}
#contact  span.hover {
	background-color:green;
}
span.hover {
	width:500px;
	height:200px;
	position:absolute;
	display:block;
	background-image:url(hover.png);
	background-position:0px -15px;
	top:-25px;
	z-index:0;
	left:3;
}
span.content {
	width:100%;
	height:40px;
	position:absolute;
	z-index:1;
	left:0;
	top:0;
	line-height:40px;
	display:block;
	z-index:2;
}
span.shine {
	width:200px;
	height:40px;
	position:absolute;
	z-index:4;
	background-image:url(shine.png);
	background-repeat:repeat-x;
	left:0;
	top:0;
	display:block;
}
 

Result

jQuery version of Windows 7 Navigation

Ok, so its not a complete copy, there is plenty of room for improvement but for q quick rough prototype its not too bad. With a bit more work the images could be improved to give a cleaner, brighter shine and the code could be re-written to be a plugin rather than dump everything in a $(document).ready function. If anyone has ideas on how to improve, or can create better JavaScript or transparent PNG's then I'm open to suggestions...
Windows 7 Navigation with jQuery Demo

Download the source