I would like to insert a "slider" in my hybrid app.
I need each slide to contain an image and some text. And I would like it not to be a full page slider but a partly hidden in-page slider, like on the Amazon app:
Which is the best Jquery Mobile + Phonegap friendly slider ?
(I've heard of Photoswipe, Swiper, Flexslider, ...)
Thanks
I chose Flexslider V2 and it seems to work fine : http://www.woothemes.com/flexslider/
$(document).on('pageshow','#result-page', function(){
var suggestionSlider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
//slideshow: false,
itemWidth: 70,
//itemMargin: 5,
pausePlay: false,
touch: true,
//useCSS : false,
pauseOnAction: true
});
var slider = $('.flexslider').data('flexslider');
for (i = 0; i < matched.length; ++i) {
slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
+'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
);
}
$('.flexslider').resize();
});
However V2.2 doesn't scroll well on Android phones (touch horizontal scroll), any hint would be apreciated.
Related
i tried this code but still dos't work for me.
When the user clicks on an input field, the soft keyboard that pops up hides the input field when the latter is relatively low on the screen. The page is scrollable, so the user can scroll and see the field again, but the customer requirements define that the page will auto-scroll until the field is visible.
There is not simple way to solve this. I solved using a handler like this:
this.keyboardShowHandler = function (e) {
that.scroll.disable();
that.$el.css('bottom', (e.keyboardHeight - 30) + "px");
that.scroll.refresh();
that.scroll.scrollToElement(document.activeElement, 0, true, true);
};
this.keyboardHideHandler = function () {
setTimeout(function () {
if (!cordova.plugins.Keyboard.isVisible) {
that.$el.css('bottom', "0px");
that.scroll.scrollTo(0, -100, 0);
that.scroll.enable();
that.scroll.refresh();
}
}, 300);
};
window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
But I am using iscroll, jquery and cordova keyboard plugin. You might want to adapt to your frameworks
How can i implement lazy loading in mobile jquery lisview widget?
can anybody give a example using static data in json format binding to jquery mobile listview widget?
Thank you.
There are a few ways, The following two ways work great
JQM way, a great tutorial. It detects when you scrolled to the bottom of the listview and loads more items to list
http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/
Demo
http://jsfiddle.net/Palestinian/pAgbT/light/
Another way is to use Iscroll 5 plugging. Similarly you can setup a function to detect when you scrolled to the bottom of the list and load new items
http://iscrolljs.com/
Demo I placed the whole Iscroll 5 plugging in the demo so scroll down to //// JQM STUFF to see the actual code
Some of the JQM code e.g trigger create is depreciated in JQM 1.4 so some modifications are needed above > 1.4 for it work.
http://jsfiddle.net/t0t3Lz5x/
var myScroll;
$(document).ready(function(){
myScroll = new IScroll('#wrapper',
{
scrollX: false,
scrollY: true
,click:true // open click event
,scrollbars: false
,useTransform: true
,useTransition: false
,probeType:3,
mouseWheel:true,
bindToWrapper: true
});
});
function initscroll() {
setTimeout(function () {
myScroll.refresh();
}, 1000);
}
output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
initscroll()
myScroll.on('scrollEnd', function() {
if (this.y == this.maxScrollY)
load_new_items();
});
function load_new_items() {
mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create');
$('#listview').listview().listview('refresh');
initscroll()
}
There is one more way using the Jquery's on scroll function to monitor the height of the list and then as you scroll measure the pixels you scrolled from the top of the list. When both match you can run a function to append more items in the list
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
I'm having a problems to make a jQuery horizontal ui scrollbar work in Chrome. It works just fine in FireFox and even IE, but in Chrome I simply can't make it calculate the correct width of my "content" area. The "container" has a 920px fixed width, so no problem with that, but my "content" is, "on this page", exactly 4983px wide but when calculating with outerWidth() and even outerWidth(true), it will return a nonsense value that's a lot smaller than it should be!
Here's the link to the page I'm working on.
And here's the code I have until now. It's a mess because I'm still working and doing some tests...
var container = $('.gallery');
var content = $('.content', container);
var itemsWidth = content.outerWidth(true) - container.width();
var width = 0;
$('figure').each(function() {
width += $(this).width();
});
console.log('I dont know if I chose width: ' + width);
console.log('Or if I chose itemsWidth: ' + itemsWidth);
console.log('Actually, none of them is working on Chrome/webkit browsers');
$('.slider', container).slider({
min: 0,
max: itemsWidth - 20,
stop: function(event, ui){
content.animate({ 'margin-left' : ui.value * -1}, 500);
},
slide: function(event, ui){
console.log(ui.value);
content.css('margin-left',ui.value * -1);
}
});
Notice that I'm trying to calculate the width value in two different ways: itemsWidth (var) and width (var). None of them work. Strange thing is... if you keep refreshing the browser (Chrome), it will eventually grab the correct width of the "content", but it's like once in every 10–15 tries =\
It seems to be a Chrome/Webkit bug, but I have no idea about how to solve that!
Thanks for your time and help!
I'm using jQuery UI Select Menu and occasionally have some issues.
This is located at the top left of my users' pages. Using the "dropdown/address" type, sometimes (seemingly random), the dropdown opens UP instead of DOWN, and you can't select any options in it except the first one because it's all "above" the screen.
Anyone know of a setting/option in there to force it to open down? Thanks!
update.... 11/23/11 1:11pm est
Here is some code of the call:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
The plugin uses the Position utility of the jQuery UI library. If you look at the default options in the source of the plugin, there is a positionOptions property that is used in the function _refreshPosition():
options: {
transferClasses: true,
typeAhead: 1000,
style: 'dropdown',
positionOptions: {
my: "left top",
at: "left bottom",
offset: null
},
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null,
bgImage: function() {},
wrapperElement: "<div />"
}
_refreshPosition: function() {
var o = this.options;
// if its a pop-up we need to calculate the position of the selected li
if ( o.style == "popup" && !o.positionOptions.offset ) {
var selected = this._selectedOptionLi();
var _offset = "0 " + ( this.list.offset().top - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
}
// update zIndex if jQuery UI is able to process
this.listWrap
.zIndex( this.element.zIndex() + 1 )
.position({
// set options for position plugin
of: o.positionOptions.of || this.newelement,
my: o.positionOptions.my,
at: o.positionOptions.at,
offset: o.positionOptions.offset || _offset,
collision: o.positionOptions.collision || 'flip'
});
}
You can see it uses a default value 'flip' if none is provided for the collision option of the position utility which is. According to jQuery UI documentation:
flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
fit: so the element keeps in the desired direction, but is re-positioned so it fits.
none: not do collision detection.
So i guess you could pass an option when initializing the plugin to define none for the collision option:
$('select').selectmenu({
positionOptions: {
collision: 'none'
}
});
Have not tested yet, this is just by looking at the code.
Edit following comment
I've noticed that the version of the javascript available on github and the one used on the plugin website are not the same. I don't know which one you are using but the one used on the website does not have a positionOptions option actually, so it has no effect to specify it when calling selectmenu().
It seems it's not possible to link directly to the javascript on the site so here's some code to illustrate:
defaults: {
transferClasses: true,
style: 'popup',
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null
}
_refreshPosition: function(){
//set left value
this.list.css('left', this.newelement.offset().left);
//set top value
var menuTop = this.newelement.offset().top;
var scrolledAmt = this.list[0].scrollTop;
this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
scrolledAmt -= $(this).outerHeight();
});
if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
menuTop+=scrolledAmt;
this.list.css('top', menuTop);
}
else {
menuTop += this.newelement.height();
this.list.css('top', menuTop);
}
}
I was able to make it work as I first described with the version from github. In my opinion it is a more recent/complete version. Besides it was updated a few days ago.
I have created a small test page with two selects. I've changed for both the position for the dropdown to show above.
The first one does not specify the collision option, thus 'flip' is used and the dropdown displays below because there is not enough space above.
The second has 'none' specified and the dropdown shows above even if there is not enough space.
I've put the small test project on my dropbox.
I'm the maintainer of the Selectmenu plugin. There are currently three versions, please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu
I assume you're using my fork. The collision problem could be related to this fix https://github.com/fnagel/jquery-ui/pull/255, please try the latest version.
To force a scrollbar use option maxHeight.