We Keep Coding

Click toggle with multiple targets

I have a two images and when you click on one, text (relevant to image) slides into view below the image. Currently the method for closing/toggling the text is to click on the image again.
If I click on the second image while the text on the first image is still visible, it closes the text. I then have to click on the second image again to see its text content appear.
I'd like to be able to click on the second image and either the text content just swaps OR it closes the text for the first image and opens the text for the second image (in just one click, not two).
Any input appreciated!
I have a fiddle here
JS:
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
$(bioContainer).hide();
$(teamMember).click(function() {
$(this).toggleClass('member-selected');
$('.team-grid').toggleClass('member-active');
$(bioContainer).html("");
var thisBio = $(this).find(".team-bio");
var thisRow = $(this).parent(teamRow);
$(thisRow).after(bioContainer);
var bioHTML = $(thisBio).html();
$height = $(thisBio).outerHeight(true)
$(bioContainer).css('height', $height);
$(bioContainer).slideToggle( "slow", function() {
$(this).html(bioHTML);
});
});
HTML:
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>
CSS:
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}

Please check this answer,
Js Fiddle
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
var bioContainerExpanded = false;
$(bioContainer).hide();
$(teamMember).click(function() {
if(bioContainerExpanded){
$(bioContainer).slideToggle( "slow", function() {});
bioContainerExpanded = false;
}
$('.team-grid').toggleClass('member-active');
// Resets bioContainer html to blank
$(bioContainer).html("");
$(this).toggleClass('member-selected');
// Assign 'this' team bio to variable
var thisBio = $(this).find(".team-bio");
// Assign 'this' row to variable (find teamRow parent of this teamMember)
var thisRow = $(this).parent(teamRow);
// Place bio after row
$(thisRow).after(bioContainer);
// Assign 'this' bio html to variable
var bioHTML = $(thisBio).html();
// Dynamically calculte height of the bio including padding
$height = $(thisBio).outerHeight(true)
//assign height to bioContainer before the toggle so that it slides smoothly
$(bioContainer).css('height', $height);
// Slide toggle the bioContainer
$(bioContainer).slideToggle( "slow", function() {
// Insert bioHTML into 'this' bioContainer
$(this).html(bioHTML);
});
bioContainerExpanded = true;
});
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>

JQuery ScrollTop doesn't scroll to the right item

I am trying to scroll to an item inside a div container. The scroll to top function works however it seems to overshoot the item.
Javascript
<script>
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
</script>
HTML:
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>
So the end is to scroll to the div item with class name highlight_bg
Not sure where am going wrong?

Your Javascript code is actually working. So maybe a CSS issue ?
$(document).ready(function () {
var container = $('#directory'),
scrollTo = $('.highlight_bg');
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 2000);
});
/* DEMO STYLISING PART */
.directoryitem {
display: block;
height: 90%;
width: 90%;
background-color: #CCC;
border: 5px solid gray;
}
.highlight_bg {
background-color: green;
}
/* SCROLL PART */
html, body {
height: 100%;
width: 100%;
}
.directory {
position: relative;
height: 100%;
width: 100%;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="directory" class="directory" style="height: calc(100% - 111px)">
<div class="directoryitem"></div>
<div class="directoryitem"></div>
<div class="directoryitem highlight_bg"></div>
<div class="directoryitem"></div>
</div>

CSS Flex - When re-sizing wrapper flex item change its width dimension

I am using CSS Flex in order to display three DIVs consequential in a wrapper.
The width dimension for the first DIV (item0) is to 50px.
I need to change the height of the wrapper and keep the original width for item0 and item1 DIVs inside the wrapper.
My current problem is that:
When re-sizing the wrapper, item for flex (item0) get a different width. size
Please click the two buttons in the example to see the change in dimension.
I would like to know:
Why the width size change?
How to maintain the width size for item0 and item2same as my original CSS settings?
Notes:
I understand scroll-bar appears taking space. How I could I keep item0 and item2 at a fix width and item1 stretching to fill up the remaining space? (I have tried to use % but I cannot get the result wanted).
var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
wrapper.style.height = '25px';
result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
wrapper.style.height = '350px';
result.value = item0.getBoundingClientRect().width;
});
#wrapper {
width: 250px;
height: 350px;
background-color: gray;
overflow: auto;
}
#flex-container {
display: flex;
}
#item0 {
width: 50px;
background-color: red;
height: 150px;
}
#item1 {
width: 150px;
background-color: orange;
height: 150px;
}
#item2 {
width: 50px;
background-color: pink;
height: 150px;
}
<div id="wrapper">
<div id="flex-container">
<div id="item0" class="item">a
</div>
<div id="item1" class="item">b
</div>
<div id="item2" class="item">c
</div>
</div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

