Move Gridster Widgets programmatically - javascript

I am trying to move Gridster widget programmatically , I want to achieve the effect like dragging the gridster widget .
Currently i am assigning data-col and data-row attribute using Jquery but the gridster widget simply just overlapped with other gridster widgets and other widgets are not repositioning like they do while dragging the gridster widget .What should i do ? TIA.

I encountered the same problem, while trying to create an animation loop for a gridster dash.
I have added a new function to the gridster src, which is basically just a very simple rewrite of the resize_widget API function. This in itself just uses mutate_widget_in_gridmap as pointed out by #Pavel.
I added the following after Resize_widget function:
fn.move_widget = function($widget, new_col, new_row, callback) {
var wgd = $widget.coords().grid;
var new_grid_data = {
col: new_col,
row: new_row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.col, new_grid_data.row);
}
return $widget;
};
Works like a charm for me. Tell me if you can come up with a good way to smooth the transition with JQuery or something :)

I didn't find a corresponding API method, but you can check a mutate_widget_in_gridmap function: http://gridster.net/docs/files/src_jquery.gridster.js.html#l496
Also you can check similar library gridstack.js: https://github.com/troolee/gridstack.js I've started this library because of gridster limitations. It's responsive, bootstrap v3 and knockout friendly. The library is under active development so I can implement any reasonable feature requests.

Related

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!

Add class to dynamically generated HTML

I'm working to use custom checkbox styles with a checkbox which is dynamically generated by javascript for the Google Identity Toolkit. For example, we add this div:
<div id="gitkitWidgetDiv"></div>
And the Google Identity Toolkit script generates new html for that div.
I need to add a class to the HTML which is added by the javascript without any action by the user and I'm struggling to make it work. For example, here is my code:
$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() {
$(this).addClass('checkbox');
});
I've tried switching 'ready' for a few other options and also using the livequery plugin, but nothing is working for me. It works if I use an active event like 'click,' but I can't figure out how to do this when the page loads. Could someone please help? Thanks!
Modern browsers (including IE11) support mutation obervers. You can use one to monitor the parent node of the div that will be added. When the div has been added, just add the class.
Here's something I made which comes in handy in annoying cases like this where it's difficult to tell when the element you need has finished loading in: https://gist.github.com/DanWebb/8b688b31492632b38aea
so after including the function it'd be something like:
var interval = 500,
stopTime = 5000,
loaded = false;
setIntervalTimeout(function() {
if($('.dynanicElementClass').length && !loaded) {
$('.dynanicElementClass').addClass('checkbox');
loaded = true;
}
}, interval, stopTime);
It's not perfect and I'm sure there are better solutions out there but in most cases like this it does the job.

Responding to Touch events with hammer

Currently I'm using code-A to create a color box and pass it's value to another function colChg(). This works perfect.
Now I need use this with hammerJS
Code-B is a sample code I found from their documentation. But I'm not understanding how to replace .on("click" with Hammer(element).on("tap" so that my current code Code-A will respond to touch devices as well.
Code-A
$.each(["#ff6600", "#ff0000", "#00ff00"], function(i, color) {
$('<input class="colBtn" type="button">')
.css("background-color", color)
.on("click",$.proxy(colChg, null, color))
.appendTo("#colSw");
});
Code-B
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("tap", function(event) {
alert('hello!');
});
Thank you!
With the jQuery plugin
If you want a neat jQuery integration, I would advise to use this plugin. It is developed by the same developer as Hammer's, it has just been split so as to lightweight the core release. You will be then able to use the Hammer methods directly on a jQuery object.
$('body').on('tap', callback);
See this JSFiddle.
Without the jQuery plugin
Otherwise you would have to access the raw DOM element from the jQuery object (which is really just a wrapper).
See this JSFiddle.

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

Capture event for YUI light box close

I have a light box (YUI) in my application. Upon closing of this lightbox by making use of the 'x' at the upper right side, I need to perform a set of actions. For this I need to capture the event that gets triggered when the lightbox is closed. Can some one please help?
Note - I did some research online and even went through the YUI js files but could not figure out a solution.
Unfortunately the Lightbox module in the YUI Gallery is very much outdated and it's no using any of the YUI components that would let you react to the lightbox being closed. I'd recommend that you use AUI's ImageViewer component which is pretty similar to a Lightbox. It allows you to listen to an event that signals the closing of the viewer like this:
YUI().use('aui-image-viewer', function(Y) {
var imageViewer = new Y.ImageViewer({
links: '#gallery a'
});
imageViewer.render();
imageViewer.on('visibleChange', function (Y) {
// if e.newVal is false, then the image viewer is being hidden
if (!e.newVal) {
}
});
});
It might be possible to do something like this:
Y.one('#buttonNavClose').on('click', doSomething);
buttonNavClose being the id of the close button node.

Categories