Develop Reference

Advance slick slider when image in gallery is clicked (multiple slick sliders on one page)

I came across this modification for slick slider for advancing when clicking on the current image (see below). When I implement it on my page with multiple galleries it advances all galleries when I click on one, not only the one selected. Is there a possibility to use e.g. "this" selector in here?
http://codepen.io/ethanclevenger91/pen/MYNGrN
window.onload=function(){
$slideshow = $('.slider').slick({
dots:false,
autoplay:false,
arrows:false,
adaptiveHeight: true,
slidesToShow:1,
slidesToScroll:1
});
$(".slide").click(function() {
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
};

Please see the following codepen: http://codepen.io/anon/pen/ZOGmWo?editors=1010
The main idea is to define each slider separately.
First, define an object to hold all the sliders:
var sliders = {};
Then, looping through all the sliders, extracting the ID and saving a reference to the newly defined slider in our map, indexed by the ID:
$('.slider').each(function (index, slider) {
var id = slider.getAttribute('id');
console.log(id);
sliders[id] = $(slider).slick({ ... })
});
Now, on the click handler, we determine to which slider do the clicked slide belong to, using $(this).closest('.slider') and using progressing it.
$('.slide').click(function() {
var id = $(this).closest('.slider').get(0).getAttribute('id');
var $slideshow = sliders[id];
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});

Swiper API Jquery

Hi guys I am a newbie in jquery especially when I have to work third party plugins
So I have been working with one here http://www.idangero.us/sliders/swiper/api.php
in one of my slides, I have a form where user submits and returns a result (php)
however it goes back to first slide after refresh, I need to direct it to last slide enabling my user to see their result. Is this possible?
This is what I have so far
<script>
window.onload = function(){
var mySwiper = new Swiper('.swiper-container',{
}
});
};
</script>

Do you know the index number of the last slide? You can set the starting slide with the option initialSlide (it's mentioned in the docs).
var mySwiper = new Swiper('.swiper-container',{
initialSlide: 2 // set "2" to the index of the last slide
});
Otherwise you could get the active index with mySwiper.activeIndex before submitting the form.

How to check whether a twitter bootstrap popover is visible or not?

I have an element $('#anElement') with a potential popover attached, like
<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>
I just would like to know how to check whether the popover is visible or not: how this can be accomplished with jQuery?

If this functionality is not built into the framework you are using (it's no longer twitter bootstrap, just bootstrap), then you'll have to inspect the HTML that is generated/modified to create this feature of bootstrap.
Take a look at the popupver documentation. There is a button there that you can use to see it in action. This is a great place to inspect the HTML elements that are at work behind the scene.
Crack open your chrome developers tools or firebug (of firefox) and take a look at what it happening. It looks like there is simply a <div> being inserted after the button -
<div class="popover fade right in" style="... />
All you would have to do is check for the existence of that element. Depending on how your markup is written, you could use something like this -
if ($("#popoverTrigger").next('div.popover:visible').length){
// popover is visible
}
#popoverTrigger is the element that triggered that popover to appear in the first place and as we noticed above, bootstrap simply appends the popover div after the element.

There is no method implemented explicitly in the boostrap popover plugin so you need to find a way around that. Here's a hack that will return true or false wheter the plugin is visible or not.
var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false
It accesses the data stored by the popover plugin which is in fact a Popover object, calls the object's tip() method which is responsible for fetching the tip element, and then checks if the element returned has the class in, which is indicative that the popover attached to that element is visible.
You should also check if there is a popover attached to make sure you can call the tip() method:
if ($('#anElement').data('bs.popover') instanceof Popover) {
// do your popover visibility check here
}

In the current version of Bootstrap, you can check whether your element has aria-describedby set. The value of the attribute is the id of the actual popover.
So for instance, if you want to change the content of the visible popover, you can do:
var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');

This checks if the given div is visible.
if ($('#div:visible').length > 0)
or
if ($('#div').is(':visible'))

Perhaps the most reliable option would be listening to shown/hidden events, as demonstrated below. This would eliminate the necessity of digging deep into the DOM that could be error prone.
var isMyPopoverVisible = false;//assuming popovers are hidden by default
$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});
$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});
These events seem to be triggered even if you hide/show/toggle the popover programmatically, without user interaction.
P. S. tested with BS3.

Here is simple jQuery plugin to manage this. I've added few commented options to present different approaches of accessing objects and left uncommented that of my favor.
For current Bootstrap 4.0.0 you can take bundle with Popover.js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
// jQuery plugins
(function($)
{
// Fired immiedately
$.fn.isPopover = function (options)
{
// Is popover?
// jQuery
//var result = $(this).hasAttr("data-toggle");
// Popover API
var result = !!$(this).data('bs.popover');
if (!options) return result;
var $tip = this.popoverTip();
if (result) switch (options)
{
case 'shown' :
result = $tip.is(':visible');
break;
default:
result = false;
}
return result;
};
$.fn.popoverTip = function ()
{
// jQuery
var tipId = '#' + this.attr('aria-describedby');
return $(tipId);
// Popover API by id
//var tipId = this.data('bs.popover').tip.id;
//return $(tipId);
// Popover API by object
//var tip = this.data('bs.popover').tip; // DOM element
//return $(tip);
};
// Load indicator
$.fn.loadIndicator = function (action)
{
var indicatorClass = 'loading';
// Take parent if no container has been defined
var $container = this.closest('.loading-container') || this.parent();
switch (action)
{
case 'show' :
$container.append($('<div>').addClass(indicatorClass));
break;
case 'hide' :
$container.find('.' + indicatorClass).remove();
break;
}
};
})(jQuery);
// Usage
// Assuming 'this' points to popover object (e.g. an anchor or a button)
// Check if popover tip is visible
var isVisible = $(this).isPopover('shown');
// Hide all popovers except this
if (!isVisible) $('[data-toggle="popover"]').not(this).popover('hide');
// Show load indicator inside tip on 'shown' event while loading an iframe content
$(this).on('shown.bs.popover', function ()
{
$(this).popoverTip().find('iframe').loadIndicator('show');
});

