CODEWITHSUNDEEP
javascripthtml
Kyle Mann
Kyle Mann

Reputation: 17

Auto scrolling on existing website

So i have some code that makes the web page automatically scroll across horizontally which works when i create the webpage, however when i attempt to open an existing webpage and then run the script nothing happens, can someone please explain what i need to do, i just want to be able to open the script, for it to then open the webpage and start scrolling back and forth, it's for displaying different work item on a canban board if that helps.

This is the what i have so far:

<script>
window.open("https://www.bbc.co.uk/news");


var scrollWanted = true;
var scrollbarPosition = 0;
var pageWidth = getWidth();

function scrollWin() 
{
	var scrollDirection = 'Right';
	var pageWidth = getWidth();
	scrollWanted = true;
	

	function f() 
	{
		if(scrollWanted)
		{
			if(scrollbarPosition == 0)
			{
				scrollDirection = 'Right'
			}
			
			if(scrollbarPosition == 100)
			{

				scrollDirection = 'Left';
			}
			
			if(scrollDirection == 'Right')
			{
				window.scrollTo(window.scrollX + 1, 0);				
				scrollbarPosition++;					
			}
			
			if(scrollDirection == 'Left')
			{
				window.scrollTo(window.scrollX - 1, 0);				
				scrollbarPosition--;					
			}
						
			setTimeout( f, 30 );
			
			
			//Refresh
			//if( scrollX == 50 )
			//{
			//	window.scrollTo(0,0);
			//	location.reload();
			//	
			//	setTimeout( f, 3000 );
			//	scrollWin();
			//}
		}
	}
	f();
	

  
}

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}
</script>

I know that the BBC website doesn't extend horizontally but i can't think of any websites that do atm.

Thank you! Kyle.

Upvotes: 1

Views: 125

Answers (1)

Jay Dadhania
Jay Dadhania

Reputation: 404

As far as I understand your issue, you want to open some website example.com via javascript, content of which can be horizontally scrolled.

Solution:

You need to assign the newly opened window to a variable, so that you can manipulate it after opening.

var newWindow = window.open('http://example.com');

For manipulation, use this newWindow variable as a window object like this:

newWindow.scrollTo(newWindow.scrollX + 1, 0);

Also, your getWidth() function needs to be changed like this:

function getWidth(win) {
  return Math.max(
    win.document.body.scrollWidth,
    win.document.documentElement.scrollWidth,
    win.document.body.offsetWidth,
    win.document.documentElement.offsetWidth,
    win.document.documentElement.clientWidth
  );
}

As you can guess, the scrollWin() function needs to be changed in the same way.

Note 1

If you open a window with a different domain than the javascript is running on, the window object returned by window.open() is inaccesible.

That said, if your javascript is loaded on a site like yoursite.com, and you open another domain like var newWindow = window.open('http://example.com'), you cannot access the newWindow.document object, or any property of that window object, i.e. your getWidth() function will fail, and so will scrollWin().

For example, try the following code in console on this page:

var newWindow = window.open('http://google.com');
alert(newWindow.body.scrollWidth);

will raise the following error:

Uncaught DOMException: Blocked a frame with origin "https://stackoverflow.com" from accessing a cross-origin frame.

Note 2

If you use it on the same domain as your site, you need to consider the following:

After var newWindow = window.open('http://yoursite.com'), if you immediately access it like newWindow.document.documentElement.offsetWidth, you may get unwanted results, because the content of the new window may still be loading.

So, an if(newWindow.document.readyState === 'complete') check may be helpful to run the scrolling code afterwards.

I have tried to be as clear as I could be, feel free to ask for any clarification.

Upvotes: 1

Related Questions