JavaScript text fade jags in Chrome - javascript

The text in this example moves slightly right before fading out and corrects left after fading back in. I am only seeing this effect on XP(SP3) with Chrome (version 26.0.1410.64 m). The same version of Chrome on Windows7 does not exhibit this behaviour.
The only solution I can find is to reset the bold font to normal before starting the fade but this would not look so good either.
This is part of some larger code and I am looking for a JavaScript solution rather than css.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fade moves text horizontally in Chrome with Windows XP</title>
<style type="text/css">
body {font-family: Arial; font-size:12px; font-weight:bold;}
</style>
<script type="text/javascript">
function setOpacity(id,level) {
var a = document.getElementById(id);
if(a) {
a.style.opacity = level;
}
}
var duration = 1000;
var steps = 22;
function fadeIn(id){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity('" + id + "'," + i + ")", i * duration);
}
}
function fadeOut(id) {
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity('" + id + "'," + (1 - i) + ")", i * duration);
}
}
</script>
</head>
<body>
<div id="fade">
This text moves slightly to the right before fading out and resets itself back to the left after fading back in.
<br />
This text moves slightly to the right before fading out and resets itself back to the left after fading back in.
</div>
<p onclick="fadeOut('fade')">Click to fade out</p>
<p onclick="fadeIn('fade')">Click to fade in</p>
</body>
</html>

Related

To Check "user has scrolled to the bottom code" is not working on chrome but it works on Microsoft Edge. WHY?

