JQMobile App with Touchpunch not working - jquery-mobile

I am trying to get a Worklight 6.2 app JQueryMobile 1.4 mobile app working which has draggable widgets. I have included js from touchpunch http://touchpunch.furf.com/ , where I have a button that I am trying to make draggable
<script>$('#draggableButton').draggable();</script>
I was wondering if anyone had tried getting touchpunch working with Worklight/jqm or if they ended up taking some other approach to create a draggable widget. Thanks!
Jeff

It worked for me after:
adding missing jquery-ui.js
adding missing class="ui-widget-content" declaration on the a href
I also moved the .draggle() to wlCommonInit()
Modified HelloDraggable sample project.

Related

Drag and Drop list using jquery UI is not working in Firefox

I am working with drag and drop list using jquery UI, it is working fine with Chrome but it seems not working with Firefox.
Here is the link:
http://embed.plnkr.co/WcIZlD/
Please help me on this.
I found the issue. Please change your code.
Current Code:
$(event.originalEvent.toElement)
Change it to:
$(event.originalEvent.target)

Rails 4, Polymer and Zurb Foundation

I'm trying to integrate Polymer components into my Rails 4 app that is already integrated with zurb foundation 5.
I have followed the instructions for the polymer-rails && polymer-paper-rails gems and included require paper-button/paper-button into my application.html.erb
My buttons.haml file looks like this:
%paper-button= "Flat Button"
What is however displayed on the ui,is Flat Button plain text and not a Polymer Flat Button.
Am I doing something wrong or is there a known issue with these Gems(Polymer and Foundation) not functioning well together?
UPDATE:
After a long struggle, I have managed to get this GEM to run without any notice/error in the Google Chrome Console. Firefox is still not happy however. It does seem to be a different issue now, since I've added platform.js into the pre-compiler. After adding platform.js to the pre-compiler, components have disappeared from the UI completely (As if no component code exists), and this only happens in Firefox.
See below a screenshot of Firebug:
Thanks.

Autocomplete and jeditable-datepicker not working together in Jeditable

I am using jeditable and i needed to integrate with jeditable-datepicker and Autocomplete
everything works fine apart from this incompatibility between them.
I have noticed that the problem is caused by the script
<script src="jquery-ui-1.8.24.custom.min.js"></script>
which makes working my jQuery datepicker, if i remove it the autocomplete starts working again but obviously my Jquery date picker stops working.
How can i figure it out my issue? there is a way to make them working together?
Thanks
i found the solution, i explain it here, it might be useful for someone in the future.
i have downloaded again the custom jQuery , i have deselected all the options just keeping the Datepicker Widget and then pasted the new script in my page and the incompatibility was gone!

Why Cant I use basic hover and active css on xcode cordova application

Im having problem with cordova xcode app. I already have my html page setup. I cant make a very simple hover and active animation on css. Very basic, when you click or hover a certain button or div tag, background image will change. I already tried javascript/jquery (created a function for mouseDown and Up) but nothing happened. I think cordova app or the xcode itself prevent such style or animation? If so, can I edit it make my own style.?
Well, before I export in my IOS app I tried it in dreamweaver and ran it on the browser and it worked. But when I export it on my ios app the css/javascript hover no longer work.
Should you have answer any answer regarding this matter is highly appreciated!
Thank you very much!
I think cordova app or the xcode itself prevent such style or
animation? If so, can I edit it make my own style.?
I was able to do a simple animation in cordova. For instance:
$('#formulaire').animate({
opacity: 1.0,
}, 4000, function() {});
$('#logo').animate({
"top":"60px"
}, 2000, function() {});
}
Edit 1.0:
Inside the html file (index)?
Yes.
How did you configure your cordova app.
Just like it's state on the quick guide in the cordova site.
So my question here, are you using JQuery? Did you import it correctly? Mine is imported like this:
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.mobile-1.1.0.js"></script>
Don't mind the Data Management folder:

jQuery and Safari 4.0.1 - ToggleClass effect

I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.

Resources