Home/ Questions/Q 8373639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:43:43+00:00

So, I have the following snippets of code: Script.js- var menuSlider=function(){ var m,e,g,s,q,i; e=[];

  • 0

So, I have the following snippets of code:

Script.js-

var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
    init:function(j,k){
        m=document.getElementById(j); e=m.getElementsByTagName('li');
        var i,l,w,p; i=0; l=e.length;
        for(i;i<l;i++){
            var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
            c.onclick=function(){menuSlider.mo(this)}; /*c.onmouseout=function(){menuSlider.mo(s)};*/
        }
        g=document.getElementById(k); g.style.width=(w)+'px'; g.style.left=(p)+'px';
    },
    mo:function(d){
        clearInterval(m.tm);
        var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
        m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
    },
    mv:function(el,ew){
        var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
        if(l!=el||w!=ew){
            if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
            if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
        }else{clearInterval(m.tm)}
}};}();

–

style2.css-
...
#slide {position:absolute; top:6px; height:13px; background:#4A7AFF; z-index:10}

I call the javascript from my HTML document in a pretty standard way:

...
script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body onload="global.menuSlider.init('menu','slide')">
...

Basically, I want to try to call several instances of this slider in my HTML document. I have tried wrapping the function inside of another function:

(var global=function () {var menuSlider=function(){...}};}();}());\

and then calling on the global function instead of the menuSlider function (attempting to follow advice given here, but with no luck (did not work, obviously).

This is how I’m calling it from index.html:

<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body onload="menuSlider.init('menu','slide')">
<div class="menu">
    <ul id="menu">
        <li value="1"><a style="cursor:pointer">1</a></li>
        <li value="2"><a style="cursor:pointer">2</a></li>
        <li value="3"><a style="cursor:pointer">3</a></li>
        <li value="4"><a style="cursor:pointer">4</a></li>
        <li value="5"><a style="cursor:pointer">5</a></li>
        <li value="6"><a style="cursor:pointer">6</a></li>
    </ul>
    <div id="slide"></div>
</div>

When I say It’s not working, I mean that if I try to call the function twice (E.G.:

<div class="menu">
    <ul id="menu">
        <li value="1"><a style="cursor:pointer">1</a></li>
        <li value="2"><a style="cursor:pointer">2</a></li>
        <li value="3"><a style="cursor:pointer">3</a></li>
        <li value="4"><a style="cursor:pointer">4</a></li>
        <li value="5"><a style="cursor:pointer">5</a></li>
        <li value="6"><a style="cursor:pointer">6</a></li>
    </ul>
    <div id="slide"></div>
</div><div class="menu">
    <ul id="menu">
        <li value="1"><a style="cursor:pointer">1</a></li>
        <li value="2"><a style="cursor:pointer">2</a></li>
        <li value="3"><a style="cursor:pointer">3</a></li>
        <li value="4"><a style="cursor:pointer">4</a></li>
        <li value="5"><a style="cursor:pointer">5</a></li>
        <li value="6"><a style="cursor:pointer">6</a></li>
    </ul>
    <div id="slide"></div>
</div>

The background of the slider bar and the numerical values appear twice, but the actual functional portion of the slider bar (read: the slider) only works on the first bar (and it does not work well).

I’d imagine that I’m only calling the function once, or, if I’m calling it more than once, maybe I’m calling two instances of the function on top of each other?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In HTML, the id attributes must be unique. Try 

    <div class="menu">
    <ul id="menuA">
        <li value="1"><a style="cursor:pointer">1</a></li>
        <li value="2"><a style="cursor:pointer">2</a></li>
        <li value="3"><a style="cursor:pointer">3</a></li>
        <li value="4"><a style="cursor:pointer">4</a></li>
        <li value="5"><a style="cursor:pointer">5</a></li>
        <li value="6"><a style="cursor:pointer">6</a></li>
    </ul>
    <div id="slideA"></div>
</div><div class="menu">
    <ul id="menuB">
        <li value="1"><a style="cursor:pointer">1</a></li>
        <li value="2"><a style="cursor:pointer">2</a></li>
        <li value="3"><a style="cursor:pointer">3</a></li>
        <li value="4"><a style="cursor:pointer">4</a></li>
        <li value="5"><a style="cursor:pointer">5</a></li>
        <li value="6"><a style="cursor:pointer">6</a></li>
    </ul>
    <div id="slideB"></div>
</div>

    In your javascript:

    window.onload = function () {
     menuSlider.init('menuA','slideA');
     menuSlider.init('menuB','slideB');
};
    • 0