Smooth scroll with & without javascript 1

[lantiqo]

I want to get a fancy scroll to function even when JavaScript is not enabled in your browser. [URL unfurl="true"]http://gravitysign.com/fancyscroll/horizontal#/[/url] So if you press on the links you end up at the correct position without animation.

window.onload = function(){    
   var fs=new fancyScroll({easingFunc: 'easeOutCubic',              
        easingTime: 1000,              
        deepLinking: true,              
        scrollMode: 'horizontal',              
        goTopText: 'Return'});  
   fs.addScroll(['sale','discount','new','contact']);    
};

<a href="#/sale">Sale</a> 
<a href="#/discount">Discount</a> 
<a href="#/new">New</a> 
<a href="#/contact">Contact us</a>

An example of one that works with & without javascript but not something I want to use:
[link tympanus.net/Tutorials/WebsiteScrolling/]tympanus.net/Tutorials/WebsiteScrolling/[/url]

 

[vacunita]

The only way to do it without Javascript, would be to use anchors, the very thing your example site is using.


Basically your links simply point to the Id of the element you are wanting to go to.

So in your case simply remove the slashes from your links, and it should work, not even sure why you have them.

<a href="#sale">Sale</a> 
<a href="#discount">Discount</a> 
<a href="#new">New</a> 
<a href="#contact">Contact us</a>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lantiqo]

The JavaScript will not work without a slash /.
However, it works without JavaScript if you remove slash.

 

[vacunita]

Seems the fancy scroll requires the slashes. In which case you are out of luck on getting it to work both ways.

The only way to scroll to a specific location without JS is using the anchors.

I guess you could use some JS to modify the links when JS is available so the fancyScroll works, and have the links start out with the standard non JS values. I gave the links a custom tag attrib ute to identify them as links that need to be changed. So that the function doesn't alter other non relevant links in the page.

<a [b][COLOR=red]tag="sL"[/color][/b] href="#sale">Sale</a> 
<a [b][COLOR=red]tag="sL"[/color][/b] href="#discount">Discount</a> 
<a [b][COLOR=red]tag="sL"[/color][/b] href="#new">New</a> 
<a [b][COLOR=red]tag="sL"[/color][/b] href="#contact">Contact us</a>

function modLinks()
{
	var links = document.getElementsByTagName('a');

	for(var i=0;i<=links.length-1;i++)

	{

		if(links[i].getAttribute('tag')=='[b][red]sL[/red][/b]')

		{
			links[i].href = '#/' + links[i].href.split('#')[1];

		}

	}
}


window.onload = function(){ 
 modLinks();
[COLOR=#adadad] var fs=new fancyScroll({easingFunc: 'easeOutCubic',              
        easingTime: 1000,              
        deepLinking: true,              
        scrollMode: 'horizontal',              
        goTopText: 'Return'});  
   fs.addScroll(['sale','discount','new','contact']);    
[/color]

}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lantiqo]

Thanks for that, works perfect.
But in the begining of the scroll (postion left: 0.1px, top: 0px) there is a blue "Return" text that just shows in the position, left: 0.1px to 0.7px.
[URL unfurl="true"]http://www.costaricanhotels.com/minisites/js/fancyscroll.min.js[/url]
I have tried to take the "Return" text in the javascript away but it didn´t work.

 

[vacunita]

not sure where that would be coming from? As there is no Return in the JS code there.

Are you sure its not from something else?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lantiqo]

I have searched in all my documents and search results from the word "return" is found only in fancyscroll.min.js
I have tried removing the "return", one by one, from the javascript file, but the website did not work then.

Most of the page is copied from this: [URL unfurl="true"]http://gravitysign.com/fancyscroll/horizontal#/[/url] ,but I could not see any "Return" on the side

 

[vacunita]

I see the return there, it's their link at the bottom right corner, that moves the website back to the beginning. It's part of the functionanilty of the smoothScroller.

I don't think it's meant to be removed.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lantiqo]

I found the word in JavaScript, and got it to go away. (Probably missed it when I searched).

Another thing I thought of using the code in Netscape Navigator (I know this is an unusual web browser that most people do not use).
Clicking the links will change the address bar of the browser, and nothing happens the bow you click on "refresh" button

 

[vacunita]

I don't have Netscape so can;t actually test, but Netscape may be running the link changing code, but then having trouble with smoothScroll code.

My only suggestion would be to test without the linkMod function and see if works as if Javascript is not there.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lantiqo]

It worked but not in Firefox, Opera, Safari, etc. so I guess I can ignore it.

Another thing I thought of is that when you click on the links without the computer has had time to upload pictures and codes, how it works page without smooth scrolling (instead it goes directly to the position by clicking on a link).
This works fine on a computer but you do it in an iPhone, so it links to the same place though a few rows down.

If the codes are loaded in an iPhone, it works fine.

 

[lantiqo]

Do not know if it gets like this on all iPhones, it is the link that is in my signature.

http://wwwlab.iki.his.se/~e11vicka/cafe2/