Elements css animation resets if i move it using js style.bottom - javascript

I have created a notification system with JavaScript. Everything works fine except the fade-out animation (notification-anim). If a new notification is displayed, the previous notifications animation will be reset, and notification window will start fading out from the start again. But each should fade out 5 seconds exactly after it's displayed. And if there are no notifications in the last 5 seconds, notification container gets overwritten with innerHTML = ''; and notifCount goes back to 0.
Why is this happening, and is there a solution for this?
jsfiddle
I have tried to explain everything as best as i could

Assigning a new value to innerHTML has the following effect:
Removes all of element's children, parses the content string and
assigns the resulting nodes as children of the element.
This of course causes all animations of these elements to play again.
One solution is to use insertAdjacentHTML instead:
Element.insertAdjacentHTML - An alternative for innerHTML, allowing
you to append the new HTML, instead of replacing it.
Your code will then look as follows:
elem('notifContainer').insertAdjacentHTML('beforeend', notif);
elem('notif' + notifCount).style.animation = 'notification-anim 5s ease-in forwards';
Note the additional forwards in the CSS animation to stop the animation once it's completed.
PS: If you are wondering why innerHTML += notif doesn't just 'append' but performs a regular assignment of a completely new value: a += b is 'just' a shorthand notation of a = a + b (according to the specification https://www.ecma-international.org/ecma-262/8.0/index.html#prod-AssignmentOperator).

Related

div scrolling inside an element but with java and selenium

I need to scroll an inner window (i.e. div). I found this web site
How to scroll to an element inside a div?
but this shows how to do Javascript. I am calling the executor but I don't think I can pass values back to java (height, etc). This is my code section. Basically there is a div window with a bunch of elements. Some are hidden on the bottom and do not actually appear in the html unless scrolled to. Once they are scrolled to I believe the will remain there. So I figured I could just scroll a large number and it would not give an error if it were too much, it would just scroll as much as possible.
I scroll to the top and then done, like this:
String sid = rolesScroller.getAttribute("id");
js.executeScript("document.getElementById('" + sid + "').scrollTop -= 1000");
js.executeScript("document.getElementById('" + sid + "').scrollTop += 1000");
waitForXPathVisibility("Scroll", ROLES_SCROLLER_X);
will this be ok or do I need to somehow figure the exact amount to scroll and scroll just by that amount?
I see there is an element.scrollHeight. Does the possible values for scrollTop go from 0 to scrollHeight? Are the units both in pixels?
The elements in the divs are themselves nodes (list values) which can also be expanded creating more elements underneath. Every time I search for a value I have to do the above to make sure everything is in view. The way I have it now works to an extent. But sometimes after scrolling when I try to access a node I get a StaleElementException. However if I do a waitForStaleElement() it sometimes gives an error saying the element did not go stale. Is there a way after executing the javascript that you can make sure all actions have completed so that a stale element won't happen?
To Summarize
When using the javascript executor from Java/Selenium is there a way to pass the javascript variables back to java so they can be used in later jasascript executor commands? (if that example above of -1000 +1000 is OK then this does not matter).
How can you ensure that the javascript command has completed before continuing so when you try to access an element in the scrolled div you will not get a stale element (I tried examining one element in the div, and the div itself).
It seems that the container is dynamically constructed upon scrolling. Try to scroll the last element at the top with scrollIntoView and then wait for a different element at the end:
WebDriverWait wait = new WebDriverWait(driver, 5);
JavascriptExecutor jse = (JavascriptExecutor)driver;
// get the last element
By lastChild = By.cssSelector("#list > div:last-of-type");
WebDriver elem = driver.findElement(lastChild);
// scroll the last element at the top
jse.executeScript("arguments[0].scrollIntoView(true);", elem);
// wait for a new element at the end
wait.until((WebDriver drv) -> !elem.equals(drv.findElement(lastChild)))

Vanilla javascript ignoring first tab/click

