Avatar billede soelver Nybegynder
28. januar 2004 - 18:29 Der er 3 kommentarer og
1 løsning

Javascript menu med scroll

Vi har på vores site; http://tegnebordet.dk en javascript dropdownmenu med scrollbar.

Denne virker desværre ikke for alle.
Som følge deraf har vi lavet en alternativ version, som brugere der ikke bruger IE6 bliver sendt ind på.

Problemet stopper bare ikke der. For selvom de forskellige brugere så HAR IE6, så virker den stadig ikke for alle. Scrollfunktionen virker simpelthen ikke, og de kan derfor kun bruge den øverste del af menuen.

Du kan se menuen der er tale om, ved at logge ind med:
Brugernavn: Eksperten
Password: test

Der kommer en brugermenu i midten, og nederst i denne er vort lille problembarn: "Vælg favoritter".

Kan man lave en lignende menu (designmæssigt og funktionmæssigt), så det virker i alle browsere?

Hvis ikke, kan problemet løses på anden vis?
Fx. ved at sikre, at alle der ikke kan bruge menuen bliver sendt videre til den alternative version. (Det kræver at vi ved præcis hvor det går galt, og det gør vi desværre ikke - men håber nogle herinde kunne hjælpe).
Avatar billede soelver Nybegynder
28. januar 2004 - 18:30 #1
Tillæg:

Selve scriptet ligger i en seperat fil. Scriptet ser således ud:

var dom = document.getElementById;
var iex = document.all;
var ns4 = document.layers;