I use this code to check whether user has scrolled to the bottom code or not but it don't work on Google Chrome but it successfully works on Microsoft Edge.
In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't know why.
Here is the code i am using.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
</script>
<!decotype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 4000px">Scroll down!</div>
</body>
</html>
Assuming you use a div to load some data... (Because of #load_data)
You need to get 3 values on scroll:
The scrolled position
The div height
The div scrollable height
This last one is an element property of the real element height, including its overflow.
Additionnally, you need to define what's near the bottom... In pixels.
So... In the below example, I'm faking an Ajax request. Just look for the code you need.
$(document).ready(function() {
// Function to replace Ajax in this demo.
function createContent(n){
var fakeContent = "";
for(i=0;i<n;i++){
fakeContent += i+"<br>";
}
$("#load_data").append(fakeContent);
}
// Simulate initial content...
createContent(100);
// The code you need
var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
$("#load_data").on("scroll",function(){
if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
console.log("Faking Ajax...");
createContent(50);
}
});
}); // END ready
#load_data{
height: 150px;
width: 300px;
border: 1px solid grey;
overflow-y:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>
The problem is when you use margin (top or bottom) you should use .outerHeight(true) instead of .height or the sum of height and margin in this case. If you have padding is the same issue.
$(window).scroll(function(){
if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){
alert("bottom!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>
About .outerHeight()
Get the current computed outer height (including padding, border, and
optionally margin) for the first element in the set of matched
elements or set the outer height of every matched element
.

How to find the absolute the coordinates of an html element?

I need to find the absolute coordinates of the html element as per the screen. I know i can use getBoundingClientRect().top and getBoundingClientRect().left method to compute the coordinates as per the view port. How do i find the absolute coordinates? Another question is does window.screenX takes into account url and tab bar into account? Help is appreciated.
UPDATE
Added a special measurement:
var offset = window.outerHeight - window.innerHeight
This is the top of the browser to the bottom of the browser bar (or top of viewport). The new coords called UselessXY takes the height of the browser's bar and adds it to the Y coord. If the browser is resized, then it needs to be refreshed in order to get the new offset. This works best if the browser is maximized.
I made a function that'll display clientX, clientY, screenX, and screenY. And offset and uselessXY
Just click anywhere to get coordinates.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>COORDS</title>
<style>
*, *:before, *:after { margin: 0; padding: 0; }
body { width: 100vw; height: 100vh; position: relative; }
#display { width: 40ex; height: 50px; border: 1px solid grey; padding: 3px; position: absolute; }
</style>
</head>
<body onmousedown="coords(event)">
<figure id="display" onmouseover="this.style.left = '50%'" onclick="this.style.left = '0'">
<figcaption><u>Coordinates(X,Y)</u></figcaption>
<output id="xy"></output>
</figure>
<script>
function coords(evt) {
document.getElementById('xy').textContent = "screenXY: " + evt.screenX + ", " + evt.screenY +" | clientXY: " + evt.clientX + ", " + evt.clientY+" | Offset: "+offset+" | UselessXY: "+evt.screenX+", "+(evt.screenY + offset);
}
var offset = window.outerHeight - window.innerHeight;
</script>
</body>
</html>
How do i find the absolute coordinates?
use offsetTop
Suppose element's id is
var d = document.getElementById("socialChange");
var topPos = d.offsetTop;
Another question is does window.screenX takes into account url and tab
bar into account?
No, check the documentation here. Area covered by browser's controls are excluded out of the window.screenX and window.screenY.
x_axis = window.screenX + (window.outerWidth - window.innerWidth) + element.getBoundingClientRect().left
The above will get the absolute length from the left of the screen.
Similar case can be done for the y axis.
For the conceptual point of view, this picture can be used.

'Attaching' divs to either side of fluid content (diagram inside...)

I'm trying to figure out the best way to attach two fixed width divs to a fluid center div. I've searched around for an answer to this problem but most people require a 3 column layout to fill the entire width of the screen, whereas I would like a variable amount of whitespace either side.
The intention is that the fluid div will wrap around images scaled to a fixed height but variable width.
Ideally if the edge of the screen is reached the two fixed divs wont go any further. Could this be done with pure css/a framework or is it easier to use javascript? I'm using node.js server-side if it helps.
Right now I'm using inline-block as a way to make it work, but it seems buggy when using percentage widths. It doesn't resize correctly the until page is refreshed, so I was hoping there was a better way.
Center the div containing fluid and fixed elements and, then float:left them.
Demo: http://jsfiddle.net/2utM4/4/
Where is the width coming from? [edit] added offsetWidth.
Here is a javascript approach -- I included an equal-heights routine.
It has the max-width check. The code is commented.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* { outline:1px dotted #000; } /* all things */
body { padding:0; border:0; margin:0; }
#bodyid { }
#header, #footer { background:#eee; clear:both; }
#middle3 { background:#fee; clear:both; margin:auto; }
#fixedl { background:#efe; float:left; width:50px; }
#fluid1 { background:#eef; float:left; }
#fixedr { background:#efe; float:left; width:50px; }
</style>
<script type="text/javascript">
function f1() { // process center 3 cols
var wfluid1 = document.getElementById("fluid1").offsetWidth;
var wfixedl = wfixedr = 50; // are fixed
var wfluid1 = Math.min(wfluid1, screen.width - wfixedl - wfixedr); // max
var wmiddle3 = wfixedl + wfluid1 + wfixedr;
document.getElementById("middle3").style.width = wmiddle3 + "px";
document.getElementById("fluid1").style.width = wfluid1 + "px";
colsequal(new Array("fixedl", "fluid1", "fixedr")); // equal heights
}
function colsequal(v1) { // makes column heights equal
var h = document.getElementById(v1[0]).offsetHeight;
for (i=1; i<v1.length; i++) { // get maximum height
h = Math.max(h, document.getElementById(v1[i]).offsetHeight); }
for (i=0; i<v1.length; i++) { // make all maximum
document.getElementById(v1[i]).style.height = h + "px"; }
}
</script>
</head>
<body onload="f1();">
<div id="bodyid">
<div id="header">Header</div>
<div id="middle3">
<div id="fixedl">Fixed<br />1</div>
<div id="fluid1">Fluid<br />1<br />2<br />3</div>
<div id="fixedr">Fixed<br />1<br />2</div>
</div>
<div id="footer">Footer</div>
</div><!-- bodyid -->
</body>
</html>

Scrolling image on top of background image not moving

I'm trying to get a transparent image scrolling on top of my background image. I followed the tutorial located here: http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html
I altered the code a bit since I only need the overlay to scroll, instead of the background itself. Currently, I can see my overlay image on top of the background image, but it isn't moving.
Think of my background image being wine, and the overlay image being moving bubbles.
In the original tutorial, the background is moving and it's overlayed with the image (the bubbles). The changed I've (tried to) made is letting the overlay scroll instead of the background. Even though I've changed the values from $('#container').css("background-position", "50% " + offset + "px"); to $('#overlay').css("background-position", "50% " + offset + "px");, the image doesn't move. I left everything else the same in the .js-file.
Also, in the tutorial the overlay-div is incapsulated within the container-div. As you can see, I've now encapsulated the body-div within the overlay-div in my own HTML-file. Also, I've changed the position of the overlay in the CSS-file to relative.
My code:
HTML-page:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="resources/assets/styles.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<div id="overlay">
<div class="body">
<div class="header">
...
</div>
</body>
</html>
My CSS-file:
body {
background-image: url("../images/background.jpg");
width: 1104px;
height: 976px;
display: block;
margin-left: auto;
margin-right: auto;
font-family: Verdana;
}
#overlay {
position:relative;
width:899px;
height:858px;
background:url("../images/overlay.png");
}
And my JS-file:
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#overlay').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
// Initiate the scroll
scrollbackground();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset + "px");
});
Can anyone see what I'm doing wrong here?
My links to my JavaScript resource where faulty. If people are interested how this concept works, check out my Fiddle: http://jsfiddle.net/YuBpA/. Original tutorial comes from http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html, make sure to take a look there.