I have a slide in menu using vanilla javascript for use on phones, but so far all my tests have resulted in the mobile browsers ignoring the first tap (have tried both touchstart & click as events). Starting with the second tap it works beautifully with each and every subsequent tap.
As opening & closing the menu is the only javascript function on the pages, I don't want to load a huge library, I want to keep it simple and small. My code is below:
var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
var n = document.getElementById('nav');
var ns = n.style.left;
if (ns == "-600px") {
n.style.left = "0px";
} else {
n.style.left = "-600px";
}
e.preventDefault();
});
Any ways to easily eliminate this need for double clicking the first time?
In the fwiw dept, it is a responsive design, with the nav menu in a column on big screens and a slide in on phones.
Edit: Solved the issue
Following through on Matt Styles comment, I tried using classList.toggle and it solved the issue. The final version is below:
var b = document.getElementById('menubtn');
var n = document.getElementById('nav');
b.addEventListener('touchstart', function () {
n.classList.toggle('shwmenu');
setTimeout(function () {
b.classList.toggle('shwmenu');
}, 500);
});
I added the delayed menubtn code to toggle the icon between closed and open states.
The behaviour you describe could be caused by the following:
In your JS you try to implement some kind of On-Off toggle for your nav element, differentiated on the left CSS property value, with -600 representing the off value and 0 representing the on value.
As you said, toggling between those states seems to work fine, but what happens when your element is NOT initialized on exactly -600? Then on your first tap you will always run into your else clause and set it to -600 first, showing effectively no visual effect on your first tap, just as you describe.
For an instant test, just swap the if-else clause around to turn it on when style.left is not -600 and then maybe work up towards a more dynamic differentiation between your states ;)
I think this is because element.style.left is empty even if you have set left property in your stylesheet. You can use element.offsetLeft instead. Please see here to how it works.
HTMLElement.style - MDN
The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets. To get the values of all CSS properties for an element you should use window.getComputedStyle() instead.

Preloading a background-image with a temporary gif image

