JSFiddle
<div id="box">
<div id="body">Blah blah blah</div>
</div>
#box {
box-shadow: 0 0 8px black;
}
#body {
height:100px;
transition: height 0.8s ease;
}
#body:hover {
height: 200px;
}
In IE10, the shadow at the bottom of the box is glitchy when the transition changes the height of the content. Note that this only happens if it's the content box that changes height. If it's the container, the shadow works fine. However, I can't change the container's size since I want it to be dynamic to fits its contents.
Is there any workaround for this?
Best bet is to do the following. My guess is that because box-shadow is not applied to the element that's actually resizing that it can't resize with the contents. I'll need to do some more research, but this works:
Edit for Fixed Container:
Apply a transparent box-shadow to each child.
CSS:
<style type='text/css'>
.box {
box-shadow: 0 0 8px black;
}
.box .body {
box-shadow: 0 0 8px transparent;
}
.body {
height:100px;
transition: height 0.8s ease;
}
.body:hover {
height: 200px;
}
</style>
HTML:
<div class="box">
<div class="body">Blah blah blah</div>
<div class="body">Blah blah blah 2</div>
</div>
The rendering issue has been fixed in IE11. No need to worry!
Related
Im trying to give "box2" a bigger z-index value than the other boxes, in order to make the box2 overlap the other(for instance on box number 5 that next to it), but everytime im trying this, the boxes are "running away" and opening a new column. i did that on codeopen so the if it makes any different:
HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
CSS
body {
margin: 40px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
z-index: 10;
}
.box:nth-child(even) {
color: #000;
}
.wrapper {
width: 600px;
display: grid;
grid-template-columns: repeat(6, 100px);
grid-gap: 10px;
grid-auto-flow:column;
}
.box2 {
grid-column: 3 / 6;
grid-row: 2 / 3;
outline: 2px solid red;
z-index: 20;
background-color: blue;
opacity: 0.5;
}
link to codeopen: https://codepen.io/Tsuri/pen/dyZbdGJ
I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.
I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.
How can I center this image at load initially
const element = document.querySelector('#scene');
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
display: flex;
justify-content: center;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Found out a move to function Thanks to #Temani Afif for help
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth /2) - (element.offsetWidth / 2);
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
panZoomController.moveTo(s, 0);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 0.9
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth - element.offsetWidth) ;
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
}).zoomAbs(
6*s, // initial x position
0, // initial y position
0.9 // initial zoom
);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Here:
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
}
#scene {
display: flex;
justify-content: center;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Try this
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
width: 100%;
}
#scene {
position: absolute;
width:400px;
left: 50%;
margin-left:-200px;
display:block;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
This will center the img inside its container :
#scene {
display: flex;
justify-content: center;
}
I would like to get some help with this. I've tried so many different ways and no one works. I want this in only HTML and CSS.
.circles {
background-color: white;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row {
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
<div class="row">
<div class="circles"></div>
<div class="circles"></div>
<div class="circles"></div>
</div>
Here is an example via jsbin:
http://jsbin.com/tezocucufi/edit?html,css,output
There are a couple different ways to get it to "not interfere" with other elements... but depends on what your situation.
Circle code:
border-radius: 50%;
width: 100px;
height: 100px;
Alignment could be with floats, or:
display: inline-block;
and position'ing both the element and the parent container to position it on the page.
Reference: https://davidwalsh.name/demo/css-circles.php
This may be a typical selection panel, which is on the desktop:
and on an mobile phone:
Can Zurb Foundation do this? I think one catch is, for medium width and up, the width of the 2 columns are supposed to be fixed, instead of dynamic. (choice 2 can have long width or short width, because the background is transparent and won't show. The importance is the fixed spacing between Choice 1, the vertical separation line, and Choice 2).
I put some desired behavior on CodePen, although they are customized for desktop and mobile, but can't be both:
Desktop: http://codepen.io/anon/pen/oxZpzg
Mobile: http://codepen.io/anon/pen/KzWZwQ
For mobile:
<div class="row text-center">
<div class="small-6 column">Choice 1</div>
<div class="small-6 column">Choice 2</div>
</div>
and it seems no way to style it for Desktop's fixed spacing.
Right now I can style the desktop version using plain CSS, and then using media query to style the mobile version, and no Zurb Foundation is used. Could Foundation be used for both mobile and desktop, or use Foundation for one case and use media query for the other case?
Just write it in SCSS, compile it into CSS and use a plain CSS. This SCSS code can do the trick:
.column {
background: #ffc;
color: #333;
padding: 20px;
#media #{$small-only} {
width: 50%;
}
&:first-child {
border-right: 1px solid #bbb;
#media #{$medium-up} {
width: 200px;
}
}
&:last-child {
#media #{$medium-up} {
width: calc(100% - 200px);
}
}
}
Compiled CSS:
body {
padding-top: 50px;
}
.column {
background: #ffc;
color: #333;
padding: 20px;
}
#media only screen and (max-width: 40em) {
.column {
width: 50%;
}
}
.column:first-child {
border-right: 1px solid #bbb;
}
#media only screen and (min-width: 40.0625em) {
.column:first-child {
width: 200px;
}
}
#media only screen and (min-width: 40.0625em) {
.column:last-child {
width: calc(100% - 200px);
}
}
Updated HTML:
<div class="row text-center">
<div class="column">Choice 1</div>
<div class="column">Choice 2</div>
</div>
CodePen link
I am making a website with some screenshots of an iPhone app I made and was wondering if there was some kind of slideshow thing for HTML. I want it to have the iPhone frame and the slideshow with the screenshots in the middle of it. I would prefer it to be written in something other than flash.
Thanks in advance!
I'm a fan of the Nivo Slider, personally. Requires jQuery.
This needs HTML, CSS and Javascript. This is not my own answer but is derived from https://www.w3schools.com/howto/howto_js_slideshow.asp.
For a slideshow that will change picture on button click
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
For an automatic slideshow
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>