OBSOLETE - StackAd Scroller

Question

Screenshot

About

StackAd Scroller is a small web application that scrolls the open source ads from this Meta question. It is highly configurable and makes a nice page to leave your web browser open to. It would also be great for running before a presentation or something while people come in and find a seat.

License

MIT License

Download

Dead Link: https://stackoverflow.quickmediasolutions.com/stackad/fancy.html

Platform

Any browser that supports jQuery and has JavaScript turned on.

Contact

I can be reached at [email protected]

Code

The code is based on my StackAd tool, which in turn depends on Soapi.js.

Answer 1

I've made a hacky patch to your HTML file which allows (configurably) the animation to stop and the moused ad to grow on hover if anyone wants to use it. I've not done much JQuery (I usually use Prototype), but I think it turned out OK ;).

--- fancy.html  2010-06-20 04:17:28.000000000 +0100
+++ fancy-stops.html    2010-08-15 00:19:48.375349808 +0100
@@ -70,27 +70,56 @@
       // We want a random ad
       var index = Math.floor(Math.random() * copy.length);

-      data += '<td>' + copy[index].body + '<td>';
+      data += '<td class="adcell" id="adid' + index.toString() + '">' + copy[index].body + '</td>';
       copy.splice(index,1);
+      
     }

     num_ads = i;
+    

     $('#row1').html(data);
     $('#row1').append(data);
-
-    DoAgain();
+    
+       DoAgain();
 }

-function DoAgain()
+function DoAgain(should_reset)
 {
-    $('#block').css('marginLeft','0px');
-
+   $('#block').css('marginLeft','0px');
+   
     var width = ($('#block').width()) / 2;

     var length = (1000 * num_ads) / document.getElementById('speed').value;

-    $('#block').animate({marginLeft: '-=' + width},length,'linear',function() { DoAgain(); });
+    var doAnimate = function(){
+        $('#block').animate({marginLeft: '-=' + width},length,'linear',function() { DoAgain(); });
+    };
+    doAnimate();
+    
+    $('.adcell > p > a > img').addClass('adimg');
+    if (document.getElementById('stoponmouse').value == 'yes') {
+        $('.adimg').mouseover(function() { $('#block').stop(true); });
+        $('.adimg').mouseout(doAnimate);
+    }
+    
+    var increase = 50;
+    var num = 100;
+    var grow = function(){return document.getElementById('grow').checked;};
+    var stop = function(){return document.getElementById('stoponmouse').checked;};
+    
+    $('.adimg').mouseover(function(el) {
+        if (stop())
+            $('#block').stop(true);
+        if (grow())
+            $(el.target).animate({width: '+=' + increase, height: '+=' + increase}, num, 'linear');
+    });
+    $('.adimg').mouseout(function(el) {
+        if (stop())
+            doAnimate();
+        if (grow())
+            $(el.target).animate({width: '-=' + increase, height: '-=' + increase}, num, 'linear');
+    });
 }

 // Don't replace the current onload handler
@@ -164,6 +193,13 @@
   <td><input type='text' id='speed' value='0.2'></td>
  </tr>
  <tr>
+  <td>Should stop on mouse:</td>
+  <td><input type='checkbox' id='stoponmouse' checked='checked'></td>
+ <tr>
+  <td>Should grow on mouse:</td>
+  <td><input type='checkbox' id='grow' checked='checked'></td>
+ </tr>
+ <tr>
   <td colspan=2 style='text-align: center;'><br><input type='button' value='Update &amp; Shuffle' onclick='DisplayNewAd()'></td>
  </tr>
 </table>
@@ -171,4 +207,4 @@
 <br><br>
 <input type='button' value='Show Options' id="showhide" style="width: 100px;" onclick='Hide();'>
 </body>
-</html>
\ No newline at end of file
+</html>

There's some unnecessary stuff in there, I'm sure, but it seems to work OK for me. And, just in case I need to say this, the new code is under the same license as the original code, etc.

Great idea, though - I'm going to check with my host if I can put my own ads up there (they're a free host), and if I can, I'll try and put this up.