Develop Reference

JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero

I just want to use some css to make the height of a div 0 which also makes all the heights of the sub divs 0. I then want to call a javascript function which when clicked it makes the height of the main div 100%.
Here is the code that I have written:
HTML
<div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop">CONNECTING RODS</div>
<div class="buttonsTop" >
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
<div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom">CRANKSHAFTS</div>
<div class="buttonsBottom">
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
CSS
.smallButtons {
box-sizing: border-box;
margin-left: 10px;
height: 50px;
width: 50px;
margin-top: 15px;
background-color: white;
}
.menuTitle {
color: white;
font-family: "Arial";
text-align: center;
font-size: 30px;
padding-bottom: 30px;
padding-top: 30px;
}
.buttonsTop {
margin-left: 23px;
}
.buttonsBottom {
height: 0;
margin-left: 23px;
}
The css I have written doesnt make the height of the .buttonBottom zero they are still being displayed on the page. I don't want them to be displayed on the page
JAVASCRIPT
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "100%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "100%";
}
As you can see I want the buttonsBottom to not be visible on the page when it loads but when you click on the onclick="ButtonBottom" div it makes the height 100% and makes the onclick="ButtonsTop" div have a height of 0

Add an
overflow:hidden;
to your .buttonsBottom div
Your div is expanding in height to accommodate your content.
What I'd suggest is adding an additional class of
.hidden {
height: 0;
overflow: hidden;
}
to your CSS and then modifying your JavaScript to add/remove this class as needed.
The other option would be to use display: none; and display: block; instead of height. Which would be my preferred method as long as you aren't aiming for a transition effect on height when clicked.

try this :
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "0%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "0%";
}

Trying to create a div with resizable dragger

I'm pretty sure there is already an example for this but I couldn't find one, and I don't know exactly what to search for.
http://imgur.com/a/hHNkZ
I am trying to make a resizable div from the button circled in red above.
The photo behind this div comes from a slick slider ( http://kenwheeler.github.io/slick/ ).
<div class="slider-for">
<img src="images/product0.jpg" alt="">
<img src="images/product1.jpg" alt="">
<img src="images/product2.jpg" alt="">
<img src="images/product3.jpg" alt="">
</div>
I was thinking of making a width 0 div above, and then with the slider, increase its width with js maybe.
In this div, I want to put a recipe for that certain product. I have 4 photos, so the content has to change depending on picture. ( so it's not static content).
Does this need to be made in php?

I think this would be helpful to you:
https://jsfiddle.net/u0Ljnttg/1/
Its little bit complicated, but still good enough. :)
Just for sake of SO:
JS:
var links = document.getElementById("imageLinks");
links.onmousedown = function(e) {
var theSrc = e.target.dataset.src;
if (theSrc) {
str = "url(\"" + theSrc + "\");";
//Sorry for using this:
document.getElementById("imageBack").setAttribute("style", "background-image:" + str)
}
}
var resizer = document.getElementById("content-resize");
resizer.onmousedown = resizableStart;
function resizableStart(e) {
var elem = document.getElementById("content");
elem.originalW = elem.clientWidth;
this.onmousemove = resizableCheck;
this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e) {
var elem = document.getElementById("content");
if (elem.clientWidth === elem.originalW) {
elem.originalX = e.clientX;
this.onmousemove = resizableMove;
}
}
function resizableMove(e) {
var elem = document.getElementById("content");
var newW = elem.originalW - e.clientX + elem.originalX;
if (newW < elem.originalW) {
elem.style.width = newW + 'px';
}
}
function resizableEnd() {
this.onmousemove = this.onmouseout = this.onmouseup = null;
}
HTML:
<div class='container'>
<div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')">
<div class='content' id="content">
<div id="imageLinks">
<a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a>
<a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a>
<a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a>
<a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a>
</div>
<span id="content-resize"></span>
</div>
</div>
</div>
CSS:
html,
body {
min-height: 100% !important;
height: 100%;
}
.container {
width: 100%;
min-height: 100%;
height: 100%;
}
.images {
width: 100%;
min-height: 100% !important;
height: 100%;
}
#content {
min-height: 100% !important;
height: 100%;
/*Change this to change width*/
width: 70%;
resize: horizontal;
float: right;
position: relative;
background: white;
}
div {
border: 1px solid black;
}
span {
border: 1px solid black;
border-radius: 50%;
position: absolute;
top: calc(50% - 20px);
left: -10px;
cursor: pointer;
height: 40px;
width: 40px;
display: inline-block;
background: white;
}

