Develop Reference

jQuery based push out and reveal image description between images

I am trying to do a text based description reveal with jQuery. I have a line of images and I would like when you click on an image that they push apart and the description gets revealed.
I have managed to do this to a point in the fiddle below, but the image does not push out it snaps out then the text animates across. I was hoping it would look more like it is pushing the image across and the text is coming out smoother.
$( ".img img" ).on( "click", function() {
$('.desc').css('display','none');
var bio_box = $(this).parent(".img").next(".desc");
$(bio_box).toggle('slide', {
direction: 'right'
}, 2000);
});
$(".img img").on("click", function() {
var bio_box = $(this).parent(".img").next(".desc");
console.log(bio_box);
$(bio_box).toggle('slide', {
direction: 'right'
}, 4000);
});
.outer {
display: flex;
justify-content: end;
}
.img {
flex: 0 0 15%;
cursor: pointer;
}
.img img {
width: 100%;
}
.desc {
border: solid 1px #000;
flex: 0 0 35%;
cursor: pointer;
display: none;
padding: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="outer">
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 1 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 2 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
<div class="img">
<img src="https://via.placeholder.com/640x400">
</div>
<div class="desc">
Desc 3 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
</div>
</div>
Ideally if you click the second image, that images pushes out to the left and reveals the text smoothly. (Not snaps over and then the text slides out so there is a gap while the transition completes)

How to set the 'height' property of a DIV that has undergone a transition through change in class to 'auto'- javascript?

Through clicking on a button, I have succeeded in executing a transition of a div (through its 'height' property) to reveal some menu options. At the end of the transition, I would like the 'height' property to be set to 'auto', so that it can accommodate any change in content inside of it.
I have tried using 'max-height' in the following code but transition does not appear to work with 'max-height'. If I use 'height' then the transition works. I have tried to use javascript to set the 'height' property to 'auto' through another trigger after the transition, and then set it to its current height(not 'auto') before executing that transition to close the DIV , through a change in class, but this fails - i am guessing because setting the element height to any value takes precedence of any subsequent change in class that tries to change the same property. No JQUERY responses please.
CSS:
.sbox{
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
}
.sboxopen{
max-height: 430px;
overflow: hidden;
transition: max-height 1s ease-out;
}
JAVASCRIPT:
'onclick' event
elem.className = 'sboxopen'; // Show boax
elem.className = 'sbox'; // Hide box
HTML:
<div class="sbox">
// CONTENT IN HERE
<div>
<button id="id">Show options</button>

Can you update your question with your html. Better if you can add a demonstration since it's not clear enough to understand the concept that you are expecting

As far as I can understand the question. I don't know whether I can solve your problem/requirement or not but still I have written a solution given below.
$("#toggle-box").click(function() {
if ($("#slider-box").hasClass("sbox")) {
$("#slider-box").attr("class", "sboxopen");
} else {
$("#slider-box").attr("class", "sbox");
}
})
#slider-box {
overflow: auto;
}
.sbox {
height: 0px;
transition: height 1s ease-out;
}
.sboxopen {
height: 200px;
transition: all 1s ease-out;
}
button {
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="sbox" id="slider-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis mollis suscipit. Etiam pellentesque leo vel est tempus, nec interdum nisl commodo. In sagittis efficitur nulla pretium aliquet. Sed non urna nisl. Mauris nec metus nisl. In metus
nulla, semper vitae interdum sed, elementum sed libero. Vivamus posuere, turpis vel tempor aliquet, nibh est ullamcorper lorem, non sodales ex turpis non mauris. Proin hendrerit eget urna vitae tempor. Nunc eu nisi orci. Nulla et neque volutpat,
mattis neque nec, pretium nibh. In at maximus justo. Nunc aliquet ornare ante, id lobortis turpis convallis vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu mauris et sem malesuada tempus
vel at nisi. Morbi ac erat vestibulum, fermentum urna nec, suscipit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam ac enim pharetra molestie. Quisque molestie pulvinar enim, et fermentum orci rhoncus id.
Praesent ultricies, diam quis aliquet faucibus, mauris risus lobortis quam, nec interdum arcu nunc ac ipsum. Nam malesuada suscipit dui non scelerisque. Aenean pretium pretium congue. Vivamus viverra, leo et rutrum commodo, nunc libero accumsan
erat, id facilisis velit dolor condimentum urna. Cras cursus accumsan diam ac scelerisque. Donec dapibus, urna eu posuere venenatis, tortor diam vestibulum augue, sit amet consectetur metus ligula in turpis.
</p>
</div>
<div>
<button id="toggle-box">Toggle Box</button>
</div>
</body>
</html>

Scroll function called automatically when modal open and close

I have bootstrap modal which contains scrollable div id=moreContent and modal is open when a button is clicked. but the problem if I close the div with the scroll bar and then I try to reopen the modal the scroll function is also called. what am I doing wrong here.
$(document).ready(function() {
$("#buttonId").click(function() {
$('#myModal').openModal();
});
$("#moreContent").scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) {
console.log("this should be called only if manually scrolled ??");
}
}
});
});
#myModal {
max-height: 700px;
height: 700px;
min-height: 700px;
max-width: 912px;
min-width: 912px;
width: 912px;
}
#moreContent {
overflow-y: auto;
max-height: 300px;
min-height: 300px;
}
<div id="myModal" class="modal confirm-dialog">
<div class="modal-content">
<div id="moreContent">
<div id="moreSupervisorContent"></div>
<div id="moreSubordinateContent" class="hidden"></div>
</div>
</div>

