Hi,
Does anyone have any tips on where to add the following code for fixed navigation within the Freeway doc using Backdraft in Freeway 6? Or another idea?
Thanks
The Javascript is:
The CSS is
#NavigationWrapper.floating { position: relative; } #NavigationWrapper.fixed { position: fixed; top: 0px; left: 0px; }Thanks again
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Does anyone have any tips on where to add the following code
Where did you get this code from?
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi David,
From a coder who develops websites. He added this to a demo version of a site I am designing and it worked for his demo but when I try it in freeway it doesn’t work.
I tried adding it into the code after I published freeway but it didn’t work and also not practical as Freeway will over ride the code if I make updates and publish the doc.
Do you have any other suggestions?
Thanks
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can we see the page online somewhere? This will really help!
I am assuming that this is Vanilla Javascript? Or does it rely on jQuery?
Have you added a Class to the NavigationWrapper?
This is a quickie I have put together - your code is actually not quite correct and I have included a call to jQuery
http://www.deltadesign.co/FW7Test/navigation.html
My js is and I have added it via Page>Html Markup in the before end section
<script type="text/javascript">
fixMenu = function () { viewtop=$(window).scrollTop();
if (viewtop>130) { $('#NavigationWrapper').removeClass('floating');
$('#NavigationWrapper').addClass('fixed');
} if (viewtop<=130) { $('#NavigationWrapper').removeClass('fixed');
$('#NavigationWrapper').addClass('floating');
} };
$( document ).ready(function() { $(window).on('scroll', fixMenu);
}
);
</script>
But the Sticker Action does this anyway without potential conflicts with native FW scriptaculous/protaculous based javascript libraries.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi David,
Thanks so much for getting back to me with the updated code.
I’m not sure the client would approve of me putting their site up before it is complete. The page is based on the Backdraft template (http://backdraft.onrampwebdesign.com/).
I can make a similar demo page with Freeway & Backdraft but I won’t be able to do that this week now as I now have another project to finish. I will try and post it next week so hopefully be in touch then.
Thanks again for your speedy reply!
Best wishes
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
As I suggested to someone else there is no reason why you cannot publish your site to a temporary location ie a subfolder of your own site.
I would create a subfolder in my existing FW doc like myownsite.com/clients with no pages in it and then upload.
You will then have a folder on your server at myownsite.com/clients
In the site that you are building you would set the upload path as myownsite.com/clients/ with the normal user/pass combo that you use for your own site.
When you upload from the clients FW doc that you are working on it will populate the myownsite.com/clients folder (which is currently empty)
I cannot stress how absolutely essential it is to test your site as you are building it live on the server (using an assortment of Browsers and OS). It also makes it so much easier for us to diagnose any issues.
If you are worried about it being ‘found’ then use your hosting cPanel to password protect the directory so that only authorised viewers can see it.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
And you could always try the Sticker Action instead of adding Markup.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dave,
Thanks again for your help,
I’m working on another site at the moment using the same BackDraft framework with Freeway Pro 6.0.2 as the one I mentioned in my earlier post. I’ve tried adding the code you suggested to this site (before the but the navigation is still scrolling up as before rather than a fixed navigation.
Here is the link.
I’ve added a class:NavigationWrapper to the NavigationWrapper Name/ID (in the inspector panel)
by clicking on “Item > Extended > and entering this in the
Thanks again!
Best wishes
Mog
I tried using BackDraft with the Freeway 7 Upgrade demo version but the programme kept crashing. Also when the site was published, images would distort rather than resize properly.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I tried using BackDraft with the Freeway 7 Upgrade demo version but the programme kept crashing. Also when the site was published, images would distort rather than resize properly.
BackDraft relies heavily on the Box Sizing action which doesn’t work in 7
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK - several issues with that page
1 - The style code for the NavigationWrapper is missing
<style> #NavigationWrapper.floating { position: relative; } #NavigationWrapper.fixed { position: fixed; top: 0px; left: 0px; }
</style>
I’ve added a class:NavigationWrapper to the NavigationWrapper Name/ID (in the inspector panel)
2 - Not necessary to add the Class of NavigationWrapper - it does nothing.
Your main issue is that your javascript is working and adding/removing the 2 classes floating/fixed to NavigationWrapper but these styles are not declared in your page.
Take the following code and add it into Page>Html Markup in the before slot
<style type="text/css">
#NavigationWrapper { z-index: 999; }
#NavigationWrapper.floating { position: relative; }
#NavigationWrapper.fixed { position: fixed; top: 0px; left: 0px; }
</style>
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
http://www.deltadesign.co/FW7Test/vermilion.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dave,
Thanks so much for your help. This is working now but I notice is that when I stretch the browser larger than the design of the page, the navigation floats to the left and out of line with the rest of the page which is centred. Is there a way of keeping the navigation centred with the rest of the page when the browser expands?
Thanks again
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I notice although your navigation bar also floats left, the grey bar background continues along the right hand side so gives the illusion it’s a bit more centred but I’m not sure how to do this.
Thanks again
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I added a bit extra to the CSS
<style type="text/css">
#NavigationWrapper { z-index: 999; }
#NavigationWrapper.floating { position: relative; }
#NavigationWrapper.fixed { position: fixed; top: 0px; left: 0px; width: 100%; max-width: 1800px !important; }
</style>
You could probably increase that if you were expecting visitors with a bigger screen than 1800px
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks so much for all your help Dave. That’s fantastic!
Best wishes
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dave,
I’ve just added this code to a new site I’m working on but can’t understand why it’s not working for this site. Could you let me know if I’ve missed something?
Thanks
Mog
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options