This is going to be part of a module that I want to use in an educational example project, I tried to make Welcome go from left to right and up, every time I press the button, trying to control the movement with commands but it doesn't work.
Requirements:
Only use javascript (forbidden to use jquery or others).
Do not use location.reload () or window.history.go ().
Is there a solution or is it not possible?
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#keyframes move {
0% {
top: 250px; left: 0px;
}
50% {
top: 250px; left: 300px;
}
100% {
top: 20px; left: 300px;
}
}
#mh1 {
position: absolute;
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes hide {
0% {
opacity: 1;
height: 100%;
line-height: 100%;
padding: 20px;
margin-bottom: 10px;
}
75% {
opacity: 0;
height: 100%;
line-height: 100%;
padding: 20px;
margin-bottom: 10px;
}
100% {
opacity: 0;
height: 0px;
line-height: 0px;
padding: 0px;
margin-bottom: 0px;
}
}
#idesc {
padding: 20px;
margin-bottom: 10px;
animation-name: hide;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#keyframes show {
100% {
opacity: 1;
height: 0px;
line-height: 0px;
padding: 0px;
margin-bottom: 0px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#but').addEventListener('click', myfunc , false);
function myfunc(event) {
const element2 = document.querySelector('#idesc');
element2.style.animationName = 'show';
const element = document.querySelector('#int');
element.style.animationPlayState = 'initial';
element.innerHTML='<h1 id="mh1">Welcome!</h1>';
setInterval(function(){
const element2 = document.querySelector('#idesc');
element2.style.animationName = 'hide';
element2.style.animationPlayState = 'running';
}, 3000);
element2.style.animationName = "none";
element.style.animationName = "none";
element2.style.animationPlayState = 'initial';
}
});
</script>
</head>
<body>
<div id="idh">
<button id="but">hello
</button>
</div>
<div id="idesc">
<div id="int"></div>
<div id="int2"></div>
</div>
</body>
</html>
Related
I try to do this way but it does not work. How can I overlay on an image.
<div class="banner_img">
<img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px"> <br/>
</div>
Edit the code to fit your needs.
CSS & HTML:
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
.img{
display: block;
width: 100%;
height: auto;
}
.youroverlaydiv{
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .youroverlaydiv{
opacity: 1;
}
<div class="container">
<div class="banner_img">
<img src="https://images.unsplash.com/photo-1524749292158-7540c2494485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="It is a cat image" width="300px" height="200px" class="img">
<div class="youroverlaydiv">This is your overlay.</div>
</div>
</div>
I transferred my website code to my domain, but I don't know why my picture doesn't show on the right side. I placed my image beside index.html, so I used relative addressing:
On my directAdmin:
index.html:
Note to .right: background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Arman Ebrahimi</title>
<style>
*{
box-sizing: border-box;
}
body{
background-image: linear-gradient(to right, #333, #ccc);
margin: 0;
padding: 40px 60px 0 60px;
height: 100vh;
}
.container{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.left{
width: 70%;
height: 80%;
background-color: gold;
position: relative;
border-radius: 10px 0 0 0;
color: #333;
}
.country{
margin-left: 40px;
}
h1{
font-size: 50px;
font-family: "Times New Roman";
letter-spacing: 3px;
}
.description{
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right{
background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 150%;
width: 30%;
height: 80%;
background-color: #555;
position: relative;
border-radius: 0 10px 0 0;
}
.menu{
position: absolute;
top: 5%;
right: 5%;
font-size: 10px;
}
.menu > a{
display: inline-block;
padding: 5px 10px;
text-decoration: none;
color: white;
transition: 0.5s;
border-radius: 10px;
}
.menu > a:hover{
background-color: gold;
}
.dropdown{
padding: 5px 10px;
border-radius: 10px;
display: inline-block;
transition: 0.5s;
}
.dropdown:hover{
background-color: gold;
}
.dropbtn{
background-color: inherit;
border: none;
color: white;
font-size: inherit;
}
.dropdown-content{
background-color: #eee;
visibility: hidden;
position: absolute;
border-radius: 10px;
overflow: hidden;
}
.dropdown-content a{
display: block;
width: 100%;
font-size: 14px;
color: #222;
padding: 10px 40px 10px 10px;
text-decoration: none;
}
.dropdown-content a:hover{
background-color: gold;
}
.dropdown:hover .dropdown-content{
visibility: visible;
}
.footer{
width: 100%;
height: 15%;
background-color: #222;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer a{
display: inline-block;
text-decoration: none;
color: white;
}
.footer a:hover{
color: gold;
}
.footer2{
width: 100%;
height: 5%;
background-color: gold;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p class="country">Iran</p>
<div class="description">
<h1>ARMAN <br> EBRAHIMI</h1>
<p>//about me <br><br>I'm a Front-end(Reactjs) developer.
<br><br>I'm looking for a remote job. I'm from Iran-Birjand.</p>
</div>
</div>
<div class="right">
<div class="menu">
About
Blog
<div class="dropdown">
<button class="dropbtn">Resources
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
project1
project2
project3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Features
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Skills
Favorites
</div>
</div>
</div>
</div>
<div class="footer">
Instagram
Google
Linkedin
Git
</div>
<div class="footer2"></div>
</div>
</body>
</html>
This is my domain:
http://armaneebrahimi.ir/
When I use absolute addressing, the result is:
It works for me when I use the full URL:
.right{
width:300px;
height:300px;
background-image: url("https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 150%;
background-color: #555;
position: relative;
border-radius: 0 10px 0 0;
}
<div class="right"></div>
I have a simple html/css modal dialog that I close with a button and onclick event handlers in javascript. When the modal window is closed, the body of the site scrolls to the top of the screen. I need to prevent this.
Here is my code:
function modalClose() {
if (location.hash == '#log_in') {
location.hash = '';
}
}
// Handle ESC key (key code 27)
document.addEventListener('keyup', function(e) {
if (e.keyCode == 27) {
modalClose();
}
});
var modal = document.querySelector('#log_in');
// Handle click on the modal container
modal.addEventListener('click', modalClose, false);
// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click', function(e) {
e.stopPropagation();
}, false);
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
height: auto;
width: 75%;
position: relative;
margin-top: 2%;
margin-bottom: 10%;
margin-left: 10%;
margin-right: 10%;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -11px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
text-indent: 0px;
}
.close:hover {
background: navy;
}
<link href="https://thomaswurdinger.com/Store_Reboot/css/styles.css" rel="stylesheet" />
<script src="https://thomaswurdinger.com/Store_Reboot/js/js.js"></script>
<link href="https://thomaswurdinger.com/Store_Reboot/css/style.css" rel="stylesheet" />
<div id="log_in" class="modalDialog">
<div>
X
<div>Modal Contents</div>
</div>
</div>
I changed :
if (location.hash == '#log_in') {
location.hash = '';
}
to:
if (location.hash == '#log_in') {
location.hash = 'pagename.php';
}
I'm trying to keep my footer at the bottom of every page (not sticky). At the moment it is hovering in the middle of the screen.
Here is my site.
And here is the code I have at the moment -
HTML -
<footer id="footer">
<a class="right">All Rights Reserved © 1-800 Dinosaur 2014 </a>
</div>
</footer> <!-- footer --->
CSS -
#footer {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #444444;
font-family: 'Helvetica Neue',Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
height: 100px;
left: 0;
overflow: hidden;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #FFFFFF;
height: 100px;
left: 0;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a:hover {
color: #000000;
}
#footer a:active {
background: transparent;
}
#footer .last-page {
text-align: center;
What am I doing wrong?
In my experience, absolute positioning has only worked if it was only in a parent specified to have relative positioning. Try putting your footer in a div with style="position: relative;" and see if that works. It actually looks like you've included a closing div tag without an open one in your snippet.
When checking my responsive site on my laptop it's scaling nicely using percentages, but when I check it on my iPhone it adds a huge top margin to my vertical row of images. Any ideas why? The site is here http://edharrisondesign.com/pocketpictograms/
Thanks in advance!
The HTML:
<!-- Pocket
================================================== -->
<figure>
<div class="main-pocket"><img src="images/assets/pocket.png"></div>
<div class="padding"></div>
</figure>
<!-- Icons
================================================== -->
<div class="inside-pocket">
<div class="icon-container">
<img class="pictogram" src="images/pocket-pics/pencil.png">
<img class="pictogram" src="images/pocket-pics/iphone.png">
<img class="pictogram" src="images/pocket-pics/earphones.png">
<img class="pictogram" src="images/pocket-pics/camera.png">
<img class="pictogram" src="images/pocket-pics/film.png">
<img class="pictogram" src="images/pocket-pics/scalpol.png">
<img class="pictogram" src="images/pocket-pics/paintbrush.png">
<img class="pictogram" src="images/pocket-pics/fineliner1.png">
<img class="pictogram" src="images/pocket-pics/fineliner2.png">
<img class="pictogram" src="images/pocket-pics/notepad.png">
<img class="pictogram" src="images/pocket-pics/mouse.png">
<img class="pictogram" src="images/pocket-pics/glasses.png">
<img class="pictogram" src="images/pocket-pics/lighter.png">
<img class="pictogram" src="images/pocket-pics/pipe.png">
<img class="pictogram" src="images/pocket-pics/flask.png">
<img class="pictogram" src="images/pocket-pics/matches.png">
<img class="pictogram" src="images/pocket-pics/watch.png">
<img class="pictogram" src="images/pocket-pics/pocket-watch.png">
<img class="pictogram" src="images/pocket-pics/key.png">
<img class="pictogram" src="images/pocket-pics/car-key.png">
</div>
</div>
The CSS:
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
top: 37%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}
Okay I know where I was going wrong - I should have been setting the top margin to the .inside-pocket class rather than the .icon-container class. The markup is here:
/* #Pocket
================================================== */
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
top: 37%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}
If anyone could let me know WHY this is correct it would be great! Cheers