HTML - Body Rotation Affecting Fixed Elements - javascript

I have a Javascript function which is used to shake the screen for about a second.
function shakeScreen() {
var degrees = 0;
var goal = 0;
var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];
function frame() {
if(goals[goal] < 0) {
degrees -= 1;
} else {
degrees += 1;
}
get('body','tag');
current[0].style.transform = 'rotate(' + degrees + 'deg)';
if(degrees === goals[goal]) {
goal += 1;
if(goal === goals.length) {
clearInterval(intervalId);
}
}
}
var intervalId = setInterval(frame,16);
}
Inside my HTML body, my first element has a fixed position. This element is a pop-up that displays messagers to users, and it has a fixed position so it appears in the same position on the screen if the end user has scrolled down or up the page. Here is a snippet of the HTML:
<body>
<div id='fade' onclick="fade('out')"><div id='alert'></div></div>
<!-- more unrelated content -->
Here is the CSS for the specified element above:
#fade {
z-index: 2750;
position: fixed; /*important*/
display: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0);
text-align: center;
}
#fade:hover {
cursor: pointer;
}
When the Javascript function shakeScreen() is executed, the fade element gets misaligned and moves to the top of the body rather than remaining in the center of the end user's screen. Here is the JSFiddle: https://jsfiddle.net/turkey3/ug9zx1d2/3/ Scroll down halfway and you'll see a button. Click that button to shake the screen. You'll notice a split second where the fade element starts appearing at the center of the screen, but then it moves to the top after it starts shaking. Also, to see how I want it to be, comment out the shakeScreen function that's inside the setup function and then run the code.
Edit: The fade element is simply a dark background. The alert element is a white box with the message that shows to the user.

Solution
I found out the best method was, rather than rotating the body element, was to wrap all the other code insider a div and shake the division rather than the entire body. After that, the alert message properly showed in the center of the screen. Here is the fixed code: https://jsfiddle.net/turkey3/ug9zx1d2/4/
Here is the HTML wrapped in the div:
<body>
<div id='fade' onclick="fade('out')"><div id='alert'></div></div>
<div id='shake'>
<!-- more unrelated content -->
</div>
And updated JS:
function shakeScreen() {
var degrees = 0;
var goal = 0;
var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];
function frame() {
if(goals[goal] < 0) {
degrees -= 1;
} else {
degrees += 1;
}
get('shake','id');
current.style.transform = 'rotate(' + degrees + 'deg)';
if(degrees === goals[goal]) {
goal += 1;
if(goal === goals.length) {
clearInterval(intervalId);
}
}
}
var intervalId = setInterval(frame,16);
}

Related

Div not resetting its default position after altered using javascript

I have a overlay with empty height and width that covers the whole page once its clicked using a button, this overlay transition from top 0 left 0 all the way down to bottom right. once this over lay is closed I edited the css property using java script so that it transition finished on the bottom right.
The first time opening and close this overlay, it works fine, however the second time I open it, instead of starting from top left, it starts from bottom right and moves all the way to top left. I cant seem to fix this problem. I try resetting the left to 0 and top to 0 but it doesnt work.
document.querySelectorAll(".overlay_background")[0].addEventListener("click", parent);
function parent(event) {
this.style.left = this.clientWidth + "px";
this.style.top = this.clientHeight + "px";
this.style.height = 0;
this.style.width = 0;
}
function child(event) {
event.stopPropagation();
}
function http_request_availability() {
document.getElementById("overlay_background_id").style.left = "0";
document.getElementById("overlay_background_id").style.top = "0";
console.log(document.getElementById("overlay_background_id"));
document.getElementById("overlay_background_id").style.height = "100vh";
document.getElementById("overlay_background_id").style.width = "100vw";
document.getElementById("overlay_background_id").style.backgroundColor = "rgba(0,0,0, 0.5)";
document.body.style.overflow = "hidden";
}
.overlay_background {
position: fixed;
overflow: hidden;
height: 0;
width: 0;
left: 0;
top: 0;
transition: 0.7s ease;
z-index: 1;
}
<div class="overlay_background" id="overlay_background_id">
Hi this is my overlay
</div>
<button class='btn_ws' onclick='http_request_availability();'>Book Work-Shop</button></div>
The problem is your overlay never resets to its original position of top 0 and left 0.
Try adding this to the end of your parent() function:
var self = this;
setTimeout(function() {
self.style.left = 0;
self.style.top = 0;
}, 700);
This will reset the left and top positions to 0 after 700 ms has passed (the duration of the transition).

