Develop Reference

Why document selector doesn't work for mouseenter event?

Here is my code:
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
It works fine. But in reality, the content (those tags) will be created later. I mean they will be created as an ajax response. So $('a') doesn't select them.
Now I'v written it like $(document).bind('mouseenter', 'a', function(){ ... }) to make that working even for the DOM which is created after page loading.
But as you see in this fiddle, it doesn't work. Does anybody know what's the problem and how can I fix it?

You need to bind the event with .on(). This works for future elements as well.
$(document).on('mouseenter', 'a', function(){ ... });
And, as #Gregg has answered, .bind() has been replaced by .on(). That's the actual cause why your fiddle doesn't work.

The on() function has replaced bind() since jQuery 1.7. If you read the documentation, you'll note that live() was actually used for delegate events like what you're trying to achieve while the bind() method was not; binding events to elements that will be added to the DOM later. The on() function can do this. Either from the document itself or from a direct descendent.

When anchor tag are being created in response of your AJAX call, put id in it like this:
$('body').append("<div class='tag_info' id='myTag'>Some explanations about "+tag_name+"</div>");
and then you can bind event mouseenter or mouseleave like this:
$('#myTag').bind('mouseenter', function(){
alert('Mouse Enter in your Anchor Tag');
}).bind('mouseleave', function(){
alert('Mouse leave');
});

Issue with document on 'load' event listener

First issue
My script runs fine when it listens for a click event on the element with the id share. Instead of a click event, I want the script to fire up on $(document).on(load) event and get rid of the share button. But I have tried it and it isn't working. Any idea why it isn't firing up the modal script?
Second issue
The modal window should close when the user clicks the close button, but it doesn't. I have added console.log to all functions and they are fired up every time I click close which shouldn't happen. Any idea why it isn't closing?
$(function(){
var $content = $('#welcome-modal').detach();
$(document).on('load', function() {
modal.open({
content: $content,
width: 500
});
});
}());
var modal = (function() {
var $window = $(window); //store the window object
var $modal = $('<div class="modal-window">'); //create markup for modal
var $content = $('<div class="modal-content">');
var $close = $('<button role="button" class="modal-close">close</button>');
$modal.append($content, $close); //append content and close button
$close.on('click', function(e) { //if user clicks on close button
e.preventDefault(); //prevent default behaviour
modal.close(); //close modal
});
return { //add code to modal
center: function() {
var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2; //calculate distance from top
var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2; //calculate distance from left
$modal.css({
top: top + $window.scrollTop(), //apply css positioning to the modal
left: left + $window.scrollLeft()
});
console.log('center');
},
open: function(settings) {
$content.empty().append(settings.content);
$modal.css({ //removed height so it's auto
width: settings.width || 'auto'
}).appendTo('body');
modal.center();
$(window).on('resize', modal.center);
console.log('open');
},
close: function() {
console.log('close');
$content.empty(); //Remove all child nodes of the set of matched elements from the DOM.
$modal.detach();
$(window).off('resize', modal.center);
}
};
}());
.modal-window {
position: absolute;
z-index: 10000;
background: #fff;
padding: 1.5em;
clear: both;
overflow: hidden;
}
.modal-content {
border: 0;
}
#share span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="share">
<span class="fa fa-heart fa-3x"></span>
</div>
<div id="welcome-modal">
<h4>This is jibber title</h4>
<p>A load of jibber jabber</p>
</div>

Your first issue is that you have a document.load event handler being registered inside of a document.ready function that is self-invoking!
// When you pass a function to JQuery, that function is automatically
// executed when the DOM is ready. No need to self-invoke it.
$(function(){
var $content = $('#welcome-modal').detach();
// Since this code is already running when the DOM is ready
// there is no need to make this code the callback for document.load
modal.open({
content: $content,
width: 500
});
});

How To make a preloader page

I want to have a page that preloads untill the contents of the link/page that is being visited is fully loaded.
here is my code
$( document ).ready(function() {
$.ajax({
method: 'GET',
url: "pages/main.html",
success: function(content)
{
$('#contentarea').html (content);
}
});
});
$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )
return false;
});

You can use $(document).ajaxStart().ajaxStop():
$(document).ajaxStart(function (){
$('#contentarea').prev().append('<span>loading</span>');
}).ajaxStop(function (){
$('#contentarea').prev('span').remove();
});

css
#loader-wrapper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #ffffff;
opacity: 1;
}
html.put this div tag below the start of the body tag
<div id="loader-wrapper"></div>
javascript
window.addEventListener("load",function(){
var load_screen = document.getElementById("loader-wrapper");
document.body.removeChild(load_screen);
});

