Develop Reference

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/

Mobiscroll datepicker is hidden by jQuery Mobile modal

I have a jQuery Mobile site with some date inputs, I am using the Mobiscroll datepicker (in modal mode) for these. It works well on standard jQM pages, but it has a problem when I have a date input that is on a jQM modal.
The problem is the datepicker modal shows under the jQM modal and so the user can't see it, I want the datepicker to show over the top of the jQM modal. If I hide the jQM modal using Firebug, I can also see that the datepicker is under the jQM "dark" filter - where it makes everything dark except the jQM modal.
The code I'm using to setup the Mobiscroll datepicker is:
$('#mydate').scroller('destroy').scroller($.extend(
{
preset : 'date',
dateFormat: 'dd/mm/yyyy'
},
{
display: 'modal',
mode: 'scroller',
theme: 'default',
lang: 'en'
}));
I have tried modifying the elements in Firebug to see if some CSS would fix it, I tried setting the datepicker to a high z-index and the jQM modal to a lower z-index, also tried forcing it with !important but this didn't change anything. The other Mobiscroll display options: top, bottom, bubble have the same problem.
How can I get the datepicker to display on top of the jQM modal?
jQM version: 1.2.0 (latest), with jQuery 1.8.2
Mobiscroll version: 2.4.4 (latest)

Try this:
.dw-persp, .dwo {z-index:1051;}
.dw {z-index:1051;}
You'd better put it in the last css

I happened to have the same issue and here it my fix:
Check the css of the modal(the default z-index for jquery mobile modal is 1050).
Then go to mobicroller css and change the z-index to any value above it. As long as mobiscroller has a hinger z-index it should show on top modal without any problem.

jQuery UI Slider not shown for some reason

I use jQuery UI 1.8.16 incl. the "smoothness" theme on a text input field. In FF FireBug, I can see all necessary dependencies for the slider appear:
jQuery 1.7.1
UI Core
UI Widget
UI Mouse
The theme is also loaded and all sources are checked. When inspecting the form field, the slider seems to be attached. But for some reason the slider doesn't appear as "slider".
Screenshot including FireBug

make sure the slider css is there. That would be the only thing i can think of. Maybe you didn't check the slider option when downloading the theme.
Edit: Moved from the comments. Some will work because there is ui-widget. So sometimes thats all it uses. For certain ones it has it's own, like slider.

Fancybox and Awkward slider

I am trying to get the fancybox plugin to work nicely with the awkward slider.
The fancybox pop-up works but only for the first image. The other images don't work.
It seems that once the awkward plugin has been clicked the fancybox plugin is not working anymore.
No firebug errors in console. Here is the example: http://www.awkward.interfacecreation.com/
Any ideas?

Awkward slider creates the elements on demand and events are lost for unloaded elements.
Try using the .live function of jQuery to call the events
$(".awkward a").live("click",function(){
$.fancybox({
'href' : 'bigimage.jpg'
});
});

jQuery tools tabs fade effect

I used jQuery tools to create a tabs setup, and I would like to incorporate the fade effect, but when I try to do so, it bombs out, here is my code:
$(function() {
$("#flowtabs").tabs("#flowpanes > div", { history: true, effect: 'fade' });
});
I am assuming that it's because I am also enabling the tabs history?
I am kinda new to all of this, so please be patient! :-)
Thanx in advance!

I had a problem with fade when using the jQueryTools tooltips. It was with the downloaded version. I plugged into their CDN version as a sanity check, and the fades started working properly.
To get the most recent CDN link, visit the download page and look for the Quick Start section