Develop Reference

hide a search bar after adding element with jquery

I try to hide an search bar in jquery after changing his class
My problem is when I click on the element to hide the search bar nothing happend
I try to add this :
$('#menu_bas').on('click', ".fa-times", function () {
$('.c_hover').css('display', 'initial');
$('#wrapper-category').css('text-align', 'middle');
$('#search_input').css('display', 'none');
$('.fa-times').addClass('fa-search');
$('.fa-times').removeClass('fa-times');
});
Here is my jsfiddle : https://jsfiddle.net/Lqsqgxpn/5/

You need to use the delegation for both cases since you apply it to the same element, but want to differentiate based on the current class.
Otherwise the .fa-search click handler would run in both clicks and mess thigs up
$('#menu_bas')
.on('click', '.fa-search', function() {
$('.c_hover').css('display', 'none');
$('#wrapper-category').css('text-align', 'right');
$('#search_input').css('display', 'inline-block');
$('.fa-search').addClass('fa-times');
$('.fa-search').removeClass('fa-search');
})
.on('click', ".fa-times", function() {
$('.c_hover').css('display', '');
$('#wrapper-category').css('text-align', '');
$('#search_input').css('display', 'none');
$('.fa-times').addClass('fa-search');
$('.fa-times').removeClass('fa-times');
});
updated fiddle: https://jsfiddle.net/Lqsqgxpn/24/
It would be better, though, to just toggle a class to the #menu_bas element, and handle all changes through CSS
Like this
$('#menu_bas')
.on('click', '.fa-search, .fa-times', function() {
$('#menu_bas').toggleClass('search-active');
$(this).toggleClass('fa-times fa-search');
});
and
.search-active .c_hover {display: none}
.search-active #wrapper-category {text-align: right}
.search-active .search_input {display: inline-block;}
updated fiddle: https://jsfiddle.net/Lqsqgxpn/29/

jQuery css visibility not working within load method?

I'm trying to get a script so that when this div #events is clicked the content currently in #meet div changes it's visibility to hidden (so that space is preserved) and then using jquery load method, the content in v2.html is loaded into the #meet div. However, right now the #meet div disappears but the new content does not appear. Any ideas why?
HTML:
<div id="meet">
........
<div id="exec"></div>
........
</div>
JS:
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden', function() {
$('#meet').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
})
})
});
});

.css doesn't take a function as a third parameter. It does take a function as a second parameter with only a propertyName as the first: api.jquery.com/css. Try removing that function call and moving $('#meet').load() to just below the first .css call.
You can chain the .css and .load functions as well.
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
});
});
});

use CSS class instead in JQuery : addClass("foo") which contains the style you want and removeClass("boo") which contains the style you don't want.
look at this fiddle jsfiddle.net
$("#navigation").on("click", function(){
if($(this).hasClass("foo")){
$(this).removeClass("foo");
$(this).addClass("boo");
$(this).animate({width: 100}, 350);
} else {
$(this).removeClass("boo");
$(this).addClass("foo");
$(this).animate({width: 100}, 350);
}
});

How do I add smooth transitions to this script

How do I add smooth transitions when display block and hide:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').css({ display: "block" });
$(this).find('.boxDisc').css({ display: "block" });
$(".userBox").mouseout(function () {
$(this).find('.inBox').css('display', 'none');
$(this).find('.boxDisc').css('display', 'none');
});
});
});
Because right now it's instant and doesn't look good.
Thanks!

One way is to use jQuery fading methods:
$(document).ready(function () {
$(".userBox").mouseover(function () {
$(this).find('.inBox').stop().fadeIn('fast');
$(this).find('.boxDisc').stop().fadeIn('fast');
$(".userBox").mouseout(function () {
$(this).find('.inBox').stop().fadeOut('fast');
$(this).find('.boxDisc').stop().fadeOut('fast');
});
});
});
Example:
http://jsfiddle.net/L9t4J/

You could try fadeIn and fadeOut:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').fadeIn(500);
$(this).find('.boxDisc').fadeIn(500);
$(".userBox").mouseout(function () {
$(this).find('.inBox').fadeOut(500);
$(this).find('.boxDisc').fadeOut(500);
});
});
});

using jQuery methods such as show('slow'), hide('slow'), toggle('slow') will make transitions smoother.
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/
Other useful, playful and great methods are .animate() and jQuery ui's slide effects (https://api.jqueryui.com/slide-effect/)
Cheers!
Edit: I was going to write about the fadeIn and fadeOut methods too. But Maurice Perry was quicker to point those out with an example :)

Remove styles set on specific event

I'm looking for a way to automatically remove styles set on specific event. Maybe I have ust overlooked it, but I have not seen such a feature in jQuery or vanilla js.
The idea:
$(element).hover(function() {
$(this).css({
backgroundColor : 'red',
color : 'white'
});
}, function() {
// remove styles set on handlerIn()
}).mousedown(function() {
$(this).css({
paddingTop : '+=1px',
paddingBottom : '-=1px'
});
}).mouseup(function() {
// remove styles set on mousedown
});
If I'm using $(this).removeAttr('style'); it will remove not only the styles set by specific event, but everything - where with mousedown / mouseup, that would remove the styles set by hover.
And yes, I know I can hardcode the values back to the defaults - doesn't fit!
What would be the best way to achieve such functionality?

You can do one thing for this. Declare classes for hover and unhover, something like:
.hover {padding: 5px;}
.unhover {padding: 0px;}
Then you can use .addClass('hover').removeClass('unhover') and the ilk. BTW, this is valid only if you have absolute properties.

You can declare multiple class on your css and add or remove them
$(element).hover(function() {
$(this).addClass("classHandlerIn");
}, function() {
$(this).removeClass("classHandlerIn").addClass("classHandlerOut")
}).mousedown(function() {
$(this).addClass("classMouseDown");
}).mouseup(function() {
$(this).removeClass("classMouseDown");
});
Hope this help.

EDITED
If you are feasible using arrays then see this solution.
var cssArray = [
{'background-color':'red','color':'white'},
{'background-color':'','color':''},
{'paddingTop':'+=10px','paddingBottom':'+=10px'},
{'paddingTop':'','paddingBottom':''}
]
$('div').hover(function() {
$(this).css(
cssArray[0]
);
}, function() {
$(this).css(
cssArray[1]
);
}).mousedown(function() {
$(this).css(
cssArray[2]
);
}).mouseup(function() {
$(this).css(
cssArray[3]
);
});​
SEE DEMO

First of all there is no $(element) selector.
You can create classes and gave them css properties and use with jQuery addClass() and removeClass() methods for removning specific event.
Note that bind() method is much more solid instead of hover(). Here is working jsFiddle:
$('#element').bind({
mouseenter :function() {
$(this).css({
'background-color': 'red',
'color': 'white'
});
},
mouseleave: function() {
$(this).css({
'background-color': 'white',
'color': 'black'
});
},
mousedown: function() {
$(this).css({
paddingTop : '+=10px'
});
},
mouseup: function() {
$(this).css({
paddingTop : '-=10px'
});
}
});​
And don't forgot to use CSS Pseudo-classes like :hover and :active selectors. Here link for all of them.

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});