Using animation (HTML5 Canvas Document) in a slideshow

I want to use 3 different animations within a slideshow. For the slideshow I used the uikit (front-end framework developed in LESS & SASS based on html, css, javascript and jQuery) and I embedded the animations which were created in Adobe Animate CC in an iframe.
Everything works perfect, but the problem is that all 3 animations are loading on the same time. Because all of them include sound elements I can hear 3 different sounds while only the first animation is visible.
Is it possible to define something for the animations itself that the animation timeline starts playing only when the animation is visible?
Let me show a code snippet, maybe this will explain my problem:
Codesnippet
This is the first coding part of the slideshow. The file 'slide01.html' is the first animation, which is displayed to the user directly. Further in the code there is also a slide02.html and slide03.html which are also animations. So I did not build a whole slideshow in Adobe Animate CC, but I created 3 different animations, which are implemented separately. So there are 3 different html files within an iframe, which starts playing once the whole website is completely loaded.
You can try to create Animation using Java Script
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>

Firefox adds undesired thin line above a logo animated using JavaScript

Well it seems that I'm having some sort of a problem with Firefox, I've added a logo to my website and styled it through this CSS block:
#splash div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
}
When I open the web page with Chrome or any other browser other than Firefox it displays it in the right way,unless I zoomed in it will show a thin line,
while opening the web page from Firefox will show a thin line above the image with or without zooming in.
The Logo is animated through this code:
IndexPage: {
Splash: {
init: function() {
var $splash = $('#splash'),
$logo = $splash.find('#logo'),
frame = 1,
frameCount = 46
framesPerSecond = 50;
function animateLogo() {
var lastTime = 0;
var currTime = new Date().getTime();
// var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined")
requestAnimationFrame = function (callback, element) {
return setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
};
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
// lastTime = currTime + timeToCall;
}
}
$('form.search').on({
close: function() { $splash.removeClass('searching'); },
open: function() { $splash.addClass('searching'); }
});
if ($window.width() >= 532) {
$window.scroll(function() {
var top = $window.scrollTop();
$splash.find('div.logo').css('opacity', top > 150 ? 0 : (150 - top) / 150);
});
}
$window.resize(function() {
if ($splash.width() < 768) {
$logo.css('background-position', '0 0');
} else {
$logo.css('background-position', '0 -3910px');
}
});
if ($window.width() >= 768)
animateLogo();
}
}
}
Any Ideas?
It looks like Firefox does some extrapolation of your image before rendering it (for perf I guess). It calculate the pixel to display using the neighbourhood of the one on your image, and some pixels on the top of your image are near black pixel resulting in a black/grey line.
EDIT: You can disable this behavior using image-rendering: optimizequality; in your CSS.
Snippet to test this:
var frame = 1,
frameCount = 46;
function animateLogo() {
$logo=$('.logo');
var lastTime = 0;
var currTime = new Date().getTime();
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined") {
requestAnimationFrame = function (callback, element) {
return setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
}
}
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
}
}
.logo {
background-image: url('data:image/png;base64,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CAgICAgICAgICAgICAgICAgICAgICAgICAgIiDiIN841BAQEBAQEBMQrZlq6yX0TdyAgICAgICAqQbQFD4OAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiIJoICAgICAgnLEhIMaF+BcEBASEQywEBAQEBAQEBAQEBATEDhANBAQEBAQEBATEuBCW4hAQEBAQEBCBEMfHv9aPiD0QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCvQbx9OggICAgICAiI0ine3pPASycICAgICAiIOhCXZQssCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiASIn5SAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMiKCD4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPEQPzQ9BAQEBAQEBETRzEo39izwyulLKeI8MEIJJZRQQgklRlDiquBRk+glChFKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEs0kQ4mJEkFKvHd0cnRSQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklmupnlgGhhBJKKKHEjku8y1DinRJKODo5TyihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoosVHiR6ePUCIBQgkllFBCCSWSl3hXvKnzuCsnCAgICAgIiEoQFwUP+wwBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAZEN8eH4uKkeEXsgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiI7YwLQQEBAQEBATEd+Zz6WZ2gZdOP2dAKKGEEkooocQYSpQtsIKXKHjUeyWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJUZeYZygxz1DipKDE6enfYpdom9rn5wwIJZRQQgkllBhDiZMMJU4ylJhnKDHPUKLJUKJRQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZSIU2Ir0x24RP0IJZRQQgkllMhe4mvpRraBl04QEBAQEBAQdSD6gkcdQUBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRAXGdAlGxefMRlBsR1BkTB9kFAQCREBB8ICAgICIgRIK4hgiCuICC2h+ghICAgHGIhsiOsYl0UQUBAQEBAQEBAHAgxT4C4ahIgXvrBhn+uBXGSAPHis6kWRJ8e0UBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBUhtjazCEgICAgICAgnp1p6QZGXmBBQEBAQEBAVIJoCx4GAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExRkQDAbFfROyBgIB408kOAgICAgICAgICAgLClR0EBAQEBAQEBIS74hAQEBAQEBAQEBAQEBAQe0L8kgHReTpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA7BmxxTmDgICAgICAgHhmZqWbF/k7kEBAQEBAQEBUgih41AQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAmLEiOADAQEBAQEBAbE/xKcMiBYCAgICAgICAmJciLnrCQgICAgICAgICAgICAgICAgIiLyIHgICAgICAgICYlwIS3EICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiF0gtjpXGRDXSiihhBJKKKHE9qd4404CL50gICAgICAg6kBcFjxqCgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBARER8eH4uKkeEXwgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIJIitj7nEBAQEBAQEBAbMy3dsIvAK6dixGUGhBJKKKGEEkpUXGJe/X2dG8RJEUIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJvZU4Pv61/hKxp7BEeIQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihxIEQO5geAgICAgICAuLRfCndrLPASycICAgICAiIOhBXBY/6CAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRBfH+9PSkekTwgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIBIixggILaHuLZjQ0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQBwasaNpISAgICAgICDW5mPpJvWBV05HpYjIq0QllFBCCSWUGEOJkjXOl+glyhBKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSoUv85b//qb9E7DnKgFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQImWJJkOJRgkllFBCCSWUUEIJJZRQQgkllFBiWaLNUKJVQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBiBCV2Nt0eS9SPUEIJJZRQQonsJb6WblDkBRYEBAQEBAREHYi+/ptTEBAQEBAQEBAQEBAQELUPBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMS+EFdKKKEEBAQEBAQEBAQEBAQEhGvsaIgBAgICAgLiJUSrBAQEBASEy1MICAgICAgICAgICAgI19gQEBAQENUifP0EBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREBYhdTg8BAQEBAQEBcTuT4s0JvHKCgICAgICAqATRFTxsBgEBAQGxK0TsgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgFhD9BAQ9gkICAgIiP0gLpSAgICAgICAgICAgICAODyihYCAgICAgICAgICAgICAgICAgICAgICAgICAgIDIgvBiPAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBATEC4gdTwsBAQEBAQEBcTPT0k2J/FPKICAgICAgICpBtE3tAwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQHxOsTO5woCAgICAgICoinaiC740gkCAgICAgKiDsRl9TdsICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBeh9jLzCEgICAgICBGjph8/9134VdOEBAQEBAQEJUgzqq/YXODOM+AUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJEZbwdIqC6DIg+gyI6wyIAQICIt/RCQICIiEixQLQlZ0SSiihhBJKKKGEEkocBNFCQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGwgOggICAgICAgIiHEhzjMgfIayEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJLxJ7mIgPiUgkllFBCCSWUeOt8+c57bmtYOkFAQEBAQEDUgbiq/oYNBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBER4RA8BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbFnhFeKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIL6D2N9cQ0BAQEBAQIwX8e7Fd9rWsXKCgICAgICAqATRVX/D5gZxkQGhhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkrsC7HX6SAgICAgICBGijh6/t211SydICAgICAgICpB1LOxEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPERRxkQ//R0goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuEOcQ0BAODpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDkRex7ICAgICAgIEaJ2N9Ha4cDAQEBAQEBUQeir/6GDQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMQhEYMSEBAQEBDZER0EBAQEBAQEBAQExCEQLQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREToRPUIGAgICAgICAgKgV8VPdiB4CYtuIBgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiLJTyrf/7QQEBAQEBAQo0NMnnwfla2cICAgICAgICpB1P9tACEgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgqkDMlYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIgzjI9BAQEBAQEBAjQ0w333x9SycICAgICAiIShAn1d+xgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNgCooWAgMiHOMuAOM+A6CAgIB4gLiAgICBc2UFAQEBAQEBAQEBsBdG6ngiC6JUIgji3Y0M4T0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC8GnGoaSEgICAgICDGhHj0duv8Hm4QEBAQEBAQdSDq/0arN4jLDAgllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklnkZcZ0AMEBAQzhNKKKGEEkoooYQSSiihhBKpSvQQEBD5EM4TSiihhBJKKKGEEkoooYQSSiihRC6E+04Q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ICAgICAgICAgICAgICAgICB2gggzHQQEBAQEBERyhAUgBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExE4QYaaDgICAgICASI6wAISAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDYCSLMdBAQEBAQEBDJERaAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDtBhJkOAgICAgICIjnCAhACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJiJ4gw00FAQEBAQEAkR1gAQkBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQOwEEWY6CAgICAgIiOQIC0AICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiInSDCTAcBAQEBAQGRHGEBCAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbETRJjpICAgICAgIDIjpsPQVr92goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC4n6F//JgWAuJViMX39ekzIG43v3bE4g/VI7oMiAHi8Iib/82ePH9Xhmie/O5ptSFmGRDTx/tDjYgJRBjE8AJideyaPvW4KIjFL99qzG7/elFmunYqaZf/KpLiOcT09jC1+OUOMV1b565+Gxlxt3MsgtwhZssz+vK7goZH3J/87veJyWqZO60WMV0tc2e1IBZPpNsn1S1isa4a7oCLXT8+4m6X7u4Rw+1fDPeH2lno88QCMbn9aK8j7h92u9NPQp+x1xHtErF2uJoEOrq+jLh9Yg3NCtEtfz+J9tMenlrF3n/M7z7k07WTxbe9JDpisRO8hJhUgBhWiJuP+XT1FFoeUStA3F5j3x18hn62fAqtEM0CEXfHvl9WrK3ymk1EXwGieQ7R3yOaaK9pvHAHcLZcbU/X8twh+tCIdoWYLu/f3CKW06/xYiLW74pPVtdxm4hQihden3geMfmhn1Gw+1XsQ0TzNKIZYl9jF5W4vUDqakA82rEf7ASz0DcKmgeH2GcRC0UliP5ZxDOvAoRDPDxjbzx7qkDcrJCGtQXgxrNnVgPiZh3+1Cp27V92VSCeuJ5YzaQGxKMru41nTxWIm7944vK0NkT/4G7Hxi5QA+LxfaeNV/NqQDy+jXm/HGzvbv3VcHSarZ5Dy9uYt8fbG0RXy3li4674cPcsaxf/1XHG3nh9YrEeXCzPF/+bVrAA3Hy5a3p/FT4Zgr/IskJ0jxCTx4j41xNPvHp6/yLX5Ad/EODeEE+8jj1d3Ziq5Bp7+cdvvy5XHLMHr2NHvNtRMqv9INZP1fYJ7xAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBABEWGmhYCAgICAgEiG+D/PDx7oyy0cAgAAAABJRU5ErkJggg==');
background-size: 280px;
height: 85px;
width: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo"></div>
<button onclick="frame=0;$('.logo').css('image-rendering','auto');animateLogo()">Without CSS property (default)</button>
<button onclick="frame=0;$('.logo').css('image-rendering','optimizeQuality');animateLogo()">With CSS property</button>
Old answer:
You can separate sprites on your image by a few transparent pixels (or of the color of what is behind your logo) so the effect would not be visible anymore.
Well, if all else fails, you could always attempt to place a div over the thin line. Also try adding a border attribute to your code and set it to 0px solid whatever your background-color is. If all of these don't work, then try adding another border over the red line.
Try loading the image as is in the browser and check if the line is still placed. Also, in Firefox, right-click, choose inspect and see where it points to. For example, the line might be coming from div or some other html element.
i think creating an empty 'content' and using a background to show the image: works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
you could try if this would fix the issue
I think it just renders the size of image or block incorrectly, I played on your website with the CSS and and it seems that if you change background size to
background-size: 279.8px auto;
it solves the issue.
UPDATE:
As an additional solution, you might wrap the logo in a div, give the div hidden overflow, and then lift the block with your image up to 1px. It will hide the line as well.
Try like this:
#match div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
outline: 0;
}

