I am building a jQuery mobile site but also need to use jQuery UI widgets- in particular slider.
Problem is that these functions conflict. I really wish that jQm had written their ui stuff with a 'mobile-' prefix but I should think its probably too late for that now.
This is the problem I am having. If I load jquery ui after jquery mobile jquery ui sliders work- great BUT then my custom page transitions dont work and no doubt loads of other stuff in jQm is overwritten that I don't know about yet.
If I do it the other way round jQuery mobile custom transitions work, but then jquery ui sliders dont since they use jQm sliders instead.
I can't use jQm sliders as I need the vertical option and other features of jQuery UI sliders.
What I am looking for is some kind of solution that does not involve me hacking either jQuery UI or jQuery Mobile because I don't want to have to do these changes with every update of jQm/jUI if possible. So is there a way that I can load jquery ui so that I call its functions prefixed with ' ui-' or jQuery mobile so that its conflicting functions are prefixed with 'mobile'- maybe in the mobile init function in my jqm custom js?
I am building a jQuery mobile site but also need to use jQuery UI widgets- in particular slider.
Problem is that these functions conflict. I really wish that jQm had written their ui stuff with a 'mobile-' prefix but I should think its probably too late for that now.
This is the problem I am having. If I load jquery ui after jquery mobile jquery ui sliders work- great BUT then my custom page transitions dont work and no doubt loads of other stuff in jQm is overwritten that I don't know about yet.
If I do it the other way round jQuery mobile custom transitions work, but then jquery ui sliders dont since they use jQm sliders instead.
I can't use jQm sliders as I need the vertical option and other features of jQuery UI sliders.
What I am looking for is some kind of solution that does not involve me hacking either jQuery UI or jQuery Mobile because I don't want to have to do these changes with every update of jQm/jUI if possible. So is there a way that I can load jquery ui so that I call its functions prefixed with ' ui-' or jQuery mobile so that its conflicting functions are prefixed with 'mobile'- maybe in the mobile init function in my jqm custom js?
I am trying to find a way to fire a callback on a programatically called changePage,
I cant use onPageCreate etc as I don't want it to happen all the time- only if the function I am writing calls the changePage.
Basically I am creating a menu item with ajax and redirecting to the new item once the request succeeds using changePage. Obviously the menu on the new page reflects the changes. But if I click the back button I go to the cached page which does not have the new menu item in it so it looks like the menu creation did not work properly- to the average user.
So I need it to be that when I changePage from my ajax success function, once the transition is complete, all non active pages in the dom are removed.
I tried putting the changePage in an if but that doesn't fire- I don't want to use pageCreate or init or whatever since I don't want this to happen normally, only as a resuly of the menu item creation function...
I am having problems with a browser compatibility issue with jQuery Mobile and jQuery 1.7.
On this site www.carpaholics.com all works fine in most browsers we are not supporting IE7 but do need to support ie8.
If I switch the jquery that is loaded to 1.6.4 I do get some content loaded which I could then apply stying fixes to but we do need to be able to use jQuery 1.7
When the site is loaded with jQuery 1.7 I get a 'Can't move focus to the control because it is invisible...' error.
But I can't for the life of me sus out what is causing the problem. I am sure it is not jQuery 1.7 itself that is incompatible with ie8 and I dont think it is jQuery mobile (although on jQm site they do use 1.6.4 rather than 1.7)
So does anyone know the first steps I can take to working out what the problem here?
Or does anyone know whether it is possible to get jQuery mobile working with jQuery 1.7 cross browser?
Any ideas most welcome...
Note: I have aalso found the same issue in the following thread which nobody has answered.
So does anyone have an answer? Is it the case that if we want to use jQuery mobile on IE8 we have to use jQuery 1.6.4? If so this really needs to be clearly stated in the documentation.
I am having problems with pages that are accessed directly from hashed links created in the absolutely god awful piece of crap that is IE (9 though I have no doubt that its the same in the earlier versions- probably far, far, far worse).
Problem is when someone comes to that link directly a whole bunch of scripts I have written don't work, like the javascript that moves the page nav buttons from the article to the footer and that hides the loading whirygig.
Hi there, I am trying to make links from an image map fire the ajax loading and transitions in jQm
I have tried everything in this thread http://forum.jquery.com/topic/image-map-and-page-links but I don't really understand what is suggested there and I think from looking at jQm code that things may have changed a bit since then.
I have the data-transition added to each 'area' link but no joy.
I am trying to find a way of making general wordpress plugins work with jQm.
In theory I think you could bind
$(document).trigger("ready");
to the pageCreate event but this would have a host of unintended consequences.
What would be great is if there was some way of doing $(document).trigger("ready" on data-role=page); That would solve so many of these issues without having to rewrite the code of every plugin you want to use...
Anybody know if that is possible or am I dreaming here?
I am really interested in using jQuery mobile, both for mobile and desktop as I love the fact that you can use page transitions and also have static elements that persist across different pages- for things like msuic players that play music in the background across a site.
I am trying to develop this for wordpress, but am hitting major problems with plugins not working. I expect the main issue is that most plugins use $(document).ready() to make themselves work.
For example I am using things like the sharethis and disqus plugins for wordpress. These plugins download code from the sites themselves. I could download my own copies and change the $(document).ready() to pageInit(), but the problem with that is that if disqus/sharethis change anything that they would usually expect people to be getting automatically because most users will be loading the js from their live source, my code wont work. This sounds like a maintainence nightmare.
So my question is what types of work arounds have people come up with for this kind of thing?
For example the 'shareThis' plugin adds the buttons to the first page loaded, then they dont appear on the ajax loaded page, unless you refresh it- which kind of defeats the point of it really.
I expect that shareThis and Disqus will be pretty quick off the mark with updates that work with jQm, but other things like RoleScoper and aloha editor are less likely to be that quick. So is there any method to transpose any loaded $(document).ready() to run on pageInit() or is this a bad idea- in which case does anyone have any good ideas?
The thing you will notice though is that when you click a link (when viewing on a desktop browser rather than a mobile) the overflow-y scroll bar disappears for a second and then comes back- but this means that the page 'judders' to the right for a moment and then goes back.
Thing is I can't for the life of me work out what is causing this or where to fix it. The same thing happens on the jQm demo site actually.
I guess it is because on mobile devices 'scroll bars' tend to be overlayed whereas on desktop browsers they are not. But that does not answer what I can do about this to make it look smooth on desktop..
In another post I noticed that transitions were not working in Firefox, I think this is because the transitions are not actually jquery animations but are instead css transitions and are only programmed for webkit in the css.
While I could add Firefox css to a custom css file, since what I want to do is have this work on desktops really what I'd like to do is use jquery animations.
Which leads me to the question, can I extent jQuery mobile so that if i load a mycustomtransition.js with a custom transition in it, that will override the transition in the core? I have two reasons for this: 1) since jQuery mobile is still in beta I don't want to customise that because I assume it will be changing very regularly. 2) that I'd like the user to be able to choose their transitions and set these dynamically so being able to add a function based on the users choice would make this possible.
I don't know much about prototypes in js but am I right in thinking they are a bit like classes in php and can therefore be extended?
I'll have a read up on prototypes in js, but if anyone could let me know if I am on the right track here, or even give me some pointers I'd be eternally grateful!
Really excited about the whole jQuery mobile thing, cant wait to get my teeth in!
I appreciate that one should test on the platform you are writing for, but on my android phone I have no firebug etc to be able to look around at my code and see whats going on. What I need to be able to do is preliminary testing on Firefox on the desktop pretending its a phone so I can play around with design choices etc and then just test on the phone.
So how can I get jquery mobile to run on my desktop so I can see and test what I am doing?