Develop Reference

Click on active and do inactive [jQuery]

I just want to click on the box, make him active and then on the second click do him inactive. I know that there is method with boolean but I'm not sure how to use it. Thank you for any help. Here's jsfiddle.
$(".box").click(function(){
var THIS = $(this);
$(".box").removeClass("active");
THIS.addClass("active");
});

Something like this should do the job. jQuery has a built in toggle function for things like this
$('.box').click(function(){
$(this).toggleClass('active');
});

Close menu when another item is hovered

I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!

You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});

You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});

Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.

So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...

$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});

How to add a bounce effect, when you click on the div

I see other tutorials about this topic on this website, but this one is different from all the other ones.
I found this tutorial called "Adding a bounce to a slide down". Here is the link for it.
I have put everything how it's supposed to be, just like in that tutorial, but I do not want two buttons representing close and open, I just want a button with an image, like an arrow. Then when you click the arrow, it will slideDown with the information and that kinda stuff and then, when you click the arrow again, it will slideUp and it will hide the information.
That tutorial could do that, but it has two ID'S representing the close button and the open button and I do not want that.
Here is the JS code for that tutorial and there is more, but this is where it get's the affects and stuff like that.
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow", "easeOutBounce");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Do you see #open and #close? that represents two ID'S for the toggle buttons.
I really want to know how to delete the close and the close will represent the open so, when you click the open it will open and when you click the open again, it will close it self without another ID for it.
I have been trying to figure this out, but couldn't figure it out.
Please tell me, what do I gotta do to achieved this.

If your arrow element has the ID "toggle", you could do:
$(document).ready(function () {
$("#toggle").click(function () {
var $panel = $('#panel');
if ($panel.is(':visible')) {
$panel.slideUp("slow");
} else {
$panel.slideDown("slow", "easeOutBounce");
}
});
});
jsfiddle

you can try slideToggle()
Example:
$(document).ready(function() {
$("#toggle a").click(function () {
$("#toggle a").slideToggle();
});
});

Use $( "#panel" ).toggle( "bounce", { times: 2 }, "slow" );;
See this demo
For more Examples visit : http://api.jqueryui.com/bounce-effect/
It uses the following external js files:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Can't make the if else jquery statement work

I added the code to the js below. When you click on either the Sign up or Login the arrow moves / point up, but when you close it again it stay that way. Can someone help me out figure what to do.
I tried using this post but cant make this work either here
Here is the Jquery script I use
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideUp();
})
$('#signup-trigger').click(function () {
$('#login-content').slideUp();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideToggle();
});
});
Here is my jsfiddle, ( I know some people don't pref jsfiddle but since I have a lot of code and it will be so much easier to show what I'm trying to do with it)

the problem is since you are adding the class active to it, on click event .. and right after, you are checking if it has a class active(which is always true)...
use toggleClass(it toggles the mentioned class) instead of addClass and check with hasClass
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}else{
$(this).find('span').html('▼');
}
$('#signup-content').slideUp();
});
.... //same for signup
fiddle here
and yes I know some people don't pref jsfiddle .. i guess you are wrong , i am sure most people prefer jsfiddle rather than the code itself since it is easier to test in fiddle.

You missed else part.
Try:
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}
else{
$(this).find('span').html('▰');//code of down arrow
}
Fiddle here.

You never remove the class active, so after the first click it looks like it is always active, and you also never change the triangle shape after the first click.
This code should work for the login:
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
$(this).addClass('active'); //Add class
$(this).find('span').html('▲'); //BLACK UP-POINTING TRIANGLE
} else { //Now is active, I'll make it not active
$(this).removeClass('active'); //Remove class
$(this).find('span').html('▼'); //BLACK DOWN-POINTING TRIANGLE
}
$('#signup-content').slideUp();
})
This is the jsfiddle link.

javascript mouseover/out combined with click behavior

I am very new in programming, please give me a mercy. Below is my code:
$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})
$(function(){
document.getElementById("custom_link").addEventListener("click",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
},false)})
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight again. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
According to my code, it does not work properly because the behavior when hovering is strange. It would be very nice if you can explain me with full code structure or jsfiddle example. Thank you for your advance help.

http://jsfiddle.net/ETrjA/2/
$('#custom_link').hover(function () {
$('#custom_div').toggleClass('highlighted');
});
$('#custom_link').click(function (e) {
$('#custom_div').addClass('highlighted');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.

You are mixing Javascript with its framework jQuery. Stick with jQuery for this.
// CSS: Create the highlight accessible with two classnames.
.highlight, .highlight_stay{
background:yellow;
}
Jquery
$(function(){
$('.custom_link').hover(function(){
$(this).addClass('highlight');
}, function(){
$(this).removeClass('highlight');
});
$('.custom_link').click(function(){
$(this).addClass('highlight_stay');
});
});

here is a link http://jsfiddle.net/8GV7B/2/
$(function(){
mouse_is_clicked = false;
$(".custom_link").hover(function(){
$("#container").addClass("highlight");
}, function(){
if(!mouse_is_clicked){
$("#container").removeClass("highlight");
}else{
mouse_is_clicked = false;
}
});
$(".custom_link").click(function(){
$("#container").addClass("highlight");
mouse_is_clicked = true;
});
});