Check out the LimeSurvey source code on GitHub!

ImageTick workaround does not work in LS 2.0

4 years 2 months ago - 4 years 2 months ago #87615 by addlshot
I'm working with evaluation Lime Survey and we are wanting to have some surveys entered on mobile phones, We thought the image tick work around descibed in the wiki would work to allow the buttons and check boxes to show well on a small form factor. but we can't get it to work when using LS 2.0, we can get it to work in LS 1.92 and we haven't changed the code. We put all javascript in the template.js file so it is available to all survey's that use the template. Has anyone else encountered this problem? if so was there anything that you could do to get the imagetick work around to work?
Last Edit: 4 years 2 months ago by addlshot.

Please Log in to join the conversation.

3 years 8 months ago #95611 by Limer2001
Experiencing the same issue. Anyone found a new workaround yet?

Please Log in to join the conversation.

3 years 8 months ago - 3 years 8 months ago #95613 by Limer2001
Ah I just fixed it by specifing the full path of the image ticks in template.js.

So instead of: src="{TEMPLATEURL}/upload/templates/YOURTEMPLATENAME/no_check.png"
Use the full path: src=" "

Also make sure {TEMPLATEJS} precedes the imagetick.js scriptreference in startpage.pstpl

<script type="text/javascript" src="{TEMPLATEURL}imagetick_lime.js"></script>

The only thing not working now is the progressbar... The percentage is showing but the bar is not. If someone know a fix for this I'd be glad to hear it.
<td width="100%" valign="bottom" height="100%" align="right"><span class="graph"><script type="text/javascript">
        $(document).ready(function() {
        value: 55
        <div id="progress-wrapper">
        <span class="hide">U heeft 55% van deze enquĂȘte ingevuld</span>
        <div id="progress-pre">0%</div>
        <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 55%;"></div></div>
        <div id="progress-post" style="display: block;">55%</div>
Last Edit: 3 years 8 months ago by Limer2001.

Please Log in to join the conversation.

3 years 8 months ago #95634 by Limer2001
Fixed the progress bar! :)

Fixed it by adding the following code to template.css in my custom template. I took this code from the default template.

/** Progress bar **/
#progress-wrapper .ui-widget-content {
border: 1px solid #999999;

#progress-wrapper .ui-widget-header {
background-color: #CCCCCC;
border: 1px solid #999999;

.page-odd td.graph {
background-color: #D2F2D3;

.ui-progressbar { height:1em; width:8em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }

#progress-pre{display:none;} /**hides the "0%" text **/

#progress-post {font-size:10px}

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form