I am not sure if you already solved this issue, but since you helped me on the other question, I am interested in helping you with this.
You have some options.
Use pure JavaScript. You can use a lib (eg: this) for that.
Use Jquery $().draggable() propriety. This might help for styling the button..
Using pure HTML & CSS resize. This is not good, since you cannot apply any style to the <div>.
You can make a workaround mixing three <div> elements,
One of them with position: fixed. This is your background.
Another for the container (with a width set manually to hide the page from user). Remove the scrollbar and force the width of your html, body to match your screen.
Another <div> inside the container for your content. This should be able to move horizontally to show and hide the elements.

Scrolling image gallery without jQuery

I have a scrolling image gallery as follows. The CSS lays out the images in a row that scrolls horizontally. Underneath, I have a row of the same images, but as thumbnails. I want to be able to click on a thumbnail, and scroll the correct image into view.
HTML:
<div class="images_container">
<img id="image_1" src="/image1.jpg">
<img id="image_2" src="/image2.jpg">
<img id="image_3" src="/image3.jpg">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail">
<img src="/image2.jpg" class="thumbnail">
<img src="/image3.jpg" class="thumbnail">
</div>
CSS:
.images_container {
overflow-x: scroll;
overflow-y: hidden;
max-height: 50rem;
white-space: nowrap;
}
.images_container.thumbnails {
max-height: 10rem;
}
.images_container img {
vertical-align: top;
height: 50rem;
}
.images_container.thumbnails img {
height: 10rem;
}
This works up to a point, but jumping to the id of the image is problematic. If the larger image is even a few pixels into the visible viewport, it can't 'jump' to it, as it seems to be technically on the screen.
Is there a way I can use Javascript to 'scroll' the whole image into view when I click on it's corresponding thumbnail? I don't have access to jQuery on this project, but am happy to use JavaScript to make this work.

You can try this , no change in CSS, i add an id in html and call to scrollTo function :
<script>
function scrollTo(image_id){
var topLeft = document.getElementById(image_id).offsetTop;
document.getElementById('container').scrollLeft = topLeft;
}
</script>
<div id="container" class="images_container">
<img id="image_1" src="/image1.jpg" height="500px" width="500px">
<img id="image_2" src="/image2.jpg" height="500px" width="500px">
<img id="image_3" src="/image3.jpg" height="500px" width="500px">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')">
<img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')">
<img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')">
</div>

To keep DOM cleaner I got this solution which requires only adding js
var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
elms[i].onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
var v = document.getElementById(id).getBoundingClientRect().left;
document.getElementsByClassName("images_container")[0].scrollLeft += v;
}
}
See on jsfiddle

