I have a CSS class which is added by javascript to a div with id to reveal and animate it. It works in the browser but not on Cordova mobile app:
#lobbyme {
position: absolute;
background-color: #F4A716;
width: 60%;
top: 10px;
left: 20%;
height: 8%;
padding: 4%;
color: #fff;
-webkit-transform: translate3d(0px,0%,0);
-webkit-transition: all 0.5s ease;
border-radius: 100px;
opacity: 0;
/* z-index: 0; */
transform: translate3d(0px,0%,0);
}
#lobbyme.animatelobbyme {
-webkit-transform: translate3d(0px,100%,0)!important;
opacity: 1;
transform: translate3d(0px,100%,0)!important;
}
I've tried both javascript and refuse to work on mobile:
$("#lobbyme").addClass("animatelobbyme");
$("#lobbyme").css({"opacity":"1", "-webkit-transform":"translate3d(0px,100%,0)"});
When running
alert("opacity" +$("#lobbyme").css('opacity')); I still get opacity 0.
Related
.mainMenu ::after {
position: absolute;
content: "";
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: #0a462d;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
I want to be able to toggle my transform effects on and off with a button click. Is that possible?
I have tried making a simple function in JS but I am not sure if I am calling it correctly.
I have this icon for exiting modal which stays perfectly fixed when scrolling down on Chrome, but I noticed it doesn't work in other browsers like Firefox and Safari.
I also notited that the icon is little off in the right corner but after split second it reposition itself where it should be. Any ideas what's causing this? Is it because the parent which is the modal is of position fixed and you can't have fixed position inside fixed container? I'm still learning HTML.
.outer {
position: fixed;
top: 0;
width: 70px;
cursor: pointer;
z-index: 3;
right: 0;
margin: 20px 20px 0px 0px;
}
.inner {
width: inherit;
text-align: center;
}
.inner::before, .inner::after {
position: absolute;
content: '';
height: 1px;
width: inherit;
background: #FFC107;
left: 0;
transition: all .3s ease-in;
#animatedModal3 {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: auto;
z-index: 9999;
opacity: 1;
animation-duration: 0.6s;
}
.inner::after {
bottom: 50%;
transform: rotate(-45deg);
}
.inner::before {
top: 50%;
transform: rotate(-45deg);
}
<div id="animatedModal3" class="bg-black">
<div class="close-animatedModal3 py-3 bg-black">
<div class="outer">
<div class="inner">
<label class="label2">Back</label>
</div>
</div>
</div>
</div>
You have a bracket that is not closed here .inner::before, .inner::after {...
I'm having a problem where I'm trying to transition an element (image) to the center of the page.
The problem is that it jumps to one point and then animates the rest of the transitions instead of animating one movement to the center.
img {
position: relative;
width: 350px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.transformed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Here you can see it in action: https://codesandbox.io/s/xz8o225yz
You must enter the parameters in the first class as well.
like:
img {
position: relative;
width: 350px;
left: 0;
top: 0;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.transformed {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Only if you add ex: left:0 and top:0 the animation know where have to start. The same for all parameters you want animated.
Its because you have not defined the value for left and top properties which you have defined in .transformed selector. Try this code.
img {
position: relative;
width: 350px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
left: 0;
top: 0;
}
You can do it like this:
function myFunction() {
var el = document.getElementById('myImg');
el.classList.add("transformed");
}
* {
box-sizing: border-box;
}
body {
background-color: lightblue;
/* added; or on any other parent element */
position: relative;
height: 100vh;
margin: 0;
}
.wrapper {
padding: 20px;
width: 100%;
}
img {
position: absolute; /* modified */
top: 25px; /* added */
left: 0; /* added */
width: 350px;
transition: all .5s;
}
.transformed {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<button onclick="myFunction()">Center</button>
<img id="myImg" src="https://media0.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif">
I created a popup window using CSS. It is working fine in google chrome; however, it is not displaying in Safari as expected. Above photo is in Safari and the bottom photo is in chrome.
The following code is what I used to create the popup window:
.modal-container {
position: fixed;
background-color: #fff;
left: 50%;
width: 80%;
height: 620px;
max-width: 900px;
padding: 20px;
border-radius: 5px;
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
-webkit-transition: transform 500ms ease-out;
transition: transform 500ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
And this following code is what I used to create my header
.box {
position: fixed;
top:0px;
left: 0;
width: 100%;
padding-top: 20px;
background-color: #fff;
overflow: hidden;
display: block;
z-index: 900;
}
Does anyone have an explanation why in chrome everything looks fine, but in safari not ?
Thanks
here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
/* overflow-y: scroll; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.5);
/* dim the background */
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: bold;
position: fixed;
right: 50px;
font-size: 14px;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #1fc2ff;
top: 0;
left: 0;
z-index: 1000000;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #1fc2ff;
position: absolute;
top: 50%;
right: -30px;
margin-top: -30px;
}
.modal-prompt-half-page-header {
font-weight: bold;
font-size: 57px;
padding: 0 40px;
text-align: right;
line-height: 58px;
color: white;
text-transform: inherit;
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-bottom: 0;
}
.social-prompt-button-facebook {
width: 101px;
height: 101px;
-moz-border-radius: 101px;
-webkit-border-radius: 101px;
border-radius: 101px;
background-color: white;
position: absolute;
left: 110%;
top: 50%;
margin-top: -51px;
}
.social-prompt-button-facebook .fb-like {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -24px;
}
.modal-prompt-half-page {
left: calc(-40% - 30px);
transition: left 0.4s ease;
width: 40%;
min-width: 450px;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-button-facebook {
overflow: hidden;
position: fixed;
top: 0;
bottom: 0;
left: calc(40% + 60px);
margin: auto 0;
width: 101px;
height: 101px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
}
.modal-copy-container{
font-size: 5vw;
line-height: 5vw;
margin-top: 0;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-button-facebook {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#media (max-width: 1125px) {
.modal-prompt-half-page {
width: 450px;
left: -480px;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.social-prompt-button-facebook {
left: 510px;
}
.modal-copy-container {
font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
/* line-height: 56px; */
}
}
</style>
<div class = "modal-overlay"></div>
<div class = "modal-prompt-half-page">
<div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
<h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
<div class = "modal-prompt-half-page-arrow"></div>
<div class = "modal-prompt-half-page-cont clearfix">
<div class = "social-prompt-button-facebook">
<div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&app_id=141861192518680&container_width=0&href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&layout=button&locale=en_US&sdk=joey&show_faces=false">
<span style = "vertical-align: bottom; width: 49px; height: 20px;">
<iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
$('.modal-prompt').animate({width: 'show'});
}, 5000);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-close").click(function () {
$(".modal-prompt").animate({
width: "hide"
});
});
});
</script>
Toggling 'hide' defaults to right-to-left
It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:
$('#elementId').animate({
left: '50%',
}, 500 );
You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.