Archief - JavaScript : Navigatie

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

PieterJ

Legacy Member
Op de volgende link [http://www.websitemaken.be/index.php?page=show_script&id=162] vind je normaalgezien een script voor een vrij uitgebreid JavaScript menu. Nu moet ik zeggen dat ik eigenlijk vrijwel een leek ben in JavaScript. Voorgemaakte scriptjes grafisch aanpassen lukt me nog net. Maar met dit script slaag ik er nog niet eens in om gewoon een menu weer te kunnen geven. Kan iemand mss wat aanvullende uitleg geven?
Of vlug eens dit script omzetten in een pagina met een navigatie...

PieterJ

Legacy Member
Echt niemand die mij kan helpen?

Is dit script dan dus toch echt heel onduidelijk?

Brando[n]

Legacy Member
Dit zet je in slidelinks.js : gewoon in kladblok pasten en opslaan als slidelinks.js
Code:
ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 250
ypSlideOutMenu.hideDelay = 1000
ypSlideOutMenu.minCPUResolution = 10

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

if (this.ie || this.ns4 || 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

// global reference to this object
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")

// add this menu object to an internal list of all menus
ypSlideOutMenu.Registry[id] = this

var d = document

var strCSS = '<style type="text/css">';
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
strCSS += '</style>';

d.write(strCSS)

this.load()
}
}

ypSlideOutMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? 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.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen

// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")

//set initial state
this.endSlide()
}
}

ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]

if (obj.container) {
obj.over = true

// close other menus.
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

// if this menu is scheduled to close, cancel it.
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

// if this menu is closed, open it.
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}

ypSlideOutMenu.hideMenu = function(id)
{
// schedules the menu to close after <hideDelay> ms, which
// gives the user time to cancel the action if they accidentally moused out
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}

ypSlideOutMenu.hide = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
obj.over = false

if (obj.hideTimer) window.clearTimeout(obj.hideTimer)

// flag that this scheduled event has occured.
obj.hideTimer = 0

// if this menu is open, close it.
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}

ypSlideOutMenu.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()", ypSlideOutMenu.minCPUResolution)
}

ypSlideOutMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(ypSlideOutMenu.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)
}
}

ypSlideOutMenu.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)
}
}

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

// events
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }

Dit zet je in je head.
Code:
<script language= "javascript" src="ypSlideOutMenus.js"></script>

En dit normaal waar je menu moet komen!
Code:
<script language="javascript">
new ypSlideOutMenu("menu1", "down", 102, 19, 86, 90) //function ypSlideOutMenu(id, dir, left, top, width, height) --> dit zijn de parameters die ermee overeen moeten komen

</script>

<table cellpadding="0" cellspacing="0" border="0" width="516">
<tr>
<td width="86"><a href="http://www.google.com" onmouseover="MM_swapImgRestore();MM_swapImage('aboutblender','','Over/Home.jpg',1);ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1');MM_swapImgRestore()"><img src="Normaal/Home.jpg" width="86" height="18" alt="Home" border="0" id="aboutblender" name="aboutblender" /></a></td>
</tr>
<tr>
<td colspan="15" bgcolor="#092C46" height="1" style="height: 1px; background-color: #092C46;"></td>
</tr>
</table>

<div id="menu1Container">
<div id="menu1Content" style="position: relative; left: 0; filter:alpha(opacity=93); text-align: left;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td><a href="http://www.msn.be" onmouseover="MM_swapImage('één','','Over/Sub/Sub1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Normaal/Sub/Sub1.jpg" width="86" height="18" alt="één" border="0" id="één" name="één" /></a></td></tr>
<tr><td><a href="http://www.msn.be" onmouseover="MM_swapImage('twee','','Over/Sub/Sub2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Normaal/Sub/Sub2.jpg" width="86" height="18" alt="twee" border="0" id="twee" name="twee" /></a></td></tr>
<tr><td><a href="http://www.msn.be" onmouseover="MM_swapImage('drie','','Over/Sub/Sub3.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Normaal/Sub/Sub3.jpg" width="86" height="18" alt="drie" border="0" id="drie" name="drie" /></a></td></tr>
<tr><td><a href="http://www.msn.be" onmouseover="MM_swapImage('vier','','Over/Sub/Sub4.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Normaal/Sub/Sub4.jpg" width="86" height="18" alt="vier" border="0" id="vier" name="vier" /></a></td></tr>
<tr><td><a href="http://www.msn.be" onmouseover="MM_swapImage('vijf','','Over/Sub/Sub5.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Normaal/Sub/Sub5.jpg" width="86" height="18" alt="vijf" border="0" id="vijf" name="vijf" /></a></td></tr>
</table>
</div>
</div>


Normaal moet het zo zijn...

PieterJ

Legacy Member
Bedankt voor de hulp !!!

Ik probeer het meteen. Mocht het toch niet lukken (maar ik heb er een goed oog in), dan post ik nog wel iets...

Toen ik het zelf probeerde zat ik er trouwens niet zover naast. Ik was gewoon in mijn header vergeten een verwijzing te maken naar de '.js' :naughty:

PieterJ

Legacy Member
Helaas werkt het toch niet...

Niemand die het ziet zitten om gewoon even vlug een pagina aan te maken met hierop het menu...

(Ik denk dat dit voor een 'ingewijde' maar een 2-tal minuutjes werk is?)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan