With flickity, is it possible to have two behaviours at the same time on the same slide?
swipe (default and better four touch screen)
click to next slide (better for desktop)
I tried something like:
var carouselCells = Array.from(document.querySelectorAll('.carousel-cell'))
carouselCells.forEach(function(e) {
e.addEventListener('click', function() {
flckty.next();
})
})
Here is the fiddle: https://jsfiddle.net/francoisromain/fum7Lrac/
The click works fine but the problem is the swipe moves forwards two slides.
use Flickity's staticClick event over standard click, as click is triggered during drag.
flkty.on( 'staticClick', function() {
flkty.next()
})
from: https://github.com/metafizzy/flickity/issues/486#issuecomment-258686221
Related
I have tried several things but cant get this slide menu to stay open. Any thoughts???
$(function() {
$('.items ul').hide();
});
$('.1979').click(function() {
$(this).find('.entries').stop().slideToggle();
});
fiddle: https://jsfiddle.net/johnrsherwood/u6bnra9x/12/
I have PrimeFaces wizard with some panels, and next/prev buttons is drawn by wizard widget itself... But there is one problem - when i press next button before the last step, it hides with animation... Is it possible to disable this animation and hide next button instantly?
So, you simply want to remove the fading effects on the wizard next button ?
These effects are done with Primefaces Javascript built-in functions, like:
PrimeFaces.widget.Wizard.prototype.showNextNav = function() {
jQuery(this.nextNav).fadeIn();
}
PrimeFaces.widget.Wizard.prototype.hideNextNav = function() {
jQuery(this.nextNav).fadeOut();
}
However, Primefaces creators have let the possibility of overriding them quite easily.
Just add this in your .xhtml page:
<script>
PrimeFaces.widget.Wizard.prototype.hideNextNav = function() {
jQuery(this.nextNav).hide();
}
PrimeFaces.widget.Wizard.prototype.showNextNav = function() {
jQuery(this.nextNav).show();
}
</script>
Tested and working on PF 5.1.
I made use of YUI scrollview to make a menu construction with touch, flick and arrows. However, for some reason the arrows have a bug.
When the page is loaded the first time it works fine, however, as soon as the user scrolls the page with its mouse of with swipe (on tablet or phone) the arrows do not work any more. When I swipe the content, the arrows magically come to live and work again.
This is the script I use for scrollView:
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
You can find a demo here:
http://www.circlesoftware.nl/demo/test.html
To reproduce:
- load the page
- press the right button (do not do anything else)
- scroll down with your mouse
- arrows are broken now
To fix:
- just grap the content of the slider, swipe it
- try the left or right button and they work again
Does anyone have ANY idea what might be the problem here?
Problem came from the library itself it seems, was using 3.7.3, upgrade it to 3.9.1 and seems to be solved now:
http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js
I would like to have a qtip2 tooltip without a title bar, but with a close icon in the corner. Is there a way to spec that, or do I have to muck with the code that creates it? I am thinking of something that floats the button to the left or to the right, allowing the rest of the content to fill the tooltip div.
Always keep the close markup separately and update with your current qTip Text.
$('.selector').qtip({
content: {
text: function(api) {
var qTipContent = $('.close-markup').html();
qTipContent += $('.qtip-content').html();
return $('.qtip-content').html();
}
}
});
$('.close-markup').qtip('destroy');
Try the above code.
Note: Does not require to muck the qTip Close code snippet!
I am trying to build a chrome extension. In it I want the context menu to change according to the selected text on the page.
For example, if its a number I want a menu that says divisibility test for this numbr is ...
and if it is a string, it should have a something else, but not both at the same time.
I cant figure out how to do that.
You will have to set a listener for mouse down. There is no other way to get the selected text before the menu is created.
See this SO question:
chrome extension context menus, how to display a menu item only when there is no selection?
Here is part of the code the rest is at the link.
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
if(window.getSelection().toString()) {
chrome.extension.sendRequest({cmd: "createSelectionMenu"});
} else {
chrome.extension.sendRequest({cmd: "createRegularMenu"});
}
}
}, true);