[Pro] How Can You Do This In Freeway???

Take a look at this page: Tiger | Species | WWF

See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.

Does anyone know how you might be able to achieve this in freeway?

If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.

Thanks in advance for any help!


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

Walters sticker action can do your navigation that sticks - example here http://www.deltadesign.co/fw_examples/jQuery/walters-sticker.html

However the Link highlighting I think uses some fancy javascript which is a lot more tricky.

David


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

Can be done indeed, via CSS … I’ve been fiddling with it here: http://jsfiddle.net/rvanheukelum/EBCLC/ and this can easily be applied in Freeway.

The highlighted menu however not yet within the realms of my current knowledge sadly enough, but it can be achieved the same way DIV’s suddenly get sticky … the position of an item within the viewport automatically activates a style in which you can change the details …

In this case I would apply different span classes to each menu item, all with the same CSS references, and each of those span classes would chance at a certain point. This can be achieved the same way the DIV could suddenly become sticky …

Probably would take me a day to figure this out on my own, but there are older and wiser users here that probably can do this within an hour or two :smiley: :smiley: :smiley:

Nevertheless … yes, it can be done. I can do it … and with this example and some knowledge of CSS so can you.

Regards, Richard


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

The Sticker Action can indeed make the menu stop scrolling when it reaches the top of the page. The animated rollover is a CSS transition effect. Tim Plumb has made some examples of that, perhaps he can pipe up with the secret sauce. The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.

Walter

On Jan 3, 2014, at 7:22 PM, Lucky Cat wrote:

Take a look at this page: Tiger | Species | WWF

See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.

Does anyone know how you might be able to achieve this in freeway?

If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.

Thanks in advance for any help!

Tiger | Species | WWF


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

Forgot to mention – the SmoothScroll Action can do the scroll to place trick, you just need to make Anchors to each section.

Walter

On Jan 3, 2014, at 9:03 PM, Walter Lee Davis wrote:

The Sticker Action can indeed make the menu stop scrolling when it reaches the top of the page. The animated rollover is a CSS transition effect. Tim Plumb has made some examples of that, perhaps he can pipe up with the secret sauce. The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.

Walter

On Jan 3, 2014, at 7:22 PM, Lucky Cat wrote:

Take a look at this page: Tiger | Species | WWF

See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.

Does anyone know how you might be able to achieve this in freeway?

If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.

Thanks in advance for any help!

Tiger | Species | WWF


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


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

On 4 Jan 2014, 1:04 am, waltd wrote:

The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.

Well … I think you can do this here :

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

You’ll have to create a couple of instances, one for every menu item. As soon as a DIV that is represented by a menu-item reaches the top, the span-class changes (the example above adds and removes a span class to a DIV style: addClass and removeClass). You might be able to do the same thing with toggleClass.

Here’s a source that might help out: http://api.jquery.com/toggleClass/#toggleClass-switch

I’m just popping in and out here’ … I would put some more time in this if I only had the time :slight_smile:

Richard


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

Thanks for the replies. After a quick test in a blank freeway document, it looks the sticky action will do the trick. However, I am having an issue where it doesn’t seem to be working properly in Safari (I am using version Safari 6.0.5 on Mac OS X 10.8.4 and Freeway 6.1.0).

The item will stick as it should in the appropriate spot, but after it reaches the top of the page it gets stuck and won’t scroll back down. It is working properly in Chrome.

Also, while I tested this in a blank freeway doc without any other items, actions, or scripts, I do plan on making this site responsive. While reading some other posts on the Sticky action, it looks like I might run into some issues? Will this action still work while trying to make images/backgrounds resize with the page and inline items flex with the content?

Any suggestions going forward with this?


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

If you have the black bar set as “Fixed in Window” and bring it to the front, does this not achieve the same thing?


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

Just a reminder – this is jQuery code, and will conflict with the Actions I noted earlier. All of this can be rewritten in Prototype.js syntax, which is similar, but not the same.

Walter

On Jan 4, 2014, at 6:13 AM, Richard van Heukelum wrote:

On 4 Jan 2014, 1:04 am, waltd wrote:

The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.

Well … I think you can do this here :

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $(’#sticky-anchor’).offset().top;
if (window_top > div_top) {
$(’#sticky’).addClass(‘stick’);
} else {
$(’#sticky’).removeClass(‘stick’);
}
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

You’ll have to create a couple of instances, one for every menu item. As soon as a DIV that is represented by a menu-item reaches the top, the span-class changes (the example above adds and removes a span class to a DIV style: addClass and removeClass). You might be able to do the same thing with toggleClass.

Here’s a source that might help out: http://api.jquery.com/toggleClass/#toggleClass-switch

I’m just popping in and out here’ … I would put some more time in this if I only had the time :slight_smile:

Richard


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

Any idea why the sticker action isn’t working for me in Safari?

The item will stick as it should in the appropriate spot, but after it reaches the top of the page it gets stuck and won’t scroll back down.

I am only having a problem in Safari. It is working properly in Chrome. I am using version Safari 6.0.5 on Mac OS X 10.8.4 and Freeway 6.1.2.


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

I uploaded a test page here for you to see: http://tinyurl.com/lhapamb


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