We Keep Coding

Go to certain Slide of Swiper within Elementor Pro

I'm using the slides widget of Elementor Pro which is based on swiper.js and want to make use of the slideTo() function which the swiper offers to slide to a certain slide. I could not find a way to address the slider with javascript. I tried to add something like
$('.btn').on('click', function() {
mySwiper.slideTo(2)
});
or
$('.btn').on('click', function() {
mySwiper[0].slideTo(2); // in case there is more than one swiper element
});
But that did not work, since I could not identify the slider.
Analysising Elementor's frontend.js I still could not find out how the swiper instances are called within the plugin.
Has anyone managed to managed a way to call swiper sliders that come from Elementor?
Thanks in advance.
The question probably can also be related to this question
Identify Reference to Destroy & Re-Initialize Swiper in Elementor

You can give an ID to the Elementor widget ex: slider1 and then with JS you can use:
var sliderInstance = document.querySelector('#slider1 .swiper-container').swiper;
After this you can call sliderInstance.slideTo(2) wherever you want.

The code above didn't work for me, because I used the 'AE-elementor Post Blocks' to show woocommerce products as a slider. It helped me along the way tough, so i'll post my solution here for those who arent sliding pictures, but post trough 'AE Post Blocks'
The code above returned a null, so i couldn't reach my slider. This is how I eventually did:
var mySwiper = new Swiper ('#slider1 .swiper-container');
mySwiper.slideTo(2);
In some cases it is possible that the script of the slider is overwriting your custom code, because it is added later on. That was the case in my project, so I've put a little delay on the script.
setTimeout( function(){
var mySwiper = new Swiper ('#gr-week-swipe .swiper-container');
mySwiper.slideTo(2);
} , 500 );
Now its working fine. Thanks #AlanRezende, your code helped me along the way!

Bootstrap ScrollSpy reseting position after page reload

Hi i have problem with bootstrap scrollspy function.
For example when i akcept something, that will run reload function, my scrollspy element have to be at the same position like before, but it doesn't work for me. He just refreshing position.
I tried to change something in scrollspy.js from bootstrap order but that doesn't help me or maby i changed something at wrong position in code.
So, im looking for javascript or jquery solution to fix it.

var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing, in your
// case you can save your old position in this variable.
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};

Jquery accordion wont stay collasped

Maybe someone having the same problem - Im having a small issue with collapse. I have read this article already along with a couple of others How do I keep jQuery UI Accordion collapsed by default? , but i can't seem to get it to collapse by default - ive managed to do it to stay open, but can't get my head around the collapsible true and active false. I am aiming to have it so when you click the next accordion the previous one automatically shuts.
this is the accordion js fiddle link:
https://jsfiddle.net/limtu/gnhgdxrm/
$(document).ready(function(){
$('#original .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').slideToggle();
});
$('#improved .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
});
});
Any suggestions or links to similar problems would be really kind!
Happy Friday!

jsFiddle
$(document).ready(function(){
var $contents = $("#improved").find(".content"); // Cache your slideable elements
$('#improved .head').click(function(e){
e.preventDefault();
$contents.stop().slideUp(); // Slide up all
$(this).closest('li').find('.content').stop().slideToggle(); // Toggle one
});
});
and fix all those things in HTML and move your inline styles to stylesheet

Isotope appending doesn't seem to work

I have a photo gallery powered by Isotope.Images are requested from external resource on page load and every time a user scrolls to the bottom of the page. New images are to be appended to the current isotope layout. The problem is with Isotope - it doesn't seem to execute the 'appended' method.
Searching for a solution on StackExchange and Google revealed I am not the only one having this problem. I have been tinkering with this for past couple of days and tried almost every solution I could find but so far I have not found anything that could fix my problem.
CodePen: I have created a CodePen here - http://codepen.io/Writech/pen/pBoEt
WebPage: As the custom event 'resizestop' is not working in codepen the same code is found as a webpage here - http://writech.net.ee/sandbox/
To see the problem open the CodePen or WebPage provided above and scroll to the bottom of the page which initiates loading of additional images. Then you see the new images are just appended to the container by jQuery. But they are not appended to the isotope layout instance as they are supposed to.
The problematic part lays in a custom function named isotopeAppend(). This function is called on page load and then the second part of 'if-else' statement is executed. When initialization is done and first images are added to the container then the next time isotopeAppend() is called (it's when user reaches to the bottom of the page) the first part of 'if-else' statement is executed and this is where the problematic Isotope 'appended' method is called.
A code snippet below from problematic javascript code. The results of the ajax request to external resource are applied to the variable newElems. When adding an alert('something') or console.log inside the 'appended' callback - nothing happens.
Does the problem lay in Isotope itself or does it have anything to do with my coding error?
I would really like to find a solution for this!
var elements = $(newElems).css({ opacity: 1, 'width' : columnWidthVar + 'px' });
$('#photos_section_container').append( elements );
$('#photos_section_container').imagesLoaded(function(){
$('#photos_section_container').isotope( 'appended', elements, function(){
hideLoader(function(){
elements.animate({ opacity: 1 });
});
});
});

In the initialization change
itemSelector : $('.photos_section_wrap'),
to
itemSelector : '.photos_section_wrap',
I forked your pen.
itemSelector is used by isotope to filter elements to layout and $() returns array of objects. In result there no elements to layout. If you are interested you may look at the _getAtoms method (isotope script) in debug to see what's goinig on.

Isotope jquery plugin doesn't show properly on chrome

I implanted Isotope jquery plugin successfully but for some reason I get problem showing all the items when the page is loaded first time and it's only on Chrome.
You can see here what is happening http://dl.dropbox.com/u/15358757/sd.jpg, that elements are on top of each other. but when I press on PSDs and then back to All it shows properly.
I don't have a default height for the container because I want to to be dynamic.
Any idea how I can fix this?

The problem is probably that Isotope is doing its thing before the images are loaded.
http://isotope.metafizzy.co/demos/images.html
[In this demo] Isotope is triggered after all images are loaded with the imagesLoaded
plugin.
http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
var $container = $('#container');
$container.imagesLoaded(function() {
$container.isotope({
// options...
});
});