I am using ionic2(3.13) in my application, and I am able to use horizontal tabs perfectly. Is it possible to have vertical tabs, something like below, need help. Thx:
enter image description here
I rewrote some scss to make it work. Hope it helps someone:
ionic version 3.13
tabs.scss (The tabs html file's scss file)
page-tabs {
.tabbar {
top: 0;
width: 5rem;
flex-direction: column;
background-color: #cfa972 !important;
}
ion-header {
left: 5rem;
right: 0;
}
ion-content {
left: 5rem;
right: 0;
}
.tabs-ios .tab-button {
width: 100%;
font-size: 10px;
color: #cfa972;
padding: 0;
&[aria-selected="false"] {
color: #cfa972 !important;
background-color: #cfa972 !important;
}
&[aria-selected="true"] {
color: #ffffff !important;
background-color: #b28850 !important;
}
&[aria-selected="true"] .tab-button-icon {
color: #ffffff;
}
&[aria-selected="false"] .tab-button-icon {
color: #ffffff;
}
}
.has-icon .tab-badge {
right: calc(50% - 22px);
}
.tab-badge {
top: 33%;
}
}
tab root page scss file:
page-mine {
.fixed-content {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-bottom: 0 !important;
position: absolute;
display: block;
}
.scroll-content {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-bottom: 0 !important;
position: absolute;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
contain: size style layout;
}
}
Related
I am using react-typescript in my app. For styling I am using style-components. I am creating one Modal alert component. My modal alert is ready and it looks like this, Image. I am checking this sweet alert site. In there they have success icon. I want to use it in my Modal alert component. But I don't know where to find this icon and how to use it in my modal alert component.
This is my modal alert component
import React from 'react';
import iconX from './close.svg';
import styled from 'styled-components';
export const Modals = styled.div`
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
`
const ModalOverlay = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
cursor: pointer;
`
const ModalBox = styled.div`
position: relative;
width: 80%;
margin: 0 10%;
padding: 50px;
box-sizing: border-box;
border-radius: 10px;
background-color: white;
cursor: auto;`
const ModalTitle = styled.div`
color: #9E25FC;
font-size: 30px;
text-align: center;
`
const ModalContent = styled.div`
margin-top: 30px;
color: #6B6B6B;
font-size: 16px;`
const ModalClose = styled.button`
position: absolute;
top: 20px;
right: 20px;
transition: transform 250ms ease-in-out;
transform-origin: 50% 50%;
&:hover {
transform: rotate(180deg);
}
`
interface IModalProps {
title: string;
isOpen: boolean;
onClose: () => void;
children?: JSX.Element | string[] | string;
icon?: JSX.Element; //This is icon i am declaring. I am not sure is it JSX.Element.
}
export default ({ title, isOpen, onClose, children }: IModalProps) => {
const outsideRef = React.useRef(null);
const handleCloseOnOverlay = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
if (e.target === outsideRef.current) {
onClose();
}
}
return isOpen ? (
<Modals>
<ModalOverlay
ref={outsideRef}
onClick={handleCloseOnOverlay}
/>
<ModalBox>
<ModalClose
onClick={onClose}
>
<img src={iconX} alt={'close'} />
</ModalClose >
<ModalTitle>
// I want to use it in here the success icon.
{title}
</ModalTitle>
<ModalContent>
{children}
</ModalContent>
</ModalBox>
</Modals>
) : null;
};
I am using a pre-made form (Haruki) from https://tympanus.net/Development/TextInputEffects/
JSFiddle is https://jsfiddle.net/kacikw/6b9djm76/#&togetherjs=ERPObvDR7G
I can't figure out how to make the input area into a text area that can have more than 1 line (for a comment section).
Like I don't know how to modify the pre-made form, I tried changing the classes in the html and css to textarea versions of the input (like if it was .input-field I made it .textarea-field)
Please help I'm a desperate student working on my final.
HTML
<div class="cell small-12">
<div class="textarea textarea--haruki">
<div class="textarea__field textarea__field--
haruki" type="text" id="input-3" />
<label class="textarea__label textarea__label--haruki" for="input-3">
<textarea class="textarea__label-content textarea__label-content--haruki">MESSAGE
</textarea>
</label>
</div>
</div>
CSS
.textarea {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}
.textarea__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}
.textarea__field:focus {
outline: none;
}
.textarea__label {
display: inline-block;
float: right;
width: 40%;
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.textarea__label-content {
position: relative;
display: block;
padding: .9em 0;
width: 100%;
}
.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}
.icon {
color: #ddd;
font-size: 150%;
}
/* Haruki */
.textarea--haruki {
margin: 3em 1em 1em;
}
.textarea__field--haruki {
padding: 1em 0.25em;
width: 100%;
background: transparent;
color: #CC450C;
font-size: 1.55em;
font-family: 'Overpass', sans-serif;
}
.textarea__label--haruki {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
}
.textarea__label-content--haruki {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.textarea__label--haruki::before,
.textarea__label--haruki::after {
content: '';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
background: #BEEFEC;
-webkit-transition:-webkit-transform 0.3s;
transition: transform 0.3s;
}
.textarea__label--haruki::before {
top: 0;
}
.textarea__label--haruki::after {
bottom: 0;
}
.textarea__field--haruki:focus + .textarea__label--haruki
.textarea__label-content--haruki,
.textarea--filled .textarea__label-content--haruki {
-webkit-transform: translate3d(0, -90%, 0);
transform: translate3d(0, -90%, 0);
}
.textarea__field--haruki:focus + .textarea__label--haruki::before,
.textarea--filled .textarea__label--haruki::before {
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
}
.textarea__field--haruki:focus + .textarea__label--haruki::after,
.textarea--filled .textarea__label--haruki::after {
-webkit-transform: translate3d(0, 0.5em, 0);
transform: translate3d(0, 0.5em, 0);
}
/*for a clear bg*/
[type='text']:focus{
border: none;
background-color: transparent;
box-shadow: none;
}
You don't put input tag into textarea.
Try <textarea cols="10" row="10"></textarea>
I'm trying to keep my footer at the bottom of every page (not sticky). At the moment it is hovering in the middle of the screen.
Here is my site.
And here is the code I have at the moment -
HTML -
<footer id="footer">
<a class="right">All Rights Reserved © 1-800 Dinosaur 2014 </a>
</div>
</footer> <!-- footer --->
CSS -
#footer {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #444444;
font-family: 'Helvetica Neue',Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
height: 100px;
left: 0;
overflow: hidden;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a {
-moz-box-sizing: border-box;
background: transparent;
bottom: 0;
color: #FFFFFF;
height: 100px;
left: 0;
padding: 44px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
}
#footer a:hover {
color: #000000;
}
#footer a:active {
background: transparent;
}
#footer .last-page {
text-align: center;
What am I doing wrong?
In my experience, absolute positioning has only worked if it was only in a parent specified to have relative positioning. Try putting your footer in a div with style="position: relative;" and see if that works. It actually looks like you've included a closing div tag without an open one in your snippet.
Since Aviary does not plan on having a responsive image editor in the near future (e.g., not great on mobile safari), does anyone know of alternatives?
This is where they say that responsive is not in the near future:
http://support.aviary.com/forums/191584-developer-feedback/suggestions/3718022-fully-responsive-web-editor-for-mobile-sites
You can use the following css, to make the aviary editor popup responsive. This is the only solution:
#media all and (max-width: 640px) {
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls, #avpw_holder .avpw_is_fullscreen #avpw_controls {
position: absolute;
left: 5px;
right: 5px;
min-width: 300px;
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
}
#avpw_holder #avpw_tool_content_wrapper {
position: relative;
padding-bottom: 56px;
}
#avpw_holder #avpw_tool_main_container {
position: relative;
}
#avpw_holder #avpw_tool_options_container {
position: relative;
}
#avpw_holder #avpw_tool_container {
left: 0;
right: 0;
min-width: 300px;
}
#avpw_holder .avpw_prev, #avpw_holder .avpw_next {
}
#avpw_holder .avpw_tool_pager .avpw_clip {
right: 48px;
}
#avpw_holder .avpw_scroll_strip {
}
#avpw_holder .avpw_scroll_strip .avpw_scroll_page {
/* max-width:200px; */
/* width: 300px !important; */
}
#avpw_holder #avpw_rghtArrow {
right: 0;
}
#avpw_holder #avpw_canvas_embed {
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
top: 188px;
}
#avpw_holder #avpw_zoom_container {
width: auto;
min-width: 42px;
left: 5px;
/* right: 5px; */
background: rgba(51, 51, 51, 0.59);
}
#avpw_holder #avpw_canvas_element, #avpw_holder #avpw_canvas_element.avpw_position_by_transform {
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100% !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
}
#avpw_holder .avpw_mode_action {
position: relative;
height: 55px;
width: 100%;
top: 100%;
/* background: #303740; */
}
#avpw_holder .avpw_mode_action_left,
#avpw_holder .avpw_mode_action_left + .avpw_mode_action_right {
width: 50%;
}
#avpw_holder .avpw_mode_action_left {
float: left;
}
#avpw_holder .avpw_mode_action_right {
float: right;
}
.avpw_mode_action_left:after, .avpw_mode_action_right:before, .avpw_tool_pager .avpw_scroll_rule {
height: auto !important;
top: 0 !important;
bottom: 0 !important;
}
#avpw_holder .avpw_mode_action .avpw_button {
/* position: relative; */
}
#avpw_holder .avpw_back_button {
float: left;
}
}
I really needed Aviary Web Widget on mobile. I tried CSS tweaking. It was a nightmare.
Then, I realized I could use CSS transform, scaling the photo editor to the viewport size.
It worked!
Here is the core of it:
function adjustSize()
{
// condition to begin using scale is media query below
if (!actual.mq('(max-width: 757px)'))
{
return $('body').css('transform', 'translate(0px, 0px) scale(1)');
}
// scale = actual width in pixels divided by 757 (minimum photo editor width)
var scale = actual('width', 'px') / 757;
// left side positioning
var left = (376 * scale * scale) + (-376 * scale);
return $('body').css('transform', 'translate(' + left + 'px, 0px) scale(' + scale + ')');
}
$(window).resize(adjustSize);
adjustSize();
I am using jQuery and actual. And also this CSS:
#media all and (max-width: 941px) {
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
}
With the CSS above, the maximum width where the Aviary photo editor fits is 757px.
So, in the JavaScript, we only trigger the scaling when the width is lower than 757px.
I am using "body" element, because the only thing in the "page" is the photo editor.
You can change and adapt the solution to your needs.
I can't believe it worked!
Here's my CSS. Not super-pretty, but it is a start. Comments/suggestions welcome!
span.aviary-feather {
background: #ff0000 none repeat scroll 0 0;
color: #ffffff;
font-size: 16px !important;
height: auto !important;
opacity: 1 !important;
padding: 5px 40px !important;
width: auto !important;
}
span.aviary-feather::after {
content: "edit";
}
#avpw_zoom_container {
display: none !important;
}
#avpw_powered_branding {
display: none;
}
#avpw_controlpanel_crop,
#avpw_controlpanel_orientation .avpw_inset_group:nth-child(3), #avpw_controlpanel_orientation .avpw_label:nth-child(6) {
display: none !important;
}
.avpw_inner-center {
right: 0 !important;
}
.avpw_tool_cutout_centered_drawing {
padding-left: 65px;
width: 100%;
}
.avpw_colorsplash_eraser {
width: 45px !important;
}
.avpw_inset_color_widget,
#avpw_controlpanel_drawing .avpw_inset_button_label {
display: none;
}
#media all and (max-width: 941px) {
#avpw_holder {
left: 0;
position: fixed;
top: 150px;
transform: translate(0px, 0px) scale(1);
z-index: 1;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
bottom: 5px;
min-height: 600px;
right: 5px;
top: 5px;
transform: translate(0px, 0px) scale(1);
}
.avpw_main_close {
left: 0 !important;
}
/*#avpw_tool_main_container, #avpw_tool_options_container {
width: 300px !important;
}*/
.avpw_tool_pager .avpw_clip {
left: 100px !important;
}
.avpw_mode_action_right {
float: left !important;
height: auto !important;
position: relative !important;
}
.avpw_mode_action.avpw_mode_action_right .avpw_button {
left: 0;
top: 25px;
}
.avpw_mode_action.avpw_mode_action_left {
left: -12px;
top: 12px;
}
#avpw_canvas_element, #avpw_temp_loading_image, #avpw_canvas_overlay,
#avpw_canvas_controls_layer {
/*transform-origin: 125px 0 0 !important;
transform: translate(0px, 0px) scale(0.406667) !important;*/
height: auto !important;
left: 0 !important;
top: 0 !important;
/*transform: translate(50px, 86px) scale(1) !important;*/
transform: translate(0, 86px) scale(1) !important;
width: auto !important;
}
.avpw_canvas_spinner {
left: 75px !important;
top: 115px !important;
}
}
I've been through the excellent documentation for this and it's great.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
I have the basic pop up working fine.
My problem is with the animations. I just can't get them to work. Apologies if I've missed something very basic but I've spent too long on this now and hope someone can point out my mistake. It currently just appears no fade nothing.
I've played with it on codepen and can recreate the issue by removing the CSS so perhaps this is not getting through correctly, although I know it is linking as it is styling the pop up just not the animations.
Here is my html:
<div id="Column1"><div id="aboutus" >
<div id="pop" >
<img src="/stalkseed/assets/Uploads/aboutus.jpg" name="about-us" border="0" id="about-us"/>
</div>
My JavaScript from the same page:
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#pop').magnificPopup({
delegate: 'a',
type: 'image',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});});
//]]>
</script>
My CSS
#charset "UTF-8";
/* CSS Document */
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 502;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 503;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
height: 100%;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 505; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 504; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
padding: 0;
z-index: 506; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
position: absolute;
top: 0;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: solid transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a {
opacity: 0.8;
border-top-width: 12px;
border-bottom-width: 12px;
top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b {
border-top-width: 20px;
border-bottom-width: 20px; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a {
border-right: 12px solid black;
left: 5px; }
.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
border-right: 20px solid white; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
border-left: 12px solid black;
left: 3px; }
.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
border-left: 20px solid white; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.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); }
.mfp-figure {
line-height: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #f3f3f3;
word-break: break-word;
padding-right: 36px; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
#media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
/* The shadow behind the image */
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; } }
#media all and (max-width: 800px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
/*html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;
background-color: #eee3da;
}*/
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Newspaper effect ======
*/
.mfp-newspaper {
/* start state */
.mfp-with-anim {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.5s;
transform: scale(0) rotate(500deg);
}
&.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1) rotate(0deg);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(0) rotate(500deg);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Move-horizontal effect ======
*/
.mfp-move-horizontal {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s;
transform: translateX(-50px);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: translateX(0);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: translateX(50px);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Move-from-top effect ======
*/
.mfp-move-from-top {
.mfp-content {
vertical-align:top;
}
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.2s;
transform: translateY(-100px);
}
&.mfp-bg {
opacity: 0;
transition: all 0.2s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== 3d unfold ======
*/
.mfp-3d-unfold {
.mfp-content {
perspective: 2000px;
}
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-60deg);
}
&.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: rotateY(0deg);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: rotateY(60deg);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Zoom-out effect ======
*/
.mfp-zoom-out {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(1.3);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== "Hinge" close effect ======
*/
#keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}
.hinge {
animation-duration: 1s;
animation-name: hinge;
}
.mfp-with-fade {
// before-open state
.mfp-content,
&.mfp-bg {
opacity: 0;
transition: opacity .5s ease-out;
}
// open state
&.mfp-ready {
.mfp-content {
opacity: 1;
}
&.mfp-bg {
opacity: 0.8; // background opacity
}
}
// closed state
&.mfp-removing {
&.mfp-bg {
opacity: 0;
}
}
}
I ran into this same problem and after banging my head against all the hard surfaces in my office I discovered that I need to rename the css classes to match the fade example he provided here.
So for example the mfp-zoom-out animation:
.mfp-zoom-out .mfp-with-anim should be .mfp-zoom-out.mfp-bg
.mfp-zoom-out.mfp-bg stays the same
.mfp-zoom-out.mfp-ready .mfp-with-anim should be .mfp-zoom-out.mfp-ready .mfp-content
.mfp-zoom-out.mfp-ready.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-ready
.mfp-zoom-out.mfp-removing .mfp-with-anim should be .mfp-zoom-out.mfp-removing .mfp-content
.mfp-zoom-out.mfp-removing.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-removing
You can also make great use of animate.css (http://daneden.github.io/animate.css/). Once you initialize the popup make sure you add animate class along with the desired animation class from the library. For example animate fadeIn.
Check i have code for Fade-zoom animation for first dialog and Fade-move animation for second dialog.
You can get magnific-popup.css and magnific-popup.min.js files in the dist folder...Files can be downloaded from https://github.com/dimsemenov/Magnific-Popup
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<div class="example gc3">
<h3>Dialog with CSS animation</h3>
<div class="html-code">
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>
<!-- dialog itself, mfp-hide class is required to make dialog hidden -->
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<h1>Dialog example</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});
</script>
<style type="text/css">
/* Styles for dialog window */
#small-dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 400px;
margin: 40px auto;
position: relative;
}
/**
* Fade-zoom animation for first dialog
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0.001; /* Chrome opacity transition bug */
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Fade-move animation for second dialog
*/
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
transform: translateY(0) perspective( 600px ) rotateX( 0 );
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
opacity: 0;
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
opacity: 0.01;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</div>
</body>
</html>
In case anyone interested in the .mfp-move-from-top animation below is the code:
.mfp-move-from-top .mfp-content{
vertical-align:bottom;
}
.mfp-move-from-top .mfp-with-anim{
opacity: 0;
transition: all 0.2s;
transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
opacity: 0;
transition: all 0.2
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
.mfp-move-from-top.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
opacity: 0;
}
I had the same problem. found the solution here:
just change
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
to this (adds a space and then the class, in case option is being used):
into
beforeOpen: function() {
this.st.mainClass += ' ' + this.st.el.attr('data-effect');
}