Object #<HTMLDivElement> has no method 'remove' - javascript

I am creating a Cordova hybrid app. I use the Facebookconnectplugin and show up a tutorial on first start. This works for every Supported Plattform and Version (Android / iOS) but not for Android 4.1
Here the code breaks with "Object # has no method 'remove'". It Breaks all the time at the line when I try to remove the fadeMe div. As said works everywhere else (Android 4.3+ / iOS 7+)
facebookConnectPlugin.login(["public_profile", "email", "user_friends"],
function (response) {
//check if this is startup then remove overlay
if(document.getElementById("fadeMe")){
document.getElementById("fadeMe").remove();//document.body.removeChild(div);
describeTableView();
}
}
);
CSS:
#fadeMe{
background-color: rgba(0,0,0,.75);
width: 100%;
height: 100%;
z-index: 11;
top: 0;
left: 0;
position: fixed;
color: #ffffff;
padding-left: 20px;
padding-top: 20px;
font-size: 0.9em;
font-weight: 300;
webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
And it is created like this:
var div = document.createElement("div");
div.setAttribute('class', 'fadeMe');
div.setAttribute('id', 'fadeMe');
document.body.appendChild(div);
Found a similar question but without answer: Similar Question

Using Polyfill does the trick:
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
this.parentNode.removeChild(this);
};
}

Related

How do you combine CSS & JS fade out onClick + fade in on page load?

I'm trying to accomplish the following on my website:
When a button is clicked (onClick), fade out the entire screen to black.
Then fade in from black to load the next page (the URL that the button linked to).
I'm finding solutions to points 1 and 2 separately, but no solution that combines these. See below. Can someone help achieve 1 and 2 following each other?
/*JS code I found online to create a fade out to black onClick */
$(document).ready(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
/*CSS code #1 I found online to create a fade out to black onClick */
#overlay {
width: 100%;
height : 100%;
opacity : 0;
background: '#000';
top: 0;
left: 0;
transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
.backdrop {
opacity: .4 !important;
}
/*CSS code #2 I found online to create a fade in on pageload */
#overlay {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<a class="btn btn-default" data-toggle="active" href="nextpage.com">Button</a>
<a class="btn btn-default" data-toggle="active" href="nextpage2.com">Button</a>
<div id="overlay"></div>
</body>
The above JS code goes with CSS code #1, but that only creates a toggle function (source).
For the fade in on page load, I found CSS code #2 as seen above, but that doesn't fade in from black source:

Prepend a div without the screen blinking

My question is similar to other questions, but with a twist.
I'm trying to inject a div as follows :
var headerDiv = document.getElementById("headerDiv");
if (headerDiv) {
var logo = document.createElement('div');
logo.id = "my-header";
//logo.style.display = "none";
var innerHTML = ' <div id="my-header-image"></div>' +
' <div id="my-header-text">' +
' My header text' +
' </div> ';
logo.innerHTML = innerHTML;
headerDiv.insertBefore(logo, headerDiv.firstChild);
}
headerDiv already previously exists in the page and renders well.
I'm calling my code only when the DOM is ready.
My problem is as follows : when the injection happens, "logo" blits on the page as an entirely white div for a split second. It's almost not noticeable if you don't look well. Then the style gets applied and everything goes back to normal.
It happens both in IE11 (IE10 mode or Edge mode) AND in Chrome.
It didn't happen when I was using jQuery instead of insertBefore.
Here is the CSS :
#my-header {
pointer-events: none; /* the clicks must go through -- to the native Sharepoint buttons underneath. Required for Edge compatibility. */
display:block;
position: absolute;
text-align: center;
width: 100%;
z-index: 1000;
height: 50px;
overflow: auto;
/* fade-in */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#my-header-text {
display:inline-block;
padding: 0;
position: relative;
bottom: 15px;
margin-left: 18px;
color: white;
font-size: 1.0em;
}
#my-header-image {
display:inline-block;
content: "";
top: 3px;
left: 20px;
width : 184px; /* same size as logo image */
height : 38px;
margin-top: 6px;
background-image: url("https://MY_URL/logo.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* fade-in animation definition */
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Could it be caused by the fade-in animation? The system doesn't know how to handle a new element that's supposed to start invisible (because of the animation) ?
I've noticed that "logo" blinks above "headerDiv" instead of on top, despite its absolute positionning. One more clue of some property being ignored in the early stage of rendering, between the time when the div gets added and the time when its style gets applied.
I've solved it wth a dirty workaround :
In the JS :
...
var logo = document.createElement('div');
logo.id = "my-header";
logo.style.height = "0"; // <-- new
...
In the CSS :
#my-header {
...
height: 50px !important; /* <-- made it important */
...
}
As you can understand, the object is forcefully made invisible and forced not to take up any on-screen space (by having height = 0) between the time of its creation by the JS and the time when the style gets applied by the CSS.
Therefore, the blinking still conceptually happens but its effect is not visible.

