asked on

How to move this into for example a table cell or just move it to another place on the page?

Thanks...

<html>

<head>
<title>Build A Slider Bar</title>

<script type="text/javascript">
// Store a value from 0 to 100 related to the slider's position
sldValueMin=0
sldValueMax=100

// Slider's head left and top
sldTop=0
sldLeft=0

// Drag action is on going is set to true
doDrag=false
dragElement=''

// Mouse cursor position relatively to the slider's head
sldMouseLeft=0
sldMouseTop=0

// Slider's container left and top boundaries
minLeft=0
maxLeft=0

// Get and set positions
function getAbsLeft(o) {
      oLeft = o.offsetLeft
      while(o.offsetParent!=null) {
            oParent = o.offsetParent
            oLeft += oParent.offsetLeft
            o = oParent
      }
      return oLeft
}

function getAbsTop(o) {
      oTop = o.offsetTop
      while(o.offsetParent!=null) {
            oParent = o.offsetParent
            oTop += oParent.offsetTop
            o = oParent
      }
      return oTop
}

function setLeft(o,oLeft) {
      o.style.left = oLeft + "px"
}

function setTop(o,oTop) {
      o.style.top = oTop + "px"
}

function setPosition(o,oLeft,oTop) {
      setLeft(o,oLeft)
      setTop(o,oTop)
}

// Slider's head mouse down handler
function sldMouseDown(e)
{
      // Get event object for IE
      if (!e) {e = window.event}

      // Drag action begins
      doDrag=true
      dragElement = "sldHead"

      o1=document.getElementById("sldHead")
      o2=document.getElementById("sldContainer")

      // Get slider's head position
      sldLeft=o1.offsetLeft
      sldTop=o1.offsetTop

savePos["sldHead"] = sldLeft;

      // Get mouse cursor position relatively to the slider's head
      sldMouseLeft=e.clientX-sldLeft
      sldMouseTop=e.clientY-sldTop

      // Get slider's container boundaries
      minLeft=getAbsLeft(o2)
      maxLeft=o2.offsetWidth-o1.offsetWidth

      // DEBUG
      document.getElementById("mouseCapt").innerHTML = "Mouse Position on Mouse Down event : " + e.clientX + "/" + e.clientY
      document.getElementById("headPos").innerHTML = "Head Position on Mouse Down event : " + sldLeft + "/" + sldTop
      document.getElementById("mousePosRel").innerHTML = "Relative Mouse Position on Mouse Down event : " + sldMouseLeft + "/" + sldMouseTop
      document.getElementById("bounds").innerHTML = "minLeft/maxLeft : " + minLeft + "/" + maxLeft
}

// Slider's head mouse down handler
function sld2MouseDown(e)
{
      // Get event object for IE
      if (!e) {e = window.event}

      // Drag action begins
      doDrag=true
      dragElement = "sldHead2"
//      alert("I am invoked");
      o1=document.getElementById("sldHead2")
      o2=document.getElementById("sldContainer")

      // Get slider's head position
      sldLeft=o1.offsetLeft
      sldTop=o1.offsetTop

savePos["sldHead2"] = sldLeft;

      // Get mouse cursor position relatively to the slider's head
      sldMouseLeft=e.clientX-sldLeft
      sldMouseTop=e.clientY-sldTop

      // Get slider's container boundaries.
      minLeft=getAbsLeft(o2)
      maxLeft=o2.offsetWidth-o1.offsetWidth

      // DEBUG
      document.getElementById("mouseCapt").innerHTML = "Mouse Position on Mouse Down event : " + e.clientX + "/" + e.clientY
      document.getElementById("headPos").innerHTML = "Head Position on Mouse Down event : " + sldLeft + "/" + sldTop
      document.getElementById("mousePosRel").innerHTML = "Relative Mouse Position on Mouse Down event : " + sldMouseLeft + "/" + sldMouseTop
      document.getElementById("bounds").innerHTML = "minLeft/maxLeft : " + minLeft + "/" + maxLeft
}

// Generic mouse up handler
function sldMouseUp(e)
{
      // Drag action stops
      doDrag=false
}
savePos = new Array();