Here's my attempt at a no (well, minimal) JS solution to a scrolling gallery. You could, in fact, remove the Javascript all together if you replaced the .active class with the :target pseudo-selector, allowing you to click your thumbnails to do the scrolling. It's just easier for me to do it this way through a fiddle
function removeClass(element, className) {
var classes = element.className.split(' ');
var key = classes.findIndex(function(name) {
return name == className
});
classes.splice(key, 1);
element.className = classes.join(' ');
}
function addClass(element, className) {
var classes = element.className.split(' ');
classes.push(className);
element.className = classes.join(' ');
}
setInterval(function() {
var current = document.querySelector('.images .image.active');
var next = current.nextElementSibling;
if (!next) {
next = document.querySelector('.images .image:first-child');
}
removeClass(current, 'active');
addClass(next, 'active');
}, 1500);
body {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
.images {
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
}
.image {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: -100%;
float: left;
transition: 1s;
}
.image.active {
left: 0%;
}
.image.active ~ .image {
left: 100%;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
<div class='images'>
<div class='image black active'></div>
<div class='image red'></div>
<div class='image blue'></div>
<div class='image yellow'></div>
</div>
Essentially the way it works is by making the div.images container a certain height and width, and therefore all images inside it can be positioned as you want. We initially set all .image to left: -100%, so that they're completely off screen to the left. We then set .image.active as left: 0 so that it's on screen. We then use the ~ selector to say that all siblings that come after the current (.image.current ~ .image) should be left: 100%, so completely to the right. Add in a transition, and you have a completely CSS scrolling gallery. The JS only acts as a way to change what the current active image is, and you can replace that with :target if you want.
I used div's, instead of img tags because it's easier to provide a POC with div's and background colors, but it's worked well with images in the past. Just put an <img> tag inside those <div class='image'></div> tags

jQuery Panzoom with contain: 'invert' inside a container with a fixed width

I'm trying to use jQuery.panzoom.js. All I have is a container with a fixed width (which might be smaller than the svg inside it). The problem is that if the svg is bigger than than the width of the container you cannot see the whole of it (even when you try to "pan it").
The html:
<div class="container">
<div id="parent">
<div class="panzoom">
<img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
</div>
</div>
</div>
CSS:
.container {
width: 600px;
margin: 0 auto;
border: 1px solid red;
}
#parent {
border: 1px solid black;
}
.panzoom { width: 100%; height: 100%; }
And the javascript (as provided in the demos of this plugin):
(function() {
var $section = $('#parent');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
startTransform: 'scale(1.1)',
increment: 0.1,
minScale: 1,
contain: 'invert'
}).panzoom('zoom');
})();
Here's a working demo, reproducing the problem: http://codepen.io/FakeHeal/pen/WreLyZ

You have to set the Dimension of the .panzoom class the same size as your image. So i expect your image is 600px in with and has a height of 900px use this css part
CSS-File
.panzoom {
width: 600px;
height: 900px;
}

Panels like JSFiddle

I have this,
I want,
Fiddle
When Seconds tab goes up, I want to decrease height of First Section with min First 2 showing always, same with Second section.
$('#second').resizable({
handles: {
'n': '#ngrip',
},
resize: function () {
var b = $('#second').height();
var a = $('#first').css("height", b + "px");
console.log(a.height());
}
});
Edit
Must have -- I want it to work just like JSFiddle "HTML" and "JavaScript" panels, they both are resizable but also have min heights as you can see here
http://jsfiddle.net/

$('#second').resizable({
handles: {
'n': '#ngrip',
},
maxHeight: 300,
minHeight: 150,
resize: function (event, ui) {
var h = ui.size.height;
$('#first').height(400 -h);
}
});
#main {
width:100%;
height:400px;
overflow: hidden;
position: relative;
}
#first, #second {
height:200px;
width: 100%;
overflow-y: scroll;
}
#second {
z-index:999;
position: absolute;
}
#first-head, #second-head {
background-color:red;
}
#ngrip {
position: relative;
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
bottom: -5px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div id="main">
<div id="first">
<div id="first-head">
<h3>First</h3>
</div>
<div id="first-body">
<p>First-1</p>
<p>First-2</p>
<p>First-3</p>
<p>First-4</p>
<p>First-5</p>
<p>First-6</p>
</div>
</div>
<div id='second'>
<div id="second-head">
<h3>Second</h3>
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
</div>
<div id="second-body">
<p>Second-1</p>
<p>Second-2</p>
<p>Second-3</p>
<p>Second-4</p>
<p>Second-5</p>
<p>Second-6</p>
</div>
</div>
</div>
Use minHeight and minHeight option of JqueryUI combined with CSS display: absolute; for #second
First, change your resize direction in HTML (from ui-resizable-s to ui-resizable-n)
<div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
Second, use JqueryUI options in Javascript:
$('#second').resizable({
handles: {
'n': '#ngrip',
},
maxHeight: 300, // Example max height of `#second` is 300px
minHeight: 100, // Example min height of `#second` is 100px
resize: function (event, ui) {
// Get height of `#second`
var h = ui.size.height;
// Set height of `#first`
$('#first').height(400 - h); //400 is height of container `#main`
}
});
Final, change some CSS
#main {
width:100%;
height:400px;
overflow: hidden;
position: relative;
}
#first, #second {
height:200px;
width: 100%;
overflow-y: scroll;
}
#second {
z-index:999;
position: absolute;
}
#first-head, #second-head {
background-color:red;
}
#ngrip {
position: relative;
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
bottom: -5px;
left: 50%;
}
Hope it help you.

