I’d like to hide the vertical scroll-bars in the left panels, while keeping them scrollable.
Edit: Webkit covered. Now looking for a fix for Mozilla Firefox
I’ve looked at answers from previous questions, such as this one and that one, with poor results. Mostly they mess up the layout, causing overlaps, or they don’t produce any noticeable result.
Browsers evolve rapidly so I was hoping for updated information.
A cross-browser solution would be awesome, but I’d be happy with any pointers!
jsfiddle
const lijntjes = [
"Random sentences go here, one at a time!",
"Here's another one! Just keep adding them on.",
"Look, here's another one.",
"And yet another. Along with dozens of others."
];
const lorIps = el => {
for (let n = 0; n < 15; n++) {
el.innerHTML += ' ' + lijntjes.join(' ').toString()
};
};
const teksten = document.querySelectorAll('.tekst');
const po1 = document.querySelectorAll('.project-omschrijving.row-1');
const po2 = document.querySelectorAll('.project-omschrijving.row-2');
const om = document.querySelectorAll('.omschrijving');
const o = document.querySelectorAll('.open');
const c = document.querySelectorAll('.close');
// Populate
Array.from(teksten, item => lorIps(item));
// Toggler
const toggler = (el, klassen) => klassen.map(klas => el.classList.toggle(klas));
// Open
const open = elmt => {
Array.from(elmt, item => item.addEventListener('click', function() {
let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(' ').join(
'.').replace('.omschrijving', ''))
Array.from(hoofdNodes, el => toggler(el, ['trans', 'binnen']));
}));
}
// Close
const dicht = elmt => {
Array.from(elmt, item => item.addEventListener('click', function() {
let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(
' ').join(
'.').replace('.omschrijving', ''));
Array.from(hoofdNodes, el => setTimeout(() => toggler(el, ['trans']), 200));
Array.from(hoofdNodes, el => toggler(el, ['binnen']))
}))
}
window.onload = function() {
open(o);
dicht(c);
o[0].click()
}
:root {
--offset: 50vw;
--cell-hoogte: 50vh;
--gap: '1em';
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
color: palegreen;
}
:target {
border-radius: 1em;
background-color: palegreen;
transition: background-color .3s ease-in-out
}
:target> :nth-child(2) {
color: #fff;
transition: color .3s ease-in-out
}
.container {
color: green;
font-size: 2em;
font-weight: bold;
display: grid;
grid-template-columns: var(--offset) 100vw;
grid-template-rows: repeat(2, var(--cell-hoogte));
grid-gap: var(--gap);
overflow: hidden;
}
#media (max-width: 700px) {
.container {
grid-template-columns: 50vw 100vw;
grid-template-rows: repeat(2, calc(var(--cell-hoogte)*1));
grid-gap: 0;
}
}
p {
/* Viewport Sized Typography */
/* https://css-tricks.com/viewport-sized-typography/ */
font-size: 3.5vmin;
}
p a {
display: block;
transition: background .3s ease-in-out
}
#note {
position: fixed;
bottom: 1em;
right: 1em;
display: flex;
align-self: flex-end;
}
.omschrijving {
opacity: .5;
}
.trans {
transition: all .2s ease-out;
}
.project-omschrijving {
will-change: transform, opacity;
padding: 1em;
transform: translateX(calc(var(--offset)*-1));
overflow: hidden;
}
.project-omschrijving:nth-child(odd) {
overflow-y: auto;
}
.binnen {
transform: translateX(0);
transition: all .3s ease-out;
opacity: 1
}
.knop {
display: flex;
flex-direction: column;
}
.open,
.close {
position: absolute;
top: 1em;
right: 0;
width: 4em;
height: auto;
cursor: pointer;
stroke: green;
fill: green;
stroke-miterlimit: 10;
object-fit: contain;
}
.close {
transform: rotate(45deg)
}
<div class="container">
<p id="anchor1" class="project-omschrijving omschrijving row-1">
<span class='anchor'>Anchor 1</span>
To anchor3
<span class="knop">
<a class="close">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor2" class="project-omschrijving row-1">
<span class='anchor'>Anchor 2</span>
To anchor4
<span class="knop">
<a class="open">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor3" class="project-omschrijving omschrijving row-2">
<span class='anchor'>Anchor 3</span>
To anchor1
<span class="knop">
<a class="close">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
<line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
<p id="anchor4" class="project-omschrijving row-2">
<span class='anchor'>Anchor 4</span>
To anchor2
<span class="knop">
<a class="open">
<svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
</svg>
</a>
</span>
<span class="tekst"></span>
</p>
</div>
<div id="note"> Internet Explorer 8 and earlier versions do not support the :target selector.</div>
Related
Hello I have used google dropdown in my react project and need to handle event on focus of the dropdown I couldn't make it can you help me?
As you can see in below output there is a div placeholder which i need to hide on focus. I have tried a few ways but it didn't work so I need some expert help. I am stuck in here.
code
<GooglePlacesAutocomplete
apiKey={'XXXXXXX'}
selectProps={{
value,
backspaceRemovesValue: true,
controlShouldRenderValue: true,
isClearable: true,
placeholder: strings["SELECT_LOCATION"],
onChange: async (e) => {
console.log("E : ", e);
setValue(e)
if (e) {
let location = await getLocationAction(e.value?.place_id)
let address = {
address: e.label,
location
}
getLocation && getLocation(address)
} else {
getLocation(null);
}
}
}
}
/>
Output
<div class="googleDropdown">
<div class="css-2b097c-container">
<span
aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
></span>
<div class="css-yk16xz-control">
<div class="css-1hwfws3">
<div class="css-1wa3eu0-placeholder">Select location</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block">
<input
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-3-input"
spellcheck="false"
tabindex="0"
type="text"
aria-autocomplete="list"
value=""
style="
box-sizing: content-box;
width: 2px;
background: 0px center;
border: 0px;
font-size: inherit;
opacity: 1;
outline: 0px;
padding: 0px;
color: inherit;
"
/>
<div
style="
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
height: 0px;
overflow: scroll;
white-space: pre;
font-size: 16px;
font-family: Comfortaa, Montserrat, sans-sarif;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-transform: none;
"
></div>
</div>
</div>
</div>
<div class="css-1wy0on6">
<span class="css-1okebmr-indicatorSeparator"></span>
<div class="css-tlfecz-indicatorContainer" aria-hidden="true">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
class="css-tj5bde-Svg"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
code
How do I replace the the class highlight with an id instead, so when I click outside of the products, it doesn't highlight that area?
I included the window.onload section with what I want to do, however I don't know how to change the class highlight into id. I can't think of an easier way than changing the class and then using the window.onload.
let overlay;
document.querySelectorAll('.product').forEach(function(path) {
path.onclick = chooseProduct;
})
function chooseProduct(e) {
if (overlay) overlay.classList.remove('highlight')
overlay = e.target
overlay.classList.add('highlight')
}
//What I want to add to the highlight class using id to remove black border when click outside of the products
// window.onload = function(){
// var hide = document.getElementById('?');
// document.onclick = function(e){
// if(e.target.id !== '?'){
// hide.style.display = 'none';
// }
// };
// };
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
let hex = e.target.getAttribute("data-hex");
if (overlay) overlay.style.fill = hex;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 200px;
width: 200px;
}
#product-svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
#background-image {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.colors {
display: flex;
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div id="container">
<svg id="product-svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img id="background-image" src="boxes.jpg" alt="">
</div>
<div class="colors">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>
your code is working as expected, except the part which you have mentioned in the question which highlight style of the selected product is not removed when you clicked outside the product.
In order to do that, simply I have added an Event Listener (removeHighlight()) by document.onclick = removeHighlight; to the whole document on click event. So whenever you click on anywhere in the DOM, that event listener will be triggered. What I'm do inside EventListener function is removing the class highlight from all products if and only if the click event was not triggered by clicking on either products or colours. Additionally I'm setting the overlay=null in order to remove the reference of the previously selected product, then clicking on colors won't fill the previously selected product with selected color if same conditions met and until you click again on a product.
let overlay;
document.querySelectorAll('.product').forEach(function(path) {
path.onclick = chooseProduct;
})
function chooseProduct(e) {
if (overlay) overlay.classList.remove('highlight')
overlay = e.target
overlay.classList.add('highlight')
}
var removeHighlight = function(e) {
var products = document.querySelectorAll('.product');
if(!e.target.classList.contains('product') && !e.target.classList.contains('color')){
overlay = null;
document.querySelectorAll('.product').forEach(function(prod){
prod.classList.remove('highlight');
});
}
}
document.onclick = removeHighlight;
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
let hex = e.target.getAttribute("data-hex");
if (overlay) overlay.style.fill = hex;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 200px;
width: 200px;
}
#product-svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
#background-image {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.colors {
display: flex;
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div id="container">
<svg id="product-svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img id="background-image" src="boxes.jpg" alt="">
</div>
<div class="colors">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>
jsfiddle
When a behavior is a result of a click event occurring anywhere but the tags meant to be clicked, it's most effective to register the document Object as the click event listener and control all clicks by Event Delegation.
register the document Object as the click event listener
document.onclick = selectPath;
the click event handler is selectPath(e)
collect all .product into a NodeList
const paths = document.querySelectorAll('.product');
if the user clicked any .product remove .highlight class from all .product and then add .highlight class to the .product user clicked
if (e.target.matches('.product')) {
paths.forEach(path => path.classList.remove('highlight'));
e.target.classList.add('highlight');
but if the user clicked any .color, then get it's [data-hex] value, and fill .highlight with the hex color if it exists (re: .highlight)
else if (e.target.matches('.color')) {
let hex = e.target.dataset.hex;
let selected = document.querySelector('.highlight');
if (selected) selected.style.fill = hex;
otherwise just remove the .highlight class if it exists.
paths.forEach(path => path.classList.remove('highlight'));
document.onclick = selectPath;
function selectPath(e) {
const paths = document.querySelectorAll('.product');
if (e.target.matches('.product')) {
paths.forEach(path => path.classList.remove('highlight'));
e.target.classList.add('highlight');
} else if (e.target.matches('.color')) {
let hex = e.target.dataset.hex;
let selected = document.querySelector('.highlight');
if (selected) selected.style.fill = hex;
} else {
paths.forEach(path => path.classList.remove('highlight'));
}
};
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.container {
height: 200px;
width: 200px;
}
.svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.circles {
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
display: inline-block;
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div class="container">
<svg class="svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img class="background" src="boxes.jpg" alt="">
</div>
<div class="circles">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>
You are setting "highlight" class only for products so you don't need id for what you are going to do.
you can just check if element which you clicked on has "product" class then first you remove all "highlight" classes and then add it to clicked product. If element doesn't have a "product" class then you just remove all "highlight" classes.
window.onload = function(){
document.onclick = function(e){
if(e.target.classList.contains("product")){
resetClass()
e.target.classList.add("highlight")
}else{
resetClass()
}
};
};
function resetClass(){
document.querySelectorAll(".highlight").forEach(item => {
item.classList.remove("highlight")
})
}
My code works just fine but for some reason when you click on the play button it takes a bit longer to switch over to the pause sign, and occasionally it takes a bit longer for the pause button to go to the play button. I also have one more question, when you click on the rain and beach icon there's a blue square border that I didn't remember putting, how do you remove it?
Thanks, Love2code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
.sound-picker:focus{
outline: none;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song =>{
if(song.paused){
song.play();
video.play();
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
}else{
song.pause();
video.pause();
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
}
}
};
app();
</script>
</html>
Because your SVGs are remotely sourced, it takes a bit of time to download them. I've created two hidden images with the remote sources. This will download these and have them ready in your cash for when you need them. I've also changed the sequence of when you switch the source path to come before you play the video.
I've set all elements to have an outline of none to take away the blue border when clicking on the image.
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song => {
if (song.paused) {
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
song.play();
video.play();
} else {
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
song.pause();
video.pause();
}
}
};
app();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.app {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.time-select,
.sound-picker,
.player-container {
height: 80%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.player-container {
position: relative;
}
.player-container svg {
position: absolute;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
color: white;
font-size: 50px;
}
video {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
z-index: -10;
}
.time-select button,
.sound-picker button {
color: white;
width: 30%;
height: 10%;
background: none;
border: 2px solid white;
cursor: pointer;
border-radius: 5px;
font-size: 20px;
transition: all 0.5s ease;
}
.time-select button:hover {
color: black;
background: white;
}
.sound-picker button {
border: none;
height: 120px;
width: 120px;
border-radius: 50%;
}
.sound-picker button:nth-child(1) {
background: #4972a1;
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker:focus {
outline: none;
}
<img src="https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1" style="display:none;">
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" style="display:none;">
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1" data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
My element "#splashlogo" doesn't seem to want to centre in the body of my document.I have tried positions; absolute, relative, fixed etc. I'm not sure what is happening.
It may be something to do with other parts of my code...?
My HTML:
<html><head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/splashscreenstyle.css">
</head>
<body>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//hiding initially
$('.scene').hide();
//Fade In and delay 2.5 sec then Fade Out
$('.splashscreenlogo').hide().fadeIn(function() {
$(this).delay(2500).fadeOut(function() {
//Fade In and delay 3 sec then Fade Out
$('.scene').fadeIn(function() {
$(this).delay(15000).fadeOut(function() {
//Redirect to any location
window.location = 'index.html';
});
});
});
});
});
window.onload = function() {
Animate(1);
Animate(2);
}
function Animate(number) {
var line = document.getElementById('movingLine' + number);
var lineLength = line.getTotalLength().toString();
var lineAnim = document.getElementById('lineAnim' + number);
line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
lineAnim.setAttributeNS(null, 'from', lineLength);
lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}
function fade(number) {
var line = document.getElementById('movingLine' + number);
var animation = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
animation.setAttributeNS(null, 'attributeName', 'opacity');
animation.setAttributeNS(null, 'to', 0);
animation.setAttributeNS(null, 'dur', 3.25);
animation.setAttributeNS(null, 'begin', 10);
animation.setAttributeNS(null, 'fill', 'freeze');
line.appendChild(animation);
}
</script>
<h4></h4>
<div class="scene" style="display: none;">
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<div class="splashscreenlogo" style="display: block;">
</div>
<div class="canvas_container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<g>
<path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim1" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="9.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
<g>
<path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim2" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="10.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
</svg>
</div>
<div id="splashlogo">
<img src="logo_splashscreen.png" alt="Splashscreen logo">
</div></body></html>
My CSS:
/* Demo Styles */
html {
height: 100%;
min-height: 100%;
overflow: hidden;
}
html body {
background: url("Splashscreen.png") no-repeat;
background-size: 100%;
font: 14px/21px Monaco, sans-serif;
color: none;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
height: 100%;
min-height: 100%;
}
html body a, html body a:visited {
text-decoration: none;
color: #FFffF;
}
html body h4 {
margin: 0;
color: #666;
}
.scene {
width: 100%;
height: 100%;
-webkit-perspective: 600;
perspective: 600;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.scene svg {
width: 240px;
height: 240px;
}
.splashscreenlogo{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
/* height: 100%; */
}
#splashlogo{
position: absolute;
background-position: 50%;
/* top: 50%; */
/* width: 100%; */
/* height: 100%; */
}
.canvas_container{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.white-line {
fill: none;
stroke: white;
stroke-width: 5%;
}
Any help would be awesome!
I doesn’t know how to do the following with jQuery.
I have created a page hero with two sections (red/black):
What I want is, when hovering over the black one for example, it will expand over the red section, so you get a full black box. The same result I want of course for the red section:
How should I make this work?
var redSection = $('#red');
var blackSection = $('#black');
redSection.on('mouseover', function() {
// Do something - overlay the other section
});
The HTML markup is as follow:
<section id="hero">
<figure id="urbandesign">
<a href=“#" target="_blank">
<img src="images/urbandesign.jpg" alt="Urban Design">
</a>
</figure><!-- End figure -->
<figure id="photography">
<a href=“#" target="_blank">
<img src="images/photography.jpg" alt="Photography">
</a>
</figure><!-- End figure -->
</section><!-- End section#hero -->
And the CSS:
#hero {
height: 480px; /* Default 500px */
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
background: url(../images/hero.jpg) no-repeat center; /* remove */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#hero figure {
position: absolute;
top: 0;
background: #FFF;
}
#hero img {
width: 100%;
max-width: none;
position: relative;
opacity: 0.4;
}
The final result I want to replace the red and black section with images.
Look out to your response! Thank you.
A mix of CSS3 and jQuery with Graceful Degradation should sort this.
CSS
.page {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
}
.black {
background:#000;
width:50%;
height:100%;
position:absolute;
width:100%;
left:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
z-index:1;
}
.red {
background:#ff0000;
width:50%;
height:100%;
position:absolute;
width:100%;
right:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
}
.red:hover {
transform:skew(0);
transform:translate(-50%,0);
}
.black:hover {
transform:skew(0);
transform:translate(50%,0);
}
.inactive {
z-index:-1
}
HTML
<div class="page">
<div class="black"></div>
<div class="red"></div>
</div>
jQuery
The jQuery is necessary to fix a z-index problem with the last element in the DOM tree that ruins the fluid animation.
$(document).ready(function(){
$('.black').hover(function(){
$('.red').addClass('inactive');
},function(){
$('.red').removeClass('inactive');
});
$('.red').hover(function(){
$('.black').addClass('inactive');
},function(){
$('.black').removeClass('inactive');
});
});
Be aware that adding any content to the two divs you will have to add an inner div and reset the skew with 'transform:skew(-30deg,0);'. The prefixed versions of transition and transform will also need adding.
JSFiddle Reference
You could do this using svg's path for the shape, pattern for the image and a little bit of JavaScript for handling the mouseover and mouseleave events.
var hero = document.getElementById('hero');
var animLeft = document.getElementById('anim-left');
var animRight = document.getElementById('anim-right');
hero.addEventListener('mouseover', function(e) {
(e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement();
})
hero.addEventListener('mouseleave', function(e) {
(e.target.id == 'left') ? animRight.endElement() : animLeft.endElement();
})
<svg id="hero" width="600" height="200" viewBox="0 0 600 200">
<defs>
<pattern id="image-left" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/40000c/000" width="600" height="200" />
</pattern>
<pattern id="image-right" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/002a33/fff" width="600" height="200" />
</pattern>
</defs>
<a xlink:href="#">
<path id="right" d="M0,0 h600 v200 h-600z" fill="url(#image-right)" />
</a>
<a xlink:href="#">
<path id="left" d="M0,0 h350 l-100,200 h-250z" fill="url(#image-left)" />
<animate id="anim-left" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h0 l-100,200 h0z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
<animate id="anim-right" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h700 l-100,200 h-600z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
</a>
</svg>
A simple CSS only solution with no additional re-paints, etc.:
.parent {
overflow: hidden;
position: absolute;
width: 90%;
height: 90%;
}
.item {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: transform 1s, z-index 1s;
z-index: 1;
overflow: hidden;
}
.item .image {
transition: transform 1s;
}
.item:hover {
transform: translate3d(0px, 0px, 0px);
z-index: 100;
}
.item:hover .image {
transform: skewX(0deg);
}
.red {
background: #f00;
transform: translate3d(-50%, 0px, 0px) skewX(-10deg);
}
.red .image {
transform: skewX(10deg);
}
.black {
background: #000;
transform: translate3d(50%, 0px, 0px) skewX(-10deg);
}
.black img {
transform: skewX(10deg);
}
<section class="parent">
<div class="red item">
<img class="image" src="http://placehold.it/450/ff0000/000000" />
</div>
<div class="black item">
<img class="image" src="http://placehold.it/450/000000/ffffff" />
</div>
</section>