I have set up a nice little slider using the following CSS:
/*SLIDER
===================================
*/
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: auto;
min-height: 1200px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: auto;
visibility: hidden;
}
#full-slider .slide-panel.active {
visibility: visible;
}
#full-slider-nav-left
{
position: fixed; top: 550px; width: auto; margin: auto 0 auto auto;
left: 0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-right {
position: fixed; top: 550px; width: auto; margin: auto auto auto 0;
right:0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-left {
border-right-color: #BBB;
}
#full-slider-nav-left:hover {
border-right-color: #999;
}
#full-slider-nav-right {
border-left-color: #BBB;
}
#full-slider-nav-right:hover {
border-left-color: #999;
}
As you can see, I have set the navigation arrows on either side of the container. They remain fixed as I scroll up and down the page. I'm using the responsive Skeleton framework and when I collapse the browser down to mobile size, the arrows work fine. The arrows also work fine on the android platform. However, when I attempt to browse the website on an iPhone, the arrows jump around as I scroll and then disappear.
From what I have read, iPhones have had problems with position:fixed in the past, however this was supposedly resolved with iOS 5.
Unfortunately I don't have a live version of the site to demonstrate the issue.
Any help would be greatly appreciated.
Related
My accordions are built with a wrapper to style the accordion. When the accordion is opened by clicking on the .accordion__outer, because the .accordion__inner (body copy) is also in the .accordion__wrapper, clicking anywhere in the body copy closes the accordion. Is there an easy fix, without redesigning how the accordion operates?
.accordion__wrapper {
width: 100%;
padding: 2.5%;
background: var(--white);
color: var(--primary-blue);
cursor: pointer;
z-index: 10;
position: relative;
}
.accordion__wrapper:nth-child(even) {
background: var(--gray);
}
.accordion__wrapper .accordion__outer {
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion__wrapper .accordion__inner {
display: none;
}
.accordion__wrapper.show .accordion__inner {
display: block;
color: var(--black);
border-top: 1px solid rgba(0, 0, 0, .25);
margin: 15px 0 0 0;
padding-top: 15px;
}
I'd like to achieve the following layout, in Ionic Vue, ideally using native components. Below is just a schema of what I want and I'm mostly interested in the desktop behavior:
Vue.createApp({
data: () => ({
isLeftOpen: false,
isRightOpen: false
}),
methods: {
toggleSidebar(side) {
this[`is${side}Open`] = !this[`is${side}Open`];
}
}
}).mount('#app')
body { margin: 0; overflow: hidden; }
* { box-sizing: border-box; }
#app {
height: 100vh;
background-color: #f5f5f5;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
sidebar {
background-color: white;
display: block;
padding: 1rem;
width: 270px;
position: absolute;
top: 0;
bottom: 0;
transition: transform .21s cubic-bezier(.5,0,.3,1);
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
}
sidebar[left] {
left: 0;
transform: translateX(-280px)
}
sidebar[right] {
right: 0;
transform: translateX(280px)
}
sidebar.open {
transform: translateX(0);
}
sidebar button {
width: 2rem;
height: 2rem;
position: absolute;
border-radius: 1rem;
border: 1px solid #f5f5f5;
right: .5rem;
top: .5rem;
cursor: pointer;
font-size: 1.5rem
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<main>
<button #click="toggleSidebar('Left')">left</button>
<button #click="toggleSidebar('Right')">right</button>
</main>
<sidebar left
:class="{open: isLeftOpen}">
Left sidebar
<button #click="toggleSidebar('Left')">×</button>
</sidebar>
<sidebar right
:class="{open: isRightOpen}">
Right sidebar
<button #click="toggleSidebar('Right')">×</button>
</sidebar>
</div>
In short, I want two sidebars completely unrelated, which should be opened/closed independently on all devices, according to user's choice. The argument that opening more than one sidebar at a time is not good UX doesn't really hold water on this project, as it's basically a full-screen map and the sidebars hold various controls and info about what's on the map. The requirement is that the user might want to have both sidebars open, but they might also want them both closed, even on big screens, to maximize the displayed portion of the map.
What options do I have here? To only have one "native" sidebar and mimic the second one with custom elements, using my own container and my own menu toggle resembling a native one? How would I make those look and behave as "native" on Android and iOS?
Here's my current layout, which achieves everything I want, except opening one sidebar always closes the other.
I don't know much about Ionic Vue (started using it today) but I'm decent in Vue. Tbh, I find Ionic Vue impressive. Very neat, documentation is stellar. But I'm stuck on this layout issue which seemed trivial at first.
Thanks for looking into this.
I’m using the pseudo elements ::before and ::after to underline text on my about page: http://www.alexanderschlosser.de/wordpress/about.
For some weird reason everything works great on desktop, but no matter what mobile browser I use on my iPhone it won’t show the underlines. Or they actually show up for a split second, but disappear afterwards.
It’s even weirder as I use the exact same CSS styling for the main navigation and it works perfectly fine for those links on all devices.
Any idea what the problem might be?
_
Here’s the CSS
.linkBio::before {
content: "";
position: absolute !important;
z-index: -1 !important;
width: 100%;
height: 1px;
bottom: -1px;
left: 0;
background-color: #252526;
}
/*CREATE COLORED BACKGROUND AND HIDE IT*/
.linkBio::after {
content: "";
position: absolute !important;
z-index: -2 !important;
width: 100%;
height: 100%;
bottom: 0px;
left: 0;
background-color: #DFFAD6;
visibility: hidden;
/*opacity: 0;
-webkit-transition: all 0.05s ease-in-out 0s;
transition: all 0.05s ease-in-out 0s;*/
}
/*SHOW COLORED BACKGROUND ON HOVER*/
.linkBio:hover::after {
visibility: visible;
/*opacity: 1;*/
}
It's the z-index you've set for them. Change them to 0 and it will work as expected.
I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
BAsically, this is what's happening:
Browser:
Iphone (it doesn't happen in Android):
I'm using this:
<meta name="viewport" content="user-scalable = yes">
And this is the CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live sample:
http://www.pixelmatic.com/games/
I'm puzzled so far. What could be the cause?
I think the container width in .container style is an issue as it is in pixel instead of percentage.
Try using width in percentage.