We Keep Coding

JavaScript inside the A HREF keeps jQuery function from working

I'm using a WordPress plugin to display a list of locations and a map of those locations.
I created the following function so that a link will scroll to a map when a link is clicked.
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function() {
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
However, the plugin automatically adds the following to each link:
href="javascript:open_current_location(marker2259map2)">
This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.
Any ideas how to overcome this?

You need to cancel the default event inside your click handler:
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
Fiddle

An approach could be to override the open_current_location() function.
Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()

Mouseover on all elements in frame only responds to click

I'm trying to apply a handler to all the elements inside an iframe (that is on the same domain) and I can't figure out why it the function only fires on click. I fear it may have to do with the fact that the iframe is only active when I'm clicking into it. I have seen applications of this in a jsfiddle such as this http://jsfiddle.net/danmana/pMBw2/
This is basically my code (I tried mimicking the jsfiddle using the delegate function and got the same results):
$('iframe').contents().on("mouseover", "*", function() {
$(this).css("background-color", "yellow");
});
EDIT
working with that jsfiddle (http://jsfiddle.net/danmana/pMBw2/) I found that if you switch it to the newest version of jquery 2.1.0, then the code no longer works, it seems 1.8.3 is the newest one that works with that code.

Mimicing the jsfiddle you mentioned should work just fine, you have to use the delegate() function:
Working js fiddle
<iframe src="http://fiddle.jshell.net"></iframe>
var $c = $('iframe').contents();
$c.delegate('div', "hover", function() {
$(this).css("background-color", "yellow");
});

This works for me -
var $c = $('iframe').contents();
$c.delegate('div', 'hover', function() {
$(this).css("background-color", "yellow");
});

jQuery toggle not working in IE

I have some jQuery code that works absolutely fine on everything other than IE. The toggle action doesn't trigger and doesn't hide or show the footer element.
I have tried to use a conditional if and else statement to use hide() and show() instead of toggle, I have also tried adding language and src elements to the script tag but neither of these angles worked. I have the latest doctype declared and i'm using the latest version of wordpress.
Can anyone see why this isn't working in IE?
<script>
$(document).ready(function() {
$("#clickme").click(function() {
event.preventDefault()
$("#footer").toggle(2000);
$('#menu, #menu2, #menu3, #menu4').hide('slow');
$(this).html(($('#clickme').text() == 'Show') ? 'Hide' : 'Show');
$(this).toggleClass("active");
$(this).attr("title", ($(this).hasClass("active") ? "Show" : "Hide") + " the menu");
});
});​
</script>

You are using
$("#clickme").click(function() {
event.preventDefault();//^ event parameter is missing, so causing error
// ...
});
It should be
$("#clickme").click(function(event) {
event.preventDefault(); // ^
// ...
});

JQuery click on link not working

Ive the following code:
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").click();
});
});
</script>
where btnSave is anchor element with ID btnSave, shortcut is from http://www.openjs.com/scripts/events/keyboard_shortcuts/ . If i change the line $("#btnSave").click(); to document.getElementById("btnSave").click() - all works fine. The question is why jquery implementation is not working in my case?
PS: made jsfiddle for my case: http://jsfiddle.net/0x49D1/WCmeU/
Here is the guy with similar problem: http://forums.asp.net/t/1591818.aspx

Instead of $("#btnSave").click(); try with $("#btnSave").trigger('click');
You can also use $("#btnSave")[0].click(); which is jquery equivalent to document.getElementById("btnSave").click();
Update:
It's not possible to simulate a user link click from javascript, for security reasons, all you can do is attach your own handler for click event and redirect based on the href of the link, like so:
$("#btnSave").bind('click', function() {
window.location.href = $(this).attr('href');
});

try this
<script type="text/javascript">
$(document).ready(function(){
shortcut.add("Ctrl+Alt+N", function() {
$("#btnSave").live('click',function(){
// do stuff here
});
});
}); </script>

Toggle show/hide on click with jQuery

I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?

The toggle-event is deprecated in version 1.8, and removed in version 1.9
Try this...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed, jQuery docs.
The .toggle() method is provided for convenience. It is relatively
straightforward to implement the same behavior by hand, and this can
be necessary if the assumptions built into .toggle() prove limiting.
For example, .toggle() is not guaranteed to work correctly if applied
twice to the same element. Since .toggle() internally uses a click
handler to do its work, we must unbind click to remove a behavior
attached with .toggle(), so other click handlers can be caught in the
crossfire. The implementation also calls .preventDefault() on the
event, so links will not be followed and buttons will not be clicked
if .toggle() has been called on the element, jQuery docs
You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.
Live Demo
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.
Live Demo
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});

Make use of jquery toggle function which do the task for you
.toggle() - Display or hide the matched elements.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});

this will work for u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});

You can use this code for toggle your element
var ele = jQuery("yourelementid");
ele.slideToggle('slow');
this will work for you :)

You can use .toggle() function instead of .click()....

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>

$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});
Live Demo