Welcome, Guest
Username: Password: Remember me

TOPIC: ImageTick workaround does not work in LS 2.0

ImageTick workaround does not work in LS 2.0 1 year 5 months ago #87615

  • addlshot
  • addlshot's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 1
  • Karma: 0
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: 1 year 5 months ago by addlshot.
The administrator has disabled public write access.

ImageTick workaround does not work in LS 2.0 11 months 3 weeks ago #95611

  • Limer2001
  • Limer2001's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 18
  • Thank you received: 2
  • Karma: 0
Experiencing the same issue. Anyone found a new workaround yet?
The administrator has disabled public write access.

ImageTick workaround does not work in LS 2.0 11 months 3 weeks ago #95613

  • Limer2001
  • Limer2001's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 18
  • Thank you received: 2
  • Karma: 0
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="www.yourwebsite.com/upload/templates/YOU...ATENAME/no_check.png"


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

{TEMPLATEJS}
<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() {
        $("#progressbar").progressbar({
        value: 55
        });
        ;});
        </script>
 
        <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>
        </div></span></td>
Last Edit: 11 months 3 weeks ago by Limer2001.
The administrator has disabled public write access.

ImageTick workaround does not work in LS 2.0 11 months 3 weeks ago #95634

  • Limer2001
  • Limer2001's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 18
  • Thank you received: 2
  • Karma: 0
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}
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.156 seconds
Donation Image