How to fade in changing text

I'm changning some html via JAvascript and I want to fade in the text.
This is the javascript:
var int = self.setInterval(function(){
if(!isPaused){
changeBG();
}
}, 3500);
function changeBG(){
//array of backgrounds
now = (now+1) % array.length ;
$('.documentary').css('background-image', 'url("' + array[now] + '")');
document.getElementById('film-detail').innerHTML = array2[now];
}
And this is my CSS which I think should cause it to fadeIn:
.documentary-bg div.film-title {
display: table-cell;
vertical-align: bottom;
bottom: 10px;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And the HTML:
<div class='film-title' id="film-detail"></div>
I've tried a number of approaches and it won't fade in!
Why not just use css transitions?
.text {
opacity: 1;
transition: opacity 2s;
}
.text.fadeOut {
opacity:0;
}
https://jsfiddle.net/tvakyp2c/
I'm not sure what are you trying to fade in but did you know that you can just use:
$(selector).fadeIn(speed,easing,callback)
in your case would probably be:
$('.documentary-bg').fadeIn(2000);

CSS keyframes animation doesn't run in some browsers

I'm building a website and I've added a CSS keyframes animation, called by a link click (connected to a javascript function).
This is my CSS file:
#banner {
background-color: #00BBD2;
position: absolute;
width: 100%;
height: 100%;
animation-duration: 1s;
animation-name: resizeBanner;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#keyframes resizeBanner {
from {height: 100%; background-color: #00BBD2}
to {height: 30%; background-color: #009688;}
}
And I'm starting the animation inside a javascript function like so:
<script>
function animate()
{
document.getElementById('banner').style.webkitAnimationPlayState = "running";
}
</script>
The animation runs perfectly in some browsers, while in others - it doesn't run at all. How can this be?
The Jquery animation that I run after the keyframes animation, however, always runs. Called like this:
$("#someid").fadeOut();
check it:
function animate() {
// Code for Chrome, Safari, and Opera
document.getElementById("banner").style.WebkitAnimationPlayState = "running";
// Standard syntax
document.getElementById("banner").style.animationPlayState = "running";
}

Change Webkit properties through Javascript?

Please help me, Might be cause I'm fairly new to CSS Animations and Javascript but I am using a code that is suppose to change the properties of it and when I run the code it does everything else with in the code except for change the properties in CSS of the desired div. I've tried all four of these and none of them seem to work, are they out of date? Is there a new way of doing this or what? None of them work at all.
document.getElementById('playBar').style.webkitAnimationDuration = 20 + "s";
document.getElementById('playBar').style.animationDuration = 20 + "s";
document.getElementById('playBar').style['-webkit-transition-duration'] = '50s';
value = Math.floor((100 / duration) * currentTime);
document.getElementById('playBar').setAttribute("style","-webkit-filter:grayscale(" + value + "%)")
CSS CODE
#playBar {
width: 1px;
height: 12px;
background: white;
float:left;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 0s;
}
/* Chrome, Safari, Opera */
-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
#keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
instead of
this.style['-webkit-transition-duration'] = '50s'
use
this.style.WebkitTransitionDuration="50s"

Categories

Resources