---
title: "Javascripthjälp"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/178776-javascripthjälp"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "klinta.net"
published: "2009-05-28T16:01:33.000Z"
updated: "2009-06-02T09:59:53.000Z"
replies: 4
views: 432
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/178776-javascripthjälp"
---

# Javascripthjälp

## #1 — klinta.net, 2009-05-28T16:01Z

Hallå

Håller på och pular med en sida. Novis som jag är på javascript bestämdes det att jag huvudsakligen skulle bygga upp sidan med just det...
Har lagt upp skissen på sidan här: <http://klinta.net/Glass_Webb/>

Skulle vilja få det att när man trycker på menyvalen, att det nya fönstret lägger sig överst. Någon som kan hjälpa mig med detta?
Tack på förhand!

Kod för de flyttbara divarna:

```
function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

  var el;
  var x, y;

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

 

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}
```

Kod för menyn:

```
var slidemenu_width='160px'
var slidemenu_reveal='10px' 
var slidemenu_top='60px'   

var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}

var sitems=new Array()

sitems[0]=["", ""]
sitems[1]=["News", "boxA"]
sitems[2]=["About Music of Glass", "boxB"] 
sitems[3]=["Music", "boxD"]
sitems[4]=["Pictures", "boxC"]
sitems[5]=["Gigs", "boxE"]
sitems[6]=["Rewievs", "dd"]
sitems[7]=["Contact", "http://www."]

var target=""

if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write("<a href=\"javascript:show('"+sitems[i][1]+"');\">")
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2

rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
```

Permalänk: https://www.webforum.nu/p/178776

## #2 — voigtann1, 2009-05-28T16:27Z

Din funktion show() borde du väl kunna sätta ett index++;
likt som din kod gör just nu på dragStart()

```
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
```

???

Permalänk: https://www.webforum.nu/p/2186050

## #3 — klinta.net, 2009-06-02T09:38Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1469240)**
>
> Din funktion show() borde du väl kunna sätta ett index++;
> likt som din kod gör just nu på dragStart()
>
>
> ```
> dragObj.elNode.style.zIndex = ++dragObj.zIndex;
> ```
>
> 
> ???

Tack för svar!
Hur kan jag lägga in detta i min kod? (JavaScript är inte min starka sida..)

Permalänk: https://www.webforum.nu/p/2186358

## #4 — voigtann1, 2009-06-02T09:42Z

har inte testat men, testa att byta ut:

```
function show(elementID)
{
	document.getElementById(elementID).style.visibility='visible';
}
```

med:

```
function show(elementID)
{
	dragObj.elNode = document.getElementById(elementID);
	dragObj.elNode.style.visibility='visible';
	dragObj.elNode.style.zIndex = ++dragObj.zIndex;
}
```

Permalänk: https://www.webforum.nu/p/2186360

## #5 — klinta.net, 2009-06-02T09:59Z

Perfekt. Tack det funkade..!

Permalänk: https://www.webforum.nu/p/2186361

---

Tråden på webben: https://www.webforum.nu/amne/javascript/178776-javascripthjälp