jquery and hammer.js ghost click when panning

I'm using jQuery 191 and Hammer JS 204. I have the following example scenario
<div> class="myDiv">
<div class="content">
<img>
</div>
</div>
Example JS
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
});
$('.content img').on('click', function(){
console.log('i was clicked');
});
When I click on the image to start panning myDiv, Right after panend, the myDiv img click event gets fired.
I've tried to stopPropagation and stopImmediatePropagation but still couldn't get it to stop firing the click after i finish panning.

var hammering = false;
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
hammering = true;
}).bind("panend", function(h) {
setTimeout(function(){
hammering = false;
}, 300);
});
$('.content img').on('click', function(){
if(hammering) return false;
console.log('i was clicked');
});

Another way to avoid this ghost click is to create a pseudo class over the hammer target.
for example you can add class and the style something like
`.block:after {
content: " ";
background: transparent;
top: 0;
left: 0;
width: 250px;
height: 100%;
z-index: 2;
display: block;
position: absolute;
}`
when panstart and remove it when panend.
hope this trick will help others.

I find out a easy way could prevent click event while hammer.js panning:
disable div pointer-events while pan start, then enable it while pan end.
...
myPanGesture.on("panstart", function(ev) {
$(".tab-pane.active").css({'pointer-events':'none'});
});
...
myPanGesture.on("panend", function(ev) {
$(".tab-pane.active").css({'pointer-events':'auto'});
});
...

jQuery show hide sliding panel from left side

I want a panel to slide from left edge of browser when clicking a button and hide the panel when clicking the same button (toggle).
Html
<div class="panel">
</div>
»
CSS
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
jquery
$(function(){
$('.slider-arrow.show').click(function(){
$( ".slider-arrow, .panel" ).animate({
left: "+=300"
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
});
$('.slider-arrow.hide').click(function(){
$( ".slider-arrow, .panel" ).animate({
left: "-=300"
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
});
});
It is showing the panel but not hiding the panel. Any problem with the selectors used?
http://jsfiddle.net/Paramasivan/eHded/1/

As others have said with jQuery once the document is initialized its only looking for elements that initially existed. For that reason your .show function was being run every time.
Instead of looking for a click event on .slider-arrow.show you can just look at .slider-arrow and then check for the classes once it has been clicked like in this example.
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
left: "+=300"
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow, .panel" ).animate({
left: "-=300"
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
});
http://jsfiddle.net/eHded/4/

Since you are using jQuery to manipulate the "show" and "hide" after the DOM has loaded, jQuery doesn't know those elements exist.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...
I suggest using jQuery's on() in order to delegate events and select dynamically generated classes, like so:
$(document).on('click','.slider-arrow.show',function(){
....
});
$(document).on('click','.slider-arrow.hide',function(){
....
});
http://jsfiddle.net/eHded/2/

I think you can manage the action choosing from the active anchor class like this:
$(function(){
$('.slider-arrow').click(function(){
var anchor = this;
var removeClass = "show";
var addClass = "hide";
var diff = "+=300";
var arrows = "«";
if($(anchor).hasClass("hide")){
diff = "-=300";
removeClass = "hide";
addClass="show";
arrows = '»';
}
$( ".slider-arrow, .panel" ).animate({
left: diff
}, 700, function() {
// Animation complete.
$(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
});
});
});
So you've got only one animation function.
Here is the updated fiddle: http://jsfiddle.net/eHded/5/

You should try using .slideToggle(), put inside a .click(function(){/*in here*/}).

When you write $('.slider-arrow.hide').click(func....., that binds the click event at the time that code is first ran (probably when the document is ready). If you change the DOM later on (ie. add the .hide class) you need to re-bind the click event.
You need to use jQuery's .on() method instead (http://api.jquery.com/on/).
$(document).on('click', '.slider-arrow.show', function() { /*.......*/ });
$(document).on('click', '.slider-arrow.hide', function() { /*.......*/ });
A better alternative altogether however would be to use CSS3 transitions and jQuery's .toggleClass()
.panel {
left: -300px;
transition: left 1s;
/* other styles... */
}
.panel.expand {
left: 0;
}
$('.slider-arrow').click(function() {
$('.panel').toggleClass('expand');
}

For this task I use SlideReveal jQuery plugin.
After you include the library the setup is as easy as:
<div id='slider'>Hello World!!</div>
<button id='trigger'>Trigger</button>
<script>
$('#slider').slideReveal({
trigger: $("#trigger")
});
</script>
Please refer to documentation for more details and live samples.