Magnific popup transparent png as grey - javascript

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 */
}

Related

Mobile header issue on iphone when scroll up

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;
}

How to make width of body element stretch to the width of html?

JSFiddle of SSCCE here.
I have a fullscreen background-image on html, like
html {
background: url(flowers.png) no-repeat center center fixed;
background-size: cover;
}
And I have a background-color applied to body, and its value has some transparency, like this:
body {
background-color: rgba(255, 255, 255, 0.75);
}
This way, as an overall look of the page, there is an image in the background peeping through a translucent (semi-transparent) overlay (body's background-color).
Then the body contains a table which has a number of columns, due to which horizontal scrolling is enabled.
The problem is that when the user scrolls horizontally, we see that the overlay which is body's background-color ends with the viewport, after which there is naked html's background-image with table-content floating over it.
The question is that how do I make the body stretch to the width of the html?
I tried giving width:100% to body and different positions to html and body, but that didn't help.
Use below css:
body {background:none}
body:before {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.75);
left: 0;
right: 0;
top: 0;
bottom: 0;
content: "";}
As an alternate solution you could use linear-gradient as part of the background declaration on the html element:
html {
background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
url(flowers.png) no-repeat center center fixed;
background-size: cover;
}
You may wish to check browser support before implementing.
give background-color from body and add that property in table like
.mdl-data-table {
background-color: rgba(255, 255, 255, 0.75);
}
or in this css
.panel-h
background-color: rgba(255, 255, 255, 0.75);
{
#Shivas solution is good but you would just have to add the z-index: -1 on body:before.
On the other hand, why make page horizontaly scrolable when you can just make an element scrollable. Just the table.
Something like this:
https://codepen.io/ivandoric/pen/PRLKXJ
That way whole page doesn't have to scroll, because that could caouse a problem if you have some content above or below the table. It would just dissapear to the left. Which would look ugly.
My suggestion would be to do it like shown in the codepen.

Page overlaps on a footer div

I am working on a "wordpress" website. I am using a mobile footer plugin which only appears on mobile devices. The problem I am facing is the page overlaps the footer (on phone).
I tried z-index as well to make that div appear on the page and not behind the page but it seems not to work. Here's my css for mobile footer div:
#callbook {
bottom: 0;
height: 48px;
left: 0;
position: fixed;
right: 0;
z-index: 100;
-webkit-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
-moz-box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 1);
}
I added the padding-bottom:48px; to the check if the div exists, and it does. The problem is the page is overlapping the footer div. Appreciate your help :)
Cheers~
After looking at your site, it seems that your z-index just wasn't high enough. Change #callbook z-index to z-index: 9999; and it shows right up.

CSS Transition animation like Google Material site

I tried to recreate this transition that google uses for a couple of hours but I really don't know how to do it yet. The transition I'm talking about is that search bar bottom that becomes 2px thick from left to right. So: From that to a border-bottom of 2px with a nice transition.
A live preview of this transition can be found on: https://material.google.com/style/icons.html#
This is done via the :after-pseudo-element of the Search-label. This is it's CSS:
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.87);
bottom: 0px;
content: '';
height: 2px;
width: 10px;
left: 45%;
position: absolute;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
When you focus the box, the following CSS is applied:
left: 0;
width: 100%;
visibility: visible;
This gives the "center-based" animation you're looking for. I can build a fiddle to demonstrate the effect if you need.
EDIT:
Have a fiddle: https://jsfiddle.net/tf084pd1/
Here's the effect with the "double-border": https://jsfiddle.net/tf084pd1/1/

Hover not being detected on element

Picture:
What I want:
I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.
Problem:
Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.
What I tried:
Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.
JSFiddle link
Working fiddle.
First of all, z-index can have a maximum value of 9999.
One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.
Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.
Change your CSS to:
.folder_path .right_arrow {
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
height: 35px;
width: 35px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
margin-left: -25px;
}
.folder_path .path_part {
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: middle;
min-width: 40px;
font-size: 20px;
padding: 0 10px;
z-index: 2;
}
$(".path_part").hover(function(){
$(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
}, function(){
$(this).next().css({"background": "unset"});
});
You can use jquery.This code will work for you.

Categories

Resources