Languages

Menu
Sites
Language
JQM Slider Example

Hi all,

I'm sure I am missing something glaringly obvious but hasanyone been able to get the slider to work using the Tizen UI Framework?  I'm struggling to even trigger callbacks for things like slidestop (e.g. http://jsfiddle.net/2HEcY/87/) or when the slider value is changed.

Thanks in advance.

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

5 Replies
talari praveen kumar
hi i tested with the code(in 2.1 sdk) which you mentioned in the link, it is working fine please refer to the screen shots http://s1316.photobucket.com/user/Chinna5b6/media/slider_zps8eb6dc58.png.html http://s1316.photobucket.com/user/Chinna5b6/media/slider1_zpse88d4bf8.png.html try this code, it is also working fine
Matt Alonso
Thank you so much for your prompt reply. I apologize for the delay in my response but I was out of the office for a holiday. So I was able to get it working in a sample script but not in the code I developed. After a lot of testing, I was able to narrow down the problem. It seems as though the Tizen UI framework is not handling sliders appropriately if they are not on the current/first "page". I created a test case here: http://pastebin.com/EwFcLCZT When I put this into a test project and then run it in the emulator, I do not get the expected behavior. Steps: 1) Load html from pastebin into slider.html into IDE. 2) Load slider.html in emulator 3) Move slider on page 1. 4) Alert pops up saying "Stop - Page 1" 5) Hit OK. 6) Click "Page 2" link in footer. 7) Move slider on page 2. Expected result: Alert saying "Stop - Page 2" Actual result: No alert shows up. Interestingly enough, if I click on the "Page 1" link in the footer on page 2 and then move the same slider mentioned in steps 3 - 5, I no longer get an alert. Also worth pointing out that if you point the emulator to slider.html#page2, the slider on that page works now but the slider for page1 does not. Thoughts?
konduri sai swathi
Hi , Looked at your code, kindly try keeping the script part of your code in main.js file . 
 $(document).ready(function(){
        $("#animSlider").on("slidestop", function(e){ alert("STOP - Page 1"); });
        $("#animSlider2").on("slidestop", function(e){ alert("STOP - Page 2"); });
    });
Place the above code in main.js instead in index.html . Worked for me like that .
konduri sai swathi
Hi , Looked at your code, kindly try keeping the script part of your code in main.js inside init() . 
$(document).ready(function(){
        $("#animSlider").on("slidestop", function(e){ alert("STOP - Page 1"); });
        $("#animSlider2").on("slidestop", function(e){ alert("STOP - Page 2"); });
});
Matt Alonso
Hi Konduri, Thank you for your quick response! I realize that is definitely the cleaner way of doing it and that is how I actually setup my code but I just wanted to put together the simplest example possible. Wow, so that worked. If you do not mind, can you please explain why it is that it worked this way? I inserted some print statements and it actually looks like the pageinit event triggers before the dom ready event: CODE: $(document).ready(function(){ console.log('DOM Ready'); }); $(document).bind('pageinit', pageInit); function pageInit(){ console.log('Page init'); $(document).ready(function(){ console.log('Page init - DOM Ready'); }); } Console: Page init DOM Ready Page init - DOM Ready I have not done anything w/jquery mobile before - plenty w/jquery and web dev in general - so perhaps there is something obvious I am missing. Best I can tell - in a multi (div) page site - the pageinit call happens every time a "page" is loaded for the first time. Does this mean that there is no single event that fires when everything (e.g. DOM, etc) is ready? Again, sorry if I am missing something really obvious, it just seems strange that I can't access the slider when the DOM is ready. Thanks in advance.