Positie van submenu veranderd

[huijb]

Links heb ik een navigatiemenu. Wanneer er met de muis over het menu heen wordt gegaan schuift rechts het submenu uit. Dit gaat goed maar wanneer de site b.v. op een ander(kleiner) beeldschermresolutie wordt bekeken of je verkleind het browser scherm klopt de positie van het submenu ook niet meer. Dat verschijnt dan ergens aan de rechterkant, ver van het hoofdmenu. Het is, uiteraard, de bedoeling dat bij elke afmeting, hetzij van het browserscherm, hetzij van de resolutie, het submenu op dezelfde plaats verschijnt. Iemand een idee hoe dit voor elkaar te krijgen is.

De positie van het vervolgmenu wordt als volgt bepaald;

var xPosition = 400;  
var yPosition =  200; 
new sMenu("menu1",      "right",    xPosition,          yPosition,         200,     88)
new sMenu("menu2",      "right",    xPosition,          yPosition,    400,     88)

 

[That Guy]

Het is natuurlijk wel handig als we ook weten wat de parameters precies zijn. En welk script je gebruikt voor je menu (sMenu is een beetje vaag).

 

[huijb]

Gezien mijn kennis hierover verwacht ik dat je deze bedoeld.

sMenu.Registry = []
sMenu.aniLen = 650
sMenu.hideDelay = 325
sMenu.minCPUResolution = 10

function sMenu(id, dir, left, top, width, height){
	this.ie  = document.all ? 1 : 0
	this.ns17 = document.layers ? 1 : 0
	this.dom = document.getElementById ? 1 : 0

	if (this.ie || this.ns17 || this.dom) {
		this.id		= id
		this.dir		= dir
		this.orientation 	= dir == "left" || dir == "right" ? "h" : "v"
		this.dirType	= dir == "right" || dir == "down" ? "-" : "+"
		this.dim		= this.orientation == "h" ? width : height
		this.hideTimer	= false
		this.aniTimer	= false
		this.open		= false
		this.over		= false
		this.startTime	= 0

		this.gRef = "sMenu_"+id
		eval(this.gRef+"=this")

		sMenu.Registry[id] = this

		var d = document
		d.write('<style type="text/css">')
		d.write('#' + this.id + 'Container { visibility:hidden; ')
		d.write('left:' + left + 'px; ')
		d.write('top:' + top + 'px; ')
		d.write('overflow:hidden; }')
		d.write('#' + this.id + 'Container, #' + this.id + 'Inhoud { position:absolute; ')
		d.write('width:' + width + 'px; ')
		d.write('height:' + height + 'px; ')
		d.write('clip:rect(0 ' + width + ' ' + height + ' 0); ')
		d.write('}')
		d.write('</style>')

		this.load()}
}

sMenu.prototype.load = function() {
	var d = document
	var lyrId1 = this.id + "Container"
	var lyrId2 = this.id + "Inhoud"
	var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
	if (obj1) var obj2 = this.ns17 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
	var temp

	if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
	else {
		this.container	= obj1
		this.menu	= obj2
		this.style		= this.ns17 ? this.menu : this.menu.style
		this.homePos	= eval("0" + this.dirType + this.dim)
		this.outPos	= 0
		this.accelConst	= (this.outPos - this.homePos) / sMenu.aniLen / sMenu.aniLen 

		if (this.ns17) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
//		this.menu.onmouseover = new Function("sMenu.showMenu('" + this.id + "')")
//		this.menu.onmouseout = new Function("sMenu.hideMenu('" + this.id + "')")

		this.endSlide()}
}
	
sMenu.showMenu = function(id){
	var reg = sMenu.Registry
	var obj = sMenu.Registry[id]
	
	if (obj.container) {
		obj.over = true
		if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
		if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)}
}

sMenu.hideMenu = function(id){
	var obj = sMenu.Registry[id]
	   if (obj.container) {
		   if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
		   obj.hideTimer = window.setTimeout("sMenu.hide('" + id + "')", sMenu.hideDelay);}
}

sMenu.hide = function(id){
	var obj = sMenu.Registry[id]
	obj.over = false
	if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
	obj.hideTimer = 0
	if (obj.open && !obj.aniTimer) obj.startSlide(false)
}

sMenu.prototype.startSlide = function(open) {
	this[open ? "onactivate" : "ondeactivate"]()
	this.open = open
	if (open) this.setVisibility(true)
	this.startTime = (new Date()).getTime()	
	this.aniTimer = window.setInterval(this.gRef + ".slide()", sMenu.minCPUResolution)
}

sMenu.prototype.slide = function() {
	var elapsed = (new Date()).getTime() - this.startTime
	if (elapsed > sMenu.aniLen) this.endSlide()
	else {
		var d = Math.round(Math.pow(sMenu.aniLen-elapsed, 2) * this.accelConst)
		if (this.open && this.dirType == "-")		d = -d
		else if (this.open && this.dirType == "+")	d = -d
		else if (!this.open && this.dirType == "-")	d = -this.dim + d
		else										d = this.dim + d
		this.moveTo(d)}
}

sMenu.prototype.endSlide = function() {
	this.aniTimer = window.clearTimeout(this.aniTimer)
	this.moveTo(this.open ? this.outPos : this.homePos)
	if (!this.open) this.setVisibility(false)
	if ((this.open && !this.over) || (!this.open && this.over)) {
		this.startSlide(this.over)}
}

sMenu.prototype.setVisibility = function(bShow) { 
	var s = this.ns17 ? this.container : this.container.style
	s.visibility = bShow ? "visible" : "hidden"
}
sMenu.prototype.moveTo = function(p) { 
	this.style[this.orientation == "h" ? "left" : "top"] = this.ns17 ? p : (p) + "px"
}
sMenu.prototype.getPos = function(c) {
	return parseInt(this.style[c])
}

sMenu.prototype.onactivate		= function() { }
sMenu.prototype.ondeactivate	= function() { }

 

[huijb]

Om e.e.a. even zichtbaar te maken, deze site kampt met hetzelfde probleem http://villagehomegoods.com/ Het menu werkt goed maar wanneer je het browserscherm verkleint klopt er van het menu niets meer. Dit is idem i.g.v. een andere resolutie.

 

[That Guy]

Hoi huijb,


De site verduidelijkt het probleem. Echter, het probleem zit 'm in het script zelf. Ik kan zo even niet vinden waar het precies wordt aangehaald waar de positie van de submenu's moeten komen (het schrijft CSS met absolute waardes, etc.)

Behalve dat gebruikt het script nogal wat verouderde dingen als eval en... netscape.



Ik zou je aanraden een nieuw(er) script te zoeken, want het huidige script veranderen is denk ik veel meer werk.

 

[huijb]

Dat heb ik inmiddels ook gedaan. Bedankt voor je input.