We Keep Coding

SlideDown() using JavaScript not working as intended

Thanks to #mplungjan for helping me complete my first query which can be found here: Remove div with button click using JavaScript
The code works as intended however when we tried to get the slideDown() function to work it looks a bit... laggy and then just pops up without the animation being completed as intended.
Would like some support to see how can this be fixed.
Find below working code:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.hide() // if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow") // does not slide much so remove if you do not like it
);
});
});
#content { height:100%}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here... <br/>
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>

Kindly use below updated code for animation.
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
// if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length).hide());
// does not slide much so remove if you do not like it
$("#"+$original.attr("id")+$content.find("button.cross").length).slideDown("slow");//change
});
and remove #content { height:100%;}

When you clone the $original you should reset its height so jQuery knows what height its got to animate to.
E.G: $original.css('height', $(this).height())
See demo:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.css('height', $(this).height())//set height
.hide() .attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow")
);
});
});
#content { height:100%;}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here...
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>

how do I add a click attribute to a DIV without it applying to elements inside it?

I have a DIV that when clicked on expands to reveal some inputs and buttons, and will close when clicked on again, hiding those elements. The problem I am having is that when I click on the buttons or the input boxes the closing animation happens anyway. I know I can solve this by taking the inputs and buttons out of the DIV but the DIV is very important for their formatting and organization. Any help would be great, thanks!
html:
<div id='inputArea1' class='inputAreas'>
<input id='email' class='evInput' placeholder='example#gmail.com'>
<input id='comf' class='evInput' placeholder='Comfirmation Code'>
<button id='sndCde' class='evBut'>Send Code</button>
<button id='comfBut' class='evBut'>Comfirm</button>
</div>
JS:
var main = function() {
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
el.find('.inputAreas').show();
} else {
el.animate({
"height": "85px"
}, 200);
el.find('.inputAreas').hide();
el.removeClass("selected");
}
})
}
$(document).ready(main);
FULL CODE: https://jsfiddle.net/dL2vzga0/

event.stopPropagation(); can do the job:
$('#inputArea1').click(function(event){
event.stopPropagation();
});
Fixed Fiddle

Why Colorbox doesn't work on click event?

I'm using Colorbox in my app. What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style.
<div class="click" href="link">Click here!</div>
<div class="box" style="width:700; height:800;" title="My Box">
<p>Content goes here</p>
</div>
Here is what i have tried.
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
open_colorbox(newWidth, newHeight, newTitle);
});
function open_colorbox(c_width, c_height, c_title) {
var options = {
width: c_width,
height: c_height,
title: c_title,
overlayClose: false
};
$.colorbox(options);
}
});
</script>
The above solution doesn't work. What am I missing here?
UPDATE 1:
Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!!
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
$(".box").colorbox({ open: true });
});
});
</script>
UPDATE 2:
Thanks to #Franklin. His solution is the correct one. Here is an example of how simple Colorbox can be done. http://codepen.io/egyamado/pen/Jnxvi

Inside your click function, can't you just do...
Try adding #id of the div
$(".box").colorbox({href:"#id", inline:true});
Or
$("a.click").colorbox({href:"#id", inline:true});

How to delay Hide/Show events until Iframe loads after a submit

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page. The Iframe takes a while to load.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
This is the Hide/Show script
$(function () {
$('#form_710370').submit(function (e) {
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
This is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
This is the relevant CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

Detect your iFrame has loaded :
$('#YourIframe').load(function(){
});
On your form submitted :
$("#form_710370").on('ajax:complete',function(){
});

Put your hide and show code inside iframe load() function.
$('#frame').load(function(){
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
});

Try this
timeout = setTimeout(function () {
$('#form_container').hide();
}, 6000);

// delay
setTimeout(function () {
// after delay
$('#form_container').animate({
'height': '0px'
}, '400', 'swing', function () {
// finish animate fadeIn
$('#mydivhide1, #mydivhide2').fadeIn('400');
});
}, '700');
Hope is help

Div fading in and out

I need your help, I am working on a website where I want a div to delay for 2 seconds then fade in when another div is clicked, but when I want to click it again (to close it) I want it to fade out instantly. Any help?

If you can use Jquery, the following code will help you do it as i got what you want:
this is default css:
.invisElem{display:none}
and the jquery code:
$('body').on('click', '.boxbutton1', function(){
var counter = $(this).data('count');
if(counter == undefined){
counter = 0;
setTimeout(function() {
$('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
}, 2000);
}
else if(counter == 0){
$('.gymtext').fadeOut(function(){
$('.gymtext').remove()
});//fadeout quickly then remove
}
})
i tried to write it down novice friendly if you needed help add comment

<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").fadeToggle(240);
});
});
</script>
<button>Click to fade DIV</button>
<div id="div" style="width:100px;height:100px;background-color:blue;"></div>

Html:
<div>Show div1 and hide div2</div>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
Css:
#div2 {display:none;}
Jquery:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow');
});
});