Take the 2-minute tour ×
Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. It's 100% free, no registration required.

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

http://stackoverflow.quickmediasolutions.com/stackad/fancy.html

Platform

Any browser that supports jQuery and has JavaScript turned on.

Contact

I can be reached at admin@quickmediasolutions.com

Code

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

share|improve this question
    
Please let me know if your browser has problems with the page. –  Nathan Osman Jun 20 '10 at 1:30
    
Update: Made the options hide-able. –  Nathan Osman Jun 20 '10 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...>. –  Dennis Williamson Jun 20 '10 at 3:01
    
@Dennis: Sorry, there were some technical difficulties for a while there. It's fixed now. –  Nathan Osman Jun 20 '10 at 3:20
add comment

1 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.

share|improve this answer
    
Sweet! I never thought my code would be remixed! Good job. –  Nathan Osman Aug 14 '10 at 23:50
add comment

You must log in to answer this question.

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