Slider - runner goes further than max value

Suite and Optimus Suite 5
#1

I have encountered a funny problem.
The runner does not stop at the slider’s maximum end but continues until it has reached slider size plus runner size length. That is when the runner stops it has just turned inivisible to the right of the slider.

Funny thing is that this does not always occur.
When I have div1 → div2 → sliderholderdiv → slider this occurs.
With div1 → sliderholderdiv → slider it does not occur.

I have tried a plethora of variations but have not been able to solve this.

#2

When I have div1 -> div2 -> sliderholderdiv -> slider this occurs.

Please provide some sample to recreate the problem.

#3

Hej Alexandra,
I have devoted half a day to this peculiar problem, and I think I have it pinned down.

It is like this :

div1 is the parent div.

div2 = document.createElement(“div”);
div2.style.display = “none”;
div1.appendChild(div2);

divsliderholder = document.createElement(“div”);
div2.appendChild(divsliderholder);

sld = new dhtmlxSlider(“divsliderholder”, 230, “arrowgreen”, false);
…
sld.init();

Further down in the code when an event has triggered:

div2.style.display = “block”;
sld.setMin(oMap.aScales[0]);
sld.setMax(1000);
sld.setStep(500);
sld.setValue(20000);

The runner can now be dragged beyond the slider in the maximum end. It seems to be some error with the stepping mechanism.

However, if div2 is not set to style.display = “none” in the first place all is OK.
Farfetched if you ask me.

#4

I’m having the exact same problem, exactly how do you solve this?
Aldo I’m using a slider inside an accordion which loads in different div objects… But I guess the problem is the same.

#5

we have managed to recreate the problem. The can be two possble solutions:

  1. using visibility:hidden instead of display:none, and visibility:visible to show the element
  2. initialization slider after display:block is called:

var sld = null; ... div2.style.display = "block"; if(!sld){ sld = new dhtmlxSlider("divsliderholder", 230, "arrowgreen", false); ... sld.init(); ... }

#6

Hey again alexandra,

I’m still having this problem and can’t really think of a way to get around it.
I am using an accordion atm. I’m loading in different div objects into the accordion menu and the slider is inside one of those divs.
Accordion, seems to be using display = none, when it switches through the menu buttons.

Here is a bit of a code example of what im talking about.

This is from the onload function in the body tag.

dhxAccord = new dhtmlXAccordion(“accordObj”);
dhxAccord.setSkin(“dhx_skyblue”);
dhxAccord.setIconsPath(“imgs/”);
dhxAccord.addItem(“a1”, “Page Settings”);
dhxAccord.addItem(“a2”, “Window Settings”);
dhxAccord.addItem(“a3”, “Module Settings”);
dhxAccord.addItem(“a4”, “Questions”);
dhxAccord.openItem(“a1”);
dhxAccord.cells(“a1”).attachObject(“PageSettingsDiv”);
dhxAccord.cells(“a2”).attachObject(“WindowSettingsDiv”);
dhxAccord.cells(“a3”).attachObject(“ModuleSettingsDiv”);
dhxAccord.cells(“a4”).attachObject(“divQuestHandler”);
dhxAccord.setEffect(true);

slider = new dhtmlxSlider(“AlphaSlider”, {
min: 0,
max: 100,
step: 1,
size: 65,
vertical: false
});

slider.setImagePath("imgs/");
slider.setSkin("arrow");
slider.init();

The problem for me is, The accordion is loading the div object “WindowSettingsDiv” which uses the slider module by the use of loading into another div object, “AlphaSlider”. This however triggers the problem with the slider going above its maximum limit.

Is there an easy way to solve this problem and not having to reload the slider each time the accordion menu button is triggerd?

Regards Sansarah

#7

Thanks Alexandra,

I had already used method 2.
If you are not too busy, I would appreciate a brief explanation why style.display = “none” do not work. I might learn something.

#8

Hi again,

I discovered the other day that when an object is set to style.display = “none”, offsetWidth and offsetHeight is set to zero. That might be the problem in the example above.