Is there any way possible to have a Foundation Reveal's content scrollable? i.e. content is longer the the visible page?
Related
Since it's not possible to register for the Foundation Forum I hope somebody here can help.
It looks like the Zurb Accordion is not compliant with WAI. The accordion renders an element with the role tablist (ul.accordion. Inside this lis are created. Every of this lis consist of a link with the role tab and a div with the role tabpanel.
As far as I understand the tablist should only contain tabs and the tabpanels should be outside of the tablist.
I am trying to display the Foundation 6 nav bar but have not been able to get the html to render correctly. I have followed the Foundation docs to set up the project but have not been able to get anything to work. Here is a screen shot of the errors that I can get in the console when I try to preview the page.
Screen shot of console errors
I am rather new to using Foundation.
Update
The nav bar I was using from the Zurb building blocks had some sort error. I switched to a different nav and now everything works.
I'm having an issue with the Magellan sticky nav in Zurb Foundation. I have a form where users can add as many elements as they need to, which increases the HTML and div heights. The sticky nav works fine until content is added to the page, at which point the sticky nav will stop being sticky at the original page height (it thinks it's hitting the footer/bottom). If I resize the browser after adding content the sticky nav will snap back into place and use the new heights to determine when to stop. Is there a way I can trigger this so that when new content is added to the page the sticky nav will adjust to the new heights?
Example
Here is the nav (both left and right) sticking properly.
After I add a "Performance of Understanding" and thus increase the div/page height, the nav does not stick anymore when scrolling and instead stops where the footer/bottom used to be since it is not working on an updated page height.
I ended up solving this issue using the following code anytime an element was added to my page:
$(".sticky").foundation("_calc", true);
This recalculates all scrolling points for all sticky elements in your page.
Via comments here
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
I am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.