[Pro] Can't get anchors to work :S

Going nuts … somehow I managed to make linking to anchors not to work at all in this project. Can anybody please wake me up?

Regards, Richard

Demo : http://fwdemo.rvanheukelum.com/anchors/index.html

File : http://fwdemo.rvanheukelum.com/anchors/commpass_anchors.zip


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nice work, Richard :slight_smile:

It’s pretty simple… your link anchors are id-based yet you’ve removed the
id’s of the divs they should be linking to. For example, link #portfolio
must have something with the id of “portfolio” to link to, usually a div.

Is it necessary to remove all the div id’s and replace them with classes?

Best

Going nuts … somehow I managed to make linking to anchors not to work
at all in this project. Can anybody please wake me up?

Regards, Richard

Demo : http://fwdemo.rvanheukelum.com/anchors/index.html

File : http://fwdemo.rvanheukelum.com/anchors/commpass_anchors.zip


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you :slight_smile:

FWP allows you to target html text as an anchor, which I did. The links in the CSS menu therefore should be able to follow the links to the linked/anchored html text … but they don’t.

Even though I’ve deactivated the ID-to-Class action applied to the DIV’s containing the text (which don’t have anchored applied to), the links still don’t work.

Apparently I even can’t apply anchors to inflow div’s … I just don’t get it?

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

FWP allows you to target html text as an anchor, which I did. The links
in the CSS menu therefore should be able to follow the links to the
linked/anchored html text … but they don’t.

The do for me Richard, and for you too I think. For example, the Portfolio
link scrolls down until the word “Portfolio” is at the top of the viewport

  • under the menu. When I changed the enclosing div to have the id
    “portfolio” then the word Portfolio appeared in a good spot, lower down
    from the menu (because of the padding of it’s enclosing div). Each section
    responded the same way, except the last as there isn’t enough content
    length below it to let it scroll all the way up to the same location… but
    still fine.

Try changing the starting divs to those sections back to their target id’s

  • if having id’s doesn’t upset something else you are trying to achieve. It
    should work well then. Then you can try either adding some javascript to
    smooth the scroll, or give Walter’s smooth scroll action a try.

Hang in there, you’re not far now :wink:


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What the funk is going on here???

I’ve been spending all day refreshing my browser, trashing cache, rebooting my system, quitting and restarting my browser and still clicking the links on top didn’t to squat … nothing, zero, not a thing!

And honestly, al of the sudden, I see movement, the links (started to) work? Start to think it’s the system failing on me all this time! Thing is … they didn’t work for my on FWP’s preview as either. Is Safari polluting something here?

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Having that said … the links to anchors still don’t work in FWP’s preview, although they do on the live example …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And I’m not able to apply anchors to the inflow div’s … ONLY to the html text it contains.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Opting for an seven hour shut-eye … perhaps Wednesday is my lucky day :stuck_out_tongue:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think the smooth scroll and supersizer are conflicting - was there a discussion of that a while back maybe?

I’d probably go back and simplify - take away all the anchors, all the div to classes, all the actions except for bg supersizer, CSS menu, and reset CSS… then set the menu links to manually go to div id=“portfolio” (type #portfolio in the link destination.) This will produce the desired positions. Then work out the conflict with supersizer and get smooth scrolling working. Then add your fonts and styles, maybe try to achieve your leaner code. I’m too busy to do more on it now, but maybe by the weekend I can lend a hand or two.


Ernie Simpson

Opting for an seven hour shut-eye … perhaps Wednesday is my lucky day :stuck_out_tongue:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I made a newer version of BG Supersizer that doesn’t conflict, I think Softpress posted it to the Forge. It might be worthwhile to check the release date on the one you have. Click on the version number in the bottom-right corner of the Actions palette while the Action is visible there.

Walter

On Dec 4, 2013, at 3:02 AM, Ernie Simpson wrote:

I think the smooth scroll and supersizer are conflicting - was there a discussion of that a while back maybe?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Strange thing is that as soon as I add the action to the page, the anchors no longer work. Clicking a link to an anchor won’t work anymore as soon as this action is applied to the page …

index (works)
index (doesn’t work)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter, but yes … I’m up to date …

So, I’ve even removed the Transitions FX, BG Supersizer and ID-to-Class actions … no difference whatshowever.

Perhaps good to know, I even tried to replace the Smooth Scroll script by something I found here : http://css-tricks.com/snippets/jquery/smooth-scrolling/

But the same issue occurred, as soon as the code was applied to the page, the links no longer brings you to the anchors/div’s I targeted.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, this relies on jQuery, so unless you had scrubbed your page of any other code, you might be simply hitting the jQuery / Prototype conflict wall. If you haven’t enabled the Develop menu in Safari, run, don’t walk, to the Preferences/Advanced tab and check that option on. Then, in the new Develop menu, choose Show Error Console. Look at any red errors you see there, that’s the first place I ever look to see what’s going wrong.

Walter

On Dec 4, 2013, at 9:03 AM, Richard van Heukelum wrote:

Perhaps good to know, I even tried to replace the Smooth Scroll script by something I found here : http://css-tricks.com/snippets/jquery/smooth-scrolling/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Dec 4, 2013, at 8:58 AM, Richard van Heukelum wrote:

Strange thing is that as soon as I add the action to the page, the anchors no longer work. Clicking a link to an anchor won’t work anymore as soon as this action is applied to the page …

index (works)

Yes, this makes the jump to the element the anchor points to.

index (doesn’t work)

You’re right, this layout is messing with it somehow, and I’m not sure why it’s happening. The link is correct, the script is firing without conflict or error, but the Scriptaculous ScrollTo method doesn’t seem to register that it needs to move the page. This seems to be related to your layout, which is using a mix of relative and fixed position elements. I know that I have created layouts in the past that scrolled the way you want them to, but I never tried with this exact construction before. I suspect that the issue is to do with the height=100% on the #main box. Try removing that and see what happens.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s exactly it Walter, removing height=100% does fix the smooth scrolling.

I can’t use that though, it destroys the div ‘’. It needs the absolute and 100% width in order to resize the div ‘intro’ to matchthe viewport … it collapses when you remove that.

Let’s see if I can get SmootScroll to work and still have that first div (intro) to resize to the viewport …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options