We Keep Coding

Call or add on click event in calendar library equinox

I am trying to use this js library to show calendar in my page. I have no problem to integrating it. But the problem is i am not seeing any documentation how should i add onclick events in this library! If anyone look at this library and give me any solution, it will be very helpful for me. Thank you.
To Initiate the library i have to use:
<div class="event-calendar"></div>
then in my script.
$('.event-calendar').equinox({
onEventClick: null,
onPreviousMonthStart: null,
onNextMonthStart: null,
onCurrentMonthStart: null,
onLoadStart: null,
onLoadEnd: null
});
I was trying to get the current date with on click event, which is related to that library.

You didn't give any details about what you want to achieve and what this calendar thing looks like, so don't expect specific answers unless you edit your question.
Anyway, a general solution would be to inspect the calendar widget or element using you browser's dev tools, and check the id of the DOM element you want to target. Once you have the right id, it becomes as simple as:
var elem = document.getElementById("element_id");
elem.onclick = function() {
//whatever you want to do here
}

Move Gridster Widgets programmatically

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.

How to remove an event out of content script scope?

I'm trying to unbind an event from a specific element and upon research, I found this. Which is useful. In itself. I didn't know you could do that. But:
Is there a way to make it work in a browser/Chrome extension? I'm talking about content scripts.
The reason why this doesn't work the way it's described there is that the website which has attached the event in question with its own script is using a different jQuery object than the one in my extension's includes/ folder. And I can try to search the event via jQuery._data(el, 'click'); but that is my jQuery object, not the one of the website where the events are apparently stored. I'm glad I figured that out after hours of fiddling around.
Or maybe it is possible to access the website's jQuery object itself?
EDIT:
What I'm ultimately trying to achieve works in theory but … it's complicated. The original script uses a plugin event and keeps reinstalling it with .on('mouseleave',….
Anyway, this is what I got thanks to you, pdoherty926:
var $el = $('div.slideshow');
$('h2', $el).click(function(){ console.log('ouch!'); }); // test event
var $slides = $('.slides', $el).detach();
$copy = $el.clone(false);
$slides.prependTo($copy);
$el.replaceWith($copy);
The test event doesn't get triggered but the event I'm actually trying to remove still fires. I can imagine figuring it out, though, now that I got closer to my goal.

Okay, the aforementioned re-installation on mouseleave really messed up this otherwise satisfying suggestion. (The site is using the jQuery Timer plug-in by Cyntaxtech). So here's how I solved it instead: I simply changed the class name (-.-' )
Now the re-installation code cannot find the element anymore.
This is how my finished script looks like:
function stop_happening() {
var $el = $('div.fullwall div.slideshow');
$el
// first, stop the current automation.
.timer('stop') // Timer plug-in
// next, change class name in order to prevent the timer
// from being started again.
.removeClass('slideshow').addClass('slideshow-disabled-automation');
//--- copied some extra code from the website itself for the onclick
// events which are supposed to keep working. I wish I could do *that*
// programmatically but I'm glad I got as far as I got. ---//
// […]
}

How do I use a Dojo tap.hold gesture

I need to have a Javascript press and hold (long-press) event attached to a dom element. The example on Dojo's site (https://dojotoolkit.org/reference-guide/1.9/dojox/gesture.html#dojox-gesture) doesn't work at all, and I haven't found any working example.
define(["dojo/on", "dojox/gesture/tap"], function(on, tap){
var node = document.getElementById("box");
on(node, tap.hold, function(e){ alert('held') });
});
Associated fiddle: http://jsfiddle.net/L8Tp6/1/
I don't mind doing this in straight Javascript, if the Dojo option doesn't work out, but I'd like to know if I'm doing something wrong.

The problem is not the gesture or the event, but you using define(). define() should only be used when defining modules (as the name explains). When you load such a file, it will actually don't do anything. It won't load the modules and it won't execute the callbacks. The only way to make the callback run is when you call it from a require().
Your main Dojo file should always use require(). So to your code: replace define() with require() and it will work like a charm.
Code:
require(["dojo/on", "dojox/gesture/tap"], function(on, tap){
var node = document.getElementById("box");
on(node, tap.hold, function(e){ alert('held') });
});
I also updated your JSFiddle.

To Detect hold end:
on(node, tap.hold, function(e){
e.target.ontouchend = function(){
console.log('You quit holding');
}
});

Programmatically change tab using tabify jquery plugin

I am using tabify http://unwrongest.com/projects/tabify to show tabs.
I am struggling to figure out how to change the tab programmatically.
Here is one working example: http://jsfiddle.net/S78Bt/
$(document).ready(function(){
$('#menu').tabify();
});
Although I know that using JQuery UI tabs I can acheive this behavior, but due to some unavoidable circumstances I need to use tabify.

The project you are using seems dead, it hasn't received updates lately, it does not have documentation.
I've taken a look at the source code, there is no API to access tabs for you directly.
The only solution is to hack indirectly by seeing how the library expects the tabs to change:
function changeTab(name) {
location.hash = name + '-tab';
}
This works on my example.

I'm not sure if it's the best way, but it works at least.
If we look at source code of tabify plugin you will see:
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
You may use similar approach: jsfiddle