This is because your modal is changing the size of the document. When the document changes size, the scroll position changes, thus triggering a scroll event.
This is most likely due to the fact that your modal has a fixed height. Setting fixed sizes is typically a bad idea in web development since you can't predict how big someone's screen or browser will be.
To solve it, you should style your modal an absolute or fixed position, set it to 100% height and have it handle the overflow instead of #moreContent. The position will keep the document from growing and the modal will only show scrollbars if its content gets larger than it is.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
overflow: auto;
}
.modal__content {
height: 700px;
width: 60%;
margin: 30px auto;
padding: 30px;
background: #CCC;
}
<div class="modal">
<div class="modal__content">
<h3>This is the modal content</h3>
<p>This is some content inside the modal and it is fixed to 700px height</p>
</div>
</div>
<h1>This is the page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>

Show/Hide Div which is also fixed

I have been back and forth, back and forth and I'm sure there is a simple answer but this is starting to frustrate me.
What I need is a div box that can toggle upon clicking a button. This is for a chat script that will always stay in the bottom hand corner. I want the button to always be visible, and then if you click the button, the chat script will open. You can then hopefully minimize it by clicking the button again. I have got so close by playing around multiple times, but I need 2 divs (as the first div will contain the button which is always visible, and the second div will appear upon click).
UPDATE: The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being "position:fixed;"
$(function() {
$('.button1').on('click', function() {
$('.initiallyHidden').toggle();
});
});
#calendar {
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position: fixed;
bottom: 0;
right: 0;
float: right;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
<button class="button1">Quick Chat</button>
</div>
<div class="initiallyHidden" style="display: none;">
<iframe src="'.$url.'" marginheight="0" marginwidth="0" scrolling="yes" allowtransparency="yes" frameborder="0">
</div>
The current script above opens and shuts the div with no problem. I just can't both the divs to follow the page when scrolling, despite them being position:fixed;.
Please help me.

$("#button1").on("click", ()=>{
$("#initiallyHidden").toggle();
});
#chatbox {
position:fixed;
bottom:0;
right:0;
float:right;
}
#initiallyHidden {
bottom:10;
right:0;
float:right;
width:100px;
height:100px;
border-style: solid;
background-color:white;
}
#content {
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox">
<div id="initiallyHidden" style="display: none;">
Chat box
</div>
<button id="button1">Quick Chat</button>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>

Your CSS selectors are for IDs but your HTML elements have classes rather than IDs.

Inside your CSS you have #initiallyHidden instead of .initiallyHidden.
Same for calendar: #calendar instead of .calendar.
You have also an extra } inside your CSS
Remove the float:right property to the CSS too

$(window).on("load", function() {
$("#initiallyHidden").hide();
});
$( "#calendar" ).click(function() {
if($("#initiallyHidden").is(":visible")){
$("#initiallyHidden").hide();
}
else{
$("#initiallyHidden").show();
}
});
#calendar { position:fixed;
position: fixed;
bottom: 0;
right: 0;
float: right;
}
}
#initiallyHidden {
position:fixed;
bottom:0;
right:0;
float:right;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "calendar" type="button">Show calender!</button>
<div id = "initiallyHidden">
Calendr
</div>

Is there any way to scroll the div with overflow:hidden

I have a div with css overfow:hidden. But I need scrolling in this div. I googled it and find the solution is to change the overflow:scroll and hide the scrollbar. But in macbook pro, I am able to see the scrollbar. Is there any way to solve this problem?

Youtube solves this through toggling between overflow-y: hidden; padding-right: 17px and overflow-y: scroll; padding-right: 0; through :hover.
It makes it look neat, and it lets the user know that you can scroll. Consider to tell your users that, instead of asuming that they know it.

Try like this
<style type="text/css">
.inside { width: 500px; overflow: auto; height: 200px; padding-right: 20px; }
.outside { width: 500px; height: 300px; overflow: hidden; }
</style>
<div class="outside">
<div class="inside">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium enim blandit ligula pharetra pharetra. Curabitur posuere nibh at nibh tincidunt sed porta dui commodo. Suspendisse id vulputate magna. Cras non arcu ac lacus dignissim pretium. Aenean varius luctus ante, sed tincidunt neque euismod id. Sed aliquam dui eu purus dapibus venenatis. Praesent tortor sem, pretium in rhoncus eu, eleifend at lectus. Donec dignissim turpis et lectus interdum dignissim. Maecenas porttitor ante ut ligula tempus sit amet tincidunt arcu aliquam. Vivamus at velit massa. Nulla eget ligula sed dolor porta porta sit amet ac est. Vestibulum rhoncus tempus ligula quis vulputate. Nullam auctor, neque tristique ultrices iaculis, neque nisl semper est, id adipiscing ligula est eu diam.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec enim ante, rhoncus at egestas eget, imperdiet vitae sem. Mauris sed massa elit, ac posuere nibh. Integer ut metus et felis blandit pellentesque id eget velit. Quisque vehicula consectetur nibh sit amet posuere. Etiam egestas lacus id justo fringilla sodales. Donec scelerisque aliquam urna sed sodales. Cras ornare neque fringilla nisl molestie venenatis. Quisque quis lacus ut augue sodales tristique non id sapien. Sed risus nisl, egestas eu sodales ut, rhoncus id nisl. Maecenas hendrerit tellus neque. Aliquam sodales gravida luctus. Suspendisse porta porta libero at venenatis. Proin laoreet accumsan ipsum, et ultrices nisi pharetra et. Nullam in dolor quam, et adipiscing ipsum. In consequat interdum sollicitudin. </p>
</div>
</div>

Try overflow: auto; This will show the scroll bar if it is needed, ie the height of the content in the div is larger than the height of the div. Otherwise if the content fits within the bounds of the div, it will not show a scroll bar.

you can use the jquery scrolltop