[Pro] Stacked Page Navigation

I saw quite a few very cool navigation examples lately, so I replicated one of those posted on Codrops, see the results below …

http://beta.ontwerpzaam.nl/stackednavigation/


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Sorry, I just messed up the url, it should be index


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Like that Richard.

D


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Richard, can you share what you used to do the Stacked Page menu?

Billy


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Here you go: http://fwdemo.rvanheukelum.com/stackednavigation/stackednavigation.zip


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I love this but beyond my capabilities I think.


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Not being much of a coder I have tried this stacked navigation stuff and liked it. One question is it possible to apply the Scripty Accordion to the pages as well? I have tried but it broke the accordion action.


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ah - it may be a p issue. Back on the yellow brick road…


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’ve tried the script accordion for a while, but ditched it. I’d rather stay with the ‘hand coded’ accordion Dan Jasker thought me a couple of years ago.

– Richard


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks for the response Richard. I’ll have a browse for the Tasker version. I guess I may have to learn some coding skills to progress from my crap, to mediocre, amateur site design. :frowning:


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Amateur means work “from the heart, from love”. I would class it above professional, which is just “from the love of money”.

Walter

On Jan 17, 2018, at 1:12 AM, Mad Farquhar email@hidden wrote:

to progress from my crap, to mediocre, amateur site design. :frowning:


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Aye - quite good Walter! Just as well my “love” means I don’t mind spending inordinate amounts of time “fettling”.
Perhaps you might be able to tell me if it’s a pointless exercise trying to install (your) Scripty Action onto pages which have the stacked navigation actions? I am hacking it about something rotten, and even, to my utter surprise learning something (not, as yet, sure what) as I open code in jEdit.
Certainly will need to reconcile all the variations I have saved over the last couple of days and probably start from ground zero as it’s all becoming a tad nebulous, and that’s before a large malt.
Unfortunately I haven’t uploaded anything as yet as I don’t want the original site to be bust. Maybe look at making a compartment on the server to test / preview to outputs.


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I had a look at the stacked navigation code, and I could not see anything wrong about it – it uses “vanilla” JavaScript (code written without a framework, just using the language itself), which usually means it won’t conflict with Prototype or jQuery. One thing that Prototype is a stickler about is traversing an array as if it was an object. The following code will work as intended without Prototype, even though it is considered hackish:

var bar = [1,2,3,4];
for(foo in bar){
	// do something with foo
}

The Prototype way to do this would be to use an iterator, which is part of the Enumerable module*:

bar.each(function(foo){
	// do something with foo
});

and the correct “vanilla” way to do it is with a fully defined for loop:

for(var idx = 0; idx < bar.length; ++idx){
	var foo = bar[idx];
	// do something with foo
}

I didn’t see any of these loops in your code, but I admit I didn’t spend much time staring at it either. Perhaps that will give you (or the original author) something to think about. You can also see more about the error if you enable the Develop menu in Safari (Preferences / Advanced) and look at the JavaScript Console output while you navigate the page. If you see something in red there, post back to this thread and let us know what it says. (Copy and paste are your friends!)

Walter

*The each iterator has been added to the core JavaScript language in one of the more recent updates, too, but the signature is different. I don’t know off-hand what the Prototype Enumerable module will do in that case. I do know that the version of Prototype bundled with my early Scripty Actions is quite out of date, and I haven’t taken the time to update them. I may get around to that, if the demand is there.

On Jan 17, 2018, at 10:18 AM, Mad Farquhar email@hidden wrote:

Aye - quite good Walter! Just as well my “love” means I don’t mind spending inordinate amounts of time “fettling”.
Perhaps you might be able to tell me if it’s a pointless exercise trying to install (your) Scripty Action onto pages which have the stacked navigation actions? I am hacking it about something rotten, and even, to my utter surprise learning something (not, as yet, sure what) as I open code in jEdit.
Certainly will need to reconcile all the variations I have saved over the last couple of days and probably start from ground zero as it’s all becoming a tad nebulous, and that’s before a large malt.
Unfortunately I haven’t uploaded anything as yet as I don’t want the original site to be bust. Maybe look at making a compartment on the server to test / preview to outputs.


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Download files and screencast series here: Building Accordion Menus Using JQuery

Have fun :wink:

– Richard


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Richard,
In your Stacked Navigation Menu I want to change the Menu Object “hamburger” to something else or at least another color or add the word Menu.

Could you show me how?

Billy


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Can anyone tell me how to replace the “content” in the component.css file so that instead of text for my navigation icon I can have an image source.

Billy


tutorials mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options