Develop Reference

Having troubles with removing and reapearing html elements with jquery

Basically I want to slide down a element, then when the button is hit again I want it to slide up, empty the div, then slide down with the new results. I'v been trying to figure out how to do this for so long and I cant seem to get it working with jquery.
$(".search").on("click",function(){
$('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});
I understand this is kind of specific to my project kind of but I do feel others might find this useful

I'm not sure what exactly your problem is, but I think the slideUp animation is not shown in your example.
The slideUp method takes a second argument, which is the function callback. It is called when the slideUp action is finished. If you do the rest of your actions in this callback function, is guaranteed to be performed after the slideUp.
jQuery('#testbutton').on('click',function() {
$('#testlist').slideUp(500, function() {
$('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
});
});
You can find a fully working example here:
https://jsfiddle.net/dxyybwyh/5/

I want to slide down a element, then when the button is hit again I
want it to slide up, empty the div, then slide down with the new
results.
It seems simple enough to me
let me know if you need anything more
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
//show the div
$( ".myDiv" ).slideDown( "slow" );
//add content
$( ".myDiv" ).html("New Content")
} else {
//hide the div
$( ".myDiv" ).slideUp( "slow" );
//clear content
$( ".myDiv" ).html("");
}
});
http://codepen.io/Rohithzr/pen/jqmGXg
Updated the pen with append ability and more readability
$('#myButton').click(function () {
if ( $( ".myDiv" ).is( ":hidden" ) ) {
show();
} else {
hide();
clearContent();
appendContent("New Content");
}
});
function clearContent(){
//clear content
$( ".myDiv" ).html("");
}
function appendContent(content){
$( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
//hide the div
$( ".myDiv" ).slideUp( "slow" );
}
function show(){
//show the div
$( ".myDiv" ).slideDown( "slow" );
}

How to clear a function after particular amount of time

I have a function which keeps on executing i want that whole function(function main())to stop working after 3secs and it has to call another function
$(function main() {
$( "#button" ).click(function() {
$( "#effect" ).addClass( "newClass", callback );
});
function up() {
setTimeout(function() {
$( "#effect" ).addClass( "newClass", callback );
},1000);
}
function callback() {
setTimeout(function() {
$( "#effect" ).addClass( "down" ,up).removeClass('newClass');
}, 1000 );
}
});

In j query there is unbind function for unbind the event for html element following syntax
$(selector).unbind(event,function,eventObj)
Follow following code in your case. it will unbind click event of button after 3 sec.
setTimeout(function(){
$("#button").unbind("click");
}, 3000)

swipebox auto transition to next slide

This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)

Reset setTimeout

I have problem with reset setTimeout. I tried use clearTimeout():
function formMsg(text){
if (text == "success"){
$( ".alert-msg" ).removeClass( "hidden alert-danger" ).addClass( "alert-success" );
$( ".alert-success .msg" ).html( "<b>Well done!</b> You successfully added order." );
} else {
$( ".alert-msg" ).removeClass( "hidden alert-success" ).addClass( "alert-danger" );
$( ".alert-danger .msg" ).html( "<b>F***!</b> Something went wrong." );
}
window.clearTimeout(timer);
var timer = window.setTimeout(function()
{
$(".alert-msg").fadeOut("slow", function() {
$(this).addClass('hidden').show(0);
});
}, 2000);
}
but with no result. I expect that when you click, the timer has measured two seconds again.

That is because you initialize the variable as local (inside your function).
This will do the trick:
window.clearTimeout(formMsg.timer);
formMsg.timer = window.setTimeout(....)

move the timer out of the function context like so:
var timer = null; //initialize
function formMsg(text){
if (text == "success"){
$( ".alert-msg" ).removeClass( "hidden alert-danger" ).addClass( "alert-success" );
$( ".alert-success .msg" ).html( "<b>Well done!</b> You successfully added order." );
} else {
$( ".alert-msg" ).removeClass( "hidden alert-success" ).addClass( "alert-danger" );
$( ".alert-danger .msg" ).html( "<b>F***!</b> Something went wrong." );
}
if(timer !== null)
window.clearTimeout(timer);
var timer = window.setTimeout(function()
{
$(".alert-msg").fadeOut("slow", function() {
$(this).addClass('hidden').show(0);
});
}, 2000);
}

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!

Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.

Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});