N-son tabbed/JsScrollbar, trying to force gif play from click of link using jquery

Question

Hello everyone,

Let me start off by stating the obvious; I am new here. That said I hope I am not violating some standard I missed by posting this. xD

For several days now I've been trying to update a rather old site of mine, to which I wont link to given that the update is so drastic that the current product on which I seek your help for doesn't resemble the old site in any other way then appearance.

Anywho! I am using the tabbed div and JsScrollbar created by N-son (http://www.downloadjavascripts.com/list/javasitek60/Details.aspx) and so far have only used jquery to dynamically center content on the page.

My problem however is this...I have a gif on the page that acts as a background (it's not tiled) and I'd like to be able to have it so that when you click on one of the links used in n-sons tabs (EX: news) it also causes the gif to load and play through itself once.

So far all my attempts at accomplishing this myself have failed and break wither the scrollbar or prevent the content from switching when you click the tabs. (Except for one failed attempt where it all worked fine except the handle for the scrollbar would vanish upon switching tabs)

I hope I've been clear in this and that someone is able to help. I know it may seem like a silly question but we're all new at some point. :P

If need be I'll upload what coding I have but it is not pretty.

Thank you in advance.

Answer 1

I'm not sure what I changed so that it doesnt break anymore but the code below does the trick. If any of you know how to condense this down, it'd be greatly appreciated.

    <script type="text/javascript">
var scroller  = null;
var scrollbar = null;

window.onload = function () {
  scroller  = new jsScroller(document.getElementById("News"), 400, 180);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
}

function scrollbarEvent (o, type) {
    if (type == "mousedown") {
        if (o.className == "Scrollbar-Track") o.style.backgroundColor = "none";
        else o.style.backgroundColor = "none";
    } else {
        if (o.className == "Scrollbar-Track") o.style.backgroundColor = "none";
        else o.style.backgroundColor = "none";
    }
}

function swapIt(o) {
    o.blur();
    if (o.className == "current") return false;

    var list = document.getElementById("Navigation").getElementsByTagName("a");
    for (var i = 0; i < list.length; i++) {
        if (list[i].className == "current") {
            list[i].className = "";
            document.getElementById(list[i].title).y = -scroller._y;
        }
        if (list[i].title == o.title) o.className = "current";
    }

    list = document.getElementById("Container").childNodes;
    for (var i = 0; i < list.length; i++) {
        if (list[i].tagName == "DIV") list[i].style.display = "none";
    }

    var top = document.getElementById(o.title);
    top.style.display = "block";
    scrollbar.swapContent(top);
    if (top.y) scrollbar.scrollTo(0, top.y);

    return false;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>