Hi, all
I am trying to add some jquery mobile components to my wiki site, to give it a more beautiful look on Android app. The app is the official mediawiki mobile client, which can be downloaded from the following link. https://github.com/wikimedia/WikipediaMobile
Now, there is no problem for me to include the jquery mobile javascript and css to this little phonegap-based project. If the contents grabbed from the mediawiki website (by mobilefrontend) contains jquery mobile components, they can be shown properly on my android phone.
However, the wiki site look quite different if it is accessed from a PC. All the jquery mobile contents do not load properly. So I added the jquery.mobile-1.3.2.min.js to mediawiki common.js, and the jquery.mobile-1.3.2.min.css to mediawiki common.css. But the whole site looks a mess. All the buttons and links are shown as jquery mobile buttons, and cannot be clicked. I wonder whether there is a graceful method to apply the jquery.mobile js and css just to the wiki contents (in particular, to div#content), without affecting the surrounding parts, like the edit page button, save page button, etc.
Thanks for casting some light onto this issue.
Best Shawn
Shawn, to clarify - are you trying to create an Android app for your site or are you hoping to provide a more mobile-friendly experience for folks browsing your website on mobile devices?
Folks from the mobile apps team (Yuvi?) can probably give you better insight if you're trying to create an app. If you'd like to create a mobile-friendly browsing experience for your users, you might try installing the MobileFrontend extension to Mediawiki and configuring device detection to your needs: http://www.mediawiki.org/wiki/Extension:MobileFrontend
On Tue, Sep 3, 2013 at 8:56 AM, XIAO Qingjun csqjxiao@gmail.com wrote:
Hi, all
I am trying to add some jquery mobile components to my wiki site, to give it a more beautiful look on Android app. The app is the official mediawiki mobile client, which can be downloaded from the following link. https://github.com/wikimedia/**WikipediaMobilehttps://github.com/wikimedia/WikipediaMobile
Now, there is no problem for me to include the jquery mobile javascript and css to this little phonegap-based project. If the contents grabbed from the mediawiki website (by mobilefrontend) contains jquery mobile components, they can be shown properly on my android phone.
However, the wiki site look quite different if it is accessed from a PC. All the jquery mobile contents do not load properly. So I added the jquery.mobile-1.3.2.min.js to mediawiki common.js, and the jquery.mobile-1.3.2.min.css to mediawiki common.css. But the whole site looks a mess. All the buttons and links are shown as jquery mobile buttons, and cannot be clicked. I wonder whether there is a graceful method to apply the jquery.mobile js and css just to the wiki contents (in particular, to div#content), without affecting the surrounding parts, like the edit page button, save page button, etc.
Thanks for casting some light onto this issue.
Best Shawn
______________________________**_________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/**mailman/listinfo/wikitech-lhttps://lists.wikimedia.org/mailman/listinfo/wikitech-l
Hi, Aurther:
Shawn, to clarify - are you trying to create an Android app for your site or are you hoping to provide a more mobile-friendly experience for folks browsing your website on mobile devices?
Actually, I have already done the job you mentioned. I have created an android app for my wiki site, and wrap jquery mobile (JQM) libraries within the app to provide more mobile-friendly experiences. The problem is that the wiki site if browsed from PCs cannot support JQM, which means the wiki site has different look and feel on the android app and pc. That is not what I expected. I want the wiki site to also support JQM if browsed from PCs.
I ever tried to copy and paste JQM into Mediawiki:common.js and Mediawiki:common.css. But JQM applies styles to the whole page. I just want JQM style to work on the main content, i.e., the div#content on the wiki site, without affecting the surrounding parts.
Folks from the mobile apps team (Yuvi?) can probably give you better insight if you're trying to create an app. If you'd like to create a mobile-friendly browsing experience for your users, you might try installing the MobileFrontend extension to Mediawiki and configuring device detection to your needs: http://www.mediawiki.org/wiki/Extension:MobileFrontend
Thanks for the information. My app already uses this MobileFrontend extension. This is a wonderful extension to grab only the main contents (div#content) from mediawiki.
On Tue, Sep 3, 2013 at 8:56 AM, XIAO Qingjun csqjxiao@gmail.com wrote:
Hi, all
I am trying to add some jquery mobile components to my wiki site, to give it a more beautiful look on Android app. The app is the official mediawiki mobile client, which can be downloaded from the following link. https://github.com/wikimedia/**WikipediaMobilehttps://github.com/wikimedia/WikipediaMobile
Now, there is no problem for me to include the jquery mobile javascript and css to this little phonegap-based project. If the contents grabbed from the mediawiki website (by mobilefrontend) contains jquery mobile components, they can be shown properly on my android phone.
However, the wiki site look quite different if it is accessed from a PC. All the jquery mobile contents do not load properly. So I added the jquery.mobile-1.3.2.min.js to mediawiki common.js, and the jquery.mobile-1.3.2.min.css to mediawiki common.css. But the whole site looks a mess. All the buttons and links are shown as jquery mobile buttons, and cannot be clicked. I wonder whether there is a graceful method to apply the jquery.mobile js and css just to the wiki contents (in particular, to div#content), without affecting the surrounding parts, like the edit page button, save page button, etc.
Thanks for casting some light onto this issue.
Best Shawn
______________________________**_________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/**mailman/listinfo/wikitech-lhttps://lists.wikimedia.org/mailman/listinfo/wikitech-l
On 04.09.2013, 4:23 XIAO wrote:
Hi, Aurther:
Shawn, to clarify - are you trying to create an Android app for your site or are you hoping to provide a more mobile-friendly experience for folks browsing your website on mobile devices?
Actually, I have already done the job you mentioned. I have created an android app for my wiki site, and wrap jquery mobile (JQM) libraries within the app to provide more mobile-friendly experiences. The problem is that the wiki site if browsed from PCs cannot support JQM, which means the wiki site has different look and feel on the android app and pc. That is not what I expected. I want the wiki site to also support JQM if browsed from PCs.
This is impossible: MediaWiki always serves jQuery which conflicts with JQM.
Thanks for the information. My app already uses this MobileFrontend extension. This is a wonderful extension to grab only the main contents (div#content) from mediawiki.
How about using our special mobile API[1]? :)
[1] https://en.wikipedia.org/wiki/Special:ApiSandbox#action=mobileview
I'm a little confused with the problem here. In theory there should be no reason why you cannot paste jQuery mobile in MediaWiki:Mobile.css or MediaWiki:Common.css - however you will indeed have to do a lot of work to make it look nice if adding the styles.
It sounds like you probably want to write your own jQuery mobile based skin [1]? [1] https://www.mediawiki.org/wiki/Manual:Skins
On Wed, Sep 4, 2013 at 2:18 AM, Max Semenik maxsem.wiki@gmail.com wrote:
On 04.09.2013, 4:23 XIAO wrote:
Hi, Aurther:
Shawn, to clarify - are you trying to create an Android app for your site or are you hoping to provide a more mobile-friendly experience for folks browsing your website on mobile devices?
Actually, I have already done the job you mentioned. I have created an android app for my wiki site, and wrap jquery mobile (JQM) libraries within the app to provide more mobile-friendly experiences. The problem is that the wiki site if browsed from PCs cannot support JQM, which means the wiki site has different look and feel on the android app and pc. That is not what I expected. I want the wiki site to also support JQM if browsed from PCs.
This is impossible: MediaWiki always serves jQuery which conflicts with JQM.
Thanks for the information. My app already uses this MobileFrontend extension. This is a wonderful extension to grab only the main contents (div#content) from mediawiki.
How about using our special mobile API[1]? :)
[1] https://en.wikipedia.org/wiki/Special:ApiSandbox#action=mobileview
-- Best regards, Max Semenik ([[User:MaxSem]])
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Thanks for the information. I think modifying the skin to support jquery mobile is a viable solution.
I also find that some components of jquery mobile conflict jquery ui, as indicated by the following webpages, to list just a few. http://stackoverflow.com/questions/9165737/jquerymobile-and-jquery-ui-data-i... http://stackoverflow.com/questions/10146868/jquery-ui-slider-conflicting-wit...
I can deliberately avoid using these conflicting widgets.
Shawn
On Thursday, September 05, 2013 01:28 PM, Jon Robson wrote:
I'm a little confused with the problem here. In theory there should be no reason why you cannot paste jQuery mobile in MediaWiki:Mobile.css or MediaWiki:Common.css - however you will indeed have to do a lot of work to make it look nice if adding the styles.
It sounds like you probably want to write your own jQuery mobile based skin [1]? [1] https://www.mediawiki.org/wiki/Manual:Skins
On Wed, Sep 4, 2013 at 2:18 AM, Max Semenik maxsem.wiki@gmail.com wrote:
On 04.09.2013, 4:23 XIAO wrote:
Hi, Aurther:
Shawn, to clarify - are you trying to create an Android app for your site or are you hoping to provide a more mobile-friendly experience for folks browsing your website on mobile devices?
Actually, I have already done the job you mentioned. I have created an android app for my wiki site, and wrap jquery mobile (JQM) libraries within the app to provide more mobile-friendly experiences. The problem is that the wiki site if browsed from PCs cannot support JQM, which means the wiki site has different look and feel on the android app and pc. That is not what I expected. I want the wiki site to also support JQM if browsed from PCs.
This is impossible: MediaWiki always serves jQuery which conflicts with JQM.
Thanks for the information. My app already uses this MobileFrontend extension. This is a wonderful extension to grab only the main contents (div#content) from mediawiki.
How about using our special mobile API[1]? :)
[1] https://en.wikipedia.org/wiki/Special:ApiSandbox#action=mobileview
-- Best regards, Max Semenik ([[User:MaxSem]])
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
wikitech-l@lists.wikimedia.org