Pseudo elements disappear on mobile - pseudo-element

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.

Related

Is there a way to have two ionic side menus active at the same time?

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.

Ionic 2 Modal make 50% of the width

I have a page in my ionic application that on button click opens a Modal Page. Currently, I have override the variable.scss to the code below to make the model cover the 100% of the page.
//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;
However, this applies for all my models in my application. I want to use some models in other pages that use the 50% of the width and around 80% of the height. How can I customize my controls?
You can not change a particular modal height or width.
Now, I will describe an solution which I use to resize my modal.
Ensured that all modal height and width should be 100%. As ionic
resize modal for large screen devices. That's why I added below code
in app.scss.
modal-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
#media not all and (min-height: 600px) and (min-width: 768px) {
ion-modal ion-backdrop {
visibility: hidden;
}
}
#media only screen and (min-height: 0px) and (min-width: 0px) {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Now In ion-content we make two div and the background of ion-content should be transparent (see main-view css class). Now, One div is used for background of the modal, this will use as backdrop (see overlay css class). Another div should be used for the content, we will resize this div (see modal-content css class).In example I resize the height to 50%. Sample html ans css code is given below,
page-about {
.main-view{
background: transparent;
}
.overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
background-color: #333;
}
.modal_content {
position: absolute;
top: calc(50% - (50%/2));
left: 0;
right: 0;
width: 100%;
height: 50%;
padding: 10px;
z-index: 100;
margin: 0 auto;
padding: 10px;
color: #333;
background: #e8e8e8;
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
border-radius: 5px;
box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
}
}
<ion-content class="main-view">
<div class="overlay" (click)="dismiss()"></div>
<div class="modal_content">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
pages.
</p>
</div>
</ion-content>
Here is a screen shot of the modal,
If you want modal content should scroll then replace <div class="modal_content"> with <ion-scroll class="modal_content" scrollY="true"> as told by Missak Boyajian in comment
For Ionic3 you need to this comment from Alston Sahyun Kim.
this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }
All the code is taken from here. I think this project repo will help you.
I tried before but had not found a generic way to make modals behave the way as I desired.
So I strugled a bit and achieved responsive modals and other kinds of modals with the following global scss:
ion-modal {
&.my-modal-inner {
display: flex;
align-items: center;
justify-content: center;
ion-backdrop {
visibility: visible;
}
.modal-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
overflow: auto;
width: auto;
height: auto;
left: auto;
top: auto;
contain: content;
max-width: 70%;
max-height: 70%;
border-radius: 2px;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
> .ion-page {
position: relative;
display: block;
width: auto;
height: auto;
contain: content;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
}
&.my-stretch {
.modal-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
> .ion-page {
width: 100%;
height: 100%;
}
}
}
}
&.my-fullscreen {
.modal-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
You can have responsive modals that will have the size of the inner content using cssClass: 'my-modal-inner':
The modal will occupy at maximum 70% of the width and height (like defined in the above css) when the content surpasses the limit:
If the content of the modal is supposed to occupy all the container element (like a page or a component with ion-content), it will not work well with the above case because the modal supposes that the container should have the size of its children, causing a possibly undesired behaviour (the modal will be very small, more than it should):
Instead, you can define the modal to occupy its maximum size with cssClass: 'my-modal-inner my-stretch':
If you want the modal to be full screen, even in a large desktop browser, you can use cssClass: 'my-fullscreen':
Notes:
You can change the prefix my- with any other prefix of your choice (or no prefix).
You can change the maximum width and height of the modal in the above css, as you seem fit (I defined both as 70%, in your case it would be 50% and 80% for the width and height, respectively).
The above screenshots were taken in a desktop browser, but the modal changes also work in a mobile/native app with Ionic (I tested in Android, and it should work in iOS too).
Update (2018-07-30)
About the HTML codes for the modal:
1) Responsive modal that will be as large or as small as the inner content (a single div or a hierarchy of divs, spans and other block and inline elements should do):
<div class="main">
<div class="img-container">
<img src="assets/img/main/icon.png" [alt]="APP_NAME">
</div>
<div class="info-container">
<div class="app-name">{{ APP_NAME }}</div>
<div class="app-version">Version {{ APP_VERSION }}</div>
<div class="app-year">#{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
<div class="app-rights">All rights reserved</div>
</div>
</div>
2) Modal will occupies its maximum size (use class my-stretch). In this case, any ionic page will do:
<ion-header>
<ion-navbar>
<ion-title>My Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p> My content </p>
</ion-content>

featherlight.js: How to make nextIcon and previousIcon always visible

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.

2 Questions concerning the JSSOR-Slider

First of all I have to say:
what a phantastic piece of software!
Well designed, implemented and documented, and many, many cool features.
Tanks a lot for giving that away as Open Source!
Now I have made a slider implementation for the "Gambio GX"-shopsystem (a very advanced osCommerce fork.)
You can see it here in action: http://marmorkamin-shop.de/Test/
I have used all image transformations (377) and caption animations (438) available, both are randomly selected for each slide...
(Resulting in 163,618(!) different ways to change slides....)
The slider is dynamically generated with PHP, based on slide-information in the shops database....
As inline-styles are very inflexible in such an environment, I have moved the styling to a stylesheet.
It already works like a charm, almost....
Two problems I am encountering:
The caption area is sometimes clipped
(see 1st caption in this picture: screenshot)
Only bullets 1, 2 and 3 in the bullet navigator are active, the others do not respond.
Any idea what could be the reason for this??
Thx again for this great software!
Edit:
The caption area is sometimes clipped (see 1st caption in this
picture: screenshot)
Found a quick and dirty solution for this meanwhile:
Assign a clip: auto !important; CSS direktice for the caption elements...
But I am sure there must be a better solution :-)
Re: caption clipped
Please always specify width and height for caption.
You can specify width and height in css file,
.slide_caption_1 {
left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
left: 200px; top: 300px; width: 110px; height: 29px;
}
And you can specify inline style as well,
<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>
Re: bullet problem
Style for 'mousedown' of bullet navigator not specified.
Given class of navigator item prototype is 'jssor_navigator_entry', the class name for 'active' state is 'jssor_navigator_entryav', the class name for 'mousedown' state is 'jssor_navigator_entrydn'
So, please add following css code in slideshow.css file.
.jssor_navigator_entrydn {
padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}
Here is an example to define bullet navigator in a simple way,
<script>
var jssor_options={
...
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
...
$SpacingX: 5, //[Optional] Horizontal space between each item in pixel, default value is 0
...
}
...
};
<script>
<!-- Bullet Navigator Begin -->
<style>
.the_navigator{
position: absolute;
bottom: 0px;
}
.the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
position: absolute;
width: 27px;
height: 24px;
line-height: 24px;
color: #fff;
font-weight: bold;
background-color: #321601;
text-align: center;
cursor: pointer;
}
.the_navigator_item:hover, .the_navigator_itemav {
background-color: #d1013f;
}
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
<!-- bullet navigator item prototype -->
<div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->

Fixed position navigation arrows aren't working with iPhone

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.