How can I programatically get control of slick.js carousel? - javascript

Normally I get control of carousels (control you ask, means the state where I can use my arrow keys to slide them) via clicking slick.js carousels.
But I'm trying to do this with javascript code, to implement more flexible interface in my project.
Is this carousel control acquisition can be implemented programmatically? I have tried $('#my-slick-carousel').focus() but it didn't worked.
Any workarounds even not specific to the slick.js are OK, as it seems like it's a problem of delegating keypress events to the carousel jquery objects.

You were so close with your original solution attempt.
Instead of $('#my-slick-carousel').focus(), you should use $('#my-slick-carousel').find('.slick-list').focus(), because the keyboard event handlers are registered on the .slick-list element, instead of the root carousel element.

Related

Binding a popup to a control

I have a LeafletJS control that renders a button. I want the button, when clicked, to open a popup on its position. So far I've tried calling the .bindPopup method on the control itself, which WebStorm seems to approve of, but the browser tells me that this method doesn't exist. What would be the preferred way to accomplish this task?
Leaflet controls don't implement the .bindPopup function.
Instead, you might find some luck looking at how the layers control works, it collapses/expands based on mouse events. You could potentially do something similar with your control, and show/hide your popup based on the click event and toggling a display: none css property.

Gridster.js: Prevent dragging on clickable element

I am using Gridster in a project. My scenario is:
I have a series of blocks in a gridster grid, and the problem I am facing, is that I don't want all of the blocks to be draggable. I have tried setting the ignore_dragging callback, and I have successfully stopped those blocks from being draggable, but I cannot use this as it also prevents normally click events from getting through.
I also tried doing event.preventDefault() in the start and drag event callbacks, but that proved ineffective.
Is there another way of cancelling dragging on some blocks, but allowing click events to pass?
Thanks in very much.

Joomla 3, disable tooltips using javascript

I would like to remove all tooltips - but only when viewed on mobile devices.
I am using javascript to check for windowsize (on load and on re-zize), which is working fine - but I cant seem to figure out how to turn off the tooltips, using javascript.
Is there a tooltip.stop() - or something else that can turn off the tooltips (and possibly turn back on, on resize?)
The reason for my request is that I have tooltips on some of my buttons, and apparently the tooltip fires on first tap, instead of just triggering the button. (The button should fire a javascript).
Only the second tap fires the button javascript. Which is a little annoying.
I wanted to remove tooltips in Joomla's pagination. I targeted the links which have the class "pagination" and removed all their event handlers with:
jQuery(".pagination a").off() ;
You could doubtless find a selector to meet your needs.
The following worked for me, as the script inserted by Joomla keys off the class name hasTooltip.
$(document).ready(function(){
$(".pagenav").removeClass('hasTooltip') ;
});

Issue with Modals not firing inside of iDangero.us swiper

I am using the iDangerous.us Swiper and running into an issue where I can't trigger any events inside of the swiper-wrapper. I am trying to fire a modal inside of each slide and nothing happens.
Any Modal I have placed inside of the swiper-wrapper will not function. I can't figure out if this is a javascript issue or a css z-index issue. I have tried multiple different Modals and they all seem to have the same effect. The Modal will work once it is outside of the swiper-wrapper element. I even tried a pure css modal and same issue, it will only fire outside of the swiper-wrapper element.
It looks like elements are cloned to make the slider work, which could potentially be killing the event listeners that are being set up.
I thought it could be an issue with the modal plugin I am using, but like I said I tried multiple different methods, including bootstrap's out of the box modal and a pure css implementation, and still no luck.
link to site:
http://bigredsun.staging.wpengine.com/our-work-index/
The 'Read More' button is the buttons that is supposed to trigger a popup modal.
Here is what I am doing:
https://gist.github.com/Jessekevon/8b694cc182a04610de16
Any help or guidance would be much appreciated!

Dojo & StackController/StackContainer

I'm using StackContainer as a menu but I'm having a problem to attach custom onclick events on "tabs" in stackcontainer.
My app is basically laid out like this:
header
subheader
content
Header has the stackcontroller tabs and content obviously shows the content. However when I click any of the tab elements in the header, I want to run a function that changes subheader accordingly. Now how I can do this? Content switching works great so no problems there.
I'm using ContentPanes as tab elements and I tried to put onclick straight on them and I tried with dojo.connect - no luck. I have experience with jQuery & plain JS but I'm a dojo newbie so excuse me if I'm missing something really obvious :)
The easiest way to do this will be to use the pub/sub mechanism built into the widget.
On child selection the StackContainer will publish:
dojo.publish(this.id+"-selectChild", [page]);
where page is the child widget being selected.
So you should use:
dojo.subscribe(myStackId, function(/* dijit */ selectedChild) {
// use the selectedChild to do what you want
});
As an aside, dijits provide normalised events which are camel cased. So you could connect to the onclick event of the dijit, but to do this you should use 'onClick'. However, you wouldn't necessarily guarantee that a child had been selected if you used this approach.
See http://dojotoolkit.org/reference-guide/dojo/publish.html

Categories