I'm using swiper 8.4.4.
I'm looking to disable the "click" functionality, but keep the "drag" events enabled.
The parameter "simulateTouch" enables both the click and drag functionality. So turning it to false is not an option.
I see this post which plays with swiperjs parameters to achieve the opposite of what I'm looking to do: remove the drag effect while keeping the click: Swiper Touch Events - Enable click but disable drag
Would you folks have a suggestion I might try?
I tried specifying the following parameters from swiperjs, but they did not help me achieve the goal of disabling click while allowing drag event.
allowTouchMove: true, simulateTouch: false, slideToClickedSlide: false, touchReleaseOnEdges: false, a11y: false, watchSlidesProgress: true,
Add pointer-envets CSS property.
.swiper-slide {
pointer-events: none;
}
Here is working example: https://codesandbox.io/s/swiper-slides-per-view-forked-r0ociq?file=/index.html:1428-1469
Related
Does anyone use Gemini by Yandex for testing css regression?
I faced with the following problem: need to test scroll in some page, but as I know, gemini capture whole page and show only that part which you set by adding .setCaptureElements('someElement').
E.g. I set capture element as html (which has 100% height) and my content is very huge, but gemini screenshot show up only cut over part of page without possibility to scroll cause page hasn't scroll as such...
Maybe some of you faced with same problem and have cool solution?
Thanks!
I had the necessity to make a screenshot of the page that has scrolling. I need the screenshot of the whole page and made changes which let me did it:
Used .setCaptureElements only for the element where is scrolling exist (not the whole body).
Added line compositeImage: true in configuration file.
gemini.suite('App-Name', function(test) {
test.setUrl('/')
.setCaptureElements('body')
.capture('Full Page', (actions) => actions.wait(2000))
});
//You can also use
.setCaptureElements('html') , if .setCaptureElements('body') is not working perfect for you.
You need to add this code in .gemini.js
browsers: {
'chrome-desktop': {
desiredCapabilities: {
browserName: 'chrome',
compositeImage: true,
screenshotMode: 'fullpage',
}
}
I think it's easy but I don't find the answer. I want to pass some data to a colorbox window and use them it. I did like that to open the colorbox:
$.colorbox({
href:my_target,
iframe: false,
open: true,
width: "830px",
height: "560px",
speed: "0",
transition: "none",
opacity:0.5,
escKey: true,
overlayClose:true,
data: {"test":"123456"}});
The colorbox is opened but I can't acces to the data "test".
How can I do that? Is it possible?
If this is not the right method, what is the good?
Remember the general page model; when you are not using ColorBox's iframe option, the plugin and the content are just ordinary members of the DOM. You can reference any variable from "inside" it just as you would with any javascript loaded by the page.
You would probably use ColorBox's event hooks to run functions that acted on the data.
I have the following code for adding tooltip for onclick of a span id as shown below:
new dijit.Tooltip({
connectId: ['gridEditHelp'],
label: 'Double click on an item in the below table to perform inline editing of attributes',
position: ['above']
});
The problem is that I want the tooltip to be visible always on the web page.
Any ideas or existing API available for the same?
Use TooltipDialog instead - or else you will have to mess with the _MasterTooltip manager (there's more or less only one global, reusable tooltip). Then call dijit.popup.open - and never call .close
dijit.popup.open({
popup: new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog."
});,
around: dojo.byId('thenode')
});
I'm using the Jquery Tools Scrollable plugin like this example, and I would like to have custom buttons that would make it Start and Stop. I can get it to stop autoscrolling, but I can't get it to resume autoscrolling from where I stopped it.
Here's how I initialize it:
$(document).ready(function() {
// heeeeeeeeeeere we go.
var root = $("#chained").scrollable({circular: true, mousewheel: true,
easing:'easeInOutQuint', speed: 1200}).navigator().autoscroll({
interval: 3000
});
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
From this thread, I can make it "Stop." I also know that I can also make it "Begin" - go to the first slide - by using these:
Start
Stop
Although it does go to the first pane/slide, it not longer autoscrolls. Is there a way to get it to resume autoscrolling in the location where I "Stopped" it? Also, is the window.api=root.data("scrollable"); approach deprecated? Should I approach that differently?
TIA for any suggestions.
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'