Develop Reference

Hammer js - off() method doesn't work

I am using Hammer this way, it works (it just triggers next/prev buttons):
var slider = document.getElementsByClassName('slider');
Hammer(slider[0]).on("swiperight", function() {
prev.click();
});
A according to Stack thread, on event when modal is coming out (hammer is still swiping behind it :/) I am trying to turn it of with:
Hammer(slider[0]).off("swipeleft");
Hammer(slider[0]).off("swiperight");
But it doesn't work. It's still swipeing behind modal. Any idea why?

Save the Hammer instance to a variable. The following example removes pan event after 5 seconds.
var h = new Hammer(document);
h.on('pan', function(){
console.log('Panned');
});
setTimeout(function(){
console.log('removed');
h.off('pan');
}, 5000);
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>

CSS transition on page exit

Hi Why does this
window.onbeforeunload = function (e) {
document.getElementById('myLink').className = 'out';
}
http://jsfiddle.net/X5vKS/
only work with some links ?.
Its from a question here
which I am not allowed to comment on till have 50 rep.
If I add index.html it goes straight to link with no transition if I add full address to page www.mywebsite.info/index it goes straight to link and does not do the transition .
But if I add google.com, yahoo.com etc it works fine.
I am using a .info domain if that helps.

First, use http:// in href before the site.
As you have not given much detail, I think the problem is that your page is loading too quickly in order for you to see the transition. I suggest you add a timeout in onbeforeunload function.
This adds a 2 seconds timeout.
window.onbeforeunload = function (e) {
setTimeout(function(){
document.getElementById('myLink').className = 'out';
}, 2000);
}
If you want to wait after the function, then do this -
window.onbeforeunload = function (e) {
document.getElementById('myLink').className = 'out';
setTimeout(function(){
document.getElementById('myLink').className = '';
}, 2000);
}
Now, onbeforeunload doesn't provide a whole lot of functionalities for security reasons, but above should do for you.
For more information on timing events in javascript, read this - http://www.w3schools.com/js/js_timing.asp

document.ready() function not executed, works in dev console

I'm trying to simulate a click in a tabbed div when the page loads.
To do this I use:
$(document).ready(function() {
$("#tab_inbox").click();
});
However, this doesn't seem to work, but when I enter this in the dev console on Google chrome, it does work..
$("#tab_inbox").click();
To show the tabs, I use this code:
$("#tab_inbox").click(function() {
$("#othertab").hide();
$("#tab_inbox").show();
});
Anybody knows what's wrong?

Try this:
$(document).ready(function() {
setTimeout(function () {
$("#tab_inbox").trigger('click'); //do work here
}, 2500);
});

I read in your comment that you're using show/hide techniques and I assume you need the click for an initial display option? If so, hide (or show) your element(s) specifically in the code rather than saying click to hide/show. So
$(document).ready(function() {
$("#tab_inbox").hide();
}
Or try core JavaScript and use
window.onload = function() {
// code here
}
window.onload waits until everything is loaded on your page, while jQuery's .ready() may fire before images and other media are loaded.

you can try making your own function with pure JS:
document.getElementById('triggerElement').addEventListener('click', funtction(e) {
document.getElementById('hideElement').style.display = 'none';
document.getElementById('showElement').style.display = 'block';
}, false);

jQuery hide notification after x ms

I found this script for warning message here: http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
In the script it is set to hide the warning message after the click function
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
So I added Timeout function in the hopes of closing it after x ms, but the 'timer' so to speak starts running as soon as the page is loaded.
setTimeout(function(){hideAllMessages()},5000);
I want the timeout function to work every time the form is submitted and the drop message becomes visible (I am using a hidden iframe to submit the form and it is for stock, so repeated submits will be done on the same page).
I set up a Demo Here jsfiddle

You want to add it in your showMessage function like this:
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo
EDIT: As suggested by James Montagne in the comments, you can use clearTimeout() to prevent stocking timeouts if the user clicks around quickly.
Something like this (quick example, might not be production-ready):
var timeout = null;
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
if (timeout) clearTimeout(timeout);
timeout = setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo

Try to set the timeout after your animation is completed!
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500, function(){
setTimeout(function(){hideAllMessages()},5000);
});
});

Twitter Bootstrap Tabs: Show on Hover, hide on onmouseout

I changed the bootstrab.js (just replaced click with hover):
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want the content-tab to close when you are not hovering over the tab or content.
How do i do this?

Update: something like the below
var timer;
$('tab_element').hover(
function(){ //hover
// clear timer first
clearTimeout(timer);
// then show the content
},
function(){ //unhovered, 1000 milliseconds
// set a timer to call the hide function
timer = setTimeout("hide_function", 1000);
}
);
$('content_tab_here').bind('mouseleave', function(){
// hide it, you can set a timer here too if you want
});
Here is the docs on timer http://www.w3schools.com/js/js_timing.asp
There are many options here but this will get you started, the jquery I used is old school so if you are using latest version of jquery you can change the code accordingly. I don't want to write out everything for you because then you won't be learning and I don't have that much time because I am at work. Good luck.