Community

Creating a floating, auto-move image on HTML page

I add the following code in my BODY class, to create a floating, auto-move image on my page.
However, the image is showed on the page, but the auto-move function is disable.
I tried these code in an independent html file, it works. So I don’t know why it doesn’t work in MODX.

var xPos = 300;

var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.style.top = yPos + document.body.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}

function start()
 {
 	img1.visibility = "visible";
	interval = setInterval('changePos()', delay);
}
function pause_resume() 
{
	if(pause) 
	{
		clearInterval(interval);
		pause = false;}
	else 
	{
		interval = setInterval('changePos()',delay);
		pause = true; 
		}
	}
start();


</script>
1 Like

What do you get in your console? Can you create a jsfiddle ? I don’t think this will be MODX related though.

Your console returns this error to me:

A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.

Its also possible you have some css classes in parent divs that screw up the placement? Or is it not appearing at all?

One of the advantages of Modx is that it can handle this type of code without interference from a processor

Your floated element will continue to float, but the cleared element will appear below it on the web page.

1 Like

is anyone tell me this is possible for css?