I want to convert a CSS effect to a javascript code.
I want to automatically leave a section when the page is loaded. That is, once the board is loaded with the same effect round one div. You can go to Hover Me to see the CSS effect.
If you can not use the library, I want to see what happens in the code
Can I help you add my JavaScript / jQuery code now?
Thanks
html{
background: #080808;
}
div {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
color: #fff;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
div::before, div::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
.meet:hover {
color: #fbca67;
}
.meet::after {
top: 0;
left: 0;
}
.meet:hover::before {
border-top-color: #fbca67;
border-right-color: #fbca67;
}
.meet:hover::after {
border-bottom-color: #fbca67;
border-left-color: #fbca67;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/uikit-rtl.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script src="js/jquery.js"></script>
</head>
<body id="top">
<div onload="loading()" id="iki" class="draw meet">Hover Me</div>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</body>
</html>
Here is one solution for this,
1) Change all your :hover to .hover
2) Then add this class using JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.draw')[0].classList.add('hover');
});
Found a similar answer How to execute CSS3 animation onLoad instead of hover?
Related
Can you please tell me how to make a horizontal animation that works synchronously with the scroll?
I made a sample, but there is a drawback - the event has a start and end point, and I want to make a permanent animation:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('active');
} else {
targetTx.classList.remove('active');
}
}
window.onscroll = function() {animateTx()};
section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
transition: 0.5s;
}
h1.active {
margin-left: -50%;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>
Thank you in advance!
Use css animations:
const targetTx = document.querySelector('h1');
function animateTx() {
if (document.documentElement.scrollTop > 50) {
targetTx.classList.add('slide-anim');
} else {
targetTx.classList.remove('slide-anim');
}
}
window.onscroll = function() {animateTx()};
section {
height: 600px;
border-bottom: solid 1px #000;
overflow: hidden;
}
h1 {
display: block;
font-size: 10rem;
color: #999;
white-space: nowrap;
}
.slide-anim {
animation: slide 3s linear infinite;
}
#keyframes slide {
0% {
margin-left: 0;
}
25% {
margin-left: -50%;
}
50% {
margin-left: 0%;
}
75% {
margin-left: 50%;
}
100% {
margin-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<h1>TEST TEXT</h1>
</section>
<section></section>
</body>
</html>
I copied and adapted this toggleable switch off w3schools and the major change I made is the text that changes when toggled. How can I access the value of the text ('1x' and '2x') in my javascript file for an if statement (this can be also a console log just as an example)? I'm still new to CSS and HTML.
.switch{
position: relative;
display: inline-block;
top: 33.75%;
left: 35%;
width: 148px;
height: 37.5px;
z-index: 1;
border-width: 5px;
/* visibility: hidden; */
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10185c;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 29px;
width: 29px;
left: 4px;
bottom: 4px;
background-color: white;
color:#050A30;
font-size: 18px;
text-align: center;
content: '1x';
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1e2a82;
}
input:checked + .slider:before {
-webkit-transform: translateX(112px);
-ms-transform: translateX(112px);
transform: translateX(112px);
content: '2x';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<script src="script.js"></script>
</body>
</html>
If all you want is to read the value of the text, and not alter it, you can get the computed styles and extract the content from there. This should work for your if statment. Try this example that prints it to the console on every switch:
.switch{
position: relative;
display: inline-block;
top: 33.75%;
left: 35%;
width: 148px;
height: 37.5px;
z-index: 1;
border-width: 5px;
/* visibility: hidden; */
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10185c;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 29px;
width: 29px;
left: 4px;
bottom: 4px;
background-color: white;
color:#050A30;
font-size: 18px;
text-align: center;
content: '1x';
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1e2a82;
}
input:checked + .slider:before {
-webkit-transform: translateX(112px);
-ms-transform: translateX(112px);
transform: translateX(112px);
content: '2x';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label class="switch">
<input type="checkbox" id="checkbox">
<span class="slider"></span>
</label>
<script>
const printContent = () => {
let slider = document.querySelector('.slider')
let computedStyle = getComputedStyle(slider, ":before")
let text = computedStyle.getPropertyValue('content')
console.log(text)
}
document.getElementById("checkbox").onclick = printContent
</script>
</body>
</html>
See this post about How to get a DOM element's ::before content with JavaScript?
1x and 2x are contents of the slider:before on your CSS styles and CSS:after and :before rules aren't part of the DOM, and therefore can't be altered using JavaScript's DOM methods.
so, you should change your text toggle switch method or use "checked" status of input for an if statement.
e.g.
<script>
if (document.getElementById('input').checked) {
alert("checked");
} else {
alert("You didn't check it! ");
}
</script>
So I'm just getting into JavaScript and HTML and what not, and I'm struggling a little. I'n not quite sure how to position the hamburger menu I made to the top right of the website for desktop and for mobile.
Any help is much appreciated!
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Reminder, I am quite new and am trying to make a website for my coach to use in the future. I seem to not get the hang of css yet, and I don't believe typing right and left in position will work hahaha. So any help is much needed and apprciated!
just add position: fixed; and top: 0; right: 0 to .menu-btn:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>
You want to show the hamburger icon in a nav menu fixed at the top of the page, so there are a few things you need to change
1. Add the navmenu!
Put your menu icon into a nav element at the top of the page:
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
2. Make it fixed to the top of the page when you scroll using position:fixed and top:0:
nav.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
3. Position the div for your hamburger icon in the navbar. We use position:absolute to put it exactly where we want it in the nav bar - in this case top right
.menu-btn {
position: absolute;
top: 0;
right: 0;
/* rest of your CSS */
}
4. Prevent the navbar from overlapping the content Because the navbar is fixed, it is not part of the page flow so the other elements "ignore" it and it will overlap with them.
Therefore we need to move the content on the page down so it isn't hidden behind the navbar, We can use that using margin or padding :
body {
padding-top: 100px;
/* Rest of your CSS */
}
Handy References for Positioning: CSS Tricks and Mozilla Docs
Note: I have removed your display: flex; from the body because it messes up the layout for the content - if you keep it in, all the paragraphs are displayed in continuous lines instead of separate lines for example.
Working Snippet:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* display: flex; */
/* remove this or it will mess up your standard text display */
background: #272727;
min-height: 100vh;
position: relative;
/* make space for the navbar - the fixed nav bar is not part of the "flow" so it will overlap the content */
padding-top: 100px;
}
p {
color: white;
}
nav.navbar {
background: #444;
position: fixed;
/* means it will always be stuck to the top of the page */
top: 0;
/* places it at the top */
width: 100%;
height: 80px;
}
.menu-btn {
/* Place the element in the exact position we want - top right corner 0,0 */
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</body>
</html>
You can do it many way
generally html align from left. if you need to change alignment there is many way..
you can simply do it by adding margin-left : auto; to .menu-btn class
margin-left : auto;
There is other way do it ..
Firstly you need to remove position: relative; because one html element can't hold two position property then add code below to .menu-btn class
.menu-btn{
position: fixed;
top: 0;
right: 0;
}
I am trying to append a new child when user clicks on a button. The new child is already defined with few CSS properties. Is it possible to do so ? I have tried a few codes, the best i could do is -
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This was good uptil here but the problem is that when we click button the box is getting appended continously, i want it to append only once if the button is clicked once if twice then again and so on.. Please help me..Any help will be appreciated.
The problem is here:
animation: tweek 1s linear infinite;
The "infinite" is an attribute called animation-iteration-count. It defaults to 1, but since you have it set to infinite, it will continue to show this animation looping forever.
I have found the correct answer thanks to #iamjane who gave me the idea..
I have added timeout funtion which removes the element after a specific time..
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.
Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`
What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?
Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>