I just finished my website, just testing stuff in css, when i noticed that when i refresh my page for like 1 second theres a weird rectangle on the screen.
I dont have any idea what that is...
Thats how it looks like:
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-img {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1dheaD1dxyVt36DttKPFYNm9GHuGVfMYDjSOicpB2gVIk_Vq1_w");
height: 100%;
filter: blur(4px);
-webkit-filter: blur(4px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.1);
}
.date-box {
background-color: rgba(0,0,0, 0.25);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time tho</title>
<link rel="stylesheet" type="text/css" href="css/indexstyles.css">
<script type="text/javascript" src="jscript/datefw.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<div class="bg-img"></div>
<div class="date-box">
<h1 id="phms"></h1>
<p id="pdate"></p>
</div>
<a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
<script>
drawOverlay();
</script>
</body>
</html>
Thats when i reload the page(just for a split second):
I solved it myself!
I just used the function window.onload
So i rendered the box after the page was fully loaded. Simple as that :D
.date-box-hide {
display: none;
}
.date-box-show {
display: block;
background-color: rgba(0,0,0, .4);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
<body scroll="no" style="overflow: hidden">
<div class="bg-img"></div>
<div id="hide" class="date-box-hide">
<h1 id="phms"></h1>
<p id="pdate"></p>
<script>
window.onload=function()
{
document.getElementById("hide").className="date-box-show";
};
drawOverlay();
</script>
</div>
<a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
</body>
It looks like that's just the .date-box element without any content. You may try adding a min-width and min-height value to your .date-box CSS rule to make the box the size you want before the date/time is fully loaded, like so:
.date-box {
background-color: rgba(0,0,0, 0.25);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
min-width: 300px;
min-height: 200px;
}
It's a really cool looking start, you have there. Keep it up!
I guess the box is the div .date-box. Perhaps you put the content of #pdate and #phms by your JavasScript function drawOverlay(). Since then, until the function runs, those divs are empty.
To solve the problem, hide the .date-box default and show it after content has filled like below for example.
CSS
.date-box {
display: none;
}
and JS
drawOverlay()
document.querySelector('.date-box').styles.display = "block"
Related
I'm trying to create a transition between content and this is the idea for now:
I have two divs:
The first contains an image that occupies the width and height of the browser, plus a single button, these are the introduction to the web page;
The second contains the actual content of the website;
The idea is that when I click the button, the image zoom in, and after the transition I get the web page content.
My code so far:
const btnEl = document.querySelector(".btn");
const trailerContainerEl = document.querySelector(".trailer-container");
const introContainerEl = document.querySelector(".intro-container");
btnEl.addEventListener("click", () => {
trailerContainerEl.classList.remove("active");
});
btnEl.addEventListener("click", () => {
introContainerEl.classList.add("disappear");
});
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.intro-container {
width: 100%;
}
.intro-container img {
width: 100%;
height: 100vh;
object-fit: fill;
object-position: center;
}
.intro-container.disappear {
width: 200%;
height: 200%;
transition: transform 1s;
-ms-transform: scale(2.5);
/* IE 9 */
-webkit-transform: scale(2.5);
/* Safari 3-8 */
transform: scale(2.5);
display: flex;
justify-content: center;
align-items: center;
}
button.btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 15px 20px;
background: #2a78d7;
font-size: 18px;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
color: white;
text-transform: uppercase;
border: 3px solid #20323e;
text-shadow: 1px 1px 4px black;
}
.trailer-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(228, 223, 224);
opacity: 1;
transition: opacity 2s;
}
.trailer-container.active {
visibility: hidden;
opacity: 0;
}
form {
margin: 250px;
}
<body>
<div class="intro-container">
<img src="https://www.hoganbakery.com.my/wp-content/uploads/2019/09/lion-office-tower.jpg" alt="">
<button class="btn">Click to choose items</button>
</div>
<div class="trailer-container active">
<form action="" name="myForm">
<section class="first-section">
<h3>Choose Item:</h3>
<div>
<input type="number" name="bread" id="bread" placeholder="How many?">
<label for="">Bread</label>
</div>
<div>
<input type="number" name="croissant" id="croissant" placeholder="How many?">
<label for="">Croissant</label>
</div>
</section>
<section class="third-section">
<h3>Do you have account</h3>
<div>
<input type="radio" name="" id="yes">
<label for="">I have account</label>
</div>
<div>
<input type="radio" name="" id="no">
<label for="">I don't have account</label>
</div>
</section>
<section class="commands">
<input type="button" id="submit" value="Submit">
</section>
</form>
</div>
</body>
My code 'sort of' does this, but what I'm trying to achieve is a bit more complex.
I found a great video that describes my vision, here is the link, from the 21st second https://youtu.be/lRVEOoSA5EI?t=21 .
As shown in the video, I would like to have a similar transition after clicking the button: hold for a second or two, 'zoom in' in a smooth way(almost to look like it's going through the door of the image, like it enters the shop), then my content would appear.
Another problem I have with this code(that I didn't solve by now): because I have overflow:hidden on body element, and position: fixed on .trailer-container class, I can't scroll down my web page.
I hope this is not too much, I realize it is not that easy to achieve.
I'm learning JavaScript, vanilla, and this is some little project I need to make.
you need to scale, and add opacity of your image, with css animation, and start this animation and opacity when we click on it, test this code
/** style.css :*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
p{
text-align: center;
font-size: 70px;
}
#overflow-hide-transition{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
}
#img-transition {
width: 100%;
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
flex-direction: column;
}
button {
width: 250px;
height: 50px;
font-size: 30px;
}
#keyframes presentationTransition{
to{
transform: scale(5);
opacity: 0;
}
}
<!-- index.html --> :
<!DOCTYPE html>
<html lang="FR-fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body >
<p>This is the body</p>
<div id="overflow-hide-transition">
<div id="img-transition" >
test for zoom
<button id="boutton-transition"> clique</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/** script.js: */
const overflowHide = document.getElementById('overflow-hide-transition')
const imgTransition = document.getElementById('img-transition')
const buttonTransition = document.getElementById('boutton-transition')
const seconde = 3;
document.addEventListener('click', ()=>{
imgTransition.style.cssText = `animation: presentationTransition ${seconde}s linear `
setTimeout(() => {
overflowHide.style.display= "none"
}, seconde *1000);
})
I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!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>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
I have an Asp.net page
my code is as
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="fisrt_page.aspx.cs" Inherits="my_project.fisrt_page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/login_style.css" />
<title></title>
</head>
<body style="background: url(../images/demo/backgrounds/background_login.jpg);">
<form id="form1" runat="server" style="height: 100%; width: 100%;">
<......................my elements.....................>
</form>
</body>
</html>
my design looks like image below
https://plus.google.com/u/0/104984108592274133808/posts/4GdoUjboqi2?pid=6094624686097586866&oid=104984108592274133808
but I want that my design fill all the page and hide the spaces as images from my design
Sorry for my bad English
but please help me
my css was as
html, head, body, form {
height: 100%;
width: 100%;
}
.inputbox {
background: white;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #DDD inset;
color: #666;
outline: none;
height: 25px;
width: 275px;
font-size: 20px;
}
From what I can gather in your post, you are trying to do a popup, and overlay your background with either a solid or transparent color. To achieve this you can do the following:
Solid Color:
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
}
Transparent Color:
.overlay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /*dim the background*/
}
To activate this, you can change use jQuery to show the overlay:
<div class="overlay" id="overlay"></div>
<script>
$('#overlay').show();
</script>
This of course would be best if you did it in a button click or some other action.
I hope this leads you in the right direction.