// Generic mouse move handler
function sldMouseMove(e)
{
      // Get event object for IE
      if (!e) {e = window.event}
//      alert("IN 2: "+e.srcElement.id );
      // If drag action is on going...
      if (doDrag)
      {
            o=document.getElementById(dragElement)

//            alert(e.srcElement.id+'' + "---" + o);

            // Get slider's head new position
            newPos = e.clientX-sldMouseLeft

            // Check slider's container boundaries
            if(newPos<=minLeft){newPos=0}
            if(newPos>=maxLeft) {newPos=maxLeft}

if (dragElement == "sldHead" && newPos >= savePos["sldHead2"]) return false
if (dragElement == "sldHead2" && newPos <= savePos["sldHead"]) return false
savePos[dragElement]=newPos

            // Set slider's head new position
            setPosition(o,newPos,sldTop)

            // Get slider's value (0 to 100)
            var curVal = Math.round((newPos * 100)/maxLeft)

            if (dragElement == "sldHead2")
                  sldValueMax = curVal
            if (dragElement == "sldHead")
                  sldValueMin = curVal


            // DEBUG
            document.getElementById("watcher").innerHTML = sldValueMin + "% >" + dragElement+"<"
            document.getElementById("watcher2").innerHTML = sldValueMax + "%>" + dragElement+"<"

            // Stop event propagation
            return false
      }

      // DEBUG
      if (document.getElementById("mousePos"))
      {
            document.getElementById("mousePos").innerHTML = "Mouse Position : " +
e.clientX + "/" + e.clientY
            document.getElementById("dragStatus").innerHTML = "doDrag : " + doDrag
      }

}

// Set generic handlers
document.onmousemove = sldMouseMove
document.onmouseup= sldMouseUp
</script>

</head>

<body>

<div id="sldContainer"
style="position:absolute;top:9px;left:0px;width:600px;height:20px;
              background-color:#dddddd">
<div id="sldHead"
style="position:absolute;top:0px;left:0px;width:8px;height:8px;cursor:pointer;cursor:hand"
       onmousedown="sldMouseDown(event)"
       onmousemove="sldMouseMove()">
       <img src="headMin.gif" id="im1" style="height:20px;width:12px;border:0"/>
       </div>
<div id="sldHead2"
style="position:absolute;top:0px;left:600px;width:8px;height:8px;cursor:pointer;cursor:hand"
       onmousedown="sld2MouseDown(event)">
       <img src="headMax.gif" id="im2" style="height:20px;width:12px;border:0"/>
       </div>
</div>

<div id="watcher" style="position:absolute;top:100px;left:200px;width:100px;height:100px;color:#c0c0c0;font-family:arial;font-size:30px"></div>
<div id="watcher2" style="position:absolute;top:100px;left:400px;width:100px;height:100px;color:#c0c0c0;font-family:arial;font-size:30px"></div>

<div id="mousePos" style="position:absolute;height:30px;top:200px;left:4px"></div>
<div id="mouseCapt" style="position:absolute;height:30px;top:235px;left:4px"></div>
<div id="headPos" style="position:absolute;height:30px;top:270px;left:4px"></div>
<div id="mousePosRel" style="position:absolute;height:30px;top:305px;left:4px"></div>
<div id="dragStatus" style="position:absolute;height:30px;top:340px;left:4px"></div>
<div id="bounds" style="position:absolute;height:30px;top:370px;left:4px"></div>

</body>

</html>

SarahClough

To move the bar down the page you can just change the top value of the sldContainer div.

i.e. changing

<div id="sldContainer"
style="position:absolute;top:9px;left:0px;width:600px;height:20px;
background-color:#dddddd">

to

<div id="sldContainer"
style="position:absolute;top:109px;left:0px;width:600px;height:20px;
background-color:#dddddd">

will move it down 100 pixels. The two scroll buttons will move with it but the text won't, so you'll need to do something similar to move those.

hankknight

Try turning your:
style="position:absolute; ...

into
style="position:relative; ...

ASKER CERTIFIED SOLUTION

hankknight

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

ASKER

Thanks

That did it.

hankknight

Thank you, mplungjan for your contributions to this community. I have been helped numourious times by your answers to other people's questions.

Michel Plungjan

ASKER

You are welcome...
There is a little problem:

This works well if the slider is kept in the left most column.
If I move it on some other cell in the table, the script does not work.

______________________________________________
| Col 1 | Col 2 | Col 3 | Col 4 (Need Slider here) | Col 5 |
---------------------------------------------------------------------------------