Use flex: 0 0 50px for the item0 style.
See jsfiddle
It tells the flexbox layout don't grow and don't shrink and give it a width of 50px.
It is always good to use the flex: property for flexbox items because the default value for it may be different from browser to browser.
(Actually your problem doesn't happen in firefox for example)

When the width of the container is reduced, all child elements are reduced proportionally too.
Add flex: 0 0 auto; to item0 and item2. It disallows element to shrink to its minimum when there is not enough space.
var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
wrapper.style.height = '25px';
result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
wrapper.style.height = '350px';
result.value = item0.getBoundingClientRect().width;
});
#wrapper {
width: 250px;
height: 350px;
background-color: gray;
overflow: auto;
}
#flex-container {
display: flex;
}
#item0 {
flex: 0 0 auto;
width: 50px;
background-color: red;
height: 150px;
}
#item1 {
width: 150px;
background-color: orange;
height: 150px;
}
#item2 {
flex: 0 0 auto;
width: 50px;
background-color: pink;
height: 150px;
}
<div id="wrapper">
<div id="flex-container">
<div id="item0" class="item">a
</div>
<div id="item1" class="item">b
</div>
<div id="item2" class="item">c
</div>
</div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

Getting the element that occupies the top of the parent element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Given a parent div that can scroll vertically and has possibly nested elements within it, how can I get the (innermost) element that currently occupies the top end of the parent div?
For example, suppose I have the parent div as the light blue area in the diagram below, and it has objects in it, that are colored blue or red, some parts of them being outside of the parent div (which should actually be hidden). I want to get the object colored in red.
I can probably do this by comparing the offsetTop of the child elements with that of the parent element, and recursively go inside.

