[Pro] ScriptyAccordion Works In Preview, Not in Browser

I have a simple accordion (3 headers, each with one list item) to which I have applied the Scripty Accordion. The settings are as follows:
Trigger Event: click
Trigger Elements: h2
Show/Hide Elements: ul
Show Element open…: None
Show only one element at a time: check
Animate Horizontally: uncheck

This works perfectly in Preview, but does not work at all in Browser Preview. The links work, the styles work, but the accordion function does not.

Interestingly, when I select “mouseover” instead of “click” it works in the Browser Preview.

Any advice would be greatly appreciated.

Thanks,

Aaron


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

Which browser(s) is/are giving you this result? Are you publishing into a test folder that you have used before, or a brand new site folder that has a different name than any you have ever used? (I am thinking there may be a cache issue.)

Walter

On Aug 30, 2012, at 5:37 PM, Aaron Corey wrote:

I have a simple accordion (3 headers, each with one list item) to which I have applied the Scripty Accordion. The settings are as follows:
Trigger Event: click
Trigger Elements: h2
Show/Hide Elements: ul
Show Element open…: None
Show only one element at a time: check
Animate Horizontally: uncheck

This works perfectly in Preview, but does not work at all in Browser Preview. The links work, the styles work, but the accordion function does not.

Interestingly, when I select “mouseover” instead of “click” it works in the Browser Preview.

Any advice would be greatly appreciated.

Thanks,

Aaron


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

This is a test folder (I’ve not hosted the site yet). I tried it in Safari and Firefox. Safari is what I check frequently in so it could be a cache issue there. I will try clearing it out and looking again. I don’t believe I have checked it in Firefox before, but I could be mistaken, so I’ll try that there as well.

I’m wondering if there is a possible Moo conflict since I had tried te accordion with that previously. I was very diligent about deleting all Moo actions on all pages, but is it possible that something is hanging out in the code?

Is there a way for me to remove Moo completely from Freeway as I don’t anticipate using it again since I’ve found Scripty? I have played with this a little but am not sure I’m finding the right actions folder (this is not exactly intuitive on the MacBook Pro - Mountain Lion).

Let me know what you think…

Thanks, Aaron


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

On Aug 30, 2012, at 7:50 PM, Aaron Corey wrote:

This is a test folder (I’ve not hosted the site yet). I tried it in Safari and Firefox. Safari is what I check frequently in so it could be a cache issue there. I will try clearing it out and looking again. I don’t believe I have checked it in Firefox before, but I could be mistaken, so I’ll try that there as well.

I’m wondering if there is a possible Moo conflict since I had tried te accordion with that previously. I was very diligent about deleting all Moo actions on all pages, but is it possible that something is hanging out in the code?

It might be, particularly if you applied it by hand. Lots of nooks and crannies in the Page / HTML Markup dialog where it could be lurking. If you used an Action, and you removed that Action from the page, it should be gone. But if it’s a compound Action (I’ve never used it, myself) where you apply part to one element and part to another, you might still have a bit of it in there as well.

Is there a way for me to remove Moo completely from Freeway as I don’t anticipate using it again since I’ve found Scripty? I have played with this a little but am not sure I’m finding the right actions folder (this is not exactly intuitive on the MacBook Pro - Mountain Lion).

If it’s an Action, you can remove it from your Actions folder (in Finder, press Shift-Command-G to open the Go to folder dialog, then type ~/Library/Application Support/Freeway 5/Actions/General and press Return to open the hidden Library folder and jump directly into your Actions folder) and that will remove it from any future site you build, but any site where you have used it will also have cached a copy of the Action in the document itself, so removing it there will be an exercise in hunting through the document for all remaining bits and removing those. These “cached” Actions are a great safety feature in Freeway, but they are also the bane of my existence.

Walter

Let me know what you think…

Thanks, Aaron


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

OK, I have cleared caches and removed Moo and Scripty actions (reinstalled Scripty) to no avail. Still have the same issue as described in the original post.

When you describe removing cached copies of the old actions in the document itself, I am not sure where to go to look for this or what to look for. Below is a copy of the source code for one of the pages where this is a problem. Is this where I should be looking (and are there particular clues the untrained eye should be looking for that would indicate trace Moo remnants)? Does anything jump out at you as being a problem with this code?

  • Aaron
samples

Samples

cog∙nis∙tics

[kog-nis-tiks]

noun

1. the mechanics of thought

© 2012 Applied Cognistics, LLC | Email: email@hidden | All Rights Reserved

Samples

Paragraph

WHAT WE DO

who we are

get started

contact us

request info

cite process

leaders in tune

  • topic overview

samples

  • sample 1

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

Next time you want to paste that much code, I recommend you use Pastie.org or gist.github.com or similar. There is built-in support for both in the FreewayTalk Web site – just paste a link to your pastie or gist all by itself on one line, and the formatter will know what to do with it.

Walter

On Aug 30, 2012, at 11:41 PM, Aaron Corey wrote:

