I am making a website and I want it to be completely mobile responsive. I thought I had achieved that with the header until I had a look at it with my ipad. The "Trasnform: translateX(-100%);" statement works on everything except IOS devices I tried it on my android phone and it worked perfectly. I have tried plenty of things including using prefixes like -webkit- and using the "!important" statement. I have been searching around the web but I can't find anything that solves my problem. Here's the code.
HTML
<!DOCTYPE html>
<h<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="js/header.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="wrapper">
<div class="menu-icon">
<div class="line first"></div>
<div class="line second"></div>
<div class="line third"></div>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Forums</li>
<li>About Us</li>
<li>Role Finder</li>
<li>ORBAT</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="featured">
<h1 class="devMode"> Development Mode</h1>
<p class="devModeText">Our 100% mobile friendly website is still under development. If you would like to provide feedback or suggestion please post them here, anything is helpful!</p>
</div>
</div>
</body>
</html>
CSS
#media screen and (max-width: 810px) {
/*header*/
.nav {
margin: 15px -40px ;
background-color: #3f3f3f;
transform: translateX(-100%);
transition: 0.6s ease;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
}
.menu-icon {
position: relative;
margin-left: 10px;
display: block;
height: 54px;
width: 54px;
background-color: #2a2a2a;
/*border: 0.75px solid #000;*/
border-radius: 50%;
}
.line {
width: 38px;
height: 2px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.logo {
float: right;
}
.nav ul li {
list-style: none;
display: block;
padding: 10px 120px 10px 30px;
}
.open {
transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
.first {
position: relative;
top: 15px;
margin: auto;
}
.second {
position: relative;
top: 20px;
margin: auto;
}
.third {
position: relative;
top: 25px;
margin: auto;
}
/*end of header*/
.container {
margin: 0 10px 0 10px;
}
}
JS
$(function() {
$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});
});
UPDATE: My website was actually cached so opted into development mode with Cloudflare and turns out both methods work. Thank you so much to everybody who responded so quickly unlike me.
While you shouldn't have to, you might want to try translate3d(x,y,z) instead of translateX(x). For example:
-webkit-transform: translate3d(-100%,0,0);
Reasoning is taken from this GitHub issue
I just spoke to one of the engineers at Apple regarding this. He confirmed that both 2d and 3d transformations are hardware accelerated when using CSS3 transitions and keyframe animations. We shouldn't have to change anything.
He did clarify that when NOT using transitions and keyframes to animate, that 2d transformed elements are not accelerated to save memory. But, in our case, our transitions always use keyframe animation.
Related
I'm working on a project for computer science where I have to make a website. For this, me and my partner wanted a modal with information about us. One of the requirements is that we make the site work on different platforms. This is where the problem lies. Opening the modal on my phone while having the phone standing up works fine, but when transitioning to landscape it breaks and it does not return to normal when I turn it back.
Here is a snippet of the html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Machine Learning</title>
<script src="scripts/embedHTML.js"></script>
<script src="scripts/popUp.js"></script>
<script src="scripts/underline.js"></script>
<script src="scripts/modal.js"></script>
<link rel="stylesheet" href="stylesheets/main.css" />
<link rel="stylesheet" href="stylesheets/about-us.css" />
<link rel="stylesheet" href="stylesheets/popup.css" />
<link rel="stylesheet" href="stylesheets/modal.css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img id="logo" src="images/logo.png" alt="logo image"></img>
<h1 id="title">Machine Learning</h1>
</header>
<article id="about-tijmen" class="modal-data" embed-html="pages/Tijmen.html"></article>
<article id="about-marijn" class="modal-data" embed-html="pages/Marijn.html"></article>
<div id="glass-pane" class="glass-pane"></div>
<article id="modal" class="modal">
<button id="closeModalButton" onclick="toggleModal()">x</button>
<article id="modal-dialogue"></article>
</article>
<script>
embedHTML();
</script>
</body>
</html>
The CSS:
.modal-data
{
display: none;
}
.modal {
pointer-events: none;
opacity: 0;
position: fixed;
z-index: 1000;
background: red;
border-radius: 20px;
border: 2px solid black;
margin-top: 0px;
padding-bottom: 20px;
left: 50%;
top: 50%;
transition: opacity .25s linear, display .25s linear;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
box-shadow: 0 0 100px 10px black inset;
width: 80vw;
}
.modal.open
{
pointer-events: all;
opacity: 100;
}
.glass-pane
{
pointer-events: none;
transition: opacity .25s linear;
background: rgba(0, 102, 255, 0.5);
z-index: 110;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
}
.glass-pane.shown
{
pointer-events: all;
opacity: 1;
}
#closeModalButton {
position: absolute;
top: 0;
right: 0;
width: 40px;
line-height: 20px;
margin: 0;
border: 2px solid black;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-left-radius: 20px;
cursor: pointer;
font-size: 15px;
}
#modal-dialogue p {
color: rgb(250, 232, 235);
width: 90%;
margin: auto;
margin-top: 2%;
}
ol{
color: rgb(250, 232, 235);
display: table;
margin: 0 auto;
}
The javascript:
function toggleModal()
{
let modal = document.getElementById("modal");
let glass = document.getElementById("glass-pane")
if(modal.classList.contains("open"))
{
modal.classList.remove("open");
glass.classList.remove("shown");
}
else
{
modal.classList.add("open");
glass.classList.add("shown");
}
}
function setModalContent(id)
{
let dialogue = document.getElementById("modal-dialogue");
let data = document.getElementById(id);
dialogue.innerHTML = data.innerHTML;
}
and, of course, a video showing the problem.
https://youtu.be/s3bsN72-qYE
You can add css max-height and overflow-y to your modal content to give the content a scrollbar inside the modal and ensure the modal doesn't go outside the page.
This may need an #media query, eg
article {
overflow-y: auto;
}
#media screen (height:300px) {
article {
max-height: 200px;
}
}
#media screen (height:600px) {
article {
max-height: 400px;
}
}
or may be set better using relative height such as % or vh (reference)
article {
max-height: 75vh;
overflow-y: auto;
}
I need some help with my code. I have a smooth transition that changes the colour of a password fields border when it is focussed. However, when I switch to and from a different tab after the colour change, it replays the transition even if the field is still focussed.
What I want is for the transition to play once and stay the different border colour until clicked off. I put some of my code here for easy viewing: https://jsfiddle.net/b38z4ma2/. Here you can replicate my issue.
focus(click) on the input field
see the transition
switch browser tab and back again
the transition will re play. <- I do not want this part!
Also here is the plain code
:root {
--darkdark-gray: #222428;
--dark-gray: #2F3136;
--mid-gray: #36393F;
--light-gray: #888C91;
--blurple: #7289DA;
--blurple-shade: #677BC4;
--whiteish: #DCDDDE;
--white: #FFFFFF;
--shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}
body {
background-color: var(--dark-gray);
}
#container {
background-color: var(--mid-gray);
border-radius: 10px;
width: 900px;
height: 500px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: var(--shadow);
}
input {
width: 750px;
height: 50px;
transform: translate(50px, 50px);
background-color: var(--dark-gray);
border: 2px solid var(--darkdark-gray);
border-radius: 6px;
outline: none;
padding: 0 20px;
font-size: 24px;
color: var(--whiteish);
letter-spacing: 5px;
font-family: Whitney, sans-serif;
}
input:focus {
border-color: var(--blurple);
transition: border 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="password-container">
<label>
<input type="password">
</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Perhaps there is a javascript solution? Please no jQuery! Thanks to anyone that can help, this may seem a small issue but it is really bugging me.
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"
I'm building an WIP placeholder page for myself and I'm stuck with centering the media content with CSS. I managed to get it to work on mobile but the content is slightly to the right on desktop.
UPDATE:
I've added the entire code along with the CSS I selected to support it. As you can tell, the .display section of the CSS is where I'm having the most trouble (assuming I've troubleshot this right). From what I've been told here & read elsewhere, the tags I initially tried in HTML don't apply to HTML5 so I'm hoping to get CSS to finish it off. Like I mentioned before, when previewing on mobile, it works fine and the links at the bottom of the page stack nicely but it all falls apart in full desktop.
Here's the code below:
#charset "utf-8";
/* CSS Document */
.content {
max-width: 500px;
margin: auto;
}
.display{
position:relative;
display: block;
padding: 0;
margin:0 auto;
width: auto;
text-align:center;
display:flex;
justify-content:center;
}
.button {
background-color: #FFFFFF;
border: #000000;
border-bottom-width: 2px;
text-decoration-color: #FFFFFF;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.help-block.with-errors {
color: #ff0000;
margin-top: 5px;
}
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.8);
z-index:100;
color:white;
display: none;
font-family: 'source_sans_proregular';
line-height: 25px;
-webkit-text-size-adjust:none;
text-size-adjust:none;
}
.container {
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}
.container td {
vertical-align: middle;
text-align: center;
}
.centerAlign {
text-align: center;
}
.margin2x {
margin-bottom: 24px;
}
.margin1x {
margin-bottom: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mAdjetey is getting an upgrade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="index_files/mine.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="index_files/favicon.png">
</head>
<a name="tepin"></a>
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
<div class="display">
<div class="w3-topbar">
<img src="index_files/icon_email.png" alt="Email">
</div>
</div>
<div class="display" align="center">
Back to top of page
</div>
</html>
theres several ways but in this example I'm applying "display: block" to the image so that it can use the margin property.
/* CSS */
.display img {
display: block;
padding: 0;
/* maybe some top margin too? margin: 30% auto 0 */
margin: 0 auto;
width: auto;
}
<!-- HTML -->
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
The align attribute is not supported in HTML5. Use CSS instead.
.className{
text-align:center
}
Or you can always use display flex
.className{
display:flex;
justify-content:center
}
I've been given a design with a 90 degree rotated menu with dropdowns in it. Of course, I've got it working in every browser except IE8 (we aren't going to optimize for anything lower).
This is the staging site: http://williamsandports.com/wp/
The #navbar element itself rotates fine using
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Using the awesome built-in IE "developer tools" I have found that the outermost ul which is #menu-main-menu is still un-rotated and hanging at the top of the screen so the dropdown elements aren't able to be interacted with properly.
Suggestions anyone? I'll take ANY fix, css, js, whatever to get this one finished up except static images of course :) You can view the same site in FF or Chrome to see what the finished solution should look like.
You can't use transform in IE8. You can find out more: http://caniuse.com/#search=transform.
If you want rotate such as your site. You can use static images and css sprites for IE8. This is demo, I fix for IE 8 solution rotate.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solution rotate in IE8</title>
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="nav-bar">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Our Process</li>
<li>Client List</li>
<li>Consultation</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
CSS
- stylesheet.css: Use -webkit-transform: ratate(90deg)
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.container {
width: 900px;
margin-left: auto;
margin-right: auto; }
.nav-bar {
width: 100%;
position: relative; }
.nav-bar:before, .nav-bar:after {
content: "";
display: table; }
.nav-bar:after {
clear: both; }
.nav-bar {
*zoom: 1; }
.navigation {
background-color: #f2f2f2;
padding: 10px;
width: 100%;
position: absolute;
left: 40px;
top: 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 0 0; }
.navigation li {
display: inline-block; }
.navigation a {
color: #825a13;
font-weight: 700;
padding: 10px;
text-decoration: none;
text-transform: uppercase; }
- ie.css: Fix when you use IE8 (use images and css sprites)
.navigation {
background-color: transparent;
width: 40px; }
.navigation li {
display: block;
float: left; }
.navigation a {
background: url(../img/nav.png) no-repeat;
display: block;
text-indent: -9999px;
width: 40px;
height: 118px; }
.navigation a.home {
background-position: 0 0;
height: 75px; }
.navigation a.about {
background-position: 0 -86px;
height: 90px; }
.navigation a.portfolio {
background-position: 0 -187px;
height: 101px; }
.navigation a.process {
background-position: 0 -299px; }
.navigation a.client {
background-position: 0 -435px; }
.navigation a.consultation {
background-position: 0 -571px; }
.navigation a.contact {
background-position: 0 -706px; }
Images:
I test working fine in IE8. Maybe this isn't best solution but I hope it can help you use in your site.