Run the code snippet below to see one solution. Scroll the window to move the divs relative to the window, then click the button to see the id of the innermost div that is at the top of the window. This solution assumes all divs are "normally" nested, i.e. there is no re-arrangement of div vertical placement by fancy css work, no fixed positions, etc.
There are two versions below: the first uses jQuery, the second does not.
$("button#check").click(function() {
var topElem = $("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = $(topElem).children("div").not("div#info"); // get all child divs
if (children.length > 0) { // if there are any child divs
$(children).each(function(index, elem) { // check each of them
var posns = getPosns($(elem)); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
});
}
};
checkChildDivs(); // initiate the checking recursion
$("div#info").text($(topElem).attr("id") || "none, i.e. body"); // report the innermost top div id
});
function getPosns($elem) {
var top = $elem.offset().top; // get the top of the div relative to the document
var hgt = $elem.outerHeight(); // get the height of the element
var wst = $(window).scrollTop(); // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>
And here is a non-jQuery version of the same thing:
var doc = document;
doc.getElementById("check").onclick = function() {
var topElem = doc.getElementsByTagName("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = topElem.childNodes; // get all child nodes
if (children.length > 0) { // if there are any child nodes
[].forEach.call(children, function(elem, index, arr) { // check each of them
if (elem.toString() === "[object HTMLDivElement]" && elem.id !== "info") {
// only use divs that do not have id "info"
var posns = getPosns(elem); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
}
});
}
};
checkChildDivs(); // initiate the checking recursion
doc.getElementById("info").innerHTML = (topElem.id || "none, i.e. body");
// report the innermost top div id
};
function getPosns(elem) {
var top = elem.getBoundingClientRect().top + window.pageYOffset - doc.documentElement.clientTop;
// get the top of the div relative to the document
var hgt = elem.offsetHeight; // get the height of the element
var wst = window.scrollY; // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>

You can use this library : https://github.com/customd/jquery-visible .
Check my snippet for demo
$(function() {
$(window).on('scroll', function() {
$visible = null;
$('section > div').each(function() {
if (!$visible && $(this).visible(true)) {
$visible = $(this);
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('#answer').html('' + $visible.text());
});
});
#main1,
#main2,
#main3,
#main4 {
display: block;
padding: 10px;
}
body {
background: blue;
}
section > div {
display: block;
width: 100%;
background: lightblue;
margin-bottom: 10px;
}
section > div.active {
background: red;
}
#answer {
display: block;
position: fixed;
bottom: 0;
height: 30px;
width: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
<section id="main1">
<div style="height:100px;">child 1</div>
</section>
<section id="main2">
<div style="height:100px;">child 2</div>
</section>
<section id="main3">
<div style="height:100px;">child 3</div>
</section>
<section id="main4">
<div style="height:300px;">child 4</div>
<div style="height:400px;">child 5</div>
</section>
<div id="answer"></div>

How do I start with the tab expanded (toggle)?

So I am modifying a web page and there is a table on the bottom of the page that starts minimized. When you click the arrow it opens upward to reveal the table. I am attempting to modify it so that it already starts off opened when the page loads.
HTML Snippet:
<div class="row" id="cp-toggle">
<div class="col-sm-12">
<div class="col-sm-2 col-sm-offset-5 toggle-button">
<a><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-sm-12" style="height: calc(100% - 25px);max-height: 250px;background-color:#d3d3d3;">
<div style="height: 100%;max-height: 250px;">
<div style="height: 25px;padding-top: 4px;">
<div style="float: left;padding-right: 9px;">
<span> Posts: </span> <span id="posts_count"></span>
</div>
</div>
<div style="overflow-y: scroll;height: 100%;max-height: 225px;">
<table id="result_table" class="table" style="display:table;" >
<thead class="result_thead"></thead>
<tbody class="result_tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Javascript:
var control_panel= (function(){
var container = $('#cp-toggle div:first-child');
var btn = $('#cp-toggle div:first-child').find("div").first();
var table_panel = $('#cp-toggle div:first-child div:nth-child(2)').first();
var open_css = "glyphicon-chevron-up";
var close_css = "glyphicon-chevron-down";
var open = function(){
container.find("span").first().switchClass(open_css, close_css);
var h = table_panel.height() + 25;
container.css("top", "calc(100% - "+ h +"px)");
};
var close = function(){
container.find("span").first().switchClass(close_css, open_css);
container.css("top", "calc(100% - 25px)")
};
var isOpen = function(){
return _.contains(container.find("span").first().attr('class').split(/\s+/), close_css);
};
var toggle = function(){
if (isOpen()){
close();
} else {
open();
}
};
btn.on('click', toggle);
return {
open: open,
close: close,
toggle: toggle,
isOpen : isOpen
};
}());
CSS Snippet:
#cp-toggle > div:first-child {
top: calc(100% - 25px);
position: fixed;
z-index: 25;
}
.toggle-button {
height: 25px;
padding-top: 3px;
background-color: #d3d3d3;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
text-align: center;
cursor: pointer;
}
#cp-toggle a {
color: #111;
}
#cp-toggle a:hover {
color: #777;
}
.tab-pane { height: 100%;}
#email-body { height: calc(100% - 80px); }
.body-view { height: 100%; overflow-y: scroll; }
.marked {
color: #ffd700;
}
.marked:hover {
color: #ffd700;
}
I have tried modifying the javascript to call control_panel.open(); at the end. I have tried altering the toggle to start with open();. None of these seem to have any effect on the code. I am not sure if I am looking in the correct area or if I am doing something incorrectly.

Try this (you tried something similar in a comment, but I'll explain in a minute...):
<script>
window.addEventListener('load', function() {
control_panel.open();
});
</script>
The problem with your original attempt...
<script>onLoad=control_panel.open();</script>
... was that it was setting a variable called 'onLoad' with the value of whatever was returned by running the function control_panel.open(), which it did immediately instead of waiting until the page was loaded. Instead, in my example I'm setting an 'onload' listener on the window, so that when the window finishes loading, then it'll run the control_panel.open() function that it is now aware of.