PDA

View Full Version : Page change anchor; smooth scroll effect


johnMoss
02-13-2012, 02:32 PM
Start page in question: http://www.johnmossdesigns.com/clientTest/Metalix/alori.html

Midway down the page and on the left there are 3 hyperlinks "collections, custom, and finishes". Currently they are set anchors to another page and anchored to the corresponding content, which to me they should be.

On the original site http://www.metalixdesign.com (products page)
they are set to just open up the page.

The client likes the original setting, which I trust we would all agree is a mistake, its confusing, as it opens up what appears to be the original page, giving the consumer effect of being a dead link.

To me a happy medium is a javascript app to open up the new page at the top like they want it, and then have it gracefully roll down to the anchor.

Anyone have a script laying around for something like that? I found a dynamic drive but it's for same page only.

gentleone
02-13-2012, 03:22 PM
You can use the script I compiled together for on my own one-page website. Look... if you click on the following link it will scroll to the contact section of my page.
http://www.gentlemedia.nl/#/contact-me

I zipped one time for Corrosive a page with all the necessary assets. You can download it here as well:
http://dl.dropbox.com/u/17359641/smooth-scroll.zip

I think I placed some comments in the js and in the css to explain some things, but if not just give a shout.

johnMoss
02-13-2012, 03:26 PM
awesome! Thanx :)

gentleone
02-13-2012, 03:39 PM
awesome! Thanx :)

Yer welcome... good luck ;)

johnMoss
02-13-2012, 04:51 PM
http://www.johnmossdesigns.com/clientTest/Metalix/alori.html

OK, got it loaded, just one problem, I don't have it scripted right. Go to the page above, & then scroll down & find the collections link on the left, under Alori surfaces. It goes to the anchor allright, but then scrolls to the top of the page. Desired effect of course is the opposite... Clue? :)

gentleone
02-13-2012, 05:01 PM
I guess it has a conflict with your lightbox, because that's also not working properly anymore. Try to load all your scripts in a different order. A simple switch will do wonders sometimes.

johnMoss
02-13-2012, 07:22 PM
Played with a variety of settings and still same effect. The lightbox error you refer to I'm not getting, so maybe an issue with browser type there. I did have that problem when I had the off-directory jQuery links installed, and when I removed them the script began working. Somewhere in the script I simply need to reverse the direction. Tricky :)

johnMoss
02-14-2012, 01:40 AM
Ok found another script from mootools. Here is a site that uses it, and a link that works perfectly.
http://www.rickyh.co.uk/barwick/site/services.html?LPSC

I have loaded the exact scripts from this page; I have played with this thing for two hours and cannot get it to work. (I did change the # to a ? on the anchor call & also tried the long link version) Moved the scripts around in the head. created a div with the anchor ID. Nothing works. Has to be a simple solution but I am baffled. Works perfectly on his site, I can't find anything amiss in my code, obviously there is... Anyone??:sad:

Links above in first thread block...

gentleone
02-14-2012, 10:09 AM
John, mail me this page and all its assets zipped, but without any scroll script.
http://www.johnmossdesigns.com/clientTest/Metalix/collections.html

I know I can download the whole page and its assets with my browser, but this will create another directory structure then the original you created for it.

My mail: ralph[at]gentlemedia[dot]nl

EDIT: By the way. There's of course a lightbox on the page, so including the big photo's would make the zip file too big to mail. Don't include the big ones... I will use some photo's of mine to test functionality.

johnMoss
02-14-2012, 01:25 PM
Course now I just read your edit... :) Yer right, your mail daemon bounced it on two attempts. I sent it via dropbox, you should have an invitation waiting in your email... Thanx bro :))

johnMoss
02-14-2012, 01:47 PM
Also I don't gather an interference problem with the lightbox. I pulled the js links at one point to test for that and got no change...

