I'm using iScroll 5 and i defined custom scrollbars and set interactiveScrollbars to true. so it's work like a charm but i want force it to hide scrollbars when it has not focus and show them any time mouse or touch move on.
You can set the fadeScrollbars option to true.
This will make the scrollbar and indicator fade away when they are not used.
var myScroll = new IScroll('#wrapper', {
/* iScroll Options */
scrollbars: true,
interactiveScrollbars: true,
fadeScrollbars: true
});
hideScrollbar: true property is important for firefox browser, to restrict weird scrollbar issues.
var myScroll = new IScroll('#wrapper', {
/* iScroll Options */
scrollbars: true,
interactiveScrollbars: true,
hideScrollbar: true, /* this is important for Firefox browser */
fadeScrollbars: true
})
Related
I started to use recently an awesome plug-in to convert touch evens to mouse clicks. But just today I came across one problem
jQuery('.draggable').click(function(){
alert('clicked');
})
To fire alert I need to make two touches(mobile device), while on computer I need only one mouse click. What can be the problem? Thank you.
// set a var as false as a way to change and flag if something is being dragged
var dragCheck = false;
$('.element').draggable({
revert: true,
drag: function(){
// On drag set that flag to true
dragCheck = true;
},
stop: function(){
// On stop of dragging reset the flag back to false
dragCheck = false;
}
});
// Then instead of using click use mouseup, and on mouseup only fire if the flag is set to false
$('.element') .bind('mouseup', function(){
if(dragCheck == false){
// do the click action here...
}
});
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 trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.
Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});