Can't seem to change the color of the toggle from white to red. You can see in the CSS that I've tried. Just getting back into coding so...
I have changed the css where it seems logical but obviously I'm not getting something...
enter code here
<div class="rd-navbar-panel">
<button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
<span></span></button>
</div>
<!-- RD Navbar Nav-->
Here's what I thought was the relevant CSS but the toggle is still white. TIA.
.rd-navbar-toggle {
display: inline-block;
position: relative;
width: 48px;
height: 48px;
line-height: 48px;
cursor: pointer;
color: #ed1c24;
background-color:transparent;
border: none;
cursor: pointer;
display: none;
}
.rd-navbar-toggle span {
position: relative;
display: block;
margin: auto;
transition: .3s all ease;
color: #ed1c24;
background-color: #ed1c24;
}
.rd-navbar-toggle span:after, .rd-navbar-toggle span:before {
content: "";
position: absolute;
left: 0;
top: -6px;
transition: .3s all ease;
}
.rd-navbar-toggle span:after {
top: 6px;
}
.rd-navbar-toggle span:after, .rd-navbar-toggle span:before, .rd-navbar-toggle span {
width: 22px;
height: 2px;
background-color: #ed1c24;
backface-visibility: hidden;
will-change: transform;
color:#ed1c24;
}
.rd-navbar-toggle span:before, .rd-navbar-toggle span:after {
-webkit-transition-duration: 0.22s, 0.22s;
transition-duration: 0.22s, 0.22s;
-webkit-transition-delay: 0.22s, 0s;
transition-delay: 0.22s, 0s;
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.rd-navbar-toggle.active span {
transition: background .22s 0s ease;
background: trans;
}
.rd-navbar-toggle.active span:before, .rd-navbar-toggle.active span:after {
top: 0;
-webkit-transition-delay: 0s, 0.22s;
transition-delay: 0s, 0.22s;
}
.rd-navbar-toggle.active span:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.rd-navbar-toggle.active span:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Related
I have a list of articles that get filtered by category via a json file. The filters all work, however there is an archive section which has no value in the json file and is outside of the v-for loop. I am looking for a Vue way to add an active class to the archive filter I have created a codepen (Vue filter json feed) where you can see what I am doing.
Array.prototype.unique = function() {
return this.filter(function(value, index, self) {
return self.indexOf(value) === index;
});
}
var vm = new Vue({
el: '#app',
data: {
items: [],
errors: [],
cats: [],
allItems: [],
isActive: false,
catsCount: [],
filteredItems: [],
selectedItem: "Event",
currentPage: 0,
pageSize: 6
},
created() {
axios
.get(`https://codepen.io/struthy/pen/qgXJZJ.js`)
.then(response => {
// JSON responses are automatically parsed.
this.items = response.data;
this.cats = this.items.map(item => item.itemType).unique();
// this.catsCount = this.items.map(item => item.itemType).unique();
})
.catch(e => {
this.errors.push(e);
});
},
computed: {
filteredPage: function() {
var itemSelectedType = this.selectedItem;
if (this.selectedItem === "All") {
return this.items
.sort(function(a, b) {
return new Date(a.published) - new Date(b.published)
})
.slice(0, (this.currentPage * this.pageSize) + this.pageSize)
} else {
return this.items
.sort(function(a, b) {
if (this.selectedItem != "event") {
return new Date(a.published) - new Date(b.published)
}
// else{
// return new Date(a.endDate) - new Date(b.endDate)
// }
})
.filter(function(item) {
return item.itemType === itemSelectedType;
}).slice(0, (this.currentPage * this.pageSize) + this.pageSize);
}
}, // end filteredPage
showMore: function() {
var itemSelectedType = this.selectedItem;
if (this.items.filter(function(item) {
return item.itemType == itemSelectedType
}).length > (this.pageSize * (this.currentPage + 1))) {
return true;
} else if (this.items.length > (this.pageSize * (this.currentPage + 1))) {
return true; // this is all or unfiltered items
}
else {
return false;
}
}, // end showMore
}, // end computed
methods: {
// give an active class to the filter items
activeItem: function(category) {
if (this.selectedItem === category){
return "isActive"
} else {
return ""
}
}, // end activeItem
/// trying to add an active class to the archive link - not succesful yet
activeAllItem: function() {
var allCategory = this.cats
if (this.selectedItem === !allCategory){
return isActive == true
} else {
return isActive == true
}
} // end activeItem
}
});
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0; }
.grid--space-between {
justify-content: space-between; }
.grid--full {
width: 100%; }
.grid--third {
width: calc(100% / 12 * 4); }
.grid--2third {
width: calc(100% / 12 * 8); }
#media only screen and (max-width: 768px) {
.grid--2third {
width: 100%; } }
.grid__container {
padding-top: 60px;
padding-bottom: 60px;
border-top: 1px solid #e3e3e3;
display: flex;
flex-wrap: wrap; }
.grid__container--padding-left-right {
padding-left: 7.03125%;
padding-right: 7.03125%; }
.grid__container--space-between {
justify-content: space-between; }
.grid__col {
width: 32%;
display: flex;
min-height: 330px;
margin-bottom: 20px; }
#media only screen and (max-width: 1100px) {
.grid__col {
width: 49%; } }
#media only screen and (max-width: 640px) {
.grid__col {
width: 100%; } }
.grid__col--half {
width: 48%; }
.grid__col--half h2 {
padding: 20px 0 0 0; }
#media only screen and (max-width: 768px) {
.grid__col--half {
width: 100%; } }
.grid__col--border {
margin-bottom: 60px;
border-bottom: 4px solid #002A48;
padding-bottom: 60px; }
.grid__col--column {
flex-direction: column; }
.grid__img {
align-self: flex-start; }
.grid__arrow-link {
font-size: 2rem;
font-family: 'Poppins', sans-serif;
font-weight: bold;
position: relative;
width: fit-content; }
.grid__arrow-link:after {
content: " ";
position: absolute;
right: -32px;
top: 10px;
width: 28px;
height: 10px;
background: url(../assets/img/ream-more-blue.png) center no-repeat; }
.grid__box {
background-size: cover;
background-position: center;
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden; }
.grid__box:hover p {
color: #6CB7E3; }
.grid__box--variation {
background-color: #6CB7E3;
color: #fff;
justify-content: space-between; }
.grid__box--variation:hover {
background-color: #57addf; }
.grid__box--variation:hover p {
color: #fff; }
.grid__bg-img {
background-size: cover;
background-position: center -50px;
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
justify-content: flex-end;
transform: scale(1);
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.grid__bg-img:hover {
transform: scale(1.1);
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.grid__head {
padding: 30px 20px 0; }
.grid__head h3 {
color: #fff;
font-size: 3.8rem;
margin-bottom: 20px; }
.grid__caption {
padding: 20px 20px 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%; }
.grid__caption--basic {
background-color: #e3e3e3; }
.grid__caption--variation {
background-color: #6CB7E3; }
.grid__caption h3 {
font-size: 2.8rem;
line-height: 0.7;
padding-bottom: 0;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif; }
.grid__link {
font-size: 2rem;
font-weight: 700;
position: relative;
width: fit-content; }
.grid__link--basic {
color: #6CB7E3; }
.grid__link:after {
content: " ";
position: absolute;
right: -32px;
top: 10px;
width: 28px;
height: 10px;
background: url(../assets/img/ream-more-blue.png) center no-repeat; }
.grid__link--variation {
color: #fff; }
.grid__link--variation:after {
background: url(../assets/img/ream-more-white.png) center no-repeat; }
.grid:after {
content: "";
width: 32%; }
.fullpage-img {
background-size: cover;
background-position: center;
width: 100%;
height: 600px;
display: flex;
justify-content: center;
flex-direction: row;
position: relative; }
.fullpage-img:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 42, 72, 0.8); }
.fullpage-img__text {
z-index: 99;
align-self: center;
color: #fff;
width: calc(100% / 12 * 8);
text-align: center; }
.fullpage-img__text h3 {
font-size: 4.4rem;
line-height: 1.363;
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: #fff; }
.fullpage-img__text a {
font-weight: 700;
position: relative;
font-size: 2rem; }
.fullpage-img__text a:after {
content: " ";
position: absolute;
right: -32px;
top: 10px;
width: 28px;
height: 10px;
background: url(../assets/img/ream-more-blue.png) center no-repeat; }
.opportunitiesFilter {
width: calc(100% / 12 * 3);
list-style: none;
margin: 0;
padding: 0;
height: 300px; }
#media only screen and (max-width: 768px) {
.opportunitiesFilter {
width: 100%;
margin-bottom: 30px; } }
.opportunitiesFilter__filter-head {
background: #002A48;
padding: 20px;
font-size: 2.3rem;
font-weight: 700;
color: #fff;
display: block;
margin: 0; }
.opportunitiesFilter__title {
color: #fff;
padding: 20px;
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 2.2rem;
font-weight: 700; }
.opportunitiesFilter__list-item {
margin: 0;
padding: 0 20px;
background: #6CB7E3; }
.opportunitiesFilter__list-item--title {
background-color: #002A48; }
.opportunitiesFilter__list-item:last-of-type .opportunitiesFilter__btn {
border: 0; }
.opportunitiesFilter__btn {
background: transparent;
border-radius: 0;
border: 0;
outline: 0;
width: 100%;
margin: 0;
padding: 20px;
text-align: left;
color: #fff;
font-weight: 700;
border-bottom: 1px solid #fff; }
.opportunitiesFilter label {
display: block;
position: relative;
padding: 10px 20px;
cursor: pointer;
background-color: #6CB7E3;
color: #fff;
position: relative; }
.opportunitiesFilter label:before {
content: " ";
display: block;
height: 1px;
width: 85%;
position: absolute;
bottom: 0;
left: 20px;
background-color: #fff; }
.opportunitiesFilter label:last-of-type:before {
display: none; }
.opportunitiesFilter input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0; }
.opportunitiesFilter .isActive {
font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="grid__container grid__container--space-between grid__container--padding-left-right">
<div class="opportunitiesFilter">
<h3 class="opportunitiesFilter__filter-head">Filter</h3>
<label v-for="cat in cats">
<input type="radio" v-model="selectedItem" :value="cat" ref="itemRef"/>
<span :class="activeItem(cat)" >{{ cat }}
(
{{ items.filter(function(x){
return x.itemType == cat
}).length }}
) </span>
</label>
<label>
<input type="radio" v-bind:class="{isActive: isActive}" v-model="selectedItem" value="All" />
Archive ({{ items.length }})
</label>
</div>
<ul class="grid grid--2third grid--space-between">
<li class="grid__col grid__col--half grid__col--column grid__col--border" v-for="item in filteredPage">
<img class="grid__img" v-bind:src="item.itemImage">
<!--<h4>{{ item.itemType }} for testing only</h4>-->
<h2>{{ item.title }}</h2>
<p>{{ item.content }}</p>
<a class="grid__arrow-link" :href="item.link">link</a>
</li>
<li v-if="showMore"><button class="btn blue" v-on:click="currentPage++">load more</button></li>
</ul>
</div>
You need to do a couple things, I'd suggest using a computed to create this value, and you need to wrap your value in a span or some other tag to apply the class "isActive". Currently you are adding this class to an input - which will not give you the bold styling you have on the others.
computed: {
isArchiveActive () {
return this.selectedItem === 'All'
}
}
<label>
<input type="radio" v-model="selectedItem" value="All" />
<span v-bind:class="{'isActive': isArchiveActive}">Archive ({{ items.length }})</span
</label>
Here is the forked codepen:
https://codepen.io/anon/pen/Ervdrr?editors=1010
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 have a simple html/css modal dialog that I close with a button and onclick event handlers in javascript. When the modal window is closed, the body of the site scrolls to the top of the screen. I need to prevent this.
Here is my code:
function modalClose() {
if (location.hash == '#log_in') {
location.hash = '';
}
}
// Handle ESC key (key code 27)
document.addEventListener('keyup', function(e) {
if (e.keyCode == 27) {
modalClose();
}
});
var modal = document.querySelector('#log_in');
// Handle click on the modal container
modal.addEventListener('click', modalClose, false);
// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click', function(e) {
e.stopPropagation();
}, false);
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
height: auto;
width: 75%;
position: relative;
margin-top: 2%;
margin-bottom: 10%;
margin-left: 10%;
margin-right: 10%;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -11px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
text-indent: 0px;
}
.close:hover {
background: navy;
}
<link href="https://thomaswurdinger.com/Store_Reboot/css/styles.css" rel="stylesheet" />
<script src="https://thomaswurdinger.com/Store_Reboot/js/js.js"></script>
<link href="https://thomaswurdinger.com/Store_Reboot/css/style.css" rel="stylesheet" />
<div id="log_in" class="modalDialog">
<div>
X
<div>Modal Contents</div>
</div>
</div>
I changed :
if (location.hash == '#log_in') {
location.hash = '';
}
to:
if (location.hash == '#log_in') {
location.hash = 'pagename.php';
}
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');
}