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);
};

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.

$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>

This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck

I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

Equal height columns with jQuery not working?

I've tried numerous approaches to getting equal columns, and none have worked for me. I've tried every variation of jQuery plugin that I could find with different calls using both document ready and window load, in head and before the end of body... just no luck... the sidebar will not continue to meet my content.
I've created a fiddle with my latest shot (which is this method: http://www.outsidethebracket.com/equal-height-columns/), but am up for changing to whichever method will work.
http://jsfiddle.net/7WraW/
$(window).load(function(){
$("#sidebar").height(Math.max($("#content").height(),$("#sidebar").height()));
})
Appreciate any help!

Works fine if you use $(document).ready instead of $(window).load:
$(document).ready(function () {
var hgt = Math.max($("#content").height(), $("#sidebar").height());
$("#sidebar,#content").height(hgt);
});
http://jsfiddle.net/mblase75/7WraW/5/

Here try this...
$(document).ready( function() {
var contentHeight = $('#content').height();
$('#sidebar').css('height', contentHeight + "px");
});

There is The jQuery plugin for equalizing the height or width of elements that's far more better and with more utilities to accomplish this, and really easy to use:
http://tsvensen.github.io/equalize.js/
hope this helps, happy coding :)

here's a simple solution for equal height columns using jquery:
$(window).load(function(){
$("#left_side").height($("#right_side").height());
});
http://jsbin.com/iyirel/1/watch

jQuery Galleria plug-in: Make auto-play?

I am using this jQuery plugin
It is very nice, but I can't seem to figure out how to get it to auto-play. (automatically transition to the next image at an interval)
Has anyone else gotten this to do that?

$('#galleria').galleria({
extend: function() {
this.play(4000); // will advance every 4th second
}
});

Actually the new version of galleria has an option for autoplay. looks like this:
(where .test is the name of the div layer containing your images)
<script>
// Load theme
Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
$('.test').galleria({
autoplay: 1000
});
</script>

In my experience, it doesn't have that option. You'd have to hack it to add that.
You might want to consider using another slider plugin: Easy Slider, Galleriffic, Pikachoose