Please Check this demo JS Fiddle. It will useful for you.
HTML
<div id="main">
<div id="first">
<div id="first-head">
<h3>First</h3>
</div>
<div id="first-body">
<p>First-1</p>
<p>First-2</p>
<p>First-3</p>
<p>First-4</p>
<p>First-5</p>
<p>First-6</p>
</div>
</div>
<div id='second'>
<div id="second-head">
<h3>Second</h3>
<div class="ui-resizable-handle ui-resizable-s" id="ngrip"></div>
</div>
<div id="second-body">
<p>Second-1</p>
<p>Second-2</p>
<p>Second-3</p>
<p>Second-4</p>
<p>Second-5</p>
<p>Second-6</p>
<p>Second-7</p>
<p>Second-8</p>
<p>Second-9</p>
</div>
</div>
</div>
CSS
#main {
width:100%;
height:400px;
}
#first, #second {
min-height:100px;
height:170px;
max-height:400px;
}
#second-body{
z-index:9999;
}
#first-head, #second-head {
background-color:red;
}
#first-body, #second-body {
overflow-y:auto;
height:100%;
margin-bottom:10px;
}
#ngrip {
position: absolute;
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
top:0px;
left: 50%;
}
jQuery
$('#second').resizable({
handles: {
'n': '#ngrip',
},
resize: function () {
var b = $('#second').height();
var height=$('#main').height();
var a = $('#first').css("height", b + "px");
var first=$('#first').height();
$('#second').css("height",height- first+ "px");
}
});

try this below line
<div id="first" style="min-height:35%;overflow:hidden">
instead of
<div id="first">

Live Examples
Minimal Example
Full Example
Explanation
Your second comment was close to all that's required.
The "key insight" is that, in order to constrain the minimum height of one element, it suffices to constrain the maximum height of the other. If the top element cannot be taller than 250, then the bottom element cannot be any smaller than 50 (to maintain a constant container height of 300).
Relevant JavaScript
// initialise dimensions
var containerHeight = $("#container").height();
var minHeight = containerHeight * 0.30; // min 30% height
var maxHeight = containerHeight - minHeight;
// call rebalance once on page load to make sure the panels start off right
rebalance()
$("#top").resizable({
handles: 's',
maxHeight: maxHeight,
minHeight: minHeight,
resize: rebalance // whenever we resize, rebalance the panels
});
function rebalance() {
var currentTopHeight = $("#top").height();
$("#bottom").height(containerHeight - currentTopHeight);
}
I've also taken the liberty of cleaning up your code a little. I think you were having CSS problems related to filling the space after the header, and once that was fixed the resizing is fairly straightforward. I've annotated the CSS with comments to explain what's going on. You might also be interested in the discussion here: Make a div fill the height of the remaining screen space
Relevant CSS
/* both containers are full-width, and absolutely positioned in their parent */
#first, #second {
position:absolute;
width:100%;
}
/* pin the first to the top, and the second to the bottom */
#first {
top:0;
}
#second {
top:50%;
bottom:0;
}
/* The body needs to leave space at the top for the header (25px) but none at the bottom */
#first-body, #second-body {
overflow-y:auto;
width:100%;
position:absolute;
top:25px;
bottom:0;
}

I came across a plugin that looks very promising:
http://nathancahill.github.io/Split.js/
Split.js is a lightweight, unopinionated utility for creating adjustable split views or panes.
No dependencies or markup required, just two or more elements with a common parent.
Views can be split horizontally or vertically, with draggable gutters inserted between every two elements.
There is even a JS Fiddle-style Demo.
Sample JS (from demo):
Split(['#a', '#b'], {
gutterSize: 8,
cursor: 'col-resize'
})
Split(['#c', '#d'], {
direction: 'vertical',
sizes: [25, 75],
gutterSize: 8,
cursor: 'row-resize'
})
Split(['#e', '#f'], {
direction: 'vertical',
sizes: [25, 75],
gutterSize: 8,
cursor: 'row-resize'
})
Sample html usage (from demo):
<div id="a" class="split split-horizontal">
<div id="c" class="split content"></div>
<div id="d" class="split content"></div>
</div>
<div id="b" class="split split-horizontal">
<div id="e" class="split content"></div>
<div id="f" class="split content"></div>
</div>