Mobile header issue on iphone when scroll up - javascript

On my website, I have added the fixed position to the header, and its working fine in desktop version and android os phones. but in iPhone when the user scrolls down it works fine but as fast the user starts to scroll up an unknown part of the div appears in the back of the header and it overlaps all the content on the website. I have tried to find that part of div but it's not working. please help.
here is my header code:
#header.header-fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 9997;
background: rgba(0, 0, 0, 0.98);
height: 70px;
padding: 15px 0 0;
transition: all 0.5s;
border-bottom: 2px solid #13aafe;
}

Related

How to lock sidebar menu hidden when refresh page

I have a sidebar menu that has been successfully hidden and shown. When the sidebar menu is hidden and I refresh the page or browser, the hidden sidebar menu will return to its original appearance, not in the position when it was hidden. The question is how to lock so that the sidebar menu display remains in a hidden position. I've tried several times using javascript but it still fails. Please help thank you.
.sidebar {
height: 100%;
width: 250px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: var(--sidebar-color);
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all 0.5s ease;
overflow-y: auto;
/* hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
}
.sidebar.expand {
width: 65px;
}
var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");
btnToggle.onclick = function() {
sidebar.classList.toggle("expand");
}
If you want it to be persistent, you need to use localStorage to store the state of the sidebar. Then, when the page reloads, you can read the state from localStorage, and set the class to the sidebar accordingly.
Untested code below:
var btnToggle = document.querySelector("#btnToggle");
var sidebar = document.querySelector(".sidebar");
// When the page loads, use localStorage to set the initial class
if(localStorage.getItem("expand") && localStorage.getItem("expand") == "true"){
sidebar.classList.add("expand");
}
btnToggle.onclick = function() {
sidebar.classList.toggle("expand");
localStorage.setItem("expand", sidebar.classList.contains("expand"));
}
I created a minimal code pen to illustrate how it works. I also included the slide-in-out animation you mentioned in the comments.

Android - bottom bar covering webpage

I am working on a webpage that will be accessed by both Desktop browsers and mobile browsers.
On most mobile browsers the layout is already correctly positioned at the bottom of the screen, but on some devices (mostly Motorola ones) the toolbar at the bottom covers part of my layout.
How can I detect that I am on a phone with a toolbar like that, so I can use an appropriate margin-bottom to raise my layout above it?
EDIT:
Here is a sample of the CSS I'm using the part of the layout that must stick to the bottom. Maybe this will help.
element.style {
top: auto;
bottom: 0px;
max-height: 433px;
display: block;
}
#media (max-width: 425px) and (min-width: 0px)
screen.css:589
#wrap.dock {
width: 100%;
}
#wrap.dock {
box-shadow: 0px 25px 10px 0px rgba(0, 0, 0, 0.5);
height: 411px;
overflow: visible !important;
position: fixed;
right: 0;
z-index: 50;
}

Modal window causing alignment issues (possibly due to OnePageScroll.js)

SOLUTION:
All I had to do was change section-center alignment that was causing page overflow.
Problem
When I open the modal windows (overlaying window, like what sites use to ask you to sign up for a newsletter before you leave) on the first page, they all work just fine. When I scroll down and open a modal window on the second or third page, it breaks the alignment of elements behind the modal window.
Pics
As you can see in the first picture, it works just fine on the first page. The issue occurs on pages two and three, and it appears to be something happening to the alignment of the background elements.
Relevant Code
My HTML:
<!-- Modal window -->
<div id="open-csci-modal" class="modal-bg">
<div class="modal-content">
<a href="#close" title="Close" class="close">
<img src="img/exit-icon.png"></a>
<h2>Computer Science Major</h2>
<p>Paragraph about what I've learned in school.</p>
</div>
</div>
My CSS:
section {
height: 100vh;
background-size: cover;
}
.modal-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modal-bg:target {
opacity:1;
pointer-events: auto;
}
.modal-bg > div {
width: 800px;
height: 410px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: rgba(112, 156, 250, 0.75);
}
Links
OnePageScroll.js source code (GitHub repo)
My portfolio source code in its entirety (GitHub repo)
Thanks so much in advance. I've been struggling to find the cause of this for some time now.

Magnific popup transparent png as grey

I am facing problem with magnific popup - when transparent PNG opens, the transparent parts are grey. I have searched for solution but without success. While changing img.mfp img background color to white it changes but it shows the white color and that is not good for me. I need to have it just like the whole background - black with opacity 0.01 (if I am not mistaken)...I did not changed any relevant code in CSS or JS related to Magnific popup.
Can anyone help? Thanks in forward
to add a white background under the popup image I use this code
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: rgba(255, 255, 255, 1); /* white background */
}

Problems with position:fixed and responsive / adaptive Layout

First look at this website: http://irismediainfo2.lili.de/spip.php?article4924
On my screen it looks like on this screenshot: chrome - full window - desktop resolution: 1440x900
I think for most of you it will look diferent but thats part of the problem...
The main div with the gray border is inside an other div with id="page".
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative;
}
I created a new div with id="toolbar", that looks like it sticks to this #page-div, but it does not scroll with the page. On the website I linked above u can see the #toolbar as a dummy-box (grey with some Text).
At the moment the I use position:fixed in #toolbar.
When I position it at the side of #page so that it LOOKS like it is attached to it, and I resize the browser window... the two divs dont move the same way because the position of #page is calculated from the middle (by margin:auto) and the position of #toolbar is calculated from the side of the browser window (by position:fixed). So it is not attatched anymore in any other windowsizes.
I tried to make the #page float, to make the #toolbar appear at the side but that destroys the "margin:auto" of the #page so it is not centered anymore.
I also tried
#toolbar {
position: fixed;
center: 0px; }
Because I hoped there could be a way to calculate the position for position:fixed from the center.
Nothing worked, I hope you know a solution.
Actually everything I want is something like:
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative; }
#toolbar {
position: fixed;
center: 0px 280px 0px 0px; }
I would like to do this with minimal code and resources because I don't want to make the loading speed worse because of a little toolbar.
If you need more specific code from my css or html please tell me.
I hope the target and the problem is clear.
All you need is a wrapper-div that centers the whole block and algin the toolbar after that, since your #page has a fixed width in every viewport.
HTML:
<div class="wrapper">
<div id="toolbar">
content
</div>
</div>
CSS:
#toolbar {
height: auto;
padding: 10px 20px 10px 15px;
background-color: rgba(170, 170, 170, 0.5);
border: 1px solid #AAA;
border-radius: 0px 5px 5px 0px;
text-align: center;
margin: 0px auto 0px 279px;
}
.wrapper {
position: fixed;
top: 30%;
left: 50%;
}

Categories

Resources