Below is a copy of the source code


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

YES! You can’t have links in your headers like that. They have to remain un-linked, and let the Action figure out how to link them up. You may have links in your sub-options, certainly. But if you have links in the main heads, and you set them to click, the default action of clicking on a link is to navigate away from the page to the target of that link, not to toggle other elements on the same page.

Walter

On Aug 30, 2012, at 11:41 PM, Aaron Corey wrote:

Does anything jump out at you as being a problem with this code?


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

Well that certainly makes sense, and I appreciate the tip on posting code (I had a feeling there was a better way).

However, I do not understand what you mean by “let the Action figure out how to link them up.” Can you embellish that point for me?

Many thanks,

Aaron


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

Well that certainly makes sense, and I appreciate the tip on posting code (I had a feeling there was a better way).

However, I do not understand what you mean by “let the Action figure out how to link them up.” Can you embellish that point for me?

Many thanks,

Aaron


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

Having realized that this is not primarily intended as a site navigation tool, I have turned my attention back to Moo Accordion due to its apparent claim to allow linking from the header. However, I cannot get this to work either. As soon as I apply the Moo Accordion, my header link no longer drives to the page - it only activates the accordion action.

I’m beginning to think my approach is wrong and I’m trying to drive a square peg into a round hole, but before I completely rethink my approach, can you let me know if Moo is supposed to be able to link to a new page from the header or if I am misunderstanding the “feature”?

Thanks,

Aaron


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

Having realized that this is not primarily intended as a site navigation tool, I have turned my attention back to Moo Accordion due to its apparent claim to allow linking from the header. However, I cannot get this to work either. As soon as I apply the Moo Accordion, my header link no longer drives to the page - it only activates the accordion action.

I’m beginning to think my approach is wrong and I’m trying to drive a square peg into a round hole, but before I completely rethink my approach, can you let me know if Moo is supposed to be able to link to a new page from the header or if I am misunderstanding the “feature”?

Thanks,

Aaron


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

http://young-leaf-5066.heroku.com/sign_in

The above link shows the functionality I am trying to achieve. If you click the “media” link, it both activates the accordion and opens a new page that serves as the home base for that particular category.

If you can point me to an action or combination thereof that allows me to do that, I would be grateful. If, on the other hand, that is outside the scope of Freeway Actions and requires substantial code writing, then I will probably have to capitulate and re-think my approach.

Let me know what you think.

Thanks,

Aaron


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

http://young-leaf-5066.heroku.com/sign_in

The above link shows the functionality I am trying to achieve. If you click the “media” link, it both activates the accordion and opens a new page that serves as the home base for that particular category.

If you can point me to an action or combination thereof that allows me to do that, I would be grateful. If, on the other hand, that is outside the scope of Freeway Actions and requires substantial code writing, then I will probably have to capitulate and re-think my approach.

Let me know what you think.

Thanks,

Aaron


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

I would switch back to the ScriptyAccordion, and take another look at the picker for which header should open by default. Imagine a site with three pages, and on each page there is an accordion (shown fully open):

Page 1
	sub topic 1
	sub topic 2
Page 2
	sub topic 1
	sub topic 2
Page 3
	sub topic 1
	sub topic 2

On page 1, the picker is set to show header 1 open, page two has header 2, page 3 has header 3. Each of those headers is a link to the appropriate page.

When the visitor clicks on any of those header links, the correct page opens, and the correct submenu is open by default.

It’s not really what a traditional accordion is used for, though. The idea of an accordion is to jam a whole lot of content into a page (think an FAQ or another long, structured document) without the whole thing looking too overwhelming at first glance. You only reveal the part that you’re interested in – without reloading the page – and can avoid a lot of extra reading that way.

So you could just as easily have the menu structure I laid out above as a non-action item on your Master Page, and when you get to each instance page, you could simply delete the sub-topics for all but the current page. No Action required. Links to other pages open those other pages – that’s the cornerstone of the Web. If that’s the kind of content you are presenting, that’s the most logical way to go, in my opinion.

Walter

On Aug 31, 2012, at 4:35 AM, Aaron Corey wrote:

http://young-leaf-5066.heroku.com/sign_in

The above link shows the functionality I am trying to achieve. If you click the “media” link, it both activates the accordion and opens a new page that serves as the home base for that particular category.

If you can point me to an action or combination thereof that allows me to do that, I would be grateful. If, on the other hand, that is outside the scope of Freeway Actions and requires substantial code writing, then I will probably have to capitulate and re-think my approach.

Let me know what you think.

Thanks,

Aaron


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

Got it.

It’s done and it works!

Thanks for the guidance.

Aaron


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

Got it.

It’s done and it works!

Thanks for the guidance.

Aaron


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

OK, I got the navigation working and the menus showing/disappearing using both of the methods you described above.

