JQuery Isolation

Ever wanted to create a control that could be included on third-party websites? One that smartly loaded up all the JavaScript it needed and execute without any noticeable clashes with JavaScript objects on the third parties web page?

Wanted to do all this and use JQuery as well? Then, as you add those script and CSS tags to their head section programmatically and then include your own JavaScript file that relies on JQuery you find…  runtime errors…

And all because the lady loves milk-tray. No she doesn’t. Well she might. But more to the point your JQuery reliant code must be isolated from the JQuery reliant code on your ‘hosts’ page – as they might use a different version, after all. What a nightmare. How the hell are you going to sort that mess out? Surely somebody who knows the internals of JQuery has taken a look at this, you plead to your coffee mug at 3:25am as you stare out into the darkness of night through the rain covered window…

Thankfully they have. It’s here:

https://github.com/quickredfox/jQuery-Quarantine/blob/master/README.md

I updated it (adding my own extension to the namespace) and including my own CSS and js files along the way. The real clever stuff is the redirection of the callbacks – although, for the most part – if you’re happy to add your inconsequential code to the onload callback in the source file itself, you can ignore the callbacks and the interfaces that go with them completely.

Grab the source and start updating – the A-Team in me says: Works for me! Thankfully a 3 hour bout of depression should free me of such mindless idiocy.

JQuery – Scroll up Headline Display

A really simple newsfeed scrolling display – at time of writing only displays one item at a time, but the author intends to write a multi-item display version before long: http://www.learningjquery.com/2006/10/scroll-up-headline-reader

Just in case the original source disappears here’s the code from that page:

HTML:

   1:  <div id="scrollup">
   2:    <div class="headline"> ... </div>  
   3:    <div class="headline"> ... </div>  
   4:    <div class="headline"> ... </div>  
   5:    <div class="headline"> ... </div>    
   6:  </div>

CSS:

   1:  #scrollup {
   2:    position: relative;
   3:    overflow: hidden;
   4:    border: 1px solid #000;
   5:    height: 200px;
   6:    width: 200px
   7:  }
   8:  .headline {
   9:    position: absolute;
  10:    top: 210px;
  11:    left: 5px;
  12:    height: 195px;
  13:    width:190px;
  14:  }

 

Javascript:

   1:  var headline_count;
   2:  var headline_interval;
   3:  var old_headline = 0;
   4:  var current_headline = 0;
   5:  $(document).ready(function(){
   6:    headline_count = $("div.headline").size();
   7:    $("div.headline:eq("+current_headline+")").css('top', '5px');
   8:   
   9:    headline_interval = setInterval(headline_rotate,5000);
  10:    $('#scrollup').hover(function() {
  11:      clearInterval(headline_interval);
  12:    }, function() {
  13:      headline_interval = setInterval(headline_rotate,5000);
  14:      headline_rotate();
  15:    });
  16:  });
  17:  function headline_rotate() {
  18:    current_headline = (old_headline + 1) % headline_count;
  19:    $("div.headline:eq(" + old_headline + ")")
  20:      .animate({top: -205},"slow", function() {
  21:        $(this).css('top', '210px');
  22:      });
  23:    $("div.headline:eq(" + current_headline + ")")
  24:      .animate({top: 5},"slow");  
  25:    old_headline = current_headline;
  26:  }