We Keep Coding

jQuery .click() cause page scrolling

I've created few instances of jPlayer on my site. Every instance must be loaded through iframe tag and only one instance should playing at the same time.
Every iframe have ID like: "iframe_1", "iframe_2" etc.
Inside js file I've created function like this:
$( ".jp-playlist").click(function() {
//some code
window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();
});
$( ".jp-play").click(function() {
//some code
window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();
});
When I click any element which is attached to class ".jp-play" or ".jp-playlist" whole page being scrolled to top of triggered element.
Can someone help me with finding an alternative way to stop all players except playing one, or just help with fixing scrolling issue?

You can use event.preventDefault() to prevent the default action of clicking on the element.
$( ".jp-playlist, .jp-play").click(function(e) {
//some code
e.preventDefault();
window.parent.$('iframe_'+playingNow).contents().find(".jp-stop").click();
});
If the elements you are clicking on are links (a elements) with the href attribute set as #, it will cause the page to scroll to the top. Change the href to javascript:void(0) or equivalently, javascript:;.
<div style="margin-top: 500px;"></div>
Clicking here will not scroll to the top of the page<br/>
Click here to scroll to the top of the page

Let’s use the proper
$( ".jp-playlist, .jp-play").on("click", function(e){
e.preventDefault();
//your code
});
for jquery e stands for event.

jQuery detect whether an element has been linked to

I want to attach a jQuery event handler to a <div> element such that whenever a link is clicked which points to this <div>, that handler is activated and the associated function is executed – regardless of the location of the link (same page, other page, other site) pointing to the <div> .
$("div#mydiv").on("linked_to", function(){ //is there a "linked_to" event?
//do something about it
});
Is this possible? Can scrollIntoView() be used?

What you want is quite specific and borderline undoable. I think your best bet is to detect a hash change in the URL and act accordingly.
You aren't gonna be able to detect that div#mydiv itself was clicked, but detecting the hash #mydiv comes pretty close to it.
You would use something like:
window.onhashchange = function() {
if (window.location.hash === '#mydiv') { // here you check if it was `#mydiv`
alert('hey! are you after mydiv?!')
}
}
Check an example here: http://output.jsbin.com/pikifov - click the link and notice how the hash from the URL changes.
Source for the JSBin above here.
Full code:
<div id="mydiv">mydiv</div>
<hr>
Click to go to mydiv
<script>
window.onhashchange = function() {
if (window.location.hash === '#mydiv') {
alert('hey! are you after mydiv?!')
}
}
</script>

Close popup div if element loses focus

I have the following scenario: On a label's mouseover event, I display a div. The div must stay open in order to make selections within the div. On the label's mouseout event, the div must dissappear. The problem is that when my cursor moves from the label to the div, the label's mouseout event is fired, which closes the div before I can get there. I have a global boolean variable called canClose which I set to true or false depending on the case in which it must be closed or kept open. I have removed the functionality to close the div on the label's mouseout event for this purpose.
Below is some example code.
EDIT
I have found a workaround to my problem, event though Alex has also supplied a workable solution.
I added a mouseleave event on the label as well, with a setTimeout function which will execute in 1.5 seconds. This time will give the user enough time to hover over the open div, which will set canClose to false again.
$("#label").live("mouseover", function () {
FRAMEWORK.RenderPopupCalendar();
});
$("#label").live("mouseout", function () {
setTimeout(function(){
if(canClose){
FRAMEWORK.RemovePopupCalendar();
}
},1500);
});
this.RenderPopupCalendar = function () {
FRAMEWORK.RenderCalendarEvents();
}
};
this.RenderCalendarEvents = function () {
$(".popupCalendar").mouseenter(function () {
canClose = false;
});
$(".popupCalendar").mouseleave(function () {
canClose = true;
FRAMEWORK.RemovePopupCalendar();
});
}
this.RemovePopupCalendar = function () {
if (canClose) {
if ($(".popupCalendar").is(":visible")) {
$(".popupCalendar").remove();
}
}
};
Any help please?

I would wrap the <label> and <div> in a containing <div> then do all you mouse/hide events on that.
Check out this fiddle example - http://jsfiddle.net/6MMW6/1

Give your popupCalendar an explicit ID instead of a class selector, e.g.
<div id="popupCalendar">
Reference it with #popupCalendar instead of .popupCalendar.
Now, remove() is quite drastic as it will completely remove the div from the DOM. If you wish to display the calendar again you should just .hide() it.
But your logic seems a bit overly complex, why not just .show() it on mouseenter and .hide() on mouseout events ?

This will close the entire tab page if the tab page loses focus.
How ever if you target it, it can work for something within the page too, just change the target codes.
JavaScript:
<script type="text/javascript" >
delay=1000 // 1 sec = 1000.
closing=""
function closeme(){
closing=setTimeout("self.close()",delay)
// self means the tab page close when losing focus, but you can change and target it too.
}
<!--// add onBlur="closeme()" onfocus="clearTimeout(closing)" to the opening BODY tag//-->
</script>
HTML:
<body onBlur="closeme()" onfocus="clearTimeout(closing)">

How do I stop the page from reloading when clicking on tabs? (jQuery)

I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/
The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.
preventDefault() and return false do not fix the problem.
If there is anything else you need let me know but with the above link you can see everything.
Here is my current jQuery code:
$(document).ready(function() {
$('#tabnav li').click(function() {
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
});
$('#tabnav li:first').click();
});
Thanks in advance for any help!

Edit: Updated answer based on properly reading the question :-)
As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.
The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.
$(function() {
var tabItems = $('#tabnav li'); // save looking this up multiple times
$('.tab').hide(); // hide all initially
$('#tabnav li').click(function() {
// remove active class from all and store the visible tab
tabItems.removeClass('active');
var visibleTab = $('.tab:visible');
// add class to selected list item
$(this).addClass('active');
$(this.title).fadeIn(450); // show new tab
visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
});
$('#tabnav li:first').click();
});
You want to either call event.preventDefault() or add a return false; (you don't need the event for this one) to the end of the function.
By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.
JavaScript
$('#tabnav li').click(function(event) { // <-- added the eventData map
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
event.preventDefault(); // or return false;
});

Page refreshes during JQuery call

For some reason when this JQuery call is made the page refreshes. I was lead to believe that a return false; at the end of a JQuery function would cause the page not to reload, but apparently this is not the case? Here is my stripped down code:
$(function() {
$(".vote").click(function() {
return false;
});
});
When I click on the vote button the page is refreshed. I know that this code is being called because if I replace return false with alert('asdf'); the alert appears.

Often when you want to prevent a link from being followed or a form from submitting, you want to tell the event to preventDefault():
$('a').click(function(e){
e.preventDefault();
});

Try this:
$(function() {
$(".vote").click(function(e) {
e.preventDefault();
});
});

You can't put a div in an a: div is block-level element, a is inline, and HTML does not allow block elements inside inline elements. Browsers will try to automatically correct this by rearranging your DOM tree somehow (for example, <a><div></div></a> might end up as <a></a><div><a></a></div><a></a>); which leads to all sort of funny behavior. In Firefox you can use 'view selection source' (or, of course, Firebug) to check what happened.