I have a couple of divs with background images. I would like to know how I can preload those background-images with a gif image since some of the background images are quite large. Doing the following does not work:
HTML:
<div id="glykopeels" onload="loadImage()">Glykopeels Content</div>
<div id="facials" onload="loadImage2()">Facials Content</div>
CSS:
#glykopeels{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
#facials{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
JS:
function loadImage(){
document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
}
function loadImage2(){
document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
}
I guess defining a different ID for that element in the onload function and defining css for that new ID is another possibility? Thus changing only the id of that element inside the onload function?
Thank you
First: there is no onload attribute for div's. EDIT: please read comments below, very interesting!
Secondly, you should place the url between quotes (escaping them if needed): url('http://lamininbeauty.co.za/images/products/facial.jpg')
Third, there was no image called preloader.gif, yet there was a image called loader.gif, so I used that one to 'fix' your css part for my solution in the jsfiddle demo link at the bottom.
During SO's server-move, I wrote a simple custom function for you that does exactly what you want.
Tested in IE6 and FF12.
To test this: please clear your browsers buffer, otherwise you can't SEE it in action (it would go too fast), since the images will probably be buffered on second view (again, perfect for your goal)!
JavaScript:
var repBg=function(a, t){ t=t||'*'; // by GitaarLAB
var c=document.getElementsByTagName(t), i=c.length, r=[];
while(i--){if (c[i].getAttribute(a)){r.push(c[i]);}} c=r; i=c.length;
repBg.exec=function(){
c[this['data-i']].style.background="#ebebeb url('"+this.src+"') no-repeat top right";
};
while(i--){ if (c[i].getAttribute(a)) {
r=new Image();
r.onload=repBg.exec;
r['data-i']=i;
r.src=c[i].getAttribute(a);
}}
};
// one could run repBg onload, but better to run it when the image has actually loaded, see html!
// window.onload=function(){ repBg('data-bg_img','div'); };
In your BODY: Add the attribute 'data-bg_img' (as per html5 convention, start with data-) to the elements you want to use this technique on and have it contain your background url, like this:
<div id="glykopeels" data-bg_img="http://lamininbeauty.co.za/images/products/glykopeel.jpg">Glykopeels Content</div>
The 'optional' initialization in your BODY:
<!--
trigger the replace background function when the loader image has actually loaded!
rewriting the onload with nothing to prevent infinite loop in IE6 (and greater?) !!
-->
<img src="http://lamininbeauty.co.za/images/products/loader.gif" style="display:none;" onload="this.onload=null; repBg('data-bg_img','div');">
Manual/explanation:
Images DO have a onload-event, so we place a loading-image in the html (at the bottom), that will trigger it's own onload-event, calling repBg() as soon as the browser has actually downloaded this loading-image!!!
The function repBg() takes up to 2 arguments:
the first mandatory string that contains the attribute that should be selected,
the second optional argument can define tagname (to limit the first argument).
When invoked, function repBg() will then search the body for elementTagNames that adhere to the second argument or * and then filter them with the first argument.
For each htmlObject that remains in the filtered htmlObjectCollection, a new image is created (not appended to the body) with the htmlObject's attribute-value (url) corresponding to the function's first argument as image-source, together with the htmlObjectCollection's referring id (attribute data-id) for reference.
As soon as these images load, they fire their onload event: calling repBg's exec method that replaces the background of the referenced htmlObject with the new freshly loaded (big) background-image (and the rest of your css). For further modularity you could expand on that function.
Lastly, note: the background images load in order they appear in source, aka the way you expect things to work!!
You can see it in action in this fiddle: http://jsfiddle.net/epdDa/
UPDATE VERSION 2: GRACEFUL FALLBACK!! AND COPY-PASTE NOBRAIN SOLUTION
It annoyed the living daylights out of me that my first solution did not provide graceful fallback. So I made a different solution that provides graceful fallback.
Also fully tested in IE6 and FF12
It works like this:
In your BODY: SIMPLY set your div's class to 'preload' and set it's style-attribute to the backgroundimage it should normally load. Like this:
<div id="facials" class="preload" style="background: #ebebeb url('http://lamininbeauty.co.za/images/products/facial.jpg') no-repeat top right;">Facials Content</div>
That was easy right?
Then place the following script in the HEAD (this is important) of the HTML:
// getElementsByClass original by dustin diaz, modified by GitaarLAB
document.getElementsByClassName=document.getElementsByClassName||function(searchClass,node,tag) {
var classElements = [], i=0, j=0;
if (!node){node = document;}
if (!tag){tag = '*';}
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i]; j++;}
} return classElements;
};
var repBg=(function(n,u,p,a,i,r){ // by GitaarLAB
window.onload=function(){repBg(1);};
i=new Image(); i.onload=function(){this.onload=null; repBg(2);};
document.write("<style>."+n+"{background:"+p+" url("+u+") "+a+
" !important; background-size: contain !important;}"+
"</style>");
i.src=u; r=0;
return function(t){
r=r+t; if(r>2){
var c=document.getElementsByClassName(n), i=0, l=c.length, s;
repBg.exec=function(){
document.getElementById(this['data-id']).className='';
};
for(;i<l;i++){
r=new Image();
r.onload=repBg.exec;
r['data-id']=c[i].getAttribute('id');
s=c[i].getAttribute('style');
try { // sane browsers
r.src=s.match(/url\('?([^'"]*)'?\)/i)[1];
} catch(e) { // <IE8
r.src=s.cssText.match(/url\('?([^'"]*)'?\)/i)[1];
}
}
}
};
})('preload','http://lamininbeauty.co.za/images/products/loader.gif','#ebebeb','no-repeat top right');
Explanation:
It took me all night.. but I found a way.
If javascript is enabled, function repBg will start by writing an extra style-block to the documents head (where it is located, note to place it after your last css script), that sets the loader-background-image for all elements with the class 'preload' (thus displaying the load-image at pageload).
If a load-test image for the loading-image is loaded AND the window is loaded (to get to all the elements in the body), then it does basically the same as version 1. Only this time we fetch and match the url from the element's style-atribute and onload subsequently empty the element's style-attribute.
Since this function auto-executes and overwrites itself with a version similar to version 1 (as above), you can simply adjust parameters at the last line of function 'repBg'.
Note that: in it's initial sate repBg accepts a maximum of 4 arguments: className, Url, cssPrepend and cssAppend.
To see it in action (don't forget to clean your browsers buffer as explained),
click this fiddle: http://jsfiddle.net/epdDa/1/
Whoever uses this function, I would greatly appreciate it if you credit me!
UPDATE:
Extra explanations and answers to comments.
Main differences between the 2 versions
Technically both versions use almost the same techniques so there is no real difference there.
With version 1 the javascript is the glue that IS NEEDED to make the page work, but works in valid true xhtml and plain html.
However, people with javascript turned off will get a nonfunctional site (with only loading-gifs displayed). Note that all other current answers, including the direction you where going, suffer from this problem!
With version 2 the javascript is only the spice that enhances the page-interaction (the way websites should be coded), but only works in html (or invalid xhtml).
However this should make sure that people with javascript turned off still see a normal functioning page. IE: javascript is NOT NEEDED to display the site correctly. This concept is called 'graceful fallback' or 'degrading gracefully'. My vote no 1 for version 2.
Extra bonus: this path gives you plain vanilla validating and SEMANTIC html since you use ancient trusty in-line style, id and class. My vote no 2 for version 2
Why did I choose to use in-line css? Why 'must' you use in-line css for this to work?
First of all, I spent hours to avoid in-line css. (I did not loose them, I learned way's that did not work, just as useful). Next, I want to point out that again all current answers including the direction you were going, had the actual background image url separated from the css, while in the css you were setting the loader image on each div separately, something where a class would have made more sense. Version 2 simply uses a configurable classname.
Both reading and writing css blocks in the document's HEAD is kind of a mess..
And did I mention linked external css files..??
In my opinion, all this would need so much extra code and cpu-cycles AND blocking/halting the browser on every pageload, in order for the core-priciple to work: the last valid css-rule applies. So the loading image is displayed as soon as possible since it is the specified background image at pageload, exactly what one would want from such a feature. And if the element is no longer part of the 'preload' class? Right: it's inline css takes effect, updated as fast as the browsr can render (if the image is already loaded). Nice.
So if you sacrifice (true) xhtml-support by simply using document.write, it currently still turns out this way is the 'best' way to go (as you can read in the previous 2 links). AND it would still work with an external linked css. My third (KISS-)vote for version 2.
My fourth vote for version 2 is because: the repBg function is prepared to have it's exec method(=function) 'upgraded' so you can only take out the 'preload' value from the class' valuelist. A simple replace() would suffice (currently left out for speed).
My fifth and final vote for version 2 is that because of it's graceful fallback setup, it is also relatively easy to fix for or block some browsers to use the extra 'spice'.
Finally, as for speed: I think version 2 will always feel snappier: onload-image is displayed almost as fast as the browser can fetch it (as if this extra css was always there to begin with), the loading-animations load snappy since: their load is already initiated in the head, and the browser will not download the overruled images until called for by the function. Plus they look interactive without distraction. But.. when the actual background images are loaded and the css updates: bam! the image is there, without the top-to-bottom-scanning'-effect'. That effect feels damn snappy to. Actually I'm convinced and will be doing an adaptation for images in the galary, for the snap-feel and increased perceived initial pageload.. Note, this is my opinion. Your mileage may vary haha.
Good luck!!
(and please vote if you like/use this idea/function, thank you!!)
1) div elements doens't have a load event, this event is only for body, images and script tags.
EDIT: Like pointed by #icktoofay, in the HTML spec the onload exists for all elements, however this is not supported by the major browsers (yet).
2) place this script tag at the end of your html page:
<script>
function loadImages() {
var glykopeels = document.getElementById('glykopeels');
var facials = document.getElementById('facials');
glykopeels.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/glykopeel.jpg)';
facials.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/facial.jpg)';
​
3) You can set style.background like you did, but do not put the ; at the end of the string, otherwise it will not work.
fiddle: http://jsfiddle.net/pjyH9/
EDIT
Seems like the loader image does not show because once the browser receive the first bytes of the new image it removes the loader.gif from the background. Let's take another approach.
Here is a function that will load the image to cache and then - when image is loaded - set the image to the background of the element with the specified id.
function loadImageToBackground(elementId, imageUri) {
var img = new Image();
img.onload = function() {
document.getElementById(elementId).style.backgroundImage = "url('" + imageUri + "')";
};
img.src = imageUri;
}
The on the elements that you want the loader:
// past the element id and the image url to the function
loadImageToBackground('glykopeels', ​'http://image....');
I'm pretty sure that this will work. The function loadImageToBackground do the basic work, you can extend and add more functionalies if you want.
Here is fiddle with a working example: http://jsfiddle.net/pjyH9/19/
(It loads 2 images with 1.5mb each, so you can see the loader in action).
I think what you're trying to do is get the background image to switch out to the big JPG image after it's loaded. You should be able to adapt something like this to work for you:
<html>
<head>
<title>Image Load Test</title>
<script type="text/javascript">
function loadImage(preloader, imageDiv) {
document.getElementById(imageDiv).style.background = '#ebebeb url('+preloader.src+') no-repeat top right';
// I think resetting the background property also resets backgroundSize.
// If you still want it 'contained' then you need to set the property again.
document.getElementById(imageDiv).style.backgroundSize = 'contain';
}
</script>
<style type="text/css">
#testImage {
background: #ebebeb url(small-image.gif) no-repeat top right;
background-size: contain;
}
#preloads { display: none; }
</style>
</head>
<body>
<div id="testImage">Some Content</div>
<div id="preloads">
<img src="full-image.jpg" onload="loadImage(this, 'testImage')">
</div>
</body>
</html>
The main difference here is that I'm preloading the JPG image in an <img> that's hidden in a <div> with the display: none property to keep it hidden. I'm not sure exactly what the onLoad event does for divs, but I'm pretty sure it's not what you're wanting. Putting an onLoad event in an img element causes the event to fire once the image has fully loaded, which I believe is what you want.
EDIT: I added a line in the JavaScript to reset the background-size property. If that's not what you wanted then just ignore that part.

Dynamically injecting an <object> tag causes white flash

I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:
function toggleObject() {
var object = document.getElementById('myObject');
if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');
// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);
} else {
document.getElementsByTagName('body')[0].removeChild(object);
}}
The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.
Is there a remedy for the ugly white flash?
Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..
Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.