Make a kindof popup window appear using javascript

I have a HTML page & when a link is clicked I am trying to make a popup element(just a div box that appears over the link) appear above the link that was clicked. I use javascript to do this, but my problem is that the popup element gets positioned below the link when it should be above the link.
Do you know what I am doign incorrectly & how I can fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="all">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: center; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { padding: 20%; background-color: green; }
.container { background-color: white; }
.newEle { width: 100px; height: 100px; background-color: red; }
-->
</style>
<script type="text/javascript">
function getOffset( el )
{
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.parentNode;
}
return { top: _y, left: _x };
}
function onClick( n, ele )
{
// Should display a popup box just above the HTML element called "ele"
// but what actually happens is that the box is displayed below the element
// called "ele"
var infoBox = document.createElement("div");
infoBox.style.zIndex = "5";
//infoBox.offsetRight = ele.offsetRight;
//infoBox.offsetBottom = parseInt(ele.offsetBottom, 10) - 200 + "px";
infoBox.style.x = getOffset( ele ).left + "px";
infoBox.style.y = getOffset( ele ).top - 200 + "px";
infoBox.style.width = "200px";
infoBox.style.height = "200px";
infoBox.style.backgroundColor = "blue";
infoBox.innerHTML = "Hello";
document.body.appendChild( infoBox );
}
</script>
</head>
<body>
<div class="container">
<a class="newEle" onclick="onClick(1,this)">Create New Element</a>
</div>
</body>
</html>
add this to your css.
.container, .newEle {display: block; float: left;}
Then position your elements absolutely.
(Aside from Carl Griffiths post take a look on this)
Inspecting your code, the reason why it is below your link is:
Your appending the new element after your div.
You said you have a x and y style. But it is not applying on that element.
(Use firebug for FF or in Chrome use developer-tools)
Let say you successfully add the position style on the new element.
Your next problem is, it will not visible on the page.
What I mean is, if you set the top position to -200px it will relatively position
to your body not in your link.
Possible Fix:
Instead of using document.body.appendChild( infoBox );
Add an id to your div like id="container". Then replace your append with this.
var parentContainer = document.getElementById('container');
parentContainer.insertBefore(infoBox,parentContainer.firstChild);
I'm not pretty sure about your infoBox.style.x but instead you can use this infoBox.style.left = "0px;" and infoBox.style.top = "-200px" then you must use positioning e.g. relative/absolute
If you follow the second option you must properly set the CSS style of your div. Specially this body { padding: 20%; background-color: #CCCCCC; } If you find it difficult to understand my explanation. Here a sample code (jsfiddle) it is not as perfect as you want. But you can use enhance on your needs.
I've got a component that might make this simpler - it's not as complete as framework would be, but it's pretty good at what it does:
http://depressedpress.com/javascript-extensions/dp_panelmanager/
It basically creates "panels" out of HTML elements (either existing or generated) and provides methods to work with them. Position, Size, Opacity, simple animations, collision detection, bearing, etc. It's definately got holes, but it's come in handy.
One of the examples is a simple "popup definitions" thing that should be pretty easy to modify to fit your needs.
Basically you create panels for your popups and also turn your click targets into panels (the example shows how you do that with minimal code). Then your onClick event handler might have something like this:
// Set the Popup panel to the same position as the clicked element.
PopPanel.setPosition(this.getPosition());
// Shift the position of the popup panel up 210 pixels
PopPanel.shiftPosition([-210, 0]);
// Show the panel
PopPanel.setDisplay("show");
// Fade the panel in (Animate opacity)
PopPanel.setOpacity(100, 0 , 200);
Of course you're not too far off - and the advise already given will probably fix your current problem.

Categories