function addEvent(event,method){
    this[event] = method;
    if(ns4) this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function removeEvent(event){
    this[event] = null;
    if(ns4) this.releaseEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function getElement(name,nest){
    nest = nest ? "document."+nest+"." : "";
    var el = dom ? document.getElementById(name) : iex ? document.all[name] : ns4 ? eval(nest+"document."+name) : false;
    el.css = ns4 ? el : el.style;
    el.hideVis = function(){el.css.visibility="hidden"};
    el.showVis = function(){el.css.visibility="visible"};
    el.getTop = function(){return parseInt(el.css.top) || 0};
    el.setTop = function(y){el.css.top = ns4 ? y: y+"px"};
    el.getHeight = function(){return ns4 ? el.document.height : el.offsetHeight};
    el.getClipHeight = function(){return ns4 ? el.clip.height : el.offsetHeight};
    el.addEvent = addEvent;
    el.removeEvent = removeEvent;
    return el;
}
function getMouse(e){
    return iex ? event.clientY : e.pageY;
}

document.addEvent = addEvent;
document.removeEvent = removeEvent;

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// ImageSwap Functions

function newImage(src){
    img = new Image();
    img.src = src;
    return img;
}
function imageSwap(img,obj,div){
    obj = eval(obj);
    if(document.layers && div != null){
        document.layers[div].document.images[img].src = obj.src;
    }else{
        document.images[img].src = obj.src;
    }
}




var dom = document.getElementById;
var iex = document.all;
var ns4 = document.layers;

function addEvent(event,method){
    this[event] = method;
    if(ns4) this.captureEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function removeEvent(event){
    this[event] = null;
    if(ns4) this.releaseEvents(Event[event.substr(2,event.length).toUpperCase()]);
}
function getElement(name,nest){
    nest = nest ? "document."+nest+"." : "";
    var el = dom ? document.getElementById(name) : iex ? document.all[name] : ns4 ? eval(nest+"document."+name) : false;
    el.css = ns4 ? el : el.style;
    el.getTop = function(){return parseInt(el.css.top) || 0};
    el.setTop = function(y){el.css.top = ns4 ? y: y+"px"};
    el.getHeight = function(){return ns4 ? el.document.height : el.offsetHeight};
    el.getClipHeight = function(){return ns4 ? el.clip.height : el.offsetHeight};
    el.hideVis = function(){el.css.visibility="hidden"};
    el.addEvent = addEvent;
    el.removeEvent = removeEvent;
    return el;
}
function getYMouse(e){
    return iex ? event.clientY : e.pageY;
}

document.addEvent = addEvent;
document.removeEvent = removeEvent;

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Scroller Class

ScrollObj = function(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
    this.speed = speed;
    this.dragHeight = dragHeight;
    this.trackHeight = trackHeight;
    //this.trackObj = getElement(trackObj);
    //this.upObj = getElement(upObj);
    //this.downObj = getElement(downObj);
    this.dragObj = getElement(dragObj);
    this.contentMaskObj = getElement(contentMaskObj);
    this.contentObj = getElement(contentObj,contentMaskObj);
    this.obj = contentObj+"Object";
    eval(this.obj+"=this");
   
    this.trackTop = this.dragObj.getTop();
    this.trackLength = this.trackHeight-this.dragHeight;
    this.trackBottom = this.trackTop+this.trackLength;
    this.contentMaskHeight = this.contentMaskObj.getClipHeight();
    this.contentHeight = this.contentObj.getHeight();
    this.contentLength = this.contentHeight-this.contentMaskHeight;
    this.scrollLength = this.trackLength/this.contentLength;
    this.scrollTimer = null;
   
    if(this.contentHeight <= this.contentMaskHeight){
        this.dragObj.hideVis();
    }else{
        var self = this;
        //this.trackObj.addEvent("onmousedown", function(e){self.scrollJump(e);return false});
        //this.upObj.addEvent("onmousedown", function(){self.scroll(self.speed);return false});
        //this.upObj.addEvent("onmouseup", function(){self.stopScroll()});
        //this.upObj.addEvent("onmouseout", function(){self.stopScroll()});
        //this.downObj.addEvent("onmousedown", function(){self.scroll(-self.speed);return false});
        //this.downObj.addEvent("onmouseup", function(){self.stopScroll()});
        //this.downObj.addEvent("onmouseout", function(){self.stopScroll()});
        this.dragObj.addEvent("onmousedown", function(e){self.startDrag(e);return false});
        if(iex) this.dragObj.addEvent("ondragstart", function(){return false});
    }
}
ScrollObj.prototype.startDrag = function(e){
    this.dragStartMouse = getYMouse(e);
    this.dragStartOffset = this.dragObj.getTop();
    var self = this;
    document.addEvent("onmousemove", function(e){self.drag(e)});
    document.addEvent("onmouseup", function(){self.stopDrag()});
}
ScrollObj.prototype.stopDrag = function(){
    document.removeEvent("onmousemove");
    document.removeEvent("onmouseup");
}
ScrollObj.prototype.drag = function(e){
    var currentMouse = getYMouse(e);
    var mouseDifference = currentMouse-this.dragStartMouse;
    var dragDistance = this.dragStartOffset+mouseDifference;
    var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
    this.dragObj.setTop(dragMovement);
    var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
    this.contentObj.setTop(contentMovement);
}
ScrollObj.prototype.scroll = function(speed){
    var contentMovement = this.contentObj.getTop()+speed;
    var dragMovement = this.trackTop-Math.round(this.contentObj.getTop()*(this.trackLength/this.contentLength));
    if(contentMovement > 0){
        contentMovement = 0;
    }else if(contentMovement < -this.contentLength){
        contentMovement = -this.contentLength;
    }
    if(dragMovement < this.trackTop){
        dragMovement = this.trackTop;
    }else if(dragMovement > this.trackBottom){
        dragMovement = this.trackBottom;
    }
    this.contentObj.setTop(contentMovement);
    this.dragObj.setTop(dragMovement);
    this.scrollTimer = window.setTimeout(this.obj+".scroll("+speed+")",25);
}
ScrollObj.prototype.stopScroll = function(){
    if(this.scrollTimer){
        window.clearTimeout(this.scrollTimer);
        this.scrollTimer = null;
    }
}
ScrollObj.prototype.scrollJump = function(e){
    var currentMouse = getYMouse(e);
    var dragDistance = currentMouse-(this.dragHeight/2);
    var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
    this.dragObj.setTop(dragMovement);
    var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
    this.contentObj.setTop(contentMovement);
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Misc Functions

function fixNetscape4(){
    if(ns4origWidth != window.innerWidth || ns4origHeight != window.innerHeight){
        window.location.reload();
    }   
}
if(document.layers){
    ns4origWidth = window.innerWidth;
    ns4origHeight = window.innerHeight;
    window.onresize = fixNetscape4;
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||

window.onload = function(){
    // speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
    myScroll = new ScrollObj(6,21,120,"track","up","down","drag","contentMask","content");
};
Avatar billede roenving Novice
30. januar 2004 - 01:04 #2
Er det Vælg favorit, du mener ?-)

Når jeg jo lige prøvede fik jeg en lang menu i Mozilla, men det er måske redirecten ?o]
Avatar billede soelver Nybegynder
30. januar 2004 - 04:44 #3
Ja, det er den. Blot endnu en fejl.
Avatar billede soelver Nybegynder
15. februar 2004 - 02:10 #4
Hm.. Ikke meget hjælp at hente denne gang ;)
Lukker og slukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester