I've run into a bizarre anomaly with CSS transitions. The transition is completely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed.
My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!
Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.
My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.
document.getElementById("clickme").onclick = function(ev) {
document.documentElement.classList.add("show-modal");
ev.stopPropagation();
}
document.documentElement.onclick = function() {
this.classList.remove("show-modal");
}
#clickme {
max-height: 300px;
cursor: pointer;
margin: 20px;
border: 1px solid #ddd;
border-radius: .25rem;
padding: 10px;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0px;
z-index: 2000;
padding-top: 30px;
display: none;
}
.show-modal #popup {
display: block;
}
#popup img {
display: block;
margin: auto;
position: relative;
top: -500px;
opacity: 0;
transition: top .5s 1s, opacity .25s;
}
.show-modal #popup img {
top: 0px;
opacity: 1;
}
#popup>div {
margin: auto;
}
<p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
<div><img src="http://devicatoutlet.com/img/birthday.png"></div>
</div>
View on CodePen
CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup.
You can see the new code here: https://codepen.io/anon/pen/KRoPwM. Hope this helps.
Related
I'm trying to hover on a div inside a wrapper to reveal some text inside another rapper.
I've had a stab at it with the following CSS, to no avail. Here's my attempt thus far:
Fiddle
Here's what I was trying to do with CSS:
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascript may be the way to go here, but I'm a bit of a novice in that regard.
Your help would be greatly appreciated.
Plain JS:
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
insert this in a <script>-block on bottom of your body-tag
You can try this.
Add this to head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Add this javascript:
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});
you can also hide and show your required div on hover event using jquery:
$(document).ready(function(){
$('#assodiv').on( "mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on( "mouseleave",function() {
$('#assotxt').hide();
});
});
.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
#media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>
#assotxt is not a sibling of #assodiv; also :hover should be applied at .mobileViewDiagram element? You can use :hover:after at .mobileViewDiagram, with content set to text to be displayed. Use top, left properties to render text at appropriate position in viewport.
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/
What I need to achieve can be seen on this demo.
Basically a page with a rectangle area that you reach by scrolling down, where there's content that appears as if it were a position: fixed element. In the demo above, the revealed content is a page displayed through an iframe - I'm happy with just an image.
I only need this to work on iOS 8. From what I can see, the demo does it through some custom scrolling mechanism. I suspect they have somehow overwritten scrolling altogether - although I can't confirm it's a custom scrolling framework like iScroll.
My own approach was to re-position a clip: rect area on a position: fixed background image, through a onscroll handler. Sort of like moving a mask around, on an image. Example here
The code I use in my JS onscroll handler to re-position the clipping rectangle:
topY = adDiv.getBoundingClientRect().top + window.pageYOffset - adDiv.ownerDocument.documentElement.clientTop;
scrollT = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
newY = topY - scrollT;
newHeight = rectHeight + newY;
document.getElementById("bgImg").style.clip = "rect("+newY+"px,1900px,"+newHeight+"px,0px)";
I'd be happy with this if there weren't for a delay while re-positioning the clip: rect area; you can see it if you test on anything iOS 8 (there is a slight delay when you scroll/swipe up and down around the area that reveals the image). Wasn't able to overcome this and fear it's by-design.
EDIT: please note I need to have the content that is above and below the reveal area, see-through; so with a transparent background that would allow you to see the page's background; can't mess with anything above and below.
I've stripped the demo you linked down to the essentials, in which there seems to be three elements of importance, one container, one which is used for the clipping, and the third for the content.
<div class="container">
<div class="clip-box">
<div class="content">
...
</div>
</div>
</div>
The "container" defines the area you want to use in line with the text;
.container {
position: relative;
width: 100%;
height: 10em;
}
The clip-element is where the interesting happens. It's made to fill the parent, which makes the clip: rect(auto ... auto) clip the element (and therefore also it's children) at its edges. It's important that this element is set position: absolute or position: fixed, as clipping only applies to absolutely positioned elements.
.clip-box {
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
clip: rect(auto auto auto auto);
}
Lastly we have the content as a child of the clip-element. It is set to a fixed position but will only render in the clip-rect area defined by the parents’ bounding-box.
.content {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
}
Here's a snippet of the above which uses only css.
body {
background-image: url("http://lorempixel.com/500/500/");
background-size: cover;
color: #FFF;
margin: 0;
text-align: center;
}
img {
width: 100%;
}
.content p {
position: absolute;
top: 0;
left: 0;
text-align: left;
}
.window {
position: relative;
width: 100%;
height: 10em;
}
.clip-box {
position: absolute;
left: 0;
top: 0;
width:100%;
height:100%;
clip: rect(auto auto auto auto);
}
.content {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
}
<p>
Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Morbi convallis
<br>accumsan neque,
<br>eu accumsan magna
<br>laoreet cursus.
<br>Etiam feugiat mattis
<br>nunc eget luctus.
<br>Proin vel dictum est.
<br>Nullam suscipit quam
<br>at ullamcorper vestibulum.
<br>Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Curabitur rutrum
<br>elementum ligula,
<br>suscipit sodales
<br>nisl convallis a.
</p>
<div class="window">
<div class="clip-box">
<div class="content">
<img src="http://lorempixel.com/500/400/">
<p>
Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Morbi convallis
<br>accumsan neque,
<br>eu accumsan magna
<br>laoreet cursus.
<br>Etiam feugiat mattis
<br>nunc eget luctus.
<br>Proin vel dictum est.
<br>Nullam suscipit quam
<br>at ullamcorper vestibulum.
<br>Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Curabitur rutrum
<br>elementum ligula,
<br>suscipit sodales
<br>nisl convallis a.
</p>
</div>
</div>
</div>
<p>
Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Morbi convallis
<br>accumsan neque,
<br>eu accumsan magna
<br>laoreet cursus.
<br>Etiam feugiat mattis
<br>nunc eget luctus.
<br>Proin vel dictum est.
<br>Nullam suscipit quam
<br>at ullamcorper vestibulum.
<br>Lorem ipsum
<br>dolor sit amet,
<br>consectetur adipiscing elit.
<br>Curabitur rutrum
<br>elementum ligula,
<br>suscipit sodales
<br>nisl convallis a.
</p>
You should however note that the clip property is deprecated and developers are advised to use clip-path instead. This is an experimental technology though and if you're only wanting to use images anyway I'd recommend using background-attachment: fixed; which will give you the same result as the code above.
I am trying to make my own accordion for my portfolio page template, for my website. xtractweb.com as once any one click the accodion respective work-snippet will be shown etc ... for now i am trying with this demo but i stuck in middle.
The code i am currently using is given below:
Html code snippet:
<div class="accordion-content">
<ul>
<li class="current">
<h3>Donec at neque eget lacus lobortis molestie</h3>
<div class="content current">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
<li class="">
<h3>Phasellus felis purus, placerat vel augue vitae</h3>
<div class="content" style="display: none;">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
</ul>
</div>
and here is the jquery code:
$('.accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
while all my css showing the work good ... the problem is that once i click the h3 it shows the div content, but once i click another h3 quickly than old div shown, it destroys the whole process and results not shows as i want... any one suggest me what to do now or any easier method than that ... ?
here is the css code snippet:
.accordion-content {
li {
margin-bottom: 10px;
border: 1px solid #dedede;
background: #ececec url("../images/plus-minus.png") no-repeat;
background-position: 96% 45%;
background-width: 8px;
background-height: 10px ;
&.current {
background: #ececec url("../images/minus.png") no-repeat;
background-position: 96% 11%;
}
}
h3 {
font-size: 16px;
font-family: 'open sans', sans-serif;
text-align: left;
color: #2c2725;
padding: 10px 0 10px 20px;
&:hover {
cursor: pointer;
}
}
.content {
width: 100%;
background: #ffffff;
padding: 10px 0 10px 0;
text-align: center;
display: none;
text-align: left;
padding: 15px;
padding-bottom: 55px;
p {
font-size: 14px;
line-height: 24px;
color: #7f8281;
}
}
.current {
display: block;
}
}
Regards
the problem is not there as i fell, just look at the code snippet in jsfidle http://jsfiddle.net/gkQ3Y/1/ your results looking cool. what else you think you want ? the only change which i feel is that, you should add
.stop(true,true)
to make your accordion load properly, as you just clicks early than it loads and results looks different than you expect.
so, your new code snippet will look like shown below:
$('.accordion-wrapper .accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').stop(true,true).slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').stop(true,true).slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
i hope it will be making every thing fine right now, and your whole code is enough to do the work, while just these two lines will do the rest of the work now.
Regards
Here is the might help you.
jQuery Code
$('.accordion-content').find('h3').click(function(){
$('.content').slideUp(); // Hide all content.
$(this).next().slideDown(); // show current clicked heading detail
$(this).parent().addClass('current').siblings('li').removeClass('current'); // add current class to current clicked heading and remove from another heading.
});
Fiddle Demo
I have 2 div containers, one navigation on the left, one content right to that:
#leftnav_static
{
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-image: url('pagenav.jpg');
}
#content_dynamic
{
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-image: url('pagenav.jpg');
font-size: 1em;
line-height:1.6em;
white-space:nowrap;
}
Now I want to set leftnav to the same height as content (no faux columns if possible):
$('#leftnav_static').height($("#content_dynamic").height());
or
$('#leftnav_static').innerHeight($("#content_dynamic").innerHeight());
dont seem to work.
any suggestions as to why that is?
It does work. See this jsfiddle.
Are you running the code in a jQuery ready block? Also, if you want to maintain this height relationship through text size changes from browser 'zooms', you will need to respond to resize events. If at some point you make your content_dynamic div have a width of auto, you will also need to resize the sidebar div when the height of the content_dynamic div changes (again, by responding to a resize event).
jQuery only allows you to attach to a resize event at the window level, but there are plugins that ease translating that to a div level resize event.
HTML:
<div id="leftnav_static"></div>
<div id="content_dynamic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Etiam iaculis ornare
sapien sit amet condimentum. Aliquam a diam vel eros
tristique fermentum vitae at turpis. Etiam fringilla,
enim nec viverra interdum, metus tortor vehicula mauris,
in luctus felis massa ut nulla. Proin et leo vel nunc ornare
pulvinar. Vestibulum quis lectus vel arcu tristique aliquet.
Fusce malesuada nisi non ante egestas semper.
</div>
CSS:
#leftnav_static {
padding:5px;
margin-top: 5px;
margin-left: 5px;
height: 1000px;
width: 195px;
font-size: 1.35em;
float:left;
background-color: blue;
}
#content_dynamic {
margin-top: 5px;
margin-left: 215px;
height: auto;
width: 700px;
padding: 5px;
background-color: red;
font-size: 1em;
line-height:1.6em;
//white-space:nowrap; //This makes the content div only one line,
//I commented this out to make the sizing clear.
}
JavaScript: (Assuming that the jQuery library is already loaded)
$(function() {
$('#leftnav_static').height($("#content_dynamic").height());
});
Note: The benefit of a faux columns or other pure CSS approaches is that you don't need to worry about zooming or resizes as much--and your site would work for people that have JavaScript turned off.
You have to understand that you are manipulating CSS attributes.
var myHeight = $("#content_dynamic").css("height");
$('#leftnav_static').css({"height": myHeight});
should do the trick.
Add display block to #leftnav_static
#leftnav_static
{
display: block;
}
...and this will work
$(document).ready(function() {
$('#leftnav_static').height( $('#content_dynamic').height() );
});
See my example; http://jsfiddle.net/D3gTy/
I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?
OK, I've just put together a very quick and dirty example.
Here's the HTML:
<body>
Add content
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
The jQuery used is here
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
And CSS:
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
I hope this helps.
Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?
I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)