The HTML and CSS I've used to create a website are listed below. I'm currently trying to get it online, but I am having trouble running it on a mobile device. The website works without any problems on my Macbook, but when I try running it via a MAMP server on my iPhone 12, it crashes (freezing and will no longer load properly) after viewing a few pages. When my iPhone is connected to Wi-Fi, it runs as it should. It doesn't run as it should when connected to 4G, even with a good connection.
Would this have anything to do with my website being too heavy to run smoothly on a mobile device? Any advice would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body>
<style>html{visibility: hidden; opacity: 0;}</style>
<title>MORIKOBOSHI・</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About This Website</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
if(!!window.performance && window.performance.navigation.type == 2)
{
window.location.reload();
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I would like to thank everyone for their help in trying to solve this issue.
After deleting bits of CSS to see how my website runs without it I found the solution. It was the html { visibility: hidden; opacity: 0; } line of code that was preventing my website from running smoothly on the mobile version of Google Chrome. Getting rid of this line of code stopped my website from freezing.
Related
I'm a beginner in HTML, CSS, and Javascript and am currently in the process of getting a website that I built online. I'm testing it in all browsers to make sure that it works without any issues, but am noticing some issues when on a mobile browser. Specifically, I'm noticing that my website freezes and becomes unusable after viewing a few pages when trying to use it in the mobile version of Google Chrome.
Below is the code that I'm using and if I'm not mistaken I'm sure that there is a line of code inside my CSS that is making Google Chrome freeze on a mobile device. Can anyone see any line of code that should be taken out or replaced? Are there too many scripts for Google Chrome to handle on a mobile device? If anyone has any knowledge about what could possibly be causing this issue I'd really appreciate you sharing it with me.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<title>MORIKOBOSHI・</title>
</head>
<body>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">このサイトについて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Googleカスタム検索" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="検索" style="padding-left: 5px; top: 153px; height: 25px; width: 34px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | English</footer>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I can't utilize the main dropdown menu on the site I'm developing because if you move too slowly or if you mouse over text that is in the background in the child element behind it, it will vanish.
I've tried adding !important tags. I've tried looking for any gaps between elements. I've tried adjusting the z axis priority values.
.dropdown {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar:hover .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar:hover .second {
opacity: 0;
transition: all 0.5s;
}
.navbar:hover .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar:hover {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
</style>
<div class="dropdown" style="background-color:black;">
<button class="dropbtn" style="background-color:black;">
<div class="navbar">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
</body>
</html>
I'd like for the drop menu to be relatively resilient to vanishing. It's not, it's almost unusable.
Click menu now!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar.active .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar.active .second {
opacity: 0;
transition: all 0.5s;
}
.navbar.active .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar.active {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
.dropdown-content.active {
display: block;
}
</style>
<div class="dropdownzzz" style="background-color:black;">
<button class="dropbtn" style="background-color:black;" id="menu">
<div class="navbar" id="iconmenu">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content" id="there">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>
www.bluecanvasdigital.co.uk have a full screen nav menu with icons that fade in quite nicely. However I would to go in the opposite direction when the .open class is removed from the nav-container class when the user clicks the 'cross' button.
So in more detail the images fade out to the right one by one and the blue background fades up. I can only get one way to work. Is there a nice clever way to do this with vuejs2 and css?
I want to not use JS if i can and just keep this css to save code.
Here is the code:
App.vue:-
<script>
export default {
name: 'App',
data() {
return {
navIsActive: false
}
},
methods: {
toggleNav() {
this.navIsActive = !this.navIsActive
}
}
}
</script>
<template>
<div id="app">
<a href="" id="logo">
<img src="./static/img/logo.svg" alt="logo" v-bind:class="{ hide: navIsActive }">
</a>
<div class="hamburger-menu" v-on:click="toggleNav" v-bind:class="{ active: navIsActive }">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="nav-container" v-bind:class="{ open: navIsActive }">
<p v-if="!navIsActive">hello</p>
<nav>
<ul>
<li>
<img src="./static/img/github.svg" alt="Github">
Github
</li>
<li>
<img src="./static/img/behance.svg" alt="Behance">
Behance
</li>
<li>
<img src="./static/img/medium.svg" alt="Medium">
Medium
</li>
</ul>
</nav>
</div>
<div class="landing-container">
<div class="landing-title">
<h1>Stay tuned</h1>
<p class="landing-subtitle">website launching soon</p>
</div>
<vue-particles
color="#ffffff"
:particleOpacity="0.1"
linesColor="#FFF"
:particlesNumber="120"
shapeType="circle"
:particleSize="3"
:linesWidth="2"
:lineLinked="true"
:lineOpacity="0.8"
:linesDistance="150"
:moveSpeed="0.8"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</div>
</template>
<style lang="scss">
#import 'src/static/styles/_global.scss';
</style>
_nav.scss:-
[#import 'src/static/styles/_hamburger.scss';
#nav-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity .35s, visibility .35s, height .35s;
&.open {
opacity: $nav-fullscreen-opacity;
visibility: visible;
height: 100%;
background: $nav-fullscreen-bg;
transition: opacity .35s, visibility .35s, height .35s;
z-index: 101;
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
margin-bottom: 36%;
img {
height: 75%;
margin: 0;
}
&:nth-of-type(2) {
animation-delay: .4s;
}
&:nth-of-type(3) {
animation-delay: .45s;
}
&:nth-of-type(4) {
img {
margin: 0px 0px -10px 0px;
}
animation-delay: .50s;
margin-bottom: 0;
}
}
}
nav {
position: relative;
height: 100%;
top: 50%;
padding-top: 4%;
padding-bottom: 4%;
transform: translateY(-50%);
font-size: 50px;
font-weight: bold;
text-align: center;
#media (max-width: 767px) {
margin-top: 6%;
margin-bottom: 4%;
padding: none;
}
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
a {
display: block;
position: relative;
color: $nav-fullscreen-color;
font-family: 'HalisGR-Bold', Arial, sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
#media (max-width: 767px) {
font-size: 1.4rem;
}
&:hover:after,
&:focus:after,
&:active:after {
width: 100%;
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: $hamburger-link;
transition: .35s;
}
}
}
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
][1]
I've seen this thread but it doesn't work for me. (unless I was pasting suggested code in wrong place)
Basically, in Firefox, when hovering a link, the image under shifts 1px (only some of them, so please play around to catch it). Chrome, on top of that, blurs all images.
See my Codepen
When I delete
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
the problem disappears.
Is there a way to make it work without losing that line?
Full code:
HTML
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities<span>
<img src="http://witch-house.com/NEW/sensory.png"/></span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans<span>
<img src="http://witch-house.com/NEW/deshum.png"/></span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest<span>
<img src="http://witch-house.com/NEW/dagger.jpg"/></span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength<span>
<img src="http://witch-house.com/NEW/dagger.jpg" class="img4"></span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt<span>
<img src="http://witch-house.com/NEW/tftc.jpg"/></span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers<span>
<img src="http://witch-house.com/NEW/dnahx.jpg"/></span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?<span>
<img src="http://witch-house.com/NEW/robots.jpg"/></span></a>
</div>
</div>
</div>
and CSS:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
pointer-events: none;
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.hover_img a:hover span {
display: inline-block;
opacity: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a { text-decoration:none; }
img { width: 40vw; }
try with this CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
top: -50%;
left: 0;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}
and changing the way we insert the image in the html in this way
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities
<span style="background-image: url(http://witch-house.com/NEW/sensory.png)" />
</span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans
<span style="background-image: url(http://witch-house.com/NEW/deshum.png)" />
</span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt
<span style="background-image: url(http://witch-house.com/NEW/tftc.jpg)" />
</span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers
<span style="background-image: url(http://witch-house.com/NEW/dnahx.jpg)"/>
</span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?
<span style="background-image: url(http://witch-house.com/NEW/robots.jpg)"/>
</span></a>
</div>
</div>
</div>
and the CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: -50%;
height: 200%;
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}
I am Using CSS for controlling and showing POPUP on my page, everything works fine, but i want Okay button to close popup instead of close it by clicking on cross button on right top corner . is there any way for doing this in css. or what can i do alternative for this.
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 0.2s;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}
.overlay:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 9;
}
.overlay .popup {
background: #fff;
border-radius: 5px;
width: 64%;
position: fixed;
top: 25%;
left: 18%;
padding: 25px;
margin: 70px auto;
z-index: 10;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
top: -100%;
left: -100%;
}
#media screen and (max-width: 768px){
.box{
width: 70%;
}
.overlay .popup{
width: 70%;
left: 15%;
}
}
<!--popup starts-->
<div id="popup1" class="overlay">
<div class="popup">
<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
<a class="close" href="#popup1">×</a>
<div class="content">
Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?> <?php echo $middlename;?> <?php echo $surname;?></span> for registring for e-visa service.there is more text.
</div>
</div>
</div>
<!--popup end-->
.... or you could just use an anchor styled as a button
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
display:block;
border:1px solid darkblue;
text-align:center;
background: steelblue;
color:white;
border-radius:5px;
padding:5px;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/*Let's make it appear when the page loads*/
.overlay:target:before {
display: none;
}
.overlay:before {
content:"";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 9;
}
.overlay .popup {
background: #fff;
border-radius: 5px;
width: 64%;
position: fixed;
top: 0;
left: 18%;
padding: 25px;
margin: 70px auto;
z-index: 10;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.overlay:target .popup {
top: -100%;
left: -100%;
}
#media screen and (max-width: 768px){
.box{
width: 70%;
}
.overlay .popup{
width: 70%;
left: 15%;
}
}
<!--popup starts-->
<div id="popup1" class="overlay">
<div class="popup">
<h3 style="margin-bottom: 13px; text-align:center; color:red;">Your Application Id : <?php echo $appid;?></h3>
<div class="content">
Thank you <span style="text-transform:uppercase; font-weight:600;"><?php echo $firstname;?> <?php echo $middlename;?> <?php echo $surname;?></span> for registring for e-visa service.there is more text.
</div>
<a class="close" href="#popup1">OK</a>
</div>
</div>
<!--popup end-->