Develop Reference

Resize div to fit clicked button size and float over another div

I know that title here is hard to understand. I really need help changing this fiddle. So here is what I am trying to do:
When button is clicked, I want the div (coding) to resize to the size of the button itself and I want the button with div(coding) to float over the div (coding2). (coding2) div should resize to its full width at that time.
When button is clicked again, bring the view back to the way it was initially. Attached you will find an image of before and after of what I am looking for. All of this I hope to accomplish just using CSS.
<div id="coding">
<button id = "content" onclick="dosomething()">Click Me</button>
</div>
<div id = "coding2">
</div>

switch the width of the both divs between 0% to 50% for the first one and 49% to 100% for the second one:
function dosomething() {
if($('#coding').width() > 0){
$('#coding').width('0')
$('#coding2').width('100%')
}
else {
$('#coding').width('50%')
$('#coding2').width('49%')
}
}
#coding {
width: 50%;
border: 1px solid black;
height: 300px;
position:absolute;
left:0;
z-index:1;
overflow:visible;
background:yellow;
}
#coding2 {
border: 1px solid black;
height: 300px;
width: 49%;
position:absolute;
right:0;
z-index:0;
background:blue;
}
button {
width:70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coding" class="larger">
<button onclick="dosomething()">Click Me</button>
</div>
<div id = "coding2">
</div>

float used to be the way to create layouts, but nowadays we have tools like CSS Grid Layout and Flexbox to create awesome layouts with.
The example below use the former, Grid, which enables you to create a layout and place your child elements within that layout. All width and height calculations are done from the parent (#grid). All the children (#coding and #coding2) have to do is say where in the grid they need to go.
With JavaScript, and in this case jQuery, listen to a click on the button. Then toggle a class on the #grid element. With that class you can set styles on the children which can make them move around in the grid, and in this case, take the width of the entire parent (#grid).
$('#button').on('click', () => {
$('#grid').toggleClass('is-active');
});
#grid {
position: relative;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px 1fr;
}
#button {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
#coding {
grid-row: 1 / 2;
grid-column: 1 / 2;
background: blue;
}
#coding2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
background: yellow;
z-index: 1;
}
#grid.is-active #coding2 {
grid-column: 1 / 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
<button id="button">Click Me</button>
<div id="coding"></div>
<div id="coding2"></div>
</div>

Create 4 classes, two for each div. The just use .toggleClass() to add or remove it on button click.
function dosomething() {
$("#coding").toggleClass("clicked unclicked");
$("#coding2").toggleClass("clicked2 unclicked2");
}
#coding {
background-color: lightgreen;
}
#coding2 {
background-color: yellow;
}
.clicked {
width: auto;
height: auto;
position: absolute;
border:1px solid black;
}
.unclicked {
width: 50%;
border:1px solid black;
height:300px;
float: left;
}
.clicked2 {
width: 100vw;
height: 300px;
border:1px solid black;
float: none;
}
.unclicked2{
border:1px solid black;
height:300px;
float: right;
width: 49%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="coding" class="unclicked">
<button onclick="dosomething()">Click Me</button>
</div>
<div id="coding2" class="unclicked2">
</div>

Issue on mouse hover between two elements

How can I keep the #panel slide down/open when mouse traveling/hovering between #flip and #panel? And how slide up only when mouse is out of these two?
$(document).ready(function() {
$("#flip").hover(function() {
$("#panel").slideDown("slow");
}, function() {});
$("#panel").hover(function() {
}, function() {
$(this).slideUp("slow");
});
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

And how slide up only when mouse is out of these two?
In order to achieve this result you need to:
show the panel (slideDown) when mouse enters the panel or the flip and the panel is hidden
hide the panel (slideUp) when mouse leaves the panel or the flip and the panel is visible. Here, the selector should be :not(#flip, #panel)
$("#flip, #panel").on('mouseenter', function (e) {
if ($("#panel").is(':hidden')) { // this test in order to reduce useless slideDown....
$("#panel").slideDown("slow");
}
});
$(":not(#flip, #panel)").on('mouseleave', function(e) {
if ($("#panel").is(':visible')) { // this test in order to reduce useless slideUp....
$("#panel").slideUp("slow");
}
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

if you add a #container around #flip and #panel
you can add a .mouseleave() event to it, so when you click on #flip the panel slides down (and expand the container), as long as you keep the mouse inside that container the panel stays open (you can hover on flip or panel). When the mouse leaves the container the panel slide back up.
(I changed the event you had on flip to a click event as well as it says "click to slide")
as a tip, you might want to refacor your code to use CSS classes instead of id, this would make your code reusable (you could have multiple sliding pannel in the same page)
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown("slow");
});
$("#container").mouseleave(function() {
$("#panel").slideUp("slow");
});
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>

JQuery UI Slide animation triggering the scrollbar to display during the animation

I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?

The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>

Simple javascript animation

I'm creating a navigation with a sliding bar/box that follows the mouse. I manage to animate the box I'm having trouble to move the box to follow the mouse. ex. if the mouse is in nav1 the box would slide to nav1 from wherever nav the box is currently place.
I made a example jsfiddle: http://jsfiddle.net/5Wrcr/
HTML
<div id="nav" style="margin: 0 auto; width: 500px; background: red;">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="movers"></div>
</div>
CSS
#nav1, #nav2, #nav3, #nav4 {
width: 98px;
height: 48px;
border: thin solid black;
float: left;
}
#movers {
width: 100px;
height: 50px;
background: blue;
display: none;
position: absolute;
opacity: 0.3;
}
#nav:hover > #movers {
display: block;
}
JS
$(document).ready(function(){
$("#nav").hover(function(){
$('#movers').stop().animate({'margin-left': '300px'}, 500);
});
});

I don't know what animation showing that code. But if you want to use margin left animation then you can use:
$(document).ready(function()
{
$('#nav').hover(function()
{
$('#movers').animate({
margin-left: '300px'
});
});
});
not tested but should work...

Try this DEMO
$(document).ready(function(){
$("#nav div").hover(function(){
var a =$(this).position();
$('#movers').stop().animate({'margin-left': (a.left-29)+'px'},500);
});
});

Try this.
$("#nav div").hover(function(){
$('#movers').stop().animate({
'left': $(this).offset().left
}, 500);
});
UPDATED FIDDLE

Change 'Click' function to mouseover/mouseout

I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}