Here a way to check the state with Vanilla JS.
document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');

This works with BS4:
$(document).on('show.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', true);
});
$(document).on('hidden.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', false);
});
if ($('#anElement').data('isvisible'))
{
// popover is visible
$('#tipUTAbiertas').tooltip('hide');
$('#tipUTAbiertas').tooltip('show');
}

Bootstrap 5:
const toggler = document.getElementById(togglerId);
const popover = bootstrap.Popover.getInstance(toggler);
const isShowing = popover && popover.tip && popover.tip.classList.contains('show');

Using a popover with boostrap 4, tip() doesn't seem to be a function anymore. This is one way to check if a popover is enabled, basically if it has been clicked and is active:
if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}

Replace images in PhotoSwipe gallery

I have a PhotoSwipe gallery on my page which is created programatically like this:
var instance = window.Code.PhotoSwipe.attach(image, options)
Now I want to update the images in the gallery, or put a new gallery in the same spot.
Creating a new gallery for the same DOM Element omits the following error:
Code.PhotoSwipe.activateInstance:
Unable to active instance as another instance is already active for this target
Detaching the instance from the Element using Code.PhotoSwipe.detatch(instance) didn't help either.
Any ideas how to fill the gallery with new images, or remove it, so I can create a new one in the same place?

The only way I found to avoid that error was calling unsetActivateInstance before detatch:
window.Code.PhotoSwipe.unsetActivateInstance(instance);
window.Code.PhotoSwipe.detatch(instance);

you can also hide the current active instance, instead of detatching it by calling
window.Code.PhotoSwipe.activeInstances[0].instance.hide(0)

I tried all the suggestions above but none of them worked well.
So my solution was to simply never create the gallery for the same ID twice:
instance = window.Code.PhotoSwipe.getInstance(myuniqueid);
if (window.Code.Util.isNothing(instance)) {
// Only initialize if there is no gallery with this ID already.
myPhotoSwipe = window.Code.PhotoSwipe.attach(window.document.querySelectorAll(galleryimagesselector), {captionAndToolbarAutoHideDelay: 0, jQueryMobile: true, preventSlideshow: true, enableMouseWheel: false, enableKeyboard: false}, myuniqueid);
}

How should I be sharing Javascript functions across multiple pages?

I don't completely understand how javascript works in an OOP model, so I come to stack overflow for wisdom.
My example code:
(function($) {
var $container = $('#container');
var $sidebar = $('#sidebar');
// Sidebar
var currTab = $('#s1');
if(currTab) {
currTab.parent().parent().parent().addClass('selectedTop');
currTab.find(".sideContent").delay(300).slideToggle("slow");
currTab.addClass('selected');
}
$('#sideTop').delegate('li', 'hover', function(event) {
var $this = $(this);
if (event.type == 'mouseenter') {
if(!$this.hasClass("selected")){
$this.siblings(".selected").children(".sideContent").toggle();
$this.siblings(".selected").removeClass('selected');
$this.find(".sideContent").toggle().addClass('selected');
$this.addClass('selected');
}
}
});
})(this.jQuery);
This code caches my container and sidebar div and controls the hovering of tabs on my sidebar. These will be on every page, so I originally just included the js file on each page and it works as usual. Now I've gotten to a point where I want to customize each page with a specific tab of the sidebar open by default (defined by the currTab variable). When set, it will open by default, and stay open after the mouse leaves the sidebar.
I haven't found a way to customize currTab on each page without having to completely re-paste all the code associated with the sidebar, making any updates to the script cumbersome.
How should I be approaching this? Thanks

I'm sorry to have caused confusion with my lack of understanding, but one of the related questions answered mine in a way I didn't know how to search for:
He setup a "class" first, which could be included as a seperate JS, then communicated using jQuery.ClassName(options)
I've tried it and it works perfectly, seperating the code that is consistent, with the values that will change on each page.
(function($){
var undefined;
$.ClassName = function(options){
var self = this;
var cfg = $.extend(true, {}, this.defaults, options);
// ********************
// start:private
// ********************
function _init(){
};
// ********************
// start:public
// ********************
this.methodName = function(){
};
_init();
};
$.ClassName.prototype.defaults = {};
})(jQuery);

With classes. Just add a class such as "currTab" to whichever tab is active. In your JS, check for that class on the tab, and when the tab is changed, remove that class from the old one and add it to the new one.

Add a class to the item you want to be active by default. Use JS to detect the class and react accordingly.

One way is, to declare currTab differently inside each HTML page, and remove "var currTab = $('#s1');" from your JavaScript file. The rest of currTab occurences in the JavaScript file are still able to reference it.