javascript - Items floating over another -

javascript - Items floating over another -

really simple issue, hard fix. have these images on click fade in div over-top of them. on desktop display independently, on mobile - tablet stack on 1 another.

things i've tried:

clearfix table display grid scheme

fiddle link

js/css/html/demo

class="snippet-code-js lang-js prettyprint-override">(function() { /* == global declerations == */ touchmouseevent = { down: "touchmousedown", up: "touchmouseup", move: "touchmousemove" } /* == event listeners == */ var onmouseevent = function(event) { var type; switch (event.type) { case "mousedown": type = touchmouseevent.down; break; case "mouseup": type = touchmouseevent.up; break; case "mousemove": type = touchmouseevent.move; break; default: return; } var touchmouseevent = normalizeevent(type, event, event.pagex, event.pagey); $(event.target).trigger(touchmouseevent); } var ontouchevent = function(event) { var type; switch (event.type) { case "touchstart": type = touchmouseevent.down; break; case "touchend": type = touchmouseevent.up; break; case "touchmove": type = touchmouseevent.move; break; default: return; } var touch = event.originalevent.touches[0]; var touchmouseevent; if (type == touchmouseevent.up) touchmouseevent = normalizeevent(type, event, null, null); else touchmouseevent = normalizeevent(type, event, touch.pagex, touch.pagey); $(event.target).trigger(touchmouseevent); } /* == normalize == */ var normalizeevent = function(type, original, x, y) { homecoming $.event(type, { pagex: x, pagey: y, originalevent: original }); } /* == hear original event == */ var jquerydocument = $(document); if ("ontouchstart" in window) { jquerydocument.on("touchstart", ontouchevent); jquerydocument.on("touchmove", ontouchevent); jquerydocument.on("touchend", ontouchevent); } else { jquerydocument.on("mousedown", onmouseevent); jquerydocument.on("mouseup", onmouseevent); jquerydocument.on("mousemove", onmouseevent); } })(); $(document).ready(function () { $("#p1").on(touchmouseevent.down, function () { $("#p1a").fadetoggle(); $("#p1").fadetoggle(); }); $("#p1a").on(touchmouseevent.down, function () { $("#p1").fadetoggle(); $("#p1a").fadetoggle(); }); $("#p2").on(touchmouseevent.down, function () { $("#p2a").fadetoggle(); $("#p2").fadetoggle(); }); $("#p2a").on(touchmouseevent.down, function () { $("#p2").fadetoggle(); $("#p2a").fadetoggle(); }); $("#p3").on(touchmouseevent.down, function () { $("#p3a").fadetoggle(); $("#p3").fadetoggle(); }); $("#p3a").on(touchmouseevent.down, function () { $("#p3").fadetoggle(); $("#p3a").fadetoggle(); }); $("#p4").on(touchmouseevent.down, function () { $("#p4a").fadetoggle(); $("#p4").fadetoggle(); }); $("#p4a").on(touchmouseevent.down, function () { $("#p4").fadetoggle(); $("#p4a").fadetoggle(); }); }); class="snippet-code-css lang-css prettyprint-override">/* line 7, style.scss */ .work { padding: 275px 0 550px 0; } /* line 11, style.scss */ .work .ic { width: 87.5%; margin: 0 auto; } /* line 15, style.scss */ .work .ic .i1 { background: url(../img/hi.png) no-repeat center; background-position: 0% 100%; content: ''; display: block; float: left; height: 35px; width: 35px; margin-left: 25px; margin-right: 5px; } @media (min-width: 320px) { /* line 15, style.scss */ .work .ic .i1 { margin-left: 0; } } @media (min-width: 1240px) { /* line 15, style.scss */ .work .ic .i1 { margin-left: 25px; } } /* line 41, style.scss */ .work .ic h1 { padding: 25px 0; } /* line 45, style.scss */ .work .ic .ih { float: left; position: relative; } @media (min-width: 320px) { /* line 45, style.scss */ .work .ic .ih { width: 100%; padding: 0 0 10px 0; } } @media (min-width: 768px) { /* line 45, style.scss */ .work .ic .ih { width: 46%; padding: 0 25px 10px 0; } } @media (min-width: 1240px) { /* line 45, style.scss */ .work .ic .ih { width: 21.875%; padding: 0 0 10px 30px; } } /* line 69, style.scss */ .work .ic .ih .h1 { font-size: 1.15em; font-weight: bold; } /* line 71, style.scss */ .work .ic .ih .works { position: relative; } /* line 73, style.scss */ .work .ic .ih img { display: block; width: 100%; } /* line 75, style.scss */ .work .ic .ih div { display: none; position: absolute; top: 0; left: 0; margin: 0; padding: 25px; width: 85%; } @media (min-width: 320px) { /* line 75, style.scss */ .work .ic .ih div { padding: 5px 5px 0 5px; } } @media (min-width: 768px) { /* line 75, style.scss */ .work .ic .ih div { padding: 10px 10px 0 10px; } } @media (min-width: 1240px) { /* line 75, style.scss */ .work .ic .ih div { padding: 10px 0 10px 40px; } } /* line 100, style.scss */ .work .ic .ih .b1 { text-decoration: none; font-weight: bold; color: #fff; background: #2980b9; position: absolute; padding: 15px 13px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; } /* line 111, style.scss */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } /* line 116, style.scss */ .cf:after { clear: both; } /* line 120, style.scss */ .cf { *zoom: 1; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="work cf" id="w"> <div class="ic cf"> <h1><span class="i1"></span><span>work</span></h1> <div class="works"> <div class="ih"> <img src="img/p1.png" id="p1" style="display: block;"> <div id="p1a" style="display: none;"> <span class="h1"> 3-2-1 breadstuff </span> <p>3-2-1 breadstuff national relief programme fights hunger , poverty through generosity , love.</p> <a href="piece1/index.html" target="_blank" class="b1"> go </a> </div> </div> <div class="ih"> <img src="img/h.png" id="p2" style="display: block;"> <div id="p2a" style="display: none;"> <span class="h1"> radarda </span> <p>such beautiful title.</p> <a href="piece2/index.html" target="_blank" class="b1"> go </a> </div> </div> <div class="ih"> <img src="img/h.png" id="p3"> <div id="p3a"> <span class="h1"> radarda </span> <p>such beautiful title.</p> <a href="piece3/index.html" target="_blank" class="b1"> go </a> </div> </div> <div class="ih"> <img src="img/h.png" id="p4"> <div id="p4a"> <span class="h1"> radarda </span> <p>such beautiful title.</p> <a href="piece4/index.html" target="_blank" class="b1"> go </a> </div> </div> </div> </div> </div>

solution fixing 1: seems when images toggled fade parent divs height removed, when div holding text fades in, it's not beingness recognized, in height isn't added until after effect, other ih (or columns) decide stack. going seek setting permanent height parent div.

solution fixing 2: seems adding fixed height parent div, , height: 100% it's children elements eliminated overlapping, image won't remain in proportion.

so main issue way elements set containing div class ih collapsing when image contains set display: none. you'd expect. block level element has 0 height when contains no elements unless expressly give height. result other ih elements, have float: left applied, that: float left.

there 2 ways handle without gutting css. first utilize opacity:0 fade out image it's hidden still in document flow. sec give .ih div height.

demo 1 use opacity , css transitions

the benefit here you're using css handle transitions. makes little improve separation of concerns, draw ie8 , ie9 don't back upwards transitions, in older browsers content "jump" between opacity states rather fade in , out smoothly.

the changes in markup add together 2 classes div contains text (the ones pxa ids). called them .works-text , .hide:

<div class="ih"> <img src="img/p1.png" id="p1" /> <div id="p1a" class="works-text hide"> <span class="h1"> 3-2-1 breadstuff </span> <p>3-2-1 breadstuff national relief programme fights hunger , poverty through generosity , love.</p> <a href="piece1/index.html" target="_blank" class="b1"> go </a> </div> </div>

then you'll need add together 2 helper classes: show , hide, css , add together transitions existing rules image , text div:

.work .ic .ih img { display:block; width:100%; -webkit-transition: opacity .5s ease; /*add this*/ transition: opacity .5s ease; /*add this*/ } .work .ic .ih div { position:absolute; top:0; left:0; margin:0; padding:25px; width:85%; -webkit-transition: opacity .5s ease; /*add this*/ transition: opacity .5s ease; /*add this*/ } /*create these new classes*/ .show { opacity: 1; } .hide { opacity: 0; }

now javascript, it's not necessary target elements via ids. can replace of eventhandlers one! using $(this) can target element dispatched event. can utilize find() method target children of element. toggleclass() method can take string 2 comma-separated values tell toggle between classes names. css handles fading in/out.

$('.ih').on(touchmouseevent.down, function () { $(this).find('img').toggleclass('show, hide'); $(this).find('.works-text').toggleclass('show, hide'); }); demo 2 use min-height

this approach arguably easier given current markup , styles, has drawback of not beingness responsive. of course, can adjust min-height values in media queries approximate responsiveness.

the markup here identical first option, except no longer need hide class. add together works-text class text divs.

<div id="p1a" class="works-text">

then in css, add together min-height values , works-text class rule:

.work .ic .ih { float:left; position:relative; min-height: 350px; /*give div min-height going big plenty floats maintained*/ } .works-text { display: none; /*so don't utilize inline styles*/ }

finally, simplify javascript, follow same pattern in first demo, creating single handler of elements.

$('.ih').on(touchmouseevent.down, function () { $(this).find('img').fadetoggle(); $(this).find('.works-text').fadetoggle(); });

javascript jquery html css3