gentleone
02-14-2012, 02:22 PM
John, I'm busy with the files, but I'm also looking at what you have online now in Chrome and I see that it scrolls to the sections when I click on the submenu items. The scroll effect goes really quick... you hardly notice it, but it does scroll. If you adjust the speed somehow, perhaps it's set to very fast.

johnMoss
02-14-2012, 02:32 PM
Every time you save the file, drop-box is sending me notice. After you had saved fx I started pulling them & uploading to test. I get it now, you're working out of that file. So now I've stopped. What you see is your work in motion, but in comment, we are agreed. Even last night when I was working with it, one can see that the code is in fact executing, it's just that by the time the page has been parsed, the code makes the page catch up to its current execution point, or so I believe. Isn't this a headscratcher or what? Got a perfectly functional set of script, copied to the tee, and still.... I assume for the moment you are working your code-set? The other speed was set to 1200ms, which is perfect. Last night I did try setting it 4000 just to see what if; no change... :(

gentleone
02-14-2012, 02:51 PM
aha... okay I see, so i'm getting somewhere sort of :) I'm working indeed directly from our shared dropbox folder... I thought it was easier, but I can imagine that it can be bothersome for you when every time I save a file you'll get a notification.

johnMoss
02-14-2012, 02:54 PM
Bothersome, I think not! Thanks for diving into it... :)

johnMoss
02-14-2012, 07:28 PM
Update everybody, he got it working. :!:
I hadn't gotten around to cleaning up the head section yet, they had me pull the original submenu out, figured I wait until time to redo the titles & desc's.
In IE it was still coming in jerky so I slowed it from the 1200 to 3000. Works beautifully. If moving the scripts to the bottom was not the crux of the problem, what was? I saw the js files reloading, did you have to go in and adjust? I had tried removing the anchor & id-ing the div, and that was another move that didn't pan out. I say that though referring to the moo scripts, I never tried it with yours... I'm assuming an ID is an ID, period. Right track?
MANY THANKS R....

gentleone
02-15-2012, 10:38 PM
I hadn't gotten around to cleaning up the head section yet, they had me pull the original submenu out, figured I wait until time to redo the titles & desc's.
If you implement new or other scripts better to comment out the ones you don't use anymore on the page. The chance that the unused scripts interfere with the new ones is zero then.
If moving the scripts to the bottom was not the crux of the problem, what was? I saw the js files reloading, did you have to go in and adjust?
The problem you were facing with my script was that you didn't add the selector '.leftnav a' to the function to fire the smoothscroll on clicking on the links in he sub menu.
The problem with the mootools script was because Mootools and jQuery are two different javascript frameworks using both de dollar symbol, but for different functionalities. Both frameworks on the same page will therefore give conflicts. There's a workaround such as including jQuery.noConflict() to your page, but my advice if you choose one framework then stick to that framework and its plugins.
I had tried removing the anchor & id-ing the div, and that was another move that didn't pan out. I say that though referring to the moo scripts, I never tried it with yours... I'm assuming an ID is an ID, period. Right track?
Using named anchors to jump to sections on a page is only needed if you also want to support Netscape 4. Jumping to ID's doesn't work in this browser, but hey... :) Netscape is dead already for a long time, so just use ID's on elements that are already in your markup.

johnMoss
02-17-2012, 01:18 AM
Ok here comes the monkey in a china shop routine... apologies...

I've got the three links on the alori page set and the corresponding pages have their scripts and all works fine. Except:

Trying the links from any one of these 3 subpages gets a null response. I see the script:
$(window).bind('hashchange', function(event) {
if (location.hash) {
var tgt = location.hash.replace(/#\//,'');
} else {
var tgt = '#top';
}

But don't know how to edit to correct the function. I assume target has to be manipulated?

Examples: Clink a link in lower left nav
Works fine
http://www.johnmossdesigns.com/clientTest/Metalix/alori.html

Defective
http://www.johnmossdesigns.com/clientTest/Metalix/collections.html#/anColl