Welcome, Guest
Username: Password: Remember me

TOPIC: Getting the sliderhandle to stay within the "sliderlane"

Getting the sliderhandle to stay within the "sliderlane" 1 year 9 months ago #87782

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • Karma: 0
Hi,

the default behaviour of the jquery ui slider handle is to have its middle at the edge of the "sliderlane". I however want the entire handle to stay within the lane at the endpoints.

Here (stackoverflow.com/questions/3707228/jque...-handle-modification)is a suggestion on how to solve it but I am not sure on how implement it in Limesurvey. :-/

Anyone got any suggestions?

Take care
Adam
The administrator has disabled public write access.

Re: Getting the sliderhandle to stay within the "sliderlane" 1 year 9 months ago #87837

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6252
  • Thank you received: 799
  • Karma: 239
Hello,

Think you can use a multi numeric question type (without slider) and use your own slider launcher ith you own option and css.

LS inclde jquery, and included parameters use jquery, but sometimes is best to use your own jquery script :)
The administrator has disabled public write access.

Re: Getting the sliderhandle to stay within the "sliderlane" 1 year 9 months ago #87852

  • adishardis
  • adishardis's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 58
  • Karma: 0
Here's what I did, don't know if it's the best solution but it seems to do the job!

A warning though, I got som errors regarding em-manager for some reason but It dissapeared when I logged out and logged in again, but If someone knows why this solution is the wrong way to do it let me know!

To change the Multi-numerical slider I inserted an extra div <div id=myslider> in limesurvey/application/helpers/qanda_helper.php in line 3452 just before <div id=\"slider-$myfname\" class=\"ui-slider-1\">.

Code display:
                . "<div id=\"MySlider\" /><div id=\"slider-$myfname\" class=\"ui-slider-1\">\n"
                .  $slider_showmin
                . "<div class=\"slider_callout\" id=\"slider-callout-$myfname\"></div>\n"
                . "<div class=\"ui-slider-handle\" id=\"slider-handle-$myfname\"></div>\n"
                . $slider_showmax
                . "\t</div></div>"
                . "</div>$sliderright\n"
                . "<input class=\"text\" type=\"text\" name=\"$myfname\" id=\"answer$myfname\" value=\"";

and then in Template.css I added the id Myslider and included the background image:

#MySlider{
background-image:url(sliderBG3.png);
text-align:center;
background-repeat:no-repeat;
height:51px;
width:486px;
}

and lastly I removed the default bg for the slider and changed the width like this:

.ui-slider-1 {
width: 445px;
height: 51px;
margin-bottom: 20px;
}

I also changed the handler button:

.ui-slider .ui-slider-handle {
position: absolute;
height: 70px;
width: 70px;
top: -6px;
left: 0;
margin-left: -15px;
background: transparent url(sliderknapp3.png) 0 0 no-repeat;
border-width: 0;
}

I think that was it and everything is working like a charm!

Cheers
/Adam
Last Edit: 1 year 9 months ago by adishardis. Reason: fixed spelling
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.174 seconds
Donation Image