The javascript, seems to be calculating the absolute left from the browser window and not from the table. How do I get
relative position from the left of the cell and not the table or window?

hankknight

Hmmmmm.

Tell me if this works:
--------------------------------
<html>
<head>
<title>Build A Slider Bar</title>

<script type="text/javascript">
// Store a value from 0 to 100 related to the slider's position
sldValueMin=0
sldValueMax=100

// Slider's head left and top
sldTop=0
sldLeft=0

// Drag action is on going is set to true
doDrag=false
dragElement=''

// Mouse cursor position relatively to the slider's head
sldMouseLeft=0
sldMouseTop=0

// Slider's container left and top boundaries
minLeft=0
maxLeft=0

// Get and set positions
function getAbsLeft(o) {
oLeft = o.offsetLeft
while(o.offsetParent!=null) {
oParent = o.offsetParent
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}

function getAbsTop(o) {
oTop = o.offsetTop
while(o.offsetParent!=null) {
oParent = o.offsetParent
oTop += oParent.offsetTop
o = oParent
}
return oTop
}

function setLeft(o,oLeft) {
o.style.left = oLeft + "px"
}

function setTop(o,oTop) {
o.style.top = oTop + "px"
}

function setPosition(o,oLeft,oTop) {
setLeft(o,oLeft)
setTop(o,oTop)
}

// Slider's head mouse down handler
function sldMouseDown(e)
{
// Get event object for IE
if (!e) {e = window.event}

// Drag action begins
doDrag=true
dragElement = "sldHead"

o1=document.getElementById("sldHead")
o2=document.getElementById("sldContainer")

// Get slider's head position
sldLeft=o1.offsetLeft
sldTop=o1.offsetTop

savePos["sldHead"] = sldLeft;

// Get mouse cursor position relatively to the slider's head
sldMouseLeft=e.clientX-sldLeft
sldMouseTop=e.clientY-sldTop

// Get slider's container boundaries
minLeft=getAbsLeft(o2)
maxLeft=o2.offsetWidth-o1.offsetWidth

// DEBUG
document.getElementById("mouseCapt").innerHTML = "Mouse Position on Mouse Down event : " + e.clientX + "/" + e.clientY
document.getElementById("headPos").innerHTML = "Head Position on Mouse Down event : " + sldLeft + "/" + sldTop
document.getElementById("mousePosRel").innerHTML = "Relative Mouse Position on Mouse Down event : " + sldMouseLeft + "/" + sldMouseTop
document.getElementById("bounds").innerHTML = "minLeft/maxLeft : " + minLeft + "/" + maxLeft
}

// Slider's head mouse down handler
function sld2MouseDown(e)
{
// Get event object for IE
if (!e) {e = window.event}

// Drag action begins
doDrag=true
dragElement = "sldHead2"
// alert("I am invoked");
o1=document.getElementById("sldHead2")
o2=document.getElementById("sldContainer")

// Get slider's head position
sldLeft=o1.offsetLeft
sldTop=o1.offsetTop

savePos["sldHead2"] = sldLeft;

// Get mouse cursor position relatively to the slider's head
sldMouseLeft=e.clientX-sldLeft
sldMouseTop=e.clientY-sldTop

// Get slider's container boundaries.
minLeft=getAbsLeft(o2)
maxLeft=o2.offsetWidth-o1.offsetWidth

// DEBUG
document.getElementById("mouseCapt").innerHTML = "Mouse Position on Mouse Down event : " + e.clientX + "/" + e.clientY
document.getElementById("headPos").innerHTML = "Head Position on Mouse Down event : " + sldLeft + "/" + sldTop
document.getElementById("mousePosRel").innerHTML = "Relative Mouse Position on Mouse Down event : " + sldMouseLeft + "/" + sldMouseTop
document.getElementById("bounds").innerHTML = "minLeft/maxLeft : " + minLeft + "/" + maxLeft
}

// Generic mouse up handler
function sldMouseUp(e)
{
// Drag action stops
doDrag=false
}
savePos = new Array();

// Generic mouse move handler
function sldMouseMove(e)
{
// Get event object for IE
if (!e) {e = window.event}
// alert("IN 2: "+e.srcElement.id );
// If drag action is on going...
if (doDrag)
{
o=document.getElementById(dragElement)

// alert(e.srcElement.id+'' + "---" + o);

// Get slider's head new position
newPos = e.clientX-sldMouseLeft

// Check slider's container boundaries
if(newPos<=minLeft){newPos=0}
if(newPos>=maxLeft) {newPos=maxLeft}

if (dragElement == "sldHead" && newPos >= savePos["sldHead2"]) return false
if (dragElement == "sldHead2" && newPos <= savePos["sldHead"]) return false
savePos[dragElement]=newPos

// Set slider's head new position
setPosition(o,newPos,sldTop)

// Get slider's value (0 to 100)
var curVal = Math.round((newPos * 100)/maxLeft)

if (dragElement == "sldHead2")
sldValueMax = curVal
if (dragElement == "sldHead")
sldValueMin = curVal

// DEBUG
document.getElementById("watcher").innerHTML = sldValueMin + "% >" + dragElement+"<"
document.getElementById("watcher2").innerHTML = sldValueMax + "%>" + dragElement+"<"

// Stop event propagation
return false
}

// DEBUG
if (document.getElementById("mousePos"))
{
document.getElementById("mousePos").innerHTML = "Mouse Position : " +
e.clientX + "/" + e.clientY
document.getElementById("dragStatus").innerHTML = "doDrag : " + doDrag
}

}

// Set generic handlers
document.onmousemove = sldMouseMove
document.onmouseup= sldMouseUp
</script>

</head>

<body>
<br /><br /><br />

Here is your table: put it anywhere! :-)

