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/
Related
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 */
}
I am having huge problems with the jquery mobile pack, it broke my entire page by making links go to ajax and showing the loading div etc. I tried fixing them all and I somehow managed it with tons of excess code (I don't know what part exactly hid the loading part and which part undid the ajax).
Basically JQuery mobile made a mess of my page, and all I need is the swipe event, I found the github repository of jquery mobile (Here), but I honestly have no idea which parts to take so I can use the swipe event.
I know people want code, but there is no problem in my code here, JQuery mobile simply wants to open all links in ajax, and because I am using bootstrap and I don't use JQuery mobile for anything else but swipes, I won't be pasting anything.
If anyone can tell me which parts I need to take/modify to make it work that would be awesome.
I tried by only copying the events/touch.js but it didn't work.
If you want to navigate page without using ajax then you should add tag rel=external
Or data-ajax="false"
you can find more information for Jquery mobile HERE
EDITED
I have Another solution but I pesonally not prefer but I also having same issue before so I tried this solution
$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});
Try this I hope its work for you too..
this function will force change document location when user click on any Hyperlink
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
I am making a testing webapp using jQuery mobile on iPad, and something just don't go as what I expected.
.ui-footer-fixed {
bottom: 0;
}
This should makes the footer to stay at the bottom at all time, but Safari decided to not to agree with it. When you get to the bottom of the page, then you can pull up the whole webpage, which is what I don't want. Is it possible to fix it or is it a limitation of a webapp?
Also, other than that, is it possible to make the header top: 0px without making the whole page going up? Thanks.
To fix the header or the footer, you should use the attribute data-position="fixed".
Check the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
I think the problem you're encountering is linked to the integrated webview of the iPad. This "webview bounce" cannot be avoided if you're developing a simple webapp.
However, you may have a look at these workaround: Disable vertical bounce effect in an ipad web app
I've checked out the other page jump questions here on SO and I haven't found anything that matches, so here we go...
I'm working on building a website that uses CSS3 transitions and a bunch of hash-links as opposed to using jQuery to load/transition different pages/elements (just for fun/to prove that I/CSS can). The problem I'm having is that when I click on one of my links, the scrollbar automagically jumps down about 100px for no apparent reason.
I don't recall it doing this the entire time, so maybe something in my CSS went weird. I also added some <a name> tags at the top to try to pull it back up, but that's not working either. I also tried putting onclick="window.scrollTo(0,0);" in the links as well and that doesn't work either :(
Any ideas/help would be awesome, as it's really annoying/poor usability to have to scroll every time you navigate to the page. You can view the page here.
System Info:
Browser(s): Chrome 16.0.912.75, FireFox 9.0.1, Opera 11.6
OS: Windows 7
I'm not familiar with CSS3 transitions, so I don't fully understand what you're doing. However:
I assume this behavior that you find undesirable has something to do with the browser's native behavior of scrolling an element into view based on the fragment identifier in the URL. I'm not sure if overriding that with <a name> elements would work, but in any case you've incorrectly set the name values by prefixing them with a hash. E.g should be <a name="about"></a> not <a name="#about"></a>.
At least for debugging purposes, I'd try adding a click event listener and calling preventDefault() in it to see if it stops the scrolling.
It would be helpful to state what browser (including OS and version) you're experiencing the issue in.
Notice that it is not just jumping down to a random place, it is jumping down to the element that has the ID of the hash. (Try adding #footer to the end of your url) I do not think you can get around that without using preventDefault in JavaScript.