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.
Related
Above is just some test code for me to learn how to program with backbone and jqm.
Initially, I think it's always better to start running my code when the document is ready, so I wrap backbone view creation logic in the document ready function: $(function(){ }). But the page is just not showing like a mobile app.
So I tried and tried, and I found when I remove the document ready function part, the page will be displayed correctly, exactly like a mobile app.
What's wrong with document ready function here?
Please help.
I guess that you are applying some Backbone manipulation for elements like #homepage which is trying to manipulate by JQM too. That's why you don't have any problem if you remove the document ready function. You can do this Backbone code inside JQM page event functions.
JQM page events. So the other code works after the pages are rendered by JQM.
I'm using jQuery mobile to build a simple web app and I want to add a navigation bar common to all pages.
I've found this great example, which led me to this question: do I really need the attribute data-role="navbar"?
Because it adds unnecessary html and css to my code, obligating me to override all these unnecessary styles.
Thank you
I haven't seen the need for data-role="navbar". This page here might help: jQuery Mobile Data Attributes.
It looks like it might only be needed for styling.
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
i asked this in jquery forum, but maybe it's better here with jquery-mobile tag :
i've a problem i can't go through for 2 days... i'm a newbie in Jquery mobile so maybe you could quickly see the issue :
after an ajax call (to submit a form) i change div content with the ajax response, using $('confirmation').html(newcontent)
but the "new" div has not the cool jqm stylish button and content
then i added $('#confirmation').page(); it was OKAY... but it worked just for once : if i submit the form again, the jqm style dissapears...
i tried everything i found on the net, but still no solution... so i beg your help ;)
thanks by advance to everyone who will have the kindness of having a short look !
here's my example on jsfiddle : http://jsfiddle.net/ramdam/7cwBX/17/
if you click an Submit ajax button, you'll see a nice BACK button , but if you do it twice, the button "disappears" and only show a link...
Does this: http://jsfiddle.net/7cwBX/20/ helps you?
Is there any specific reason you are still using jQuery Mobile alpha 2 version?.To be safe,I would advice to always use the latest jQuery Mobile version-currently RC 1.0 . Update to RC 1.0 and try using $('#confirmation').trigger('create') instead of $('#confirmation').page().page() is deprecated since beta 2
FYI - I couldnt check out the fix because the domain you used in the example seems to be down.
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.