I am trying to use Foundation's joyride in my website. I took the example on Zurbs homepage like this
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
<p>Hello and welcome to the Joyride <br>documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End" data-prev-text="Prev">
<h4>Stop #3</h4>
<p>It works as a modal too!</p>
</li>
and then in the javsScript I initialize it like this
$(document).foundation('joyride', 'start');
I get this error on my console,
Uncaught RangeError: Maximum call stack size exceeded
Any explanations on how I am getting this error?
Sounds like the page is missing an element for Joyride to attach to. Your code contains the JoyRide modals but doesn't contain an element to attach to.
Add
<div id="firstStop">First Stop</div>
to your HTML.
Here's a working demo.
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack
How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
aurelia.start().then(a => a.setRoot('app', document.body))
.then(a => {
// Initialize any frameworks you want to use
$(document).foundation();
console.log('foundation loaded')
});
The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li repeat.for="row of router.navigation">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
<!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
<a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
</li><!--</view>--><!--<view>-->
Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0">One</li>
One specific is the open-left class in the first <li>
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
'reflow' is not Foundation 6, I instead use
attached(){
// refresh JS after DOM is loaded
$(document).foundation();
}
I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.
Aurelia as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}
I'm using foundation as a basis for the site design and developing a nav bar for the side of the screen. I want to use Foundation's side nav because it has dividers and nice method for graying out or marking nav links as 'active'. The problem I'm having is that the clickable area for the link extends the width of the container instead of the text content of the link. I feel that is confusing and I don't want that experience for my users.
Zurb Foundation Code:
<section class="section">
<ul class="side-nav no_padding_top">
<h5 >What can I do here?</h5>
<li class="">
<a href="#" >View Popular</a>
</li>
<li class="">
<a href="#" >View Top Rated</a>
</li>
<li class="">
<a href="#" >Browse Categories</a>
</li>
</ul>
</section>
In the picture below I show the way the zurb site nav is rendered (bottom) with a border around the clickable area. I want to limit the click area around the link text (top), ie. the clickable link is the size of the text, not the container. How can I override the default zurb foundation behavior to do that?
It is because the link is set to display:block. Override it with:
.side-nav li a {
display: inline-block;
}
I posted a test site at http://jobajoba.org that shows some foundation 4 elements.
I am using vanilla out-of-box foundation 4 framework but having trouble with lightbox thumbs showing up as bullet items in a list (they should be in row similar to "block grid" example shown on the page).
I can't figure out what I am doing wrong... note that everything else on page seems to work out of box.
On edit:
I forgot about this question, but about a month after I posted this, Zurb indicated to me that they used a block-grid to create the effect. Something like this worked for me:
<div>
<ul class="large-block-grid-4 small-block-grid-2" data-clearing>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
</a>
</li>
</ul>
</div>
Foundation's documentation examples uses a custom docs.css file:
http://foundation.zurb.com/docs/assets/docs.css
The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.
/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }
Adding these rules to your own css file should provide the layout you're looking for.
How to make a vertical tabs like we have in zurb foundation doc website : http://foundation.zurb.com/docs/javascripts.php where we have tabs and sub menu when clicking on item for example "javascript".
Here is the code from their page
it's just unordered list inside one of list elements from main navigation
<ul class="tabs vertical hide-on-phones">
<li>Getting Started</li>
<li>Compass</li>
<li>Rails</li>
<li>Sass</li>
<li>CSS Quickstart</li>
<li class="active">Components
<ul>
<li>Overview</li>
<li>The Grid</li>
<li>Media Queries</li>
<li>Typography</li>
<li>Buttons</li>
<li>Forms</li>
<li class="active">Navigation</li>
<li>Tabs</li>
<li>Elements</li>
</ul>
</li>
<li>Javascripts</li>
<li>Support</li>
</ul>