Only applying jQuery mobile enhancement to a single block - javascript

I have a wordpress site with a responsive theme that looks good on mobile devices. However, I have an advanced searchform which doesn't work well on mobile devices so I have built a custom form with jquery mobile that both works and looks good. This form is then presented if a mobile device is detected.
But alas! JQM makes lots of problem on the main content. There are severe styling issues, but even worse, links are made into ajax calls so pages don't load properly.
I have found lots of info on how to exclude certain elements eg. with data-role="none" or data-enhance="false" (like here but this being Wordpress, it is really not feasible to change all those elements.
Instead, I would like to only apply JQM enhancement to the single block containing the search form.
How can I do that?
Edit: I can turn off auto-initializing with autoInitializePage: false but then how do I turn on JQM enhancements for the selected block?

so it only concerns the styling of the form on mobile devices?
Maybe it is enough to add some CSS in a media query?
e.g:
#media all and (max-width: 768px)
{
/*css for the form here */
}

Related

How to ensure for mobile devices gigya does not add gigya-mobile-modal-model?

I am trying to implement Gigya for our sites. However, when mobile site loads (registration page), it adds the following class to the html gigya-mobile-modal-model that causes the page showing white page rather than the page.
When the html has no such class gigya-mobile-modal-model, then the page shows the form.
How to ensure for mobile devices gigya does not add gigya-mobile-modal-model?
I added the following in gigya console/css. However, I really will like one of the core Gigya developer to look into this.
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body,
body.gigya-mobile-modal-mode {
overflow: inherit;
height: auto;
}
And that seemed to fix the bug for me
It would be interesting to know if there is an elegant solution for that.
I had implemented a workaround:
- added some styles for this white overlay
- added some restrictions to the height and position of the popup content
- added some JS to prevent page from 'jumping' after the registration screen has been closed.
I had this exact problem, and this CSS worked for me:
html.gigya-mobile-modal-mode,
html.gigya-mobile-modal-mode body {
overflow: visible !important;
}
Not very elegant, but... it did the trick. YMMV.

jQuery one-page scroll not working

I'm using this jQuery plugin to get a one-page scroll effect.
However, as you can see on this page, it doesn't work and instead just locks the scroll.
jQuery is working fine - I can run an alert for example. Might the CSS file that comes with the plugin be conflicting with my existing one?
Thanks in advance for your help!
If you want more compatibility with old browsers such as IE8, 9, Opera 12... and some more functionalities, here's another great plugin for it, is called fullPage.js:
Demo
Page
Some features it adds to the one you are using:
Use it over IE 8 and old browsers with no CSS 3 support.
Compatibility with touch devices
Plenty of more options and functions
Scroll bar for a better UX experience
Use of anchors in the URL
Add a live menu.
Slide throw the page using the keyboard shorcuts (arrows, spacebar, pageUp/pageDown, home, end...)
Add horizontal sliders.
please try to call these two files from your server
https://raw.github.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.min.js
https://raw.github.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.js
It is to prevent XSS (cross-site scripting) attacks Check more details about it

Touch navigation with Infinite Scroll and WP

I'm using Infinite Scroll on a WordPress based site to load in more posts, and I just realized that the script won't run on Touch based devices (since it is initiated by scrolling). Are there any known, common workarounds for this?
This might be solved replacing your Infite Scroll with LazyLoading.
Here is an example: http://www.appelsiini.net/projects/lazyload/enabled_container.html
It is also supposed to work for posts (not just images) so you can have the selector for your posts.
Optimized for mobile: http://www.metaltoad.com/blog/improved-lazy-loading-mobile-devices-iphone-android-lazy-load-17
So you can set that it can load hundreds of posts, but when scrolling down, or sliding down on a mobile, it then will load more posts.
other popular sites using lazy loading or a form of this are: facebook, 9gag
Use jQuery UI Touch Punch, Default jQuery Not allow the Touch Event
If you use Modernizr it'll give touch class on the html element. Maybe you can use that to do something else on touch devices.
Use wordpress plugin for your post to display:
Infinite-Scroll
after installtion set your setting like this images:
see the screenshort
set your no of post to display:
setting -> reading
Blog pages show at most: "no of post":
More details and demo to go..http://www.infinite-scroll.com/
Want to see infinite scroll in action using this plugins?
http://aurgasm.us/

Switch web site to mobile css client side with JQuery

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.

Loading and Unloading JavaScript with CSS Media Queries in mind

I'm using CSS Media Queries for making my website responsive:
#media (min-width:1200px) {
// DESKTOP STYLING
}
#media (max-width:1200px) {
// MOBILE STYLING
}
I use https://github.com/paulirish/matchMedia.js to check for Media Query
if(min-width:1200px) {
// DESKTOP JAVASCRIPT
} else {
// MOBILE JAVASCRIPT
}
So initially everything works fine, when my screen is < 1200px it shows mobile version if its higher it shows desktop version (javascript works as well).
Problem now is when i start resizing the window for example:
1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE)
LOADS MOBILE JAVASCRIPT (SITE BREAKS)
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE)
LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)
So i was wondering any ideas how to 'unload' javascript or maybe a elegant way to have two different javascript files loaded depending which media query is used ?
First you could have one JavaScript (join the 2 together ) and have a controller which will verify if your window size is greater or not than 1200.
Or you could try to wrap the JavaScipt files into two objects, and create a third which will handle as a controller. Via Ajax you could load and unload the files ( nothing breaks because you have the controller still there ) and switch between them. This is a problem though because you will have to remove all the listeners when you make the switch and you will have to load another file which will take a small amount of time.
Hope this helps. Nice question by the way.
I would recommend a library like Enquire.js, you could always code the triggers yourself, but if you have a "desktop slideshow" and a "mobile slideshow," you'll need to make sure you destroy the the inactive one on resize and Enquire has a nice API for that includes an unmatch trigger.
I'm dealing with the same slideshow plugin for my "desktop slideshow" and a "mobile slideshow," but would like different settings (e.g.- using a bottom aligned pager versus a next/prev navigation) which is easy to set on page load, but what if the device changes media queries breakpoints on orientation change, etc.

Categories

Resources