We Keep Coding

jquery: if other slidetoggle is enabled (visible), close before initiating new slidetoggle

I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!

Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example

How do I add a hyperlink to a shape in a KineticJS canvas?

I'm working on my homepage which consists of several shapes being drawn in the middle of the screen using an HTML5 canvas and KineticJS, but I've run into a roadblock trying to add hyperlinks to each of the shapes. My code thus far (which doesn't work) is:
midHexPoly.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
midHexPoly.on('mouseout', function() {
document.body.style.cursor = 'default';
}); //this works, the mouse changes to a pointer on
//mouseover, and back on mouseout
var linkTest = "http://www.google.com"
midHexPoly.on('click', function() {
window.open = linkTest;
});
After much googling, I can't seem to find any resolutions to this issue, and there doesn't seem to be a function in Kintetic for redirecting or adding hyperlinks.
Is there any way to fix this? Thanks!

window.open is a method, so you should call it like so: window.open(linkTest);. You'll find more info, such as its arguments on w3schools. I suggest using the second argument (name) to make sure all links will open in the same new window.
If however you want to open all links in the same window as your homepage, you could use this piece of code instead of window.open: location.assign(linkText);.
If those don't work, make sure the click event is fired by adding a console log inside your callback function, e.g.
midHexPoly.on('click', function() {
console.log('clicked on midHexPoly');
});
or
midHexPoly.on('click', function() {
alert('clicked on midHexPoly');
});

close previous opened div if a div is already opened

Will try to explain what i mean :)
I have two hidden divs that opens with jquery, they both works quite good... when I'm using them separated... But if I open the div when the other one is open, the first one keeps being open in the background... I would like that one to close.
Is there an if else function i can use ?
This is what i have so far.
$(document).ready(function(){
$(".contactDiv").hide();
$(".show_hide_contact").show();
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
});
});
$(document).ready(function(){
$(".loginDiv").hide();
$(".show_hide_login").show();
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
});
});
I have created a jsfiddle to show some more.
http://jsfiddle.net/h2Hfg/

Just slide the other div too:
$('.show_hide_contact').click(function() {
$(".contactDiv").slideToggle();
$(".loginDiv").slideUp();
});
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
$(".contactDiv").slideUp();
});
Very nice of you to include the jsFiddle :)

I am not sure there is a function exactly that does that but you can do it manually. Check it out
$(document).ready(function(){
$(".contactDiv").hide();
$(".loginDiv").hide();
$(".show_hide_contact").show();
$(".show_hide_login").show();
$('.show_hide_contact').click(function(){
$(".loginDiv").hide();
$(".contactDiv").slideToggle();
});
$('.show_hide_login').click(function(){
$(".contactDiv").hide();
$(".loginDiv").slideToggle();
});
});

Found out how to.
I just added the hide function to the divs.
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
$(".loginDiv").hide(); /* there is hiding prev opened tag*/
});

jQuery MouseEnter/Leave with fadeIn() flickery

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.

Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}

why does my jquery animation not function properly in chrome when using browser confirms and alerts?

I'm seeing an issue regarding some jquery animation in chrome.
I'm wondering if anyone else has seen this.
I'm just trying to do some simple slide up to hide a div, or hide and then fade a div in.
The slide up animation on the div is not happening in chrome and the hide is lagging before the fade in kicks in; whereas in firefox the animation is immediate and smooth.
The thing is that I have a browser confirm wrapped around this stuff to only do this animation if the user confirms.
If I remove the confirms, the animation works fine in chrome.
Is that weird?
Here's an example. With the confirm I get no slide up. Without the confirm I get one.
That is, simply removing the if(confirm){} code block.
if (confirm('Are you sure you want to remove the item?')) {
dragbox.slideUp('fast', function () {
dragbox.remove();
WebService.RemoveItem(itemId,
//on success
function () {
if ($('.dragbox').length == 0) {
//remove columns
$('.column').remove();
}
},
//on fail
function () {
alert('Failed to remove the "' + itemName + '" item.');
}
);
});
}
In this example, with the confirm there's a lag after the div is hidden and before the fade in start so that the div is hidden longer than I would like. Without the confirm, ti behaves as I would expect.
if (confirm('Are you sure?')) {
$('#' + itemId).spin();
WebService.AddItem(itemId,
//onsuccess
function (r) {
var item = $('#' + itemId); //this is a div
item.unspin();
item
.hide()
.toggleClass('item-added')
.fadeIn('fast', function () {
// Create the DOM elements
$('<p><img class="item-added" src="images/item-added.png" />')
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo($('.contentInfo', item))
// Fades the new content into view
.fadeIn('fast');
});
},
//onfail
function () {
$('#' + itemId).unspin();
alert('Failed');
}
);
}
Can anyone confirm or disprove this notion based on my speculation and example?
What are some alternatives to the browser confirm?
EDIT: Yeah I'm not sure what's going on.

Are you using the newest version of jQuery UI? Have you got the jQuery UI stylesheet also?
It all looks fine. If you can't find an answer here, open up a bug report.

Updating Chrome fixes this. I'm now running version 15.0.874.120 and all is well. My word.

I was just experiencing the same thing with some code that worked when it was written a couple of years ago. Now it has an issues in webkit-based browsers.
I had several animations that were paused by using confirm() calls and the subsequent animations failed to display properly. I finally figured out that if I put a short delay before the animation, it started working properly.
if (confirm('Are you sure?')) {
dragbox.delay(10).slideUp('fast', function () { ...
I'm not quite sure why this works but my animations are now working again in Safari 6.0.3 and Chrome 26.0.1410.43