6

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.

4
  • 1
    Please let me know if your browser has problems with the page. Jun 20, 2010 at 1:30
  • Update: Made the options hide-able. Jun 20, 2010 at 2:34
  • I'm getting nothing in Chrome 5.0.375.70 beta under Vista. The page appears blank and viewing the source ends with <script type='text/javascript'> on line 35. There is no </head><body></body></html>. Also no <!DOCTYPE...>. Jun 20, 2010 at 3:01
  • @Dennis: Sorry, there were some technical difficulties for a while there. It's fixed now. Jun 20, 2010 at 3:20

1 Answer 1

2

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.

1
  • 1
    Sweet! I never thought my code would be remixed! Good job. Aug 14, 2010 at 23:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .