We Keep Coding

How to set transition when button is clicked and it changes from display 'none' to display 'block'

I am trying to make it so, that when a button is clicked like a toggle, the texts and everything below it move smoothly below it instead of suddenly moving it. An example of this is bootstrap navbar hamburger menu. When the menu is clicked in mobile view, the rest of the items under it move in a smooth manner to make room for the navbar items.
Here are my codes in the snippet.
let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
if(seconddiv.style.display == "none") {
seconddiv.style.display = "block";
}
else {
seconddiv.style.display = "none"
}
}
#box {
height: 50px;
width: 50px;
background-color: red
}
#seconddiv {
display: none;
}
<div id="box">
</div>
<div id="seconddiv">
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
</div>
<p>hello</p>
When I click the red box, the "hello" text moves instantly when the "seconddiv" is set to display. Is it possible to move "hello" smoothly like in bootstrap?

You can use jQuery for this purpose. jQuery can handle better and in easy way.
Please include jQuery file for following jQuery code:
$('#box').click(function(){
$('#seconddiv').slideToggle();
});
If you want more slow speed for displaying and hiding div on click, then pass "slow" parameter in slideToggle function.
$('#seconddiv').slideToggle("slow");

display:none is not handled with transitions. But you can add a class to the button with javascript on click. And then give the button height:30px when it has class '.clicked'
#seconddiv {
height: 0;
transition: height 0.5s
}
#seconddiv.clicked{
height: 30px;
}
You can work with width or opacity too instead of height, but the difference with opacity is that the element will still use the space even when set to opacity:0

Chrome DIV not fully painted

I am using Chrome version 41.0.2272.118.
There is a specific DIV on the page where if I change its contents by assigning its innerHTML or innerText then another DIV on the page is corrupted.
The result of the corruption is that the corrupted DIV's right padding is no longer drawn. However the DIV takes up the same space and it has the same width according to the developer tools. Additionally the corrupted DIV's bottom border is still drawn even though there is no div above it.
Oddly even though the div has the same width any text in the div is rewrapped and sentences in it take up more lines.
Changing the innerHTML or innerText of other DIVs on the page does not result in any corruption.
Sometime a later DOM modification can trigger fixing the corrupted DIV so that its right padding is again drawn and it is rewrapped the way it was before it was corrupted.
Here is a small example of the problem:
If an absolute div is within a table
If the content of the absolute div is changed using innerHTML in an asynchronous callback
And this was done before the asynchronous callback `document.body.style.cursor = "progress";
Then all cells in the first column of the table will be painted with the wrong width for the background
HTML:
<table>
<tr>
<td>
<div class="wrapper">
<div id="twoandthree">
<div id="two">two</div>
<div id="three">three</div>
</div>
</div>
</td>
</tr>
</table>
<button id="button">update two</button>
CSS:
#twoandthree {
position:relative;
min-width:80px;
overflow:hidden;
}
#two {
position: absolute;
white-space:nowrap;
display:inline-block;
}
#three {
float: right;
position:relative;
display:inline-block;
}
table {
border-spacing: 10px;
}
.wrapper {
background: lightblue;
}
JavaScript:
var two = document.getElementById("two");
var button = document.getElementById("button");
button.addEventListener('click', function () {
document.body.style.cursor = "progress";
setTimeout(function () {
document.body.style.cursor = "";
two.innerHTML = "aaa";
}, 500);
});
I would appreciate any help with this.
Thank you

Sometimes I notice weird rendering quirks with Chrome as well. Try applying -webkit-transform: translateZ(0) to your CSS force GPU acceleration.
Here is some more info about it: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

Toggle div on div click horizontally

I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});

Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}

I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.

Hidden div is moving when it's shown

+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?

Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.

In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.

use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?

mouseover show div

I haven't been able to find the answer to this anywhere.
How do you make a hidden div appear when mousing over where it would have been?
Please do not tell me how to make a link, I know how to make a link ;)
I have tried:
a.) onmouseover set visibility to visible and onmouseout set visibility to hidden
this works in 0 browsers
b.) setting borders to 0px and background transparent and innerhtml to "" onmouseout and reverting onmouseover
this works in chrome
c.) This was the most popular answer on the internet, which i knew wouldn't work, but I tried anyway: make a container div set to visible and then do visibility visible and visibility hidden for the inner div
d.) Setting opacity to 1/100 and 0
works in chrome
e.) last resort: i tried making a transparent gif and having it display onmouseout
this also failed
I haven't tried jquery's .hover but I have read that it may not work correctly.
I have no other ideas. Will somebody help, please?

If I get it right you want div element to show if you are over it and hide when the mouse is not over. If that's it you can do it only with html and css:
<head>
<style>
#outerDiv{width:100px;height:100px;background-color:blue;}
#innerDiv{width:100px;height:100px;background-color:red;display:none;}
#outerDiv:hover #innerDiv {display:block;}
</style>
</head>
<html>
<div id="outerDiv">
<div id="innerDiv">some text</div>
</div>
</html>
The outer div is always visible and when it's hovered the inner one is shown.

I think that this is going to help you: http://jsfiddle.net/eb4x9/
The mouseover event won't trigger when the div is hidden so you can detect it's position and size.
Here is the source:
HTML
<div id="foo"></div>
CSS
#foo {
width: 300px;
height: 300px;
background-color: red;
visibility: hidden;
}
JS
$(document).mousemove(function (event) {
var div = $('#foo'),
divLeft = div.offset().left,
divTop = div.offset().top,
divWidth = div.width(),
divHeight = div.height();
if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) &&
(event.pageY >= divTop && event.pageY <= divTop + divHeight)) {
div.css('visibility', 'visible');
} else {
div.css('visibility', 'hidden');
}
});
$(document).mouseleave(function (event) {
var div = $('#foo');
div.css('visibility', 'hidden');
});
Best regards!

Try setting the display attribute of the div to 'block' along with the visibility attribute to 'visible' in your onmouseover event.
Set the display to 'none' and visibility to 'hidden' to hide.
Of course the trouble will be firing the mouse over on a hidden div.
This works in every browser I have ever used it in.

Try this, having two divs one empty and other with your content and toggling between them on mouseover
<html>
<head>
<script>
function toggle() {
var your_div = document.getElementById("your_div");
var empty_div = document.getElementById("empty_div");
if(your_div.style.display == "block") {
your_div.style.display = "none";
empty_div.style.display = "block";
}
else {
your_div.style.display = "block";
empty_div.style.display = "none";
}
}
</script>
<style>
#empty_div{width:100px; height:100px;}
#your_div{width:100px; height:100px; border: 1px solid #000fff;}
</style>
</head>
<body>
<div id="your_div" onmouseover="toggle()">xyz</div>
<div id="empty_div" onmouseover="toggle()"></div>
</body>
</html>