This question already has answers here:
How To Get Font Size in HTML
(9 answers)
Closed 1 year ago.
I want to address to font-size to change the size of a ball when pressing keys, but in switch the program sees only size (instead of font-size) after a hyphen.
Task: Create a page that displays a balloon (using emoji https://emojipedia.org/balloon/). When you click the up arrow, the ball should inflate (increase) by 10 percent, and when you click the down arrow, it should inflate (decrease) by 10 percent.
Then finish the program as follows, if the ball is inflated to a certain size, it will explode. That is, you need to replace the emoji of the ball (balloon) with the emoji of the explosion (https://emojipedia.org/collision-symbol/). You need to remove the event handler (the explosion cannot be inflated or inflated)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
</style>
</head>
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
<div class = "two" id="second">💥</div>
</div>
<script>
function moveRect(e){
var blueRect = document.getElementById("blueRect");
var cs = window.getComputedStyle(blueRect);
var size = parseInt(cs.style.fontSize);
switch(e.key)
{
case "ArrowUp":
blueRect.style.fontSize = size + 10 + "px"; /*setSize(size+10px)*/
break;
case "ArrowDown":
blueRect.style.fontSize = size - 10 + "px";
break;
}
}
addEventListener("keydown", moveRect);
if (size > 50px){
one.style.visibility = hidden;
two.style.visibility = visible;
}
</script>
</body>
</html>
You can use below codes with adding up your own functionality , below code is just to reference , make it use and develop accordingly based on your needs.Hope this may help. Codepen Demo.
var blueRect = document.getElementById("blueRect");
var size_val = window.getComputedStyle(blueRect,null).getPropertyValue("font-size");
var size = parseInt(size_val);
function moveRect(event){
//alert(event.type);
switch(event.type)
{
case "click":
var newSize = (size + 10);
size = newSize;
blueRect.style.fontSize = newSize +"px"; /*setSize(size+10px)*/
break;
}
}
blueRect.addEventListener("click", moveRect); // Put your arrowup and arrowdown similar to this here blueRect act as up similarly do it for down
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
</div>
</body>
Related
I want to set the animation of the element while scrolling down the page. I want to use only JavaScript to achieve that.
I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.
The problem is, when I load the page, there is no animation (That's good). When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.
Here is my full code for this part:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
});
</script>
<body>
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
I'm learning JS so it's important to me to not use any libraries :P
Thanks a lot
I modified your code a bit. You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.
window.onscroll = function() {
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
}
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
Also, your syntax for defining keyframe was incorrect. It is
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
And not
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
I'm starting my journey in creating webpages. I crave something to try to imitate windows 10 start UI as well as there animation on browser. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
#font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
JavaScript
function slideShow() {
setInterval( function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}
Use slideShow(); at the end of your javascript code.
Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.
Hi Please check this code now working you define the wrong semicolon symbol the next++; and element id is wrong in js wrong i have fixed this issue check now this code.
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<style>
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
</style>
<script type="text/javascript" >
function slideShow() {
var next = 0;
setInterval( function show(){
if (next == 0) {
animate();
next++;
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('savDesc').style.marginTop = "-2%";
document.getElementById('savDesc1').style.marginTop = "25%";
document.getElementById('savDesc1').style.opacity = "1";
document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('savDesc').style.marginTop = "17%";
// document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('savDesc1').style.opacity = "0";
document.getElementById('savDesc').style.opacity = "1";
}
</script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
For the setInterval function in slideShow(), put either
setInterval('animate()', 1000);
Or
setInterval(animate, 1000);
how to repeat a div X times over html page,
lets say I want to set variance to declare times of repeat.
repeat this section 5 times, I assume it's with JS.
<div class="blackstrip">black</div>
<div class="bluestrip">
BLUE
<div class="whitestrip">WHITE strip</div>
</div>
I'm adding the css as it comes out strange look -
.blackstrip{
opacity: 0.8;
width: 600px;
height: 100px;
background-color: black;
background-position: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;
}
.bluestrip{
opacity: 0.5;
width: 600px;
height: 300px;
background-color: blue;
background-repeat: none;
padding-bottom: 10px;
position: relative;
margin-top:50px;
margin: 20px auto;
}
.whitestrip{
opacity: 0.8;
width: 100px;
height:300px;
background-color: gray;
position: relative;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
Just use a for loop eg:
var amount = 5;
for (var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "bluestrip";
document.body.appendChild(new_div);
console.log("This is repeat " + i);
}
Simple technic, huh?
https://jsfiddle.net/d15e9r6z/
Like Andreas said, it is more effective if you use
DocumentFragment to change multiple DOM's.
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
We're trying to make a lightbox responsive
Here's the original CSS:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }
Which has been edited into:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; height: auto !important; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em; }
#mageworxImageContainer{ padding: 10px; height: auto !important; }
but the close button isn't working anymore on devices such as iPhones and I can't understand why; also in landscape mode the image is not resizing correctly.
This is our page:
http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
(to see the lightbox choose "modello letto" on dropdown and any image clicked in there will work)
Add this css to your stylesheet. Some elements have clashing layers, which causes the button to be "under" a layer so you are not clicking on a button but on some invisible layer.
#mageworxImageDataContainer{
...
position: relative;
}
device.iphone = function () {
return !device.windows() && find('iphone');
};
if (device.ios()) {
if (device.ipad()) {
addClass("ios ipad tablet");
} else if (device.iphone()) {
addClass("ios iphone mobile");
} else if (device.ipod()) {
addClass("ios ipod mobile");
}
}