Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...I've learned more from your forums in 3 days than 3 months at school and on the job combined..."

Geography

Where in the world do Tek-Tips members come from?

Smooth scroll with & without javascriptHelpful Member! 

lantiqo (Programmer)
24 Jun 12 18:09
I want to get a fancy scroll to function even when JavaScript is not enabled in your browser. http://gravitysign.com/fancyscroll/horizontal#/ So if you press on the links you end up at the correct position without animation.

CODE --> javascript

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

CODE --> HTML

<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:
tympanus.net/Tutorials/WebsiteScrolling/
vacunita (Programmer)
24 Jun 12 18:49
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.

CODE

<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 (Programmer)
24 Jun 12 20:04
The JavaScript will not work without a slash /.
However, it works without JavaScript if you remove slash.
Helpful Member!  vacunita (Programmer)
24 Jun 12 20:58
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.


CODE --> HTML

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

CODE --> JS

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

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

{

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

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

}

}
}


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


}

----------------------------------
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 (Programmer)
29 Jun 12 13:41
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.
http://www.costaricanhotels.com/minisites/js/fancyscroll.min.js
I have tried to take the "Return" text in the javascript away but it didn“t work.
vacunita (Programmer)
29 Jun 12 15:56
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 &amp; Tech

lantiqo (Programmer)
29 Jun 12 16:25
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: http://gravitysign.com/fancyscroll/horizontal#/ ,but I could not see any "Return" on the side
vacunita (Programmer)
29 Jun 12 17:41
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 &amp; Tech

lantiqo (Programmer)
2 Jul 12 7:11
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 (Programmer)
2 Jul 12 10:35
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 &amp; Tech

lantiqo (Programmer)
5 Jul 12 8:01
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 (Programmer)
17 Jul 12 11:50
Do not know if it gets like this on all iPhones, it is the link that is in my signature.

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

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close