<table align=left id="sldContainer" border="0" style="position:relative;top:9px;left:0px;width:600px;height:20px; background-color:#dddddd"><tr><td>

<div id="sldHead"
style="position:absolute;top:0px;left:0px;width:8px;height:8px;cursor:pointer;cursor:hand"
onmousedown="sldMouseDown(event)"
onmousemove="sldMouseMove()">
<img src="headMin.gif" id="im1" style="height:20px;width:12px;border:0"/>
</div>
<div id="sldHead2"
style="position:absolute;top:0px;left:600px;width:8px;height:8px;cursor:pointer;cursor:hand"
onmousedown="sld2MouseDown(event)">
<img src="headMax.gif" id="im2" style="height:20px;width:12px;border:0"/>
</div>

<div id="watcher" style="position:absolute;top:100px;left:200px;width:100px;height:100px;color:#c0c0c0;font-family:arial;font-size:30px"></div>
<div id="watcher2" style="position:absolute;top:100px;left:400px;width:100px;height:100px;color:#c0c0c0;font-family:arial;font-size:30px"></div>

<div id="mousePos" style="position:absolute;height:30px;top:200px;left:4px"></div>
<div id="mouseCapt" style="position:absolute;height:30px;top:235px;left:4px"></div>
<div id="headPos" style="position:absolute;height:30px;top:270px;left:4px"></div>
<div id="mousePosRel" style="position:absolute;height:30px;top:305px;left:4px"></div>
<div id="dragStatus" style="position:absolute;height:30px;top:340px;left:4px"></div>
<div id="bounds" style="position:absolute;height:30px;top:370px;left:4px"></div>

</td></tr></table>
</body>
</html>
--------------------------------

I moved put the whole thing in the table instead of just the bar. It seems to work just fine for me, but maybe I don't quite understand what you need this to do. Anyway, let me know if this works for you.

Michel Plungjan

ASKER

almost...

But look - center works but cell does not.:

<table align=center id="sldContainer" border="1" style="position:relative;top:9px;left:0px;width:600px;height:20px; background-color:#dddddd"><tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>

<div id="sldHead"

hankknight

I see what you mean-- it works fine with <table align=left> but not <table align=center>

I'm over my head with this one! Something weird is going on . . . I recommend posting the updated code as a new question and maybe a "real" expert can help.

ziffgone

Well I'm no "Real Expert", but possible solution here:

https://www.experts-exchange.com/questions/21076895/Position-relative-table-problem.html

At least I think so, unless Mike has something else up his sleeve. :P

Regards...

Michel Plungjan

ASKER

Yes, the last change was

<table align=center id="sldContainer" border="1" style="position:relative;top:9px;left:0px;width:600px;height:20px; background-color:#dddddd"><tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>

<div id="sldHead"

with the slider in a cell

Michel Plungjan

ASKER

actually with the slider in the one but last cells

Michel Plungjan

ASKER

I cannot believe it.
I am revisiting this and need 10 of these in a horizontal scrollable area... ARRGHH:(