However, my new challenge is getting the colors to behave as I’d like. I basically built the example you have above in a single HTML box. Where I am tripping up is, for instance, when on sub-topic 1 of Page 2, I want “sub-topic 1” to be my current page color (red), “Page 2” to also be red (establishing the trail) AND “Page 2” to retain link behaviors so that the hover color works.

I can accomplish the first of those by disabling the link and coloring the text on the current page. However, I can’t figure out how to retain link behaviors on just the “Page 2” header while changing it’s native color to red - without affecting all of the other headers in the box similarly.

Is there a way for me to do this in a single HTML box, or do I now need to look at making many separate HTML items for the navigation and just manually changing the styles for each item?

I’m pretty confident


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

OK, I got the navigation working and the menus showing/disappearing using both of the methods you described above.

However, my new challenge is getting the colors to behave as I’d like. I basically built the example you have above in a single HTML box. Where I am tripping up is, for instance, when on sub-topic 1 of Page 2, I want “sub-topic 1” to be my current page color (red), “Page 2” to also be red (establishing the trail) AND “Page 2” to retain link behaviors so that the hover color works.

I can accomplish the first of those by disabling the link and coloring the text on the current page. However, I can’t figure out how to retain link behaviors on just the “Page 2” header while changing it’s native color to red - without affecting all of the other headers in the box similarly.

Is there a way for me to do this in a single HTML box, or do I now need to look at making many separate HTML items for the navigation and just manually changing the styles for each item?

I’m pretty confident


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

You can do this automagically with a bit of JavaScript. Just set all of the pages up to use the same link styles all the way through. Make sure that you have completely un-styled type in your links box, and set all of the styling using the box’s Style pane in the links segment of the inspector. The goal here is to avoid having inline styles in your list of links – which is what usually happens if you select some text and try to style it directly where there are links involved.

With your basic link styles set, you will override the links that point to the current page with a little extra styling magic. Create a new style using the Styles palette. In the Tag field, type .current and then tab into the Name field and delete whatever Freeway put there by default. Then be sure to tab back out so Freeway remembers that you don’t want to have a name on this style. (Very important.) In the Character part of the New Style dialog, add the color of your choice, red for example. Save this style with the OK button. You won’t need to apply this style to anything directly in Freeway – it will be applied automatically as follows.

Apply the Protaculous Action to your page, and choose the prototype-packed library from the picker. In the top Function Body editor, paste the following code:

var me = window.location.href.sub('index.html','');
$$('a').select(function(elm){
	return me.include(elm.href.sub('index.html',''));
}).addClassName('current');

What this does is look through the entire page for links, compare them to the current page URL, and see if they are a partial or exact match. In the case of a set of links like this:

products
	salsa
	oven mitts
company
	service
	support
	contact

if you were on the page http://example.com/company/contact.html, links for company/index.html and company/contact.html would both include the string company/ so they would light up red.

Now searching the entire page for links may be too wide-ranging. This would also light up “utility” links in your page header or footer, or maybe graphics that are linked like this. To “scope” the search to only a small part of your page, you can modify the function that selects all the links so it only looks in one box. Click on your navigation area and not what Freeway reports in the Title field of the HTML Element Inspector. Let’s say it’s item42 or something like that. Just add that to the beginning of this line, like so:

$$('#item42 a').select …

Adding the # at the beginning of the ID (which Freeway reports as the Title) makes this a proper CSS selector for all a (link) elements inside that box only. This will have the additional benefit of speeding up the search, so there’s less chance of a “Flash of Unstyled Content” showing in really slow browsers on really fast connections.

Walter

On Sep 1, 2012, at 1:21 AM, Aaron Corey wrote:

OK, I got the navigation working and the menus showing/disappearing using both of the methods you described above.

However, my new challenge is getting the colors to behave as I’d like. I basically built the example you have above in a single HTML box. Where I am tripping up is, for instance, when on sub-topic 1 of Page 2, I want “sub-topic 1” to be my current page color (red), “Page 2” to also be red (establishing the trail) AND “Page 2” to retain link behaviors so that the hover color works.

I can accomplish the first of those by disabling the link and coloring the text on the current page. However, I can’t figure out how to retain link behaviors on just the “Page 2” header while changing it’s native color to red - without affecting all of the other headers in the box similarly.

Is there a way for me to do this in a single HTML box, or do I now need to look at making many separate HTML items for the navigation and just manually changing the styles for each item?

I’m pretty confident


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

Small typo. This should read as follows:

var me = window.location.href.sub('index.html','');
$$('a').select(function(elm){
	return me.include(elm.href.sub('index.html',''));
}).invoke('addClassName','current');

The mistake was applying addClassName to an array of results, rather than a single element. The invoke() method applies the same method to each member of an array.

Walter

On Sep 2, 2012, at 3:34 PM, Walter Lee Davis wrote:

var me = window.location.href.sub(‘index.html’,’’);
$$(‘a’).select(function(elm){
return me.include(elm.href.sub(‘index.html’,’’));
}).addClassName(‘current’);


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