We Keep Coding

Jquery slideToggle, slideUp & stopPropagation in Firefox

I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?

Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!

jQuery toggleClass if another element is visible

I had a project with jQuery 1.11.2.1
where this jquery statement was working with no problems:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $( $("#panel").is(":visible") ) );
$("#panel").slideToggle();
});
});
after I moved to jQuery 1.11.3.2
browser freezes whenever I click the ".clickme" button and ask me to block a script (jquery) that was hanging too long.
I had to remove the is visible condition to avoid browser hanging:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed");
$("#panel").slideToggle();
});
});
the problem is I need to check the visibility of the #panel element.
element #panel default state is display:none
the issue is present in all browsers I can check.

The first example is almost correct, except that you're putting a boolean (from .is()) in to a jQuery object. The boolean needs to be given directly as a parameter to the toggleClass method. Try this:
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $("#panel").is(":visible"));
$("#panel").slideToggle();
});
More info on toggleClass()

turning div boxes into hotlinks, without overwriting the buttons they already have - JQuery

I am trying to turn the whitespace inside the pink boxes you see below into links associated with each object. I have been trying to just make the box clickable to google.com, and numerous tries do not swap the appropriate element. My most recent attempt is looks as follows, where the first jquery function of hovering over "article" does work, but the new one below it doesn't. The page is as follows:
https://jsfiddle.net/codyc54321/zpLy3og8/1/
$( ".linkbox" ).hover(
function() {
$( this ).attr("href", "www.google.com")
}, function() {
$( this ).attr("href", "#")
}
);
I need the Archive/Edit/Delete buttons to retain their functionality, even though the sit within the larger pink box. How can I make this box clickable without overriding my other 3 buttons using jquery?

You will need to stop propagation on click of your anchor to avoid to events firing. Like below:
$('a').click(function(e){
e.stopPropagation();
});
To activate click on your outer div, you may add the below function:
$('.article-link').on('click',function(){
// Do something
});
Wrap both these function inside document.ready and you are good to go.

jQuery selectors not working with added class

I'm working on a php/jQuery store and have run into the following problem:
I have a few div boxes as articles and as soon as a box is clicked, it is moved into the shopping cart and therefore has to become inactive.
That's my code so far:
$( ".artbox" ).not( ".inactive" ).on('click', function(){
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive")
})
It adds the class .inactive to two div objects, which are positioned inside each other. The rest of this function is left out here to keep it short. The problem is that while the according styles for .inactive are applied, I can still click on the box again and again and the function will be called again and again (although I have added the .not() selector) which results in having this specific article in the shopping cart multiple times - and this is what I would like to prevent. If I reload the page manually everything is fine and this
$( ".artbox.inactive" ).on('click', function(){
$(this).effect( "shake", {distance:1});
})
works, too (it doesn't for the items added without reloading).
But I am looking for a solution that works without reloading because I am displaying a popup window with a sucess message after the item was added to the cart.
JSFiddle
I've tried this here https://stackoverflow.com/a/12202186/2842292 but unfortunatly can't get it to work in my example.
Thanks in advance!

You can do it in two ways:
You unregister the event listener upon the click.
You can do it adding this to the event listener: $(this).unbind();,
You add an additional check at the very top of the listener:
if($(this).hasClass("inactive")) return;
Then if it even runs, it will quit and will not do the job.

The eventbinding happens on page load, so you should build the logic in the function:
$( ".artbox" ).on('click', function() {
if ($(this).hasClass("inactive")) {
$(this).effect( "shake", {distance:1});
} else {
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive");
}
});

remove all links from within div

I've embedded a custom ggl map within a container div using javascript (not the google iframe), and a div to display the map within the first/original container div. I need to deactivate all links within either div so that the links in the embedded map are not clickable.
I've tried the following JQuery solution but it doesn't seem to work:
<script>
$("#map_canvas a").click(function(e) {
e.preventDefault();
});
</script>
Then I've tried the following CSS solution but it blocks the user's ability to pan the map.
pointer-events: none;
How can I enable user interactivity with the map while preventing anchor links from working within the embedded map? Thanks!

I would guess your first problem is that those links are created dynamically. So, when you call $("#map_canvas a"), there are no a elements to bind to. You might try the delegated syntax of bind(). Assuming #map_canvas exists when your script is called (and I would recommend putting your code in a ready block):
$( function() {
$('#map_canvas').on('click', 'a', function() {
// return false will preventDefault and stopPropagation in jQuery
return false;
});
});

You should use the following code, if there are elements nested inside the tag. Otherwise they will be removed aswell.
$(document).ready(function() {
$("#map_canvas a").removeAttr("href");
});

Or you can do something like this.
$('#map_canvas a').click(function () {return false;});

This will remove the <a> elements themselves. I don't know if that's what you want:
$("#map_canvas a").remove();
But as has already been said, you have to wait for the DOM to be ready because those links are probably automatically generated and are not part of the initial, static layout, and therefore are not bind to the DOM.
So, this could do the trick (it will be executed only when the DOM is ready) :
$(document).ready(function() {
$("#map_canvas a").remove();
});
If you dont want to remove the <a> elements in themselves and just deactivate them, try:
$(document).ready(function() {
$("#map_canvas a").on('click', 'a', function() {
return false;
});
});