What is the best way to implement multiway toggle using javascript/jQuery?

I have a div that can display 3 images (in the background) each indicating the 'state' of some variable: i.e., partial, full and none. For each of these states I have images: partial.gif, full.gif and none.gif (i.e., these are background images of that div)
Need: Circular queue like toggling effect for changing the images in this order partial -> full -> none -> partial
So if the current image is 'partial.gif' and the user clicks the div the background image changes to the next one in the sequence i.e., full.gif (and if it is currently full.gif it changes to none.gif and that to partial.gif and so on).
Naive solution: have a bunch of if/else's or switch-case and check the current one (image) and then decide based on array look up which is the next one. Is this the best way of doing it? Can I leverage jQuery's toggle function somehow?
(PS: It need not be restricted to images, but could also be for different background color sequences etc., I'd like to know what it is a good 'generic' way of doing it i.e., The example may be specific for background images but if I changed part of that code for background-color or font it should still work. I don't want it to be purely generic, but just enough so it is easy to modify for other attributes. If not, that's fine too. Just a thought :)
http://api.jquery.com/toggle-event/
To be precise http://api.jquery.com/toggle-event/#example-0
does exactly what you wanted...
$("#div1").toggle(
function() {
$(this).css("background-image","url(full.png)")
},
function() {
$(this).css("background-image","url()")
},
function() {
$(this).css("background-image","url(partial.png)")
}
});
UPDATE fn.toggle was removed from jQuery
Here are relevant posts
Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?
Toggle stopped working after jquery update
As long as it's a CSS-based solution (where you can just switch classes), you could do something like this (untested code):
$('#element').click(function() {
// get current css class value.
var class = $(this).attr('class');
// determine/increment number.
var nextNumber = parseInt(class.charAt(class.length - 1)) + 1;
// if too high, reset to first one.
if (nextNumber > 3) {
nextNumber = 1;
}
// remove old class and add new class.
$(this).removeClass(class).addClass('my_class' + nextNumber);
});
Assumption being made here that you only have one CSS class applied to the element at a time. But if that's not the case, I'm sure you can find a workaround/tweak for this.
And this is just generic enough where you can swap out your CSS class definitions without impacting the script functionality.

Categories