How to set Image object to stop moving after certain step

functionality:
User is to click on the "TAP ME" image button and when doing so, the main image("Circle") will move from the top of the page to the bottom of the page. Hence, the faster you click on the "TAP ME" image button, the faster it will move down vertically.
What I Have done:
I have created the necessary html, css and function required for the above mentioned function. Meaning, user is able to get the circle to move down vertically when the user taps rapidly on the "TAP ME" image button.
Issue:
The circle image has got no stop point, hence, the circle will keep moving down vertically when the user taps on the "TAP ME" image button. How am I possible to say for example, set a bottom limit for the circle image, such that the circle image will not be able to keep moving down when user keeps tapping on the "TAP ME" image button? Hence, would like to set the circle image to stop moving down at about 1/4 of the remaining page
I have attached the code for your perusal:
function GameStart() {
console.log("GameStart");
//Method to enable star to decrease when 'tap' button is tapped
var step = 20,
counter = 0,
timer = 30;
var x = document.getElementById('GameStar').offsetTop;
x = x + step;
document.getElementById('GameStar').style.top = x + "px";
//Set CountDown Function
CounterInterval = setInterval(function() {
counter = counter + 1;
timer = timer - 1;
$('#GameTime').html(timer);
if (counter == 30 && x >= 100) {
clearInterval(CounterInterval);
$("#GamePage").hide();
$("#Congratulations").show();
} else if (counter == 30 && x < 100) {
counter = 0;
timer = 30;
clearInterval(CounterInterval);
$("#GamePage").hide();
$("#GameOver").show();
}
}, 2000)
}
#GameStar {
position: absolute;
top: -6.5em;
left: 500px;
width: auto;
height: 1050px;
z-index: 1;
}
#Tap {
position: absolute;
width: 600px;
height: 650px;
margin-top: 2100px;
margin-left: 670px;
outline: 0px;
z-index: 2;
}
<div id="GamePage" style="background-image: url(lib/Elements/Background.png); background-repeat: no-repeat; width:100%; height:100%;z-index=1;">
<audio src="lib/Elements/happy.mp3" loop autoplay>Your browser does not support this audio format</audio>
<img id="GameStar" type="image" src="lib/Elements/The%20Star.png">
<input id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" />
</div>
Can you just add a simple if statement that check if it's reached the end before updating its position?
var bottomlimit = <1/4 of remaining page>
var x = document.getElementById('GameStar').offsetTop;
if(x < bottomlimit) x = x + step;
document.getElementById('GameStar').style.top = x + "px";

