I am using Jquery mobile.
I am trying to make a carosol like the one in market app.
How ever mine is all web based.
I have seen the swipe at iscroll it is nice but hard to get working in the JQM.
I thought it would be easy:
<div style="width:100%; overflow-x: hidden; scroll-x: auto;">
<img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg">
</div>
Was I ever wrong.
I know the subject has be dealt with but I didn't find a final solution.
Use Flexslider. Works nice with Jquery Mobile.
Another fresh slider script is: SwipeJS
I successfully implemented iscroll after a few try in a jQM project. Maybe you used duplicate id's or placed the functions in wrong place.
code that looks for [data-scroll] will eventually be folded into the jqm page processing code when scrollview support is "official" instead of "experimental".
currentlly scroll-x: auto; is not supported in release of jqm 1.0.1.
you can use scrollview.js http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
I'm not very great at javascript and i am having trouble mixing iscroll and jquery mobile. I am testing it on IOS
This is what I have;
http://m.filmrev.me
Both pages are scrolling but not in the correct way.
Would anybody be able to help with this.
Thanks
check this link
http://cubiq.org/dropbox/iscroll4/examples/simple/
And
yours example there are 2 same id for div and 'ul' .
try it change these ids.
ex..
in page, <div id='scroller '>
in page 2 ,
<div id='scroller''>
Have you tried the jQuery Mobile iscroll implementation - see here. This was done specifically for JQM.
However, the JQM devs have started their own scroller, called Overthrow. This is supposed to be more cross-platfrom compared to iscroll. I've used iscroll, scrollview (previous JQM scroller) and am now using Overthrow. Works ok and I found it fairly easy to implement.
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.
a Project I am currently working on uses the jQuery UI framework for some of its widgets.
To provide the user with a global look and feel I would like to use the framework also for its css stuff.
I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.
I try to style the divs like follows
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
Later I would like to implement some draggable-and-sortable functionality.
The Problem I am facing right now is that the boxes aren't properly aligned.
Does anyone has a hint on using jQuery.UI for that kind of css work?
I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.
best regards,
Gordon
I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.
Check how the CSS is applied in this page. You may find it useful.
Can you provide an example where it doesn't work for you?
Maybe you load your own css after you load the jQuery-UI-css and overwrite something.
If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.