I posted this link a few days ago in the Exhibeo section, but I’m wondering if there is any way that I can get my current implementation of css menu (made with the css menus action) to do this sliding/hiding thing … and also have the transparency?
http://demo-7.photodeck.com/-/galleries/portfolio-style
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I did something quite similar on the Inlay documentation site: http://docs.inlay.io If you look at the stylesheet (all made in Freeway, for a change!) http://docs.inlay.io/css/sheet1.css you can see a class style named .shy. It applies a translateX transform to the menu when it’s applied to the menu. The animation effect is just from the transition:all part of that rule, which makes this move take 400ms to complete. Further down the list, the .sidebar style gives the menu the semi-transparent background (the rgba color definition had to be made in the Extended interface).
The JavaScript was added to the page with Protaculous2, and consisted entirely of this:
$('navigation').observe('mouseenter', function(evt){
this.toggleClassName('shy');
}).observe('mouseleave', function(evt){
this.toggleClassName('shy');
}).observe('touchend', function(evt){
this.toggleClassName('shy');
});
In my example, the sidebar was drawn on the page in the location where it was going to appear, set to Position Fixed, height to 100%, and the width was adjusted along with the .shy class translateX amount so it would collapse down to the bar. Then I used the Item/Extended dialog to add the classnames sidebar and shy to the navigation bar. In Freeway, it looked as it would open, and when the page loads, it is in the hidden mode, and when you mouse over it (or touch it in iOS), it opens up until you click something or mouse away.
Walter
On Jan 5, 2016, at 9:40 AM, grantsymon email@hidden wrote:
I posted this link a few days ago in the Exhibeo section, but I’m wondering if there is any way that I can get my current implementation of css menu (made with the css menus action) to do this sliding/hiding thing … and also have the transparency?
http://demo-7.photodeck.com/-/galleries/portfolio-style
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Excellent Walter. That is pretty much exactly the same. 
As I seem to be having on-going problems with the CSS Menus actions and its habit of overflowing, I may try and implemenent this now, instead of first waiting to see what Exhibeo 2 turns out like.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Walter
I’ve tried this on a site I’m building and have included a CSS menu within the ‘navigation’ div and all works great. However I’ve added a sub-menu to the CSS menu which works great with a mouse but not so well on a phone, when you touch the main menu link to show the sub menu the whole thing usually slides away before you can touch the sub menu link. Is there a way to make the whole thing ‘sticky’ so that it stays open until you close it?
Hope that all makes sense?! Link to test site below:
http://stundesign.co.uk/miniscoff/test.html
Thanks
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
The problem is that the main menu requires a touch on iOS to trigger its mouseover event (Apple cleverly hijack the first touch to mimic the hover). You may have to remove the touchend event handler, and set a different one. Try it without first, and if it really can’t be used, let me know and I’ll think up something else.
Walter
On Jan 20, 2016, at 4:07 AM, Dave Dunning email@hidden wrote:
Hi Walter
I’ve tried this on a site I’m building and have included a CSS menu within the ‘navigation’ div and all works great. However I’ve added a sub-menu to the CSS menu which works great with a mouse but not so well on a phone, when you touch the main menu link to show the sub menu the whole thing usually slides away before you can touch the sub menu link. Is there a way to make the whole thing ‘sticky’ so that it stays open until you close it?
Hope that all makes sense?! Link to test site below:
http://stundesign.co.uk/miniscoff/test.html
Thanks
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Thanks but already tried that and the menu won’t open at all on iOS.
Dave
On 20 Jan 2016, 2:11 pm, waltd wrote:
The problem is that the main menu requires a touch on iOS to trigger its mouseover event (Apple cleverly hijack the first touch to mimic the hover). You may have to remove the touchend event handler, and set a different one. Try it without first, and if it really can’t be used, let me know and I’ll think up something else.
Walter
On Jan 20, 2016, at 4:07 AM, Dave Dunning
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I can’t get the menu panel to appear in any browser – I can see it in Safari Web Inspector, and swizzle the “shy” class there to make it come and go.
But the way that the script is written, the panel needs to be on screen at all times, so you can hover (or touch) it in order for it to slide fully into view, and touch again to make it slide back to its “shy” position – which is still showing.
I don’t think any of this is related to your use of CSS Menus, by the way.
Walter
PS: It appears as though Wow Slider has been re-written to remove all traces of jQuery. That’s a Good Thing™!
On Jan 20, 2016, at 9:17 AM, Dave Dunning email@hidden wrote:
Thanks but already tried that and the menu won’t open at all on iOS.
Dave
On 20 Jan 2016, 2:11 pm, waltd wrote:
The problem is that the main menu requires a touch on iOS to trigger its mouseover event (Apple cleverly hijack the first touch to mimic the hover). You may have to remove the touchend event handler, and set a different one. Try it without first, and if it really can’t be used, let me know and I’ll think up something else.
Walter
On Jan 20, 2016, at 4:07 AM, Dave Dunning
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Are you viewing on a desktop or mobile device? The menu panel doesn’t appear until a 955px break point, works on all browsers this end, just checked it again, let me know if you still can’t see it.
I think if it’s not possible to add the sub menu it won’t be an issue with the client, I’ll just make the main menu longer! But if it can then great.
Yes noticed that re WOW, using a free online slider creater for now just while under construction then will swap to paid for WOW when all finalised, which will hopefully get my smoothscroll back!
Dave
On 21 Jan 2016, 2:03 pm, waltd wrote:
I can’t get the menu panel to appear in any browser – I can see it in Safari Web Inspector, and swizzle the “shy” class there to make it come and go.
But the way that the script is written, the panel needs to be on screen at all times, so you can hover (or touch) it in order for it to slide fully into view, and touch again to make it slide back to its “shy” position – which is still showing.
I don’t think any of this is related to your use of CSS Menus, by the way.
Walter
PS: It appears as though Wow Slider has been re-written to remove all traces of jQuery. That’s a Good Thing™!
On Jan 20, 2016, at 9:17 AM, Dave Dunning
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I don’t see anything in the current WOW script that would preclude you using the Scriptaculous-based SmoothScroll action in this page. You do have a bunch of Prototype code already in this page, so you can’t use anything that relies on jQuery in the same page. (Not without some rocket surgery, that is, and also not without pissing off all of your mobile users, since you will be downloading two libraries that both do the same thing, and busting their data caps, and possibly overloading their RAM limits.)
Walter
On Jan 21, 2016, at 10:25 AM, Dave Dunning email@hidden wrote:
will swap to paid for WOW when all finalised, which will hopefully get my smoothscroll back!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Not the way this script is written, no. Because you are using up the one click you get within the #navigation element to toggle the submenu open, because there is no mouseover event on mobile devices. Apple cleverly map the mouseover handler to the first touch event in an element. Unfortunately my touchend listener also responds to that first touch event, so you get a simultaneous submenu open and outer layer hide in one touch.
The simplest thing will be to have the menu be all one level.
Walter
On Jan 21, 2016, at 10:25 AM, Dave Dunning email@hidden wrote:
I think if it’s not possible to add the sub menu it won’t be an issue with the client, I’ll just make the main menu longer! But if it can then great.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Should have removed the WOW script as the sliders on the home page are not WOW sliders, but they do use jQuery so maybe they’re the cause of the clash with SmoothScroll. I’ll see what I can remove action wise to cut down on the Prototype, using Crowbars to add the slider code, Caxton for some custom webfonts, AnimationFX, Favicon, CSSMenus and HTML5BlockLink. Would you suggest removing any of these?
Dave
On 21 Jan 2016, 3:31 pm, waltd wrote:
I don’t see anything in the current WOW script that would preclude you using the Scriptaculous-based SmoothScroll action in this page. You do have a bunch of Prototype code already in this page, so you can’t use anything that relies on jQuery in the same page. (Not without some rocket surgery, that is, and also not without pissing off all of your mobile users, since you will be downloading two libraries that both do the same thing, and busting their data caps, and possibly overloading their RAM limits.)
Walter
On Jan 21, 2016, at 10:25 AM, Dave Dunning
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
OK noted and thanks for having a look at the issue for me.
Dave
On 21 Jan 2016, 3:37 pm, waltd wrote:
Not the way this script is written, no. Because you are using up the one click you get within the #navigation element to toggle the submenu open, because there is no mouseover event on mobile devices. Apple cleverly map the mouseover handler to the first touch event in an element. Unfortunately my touchend listener also responds to that first touch event, so you get a simultaneous submenu open and outer layer hide in one touch.
The simplest thing will be to have the menu be all one level.
Walter
On Jan 21, 2016, at 10:25 AM, Dave Dunning
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On Jan 21, 2016, at 10:56 AM, Dave Dunning email@hidden wrote:
Should have removed the WOW script as the sliders on the home page are not WOW sliders, but they do use jQuery so maybe they’re the cause of the clash with SmoothScroll. I’ll see what I can remove action wise to cut down on the Prototype, using Crowbars to add the slider code, Caxton for some custom webfonts, AnimationFX, Favicon, CSSMenus and HTML5BlockLink. Would you suggest removing any of these?
If you use any of the FX Actions, they include Prototype in your page. I am not recommending you get rid of Prototype, just that you find a Prototype way of doing whatever you want to do with jQuery. Prototype and Scriptaculous do exactly the same thing (together) as jQuery, they just do it at a lower level than you may be accustomed to in jQuery. The WOW script I saw in your test.html page did not rely on either jQuery or Prototype, so it should be safe to combine with a Prototype page.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Thanks Walter for the info. I think I’ll add the animations as CSS and using extended classes, just used the action for speed!
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Walter
Sorry but wanted to pick your brains re the slide out nav panel. Is it possible to have a button to toggle open/close the panel rather than relying on mouse/touch as I’m finding that when scrolling back up a page on my iPhone the panel sometime opens on it’s own?
Thanks
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You can trigger it from any event you like (even scrolling, if that’s your thing). Draw a box on the page, note its Name/ID in the inspector. Then the change is to replace this with your navigation panel’s name (so, navigation if you are still using the same script) and put the new name in place of where navigation is in the original script. Adjust this to suit:
$('boxName').observe('click', function(evt){
$('navigation').toggleClassName('shy');
});
As you can see, click handlers are much less tricky than enter/leave handlers.
Walter
On Feb 10, 2016, at 5:44 AM, Dave Dunning email@hidden wrote:
Hi Walter
Sorry but wanted to pick your brains re the slide out nav panel. Is it possible to have a button to toggle open/close the panel rather than relying on mouse/touch as I’m finding that when scrolling back up a page on my iPhone the panel sometime opens on it’s own?
Thanks
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 10 Feb 2016, 1:51 pm, waltd wrote:
You can trigger it from any event you like (even scrolling, if that’s your thing). Draw a box on the page, note its Name/ID in the inspector. Then the change is to replace
thiswith your navigation panel’s name (so,navigationif you are still using the same script) and put the new name in place of wherenavigationis in the original script. Adjust this to suit:$('boxName').observe('click', function(evt){ $('navigation').toggleClassName('shy'); });As you can see, click handlers are much less tricky than enter/leave handlers.
Walter
On Feb 10, 2016, at 5:44 AM, Dave Dunning
Thanks for getting back to me. OK I’ve drawn the box and called it ‘navBtn’. I’ve then replaced the script with your new code and replaced ‘boxName’ with ‘navBtn’ as follows:
But when I preview the page nothing happens. Have I got the script right and/or do I need to apply a class the to the button?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 10 Feb 2016, 3:28 pm, Dave Dunning wrote:
On 10 Feb 2016, 1:51 pm, waltd wrote:
You can trigger it from any event you like (even scrolling, if that’s your thing). Draw a box on the page, note its Name/ID in the inspector. Then the change is to replace
thiswith your navigation panel’s name (so,navigationif you are still using the same script) and put the new name in place of wherenavigationis in the original script. Adjust this to suit:$('boxName').observe('click', function(evt){ $('navigation').toggleClassName('shy'); });As you can see, click handlers are much less tricky than enter/leave handlers.
Walter
On Feb 10, 2016, at 5:44 AM, Dave Dunning
Thanks for getting back to me. OK I’ve drawn the box and called it ‘navBtn’. I’ve then replaced the script with your new code and replaced ‘boxName’ with ‘navBtn’ as follows:
But when I preview the page nothing happens. Have I got the script right and/or do I need to apply a class the to the button?
Sorry Walter ignore my last post as I’ve realised that I hadn’t got the script quite as it should be, corrected and it’s now working!!
Thanks ever so for the help, great as always.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Walter,
Do you have a demo file of this I can look at?
Billy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
On 10 Feb 2016, 7:44 pm, billy kimmel wrote:
Walter,
Do you have a demo file of this I can look at?Billy
Hi Billy this is the link to the example of the menu I’ve created using Walters code etc:
http://stundesign.co.uk/miniscoff/how-to-use-and-recipes.html
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options