I am developing an app using Cordova and JQMobile . I have to place 5 icons on the header without any text.But I am able to place only two per line as per the example on jqm demos page.Also the icons are displayed in seperate boxes rather than being displayed in the header itself.
What i want is http://tinypic.com/r/2qi5u6q/8
what i get is http://tinypic.com/r/ap777m/8
I have spent a lot of time and need someone's help
Related
My Cordova/Ionic (v1.3.0) App consists primarily of a JQuery App that builds the HTML for complex forms. The same JQuery App is used to build the complex forms for the web browser with only a few places where it inserts mobile-specific code.
I am now trying to have a horizontally scrolling table section within the vertically scrolling form (the form itself doesn't scroll horizontally, just the table section). The section horizontal scrolling works in Safari/Chrome/Firefox on the computer, in Safari on iOS, and in the Android version of our Cordova/Ionic app but it doesn't horizontally scroll in the iOS app.
I tried various fixes based on these SO questions and documentation (q1,q2,q3,q4) where I changed it from a <div/> to <ion-content/> and added the overflow-scroll="true" direction="xy" delegate-handle="tableGroup" properties and called $ionicScrollDelegate.$getByHandle('tableGroup').resize() after the JQuery app loaded but nothing worked. I also tried using TinyScrollbar based on this question but that wasn't loading right. So I've tried going many directions but haven't gotten anywhere. Any suggestions?
I actually figured this out on my own. I put a couple variations of a simple scrolling elements in containers on the Ionic page and <ion-scroll/> worked. Then I tried putting it in the JQuery app with a delegate handle sectionScroll and called $ionicScrollDelegate.$getByHandle('sectionScroll').resize(); after the JQuery app loaded but got a console warning saying that it couldn't find anything named sectionScroll and that I should put it in a $timeout(). I tried that but it still didn't work. Then I realized that since <ion-scroll/> is an angular directive that is created as part of a long template string inserted into the Ionic app using JQuery, it needed to be compiled by Angular to be recognized as below:
let toCompile = angular.element('#formContent');
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle('sectionScroll').resize();
I have a Rails app that uses CKEditor. Sometimes the text editor doesn't display all the buttons (the Source, add picture, etc buttons are missing):
However, sometimes it does, or it does if I refresh enough times:
I haven't detected a pattern to when or when it doesn't display all the buttons. Any ideas on what the problem is?
I need to open Pdf / Docx documents for preview from a Phonegap app.
On Android it's possible to open files in extenal apps using WebIntent plugin.
Now what about iOS? It seems possible to do this entirely with the build-in browser (which surprisingly does render docx) by creating a html page with a header and a back button in the top and an iframe taking up the rest of the screen.
It would be great if the user could zoom and drag the document while the header would remain stationary, but I couldn't get to zoom working at all inside the iframe.
Any suggestions?
I ended up using InAppBrowser Plugin with enableViewportScale=yes. It displays a toolbar with a back button with custom caption. It would be better if I can add my own toolbar, so the navigation is consistent in the whole app, but this is good enough.
I am trying to recreate a popular effect that all iPhone users have seen before on their settings page. Something like when selecting a wireless network. There is normally a title that says "Available Networks" with a blue arrow icon to the right. onClick there is an accordion style slide down effect to reveal the available networks.
I am trying to recreate this to use as a drop down input for my app's settings page since iPhone does not have anything like that in their storyboard builder interface. The other issue is the options will be dynamic (coming from a database).
Has anyone seen a tutorial on this or maybe an open source app I can use as reference.
I am using iOS 6.1 using Storyboards.
EDIT
I should have spent a little more time researching I am sure I would have have this post that was very helpful regardind the actual code for the drop-down not so much the dynamic data. How to create DropDown in xcode?
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.