Is it possible to proof an div element of visibility inside a "overflow-x:scroll" div-container ?

I am currently trying to figure out how to get the information of how much percent is visbile of a div inside a overflow-x:scroll container. I also need to know if it comes from the right or from the left ? Is this possible somehow ?
This might be helpfull. You could edit the code from the answer to that question to check if the element was scrolled in from the right or the left.
Check if element is visible after scrolling
To calculate the percentage visable you just need to compare child's size to the parent's size and what the 'left' offset of the child is.
(I might add a code example later)
EDIT
I made a small example that show how you can detect the visible percentage of that child inside an "overflow-x:scroll" div-container and if the child comes from left or right.
<style>
#parent {
overflow-x:scroll;
width: 300px;
height:120px;
border: solid 1px #000;
}
#child {
width: 200px;
height: 100px;
background:#FF0;
margin-left: 200px;
}
#scrollPane {
width: 800px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
alert(percantageVisible() + "% of the child is visible");
});
});
function percantageVisible()
{
var parent = $("#parent");
var parentLeftOffset = parent.offset().left;
var parentRightOffset = parentLeftOffset + parent.width();
var child = $("#child");
var childLeftOffset = child.offset().left;
var childRightOffset = childLeftOffset + child.width();
if(childLeftOffset < parentLeftOffset && childRightOffset > parentLeftOffset && childRightOffset < parentRightOffset){
// percentage from the left
var width = child.width();
var hiddenWidth = Math.abs(childLeftOffset - parentLeftOffset);
var visibleWidth = width - hiddenWidth;
return visibleWidth/(width/100);
}
else if(childRightOffset > parentRightOffset && childLeftOffset < parentRightOffset && childLeftOffset > parentLeftOffset ){
// percentage from the right
var width = child.width();
var hiddenWidth = Math.abs(parentRightOffset -childRightOffset);
var visibleWidth = width - hiddenWidth;
return visibleWidth/(width/100);
}
else if (childLeftOffset > parentLeftOffset && childRightOffset < parentRightOffset){
// all visible
return 100;
}
else{
// invisible
return 0;
}
}
</script>
<div id="parent">
<div id="scrollPane">
<div id="child"> </div>
</div>
</div>
<button id="button">check percentage</button>
Hope this helps

Categories