Menu icon Foundation

Designer | Netherlands

My Posts











My Comments

Joop Vos commented on Joop Vos's post about 1 year

One more try with data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" and the animation is working ... :)
 
<!-- banner -->
<div class="orbit" role="region" aria-label="banner pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
<ul class="orbit-container">
<li class="orbit-slide is-active">
<txp:image id="68" class="orbit-image" />
</li>
<li class="orbit-slide">
<txp:image id="69" class="orbit-image" />
</li>
</div>

Joop Vos commented on Joop Vos's post over 1 year

With Foundation 6.1.2 the default breakpoints are:

$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);

With ...

@media screen and #{breakpoint(small)} {...}

'small' doesn't do it's job when set at 0px. It does work when set at 1px or larger.

Bug ... !?

Joop Vos commented on Joop Vos's post almost 2 years

With Bryan (Codekit) done some research ... but the outcome is that the (new) function (http://foundation.zurb.com/sites/docs/media-queries.html#breakpoint-function) isn't recognised.

Foundationers ... why not?

Joop Vos commented on Joop Vos's post almost 2 years

Thanks Maarten. I've used scrollIt.js (http://www.bytemuse.com/scrollIt.js).

Accordion without scrollIt.js:

<dl class="accordion" data-accordion="fokor">
<dd class="accordion-navigation">
<a href="#panel5">Bestuur van FOKOR</a>
<div id="panel5" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel6">Ledenvergadering FOKOR</a>
<div id="panel6" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>

And with scrollIt.js:

<dl class="accordion" data-accordion="fokor" data-scroll-index="2">
<dd class="accordion-navigation">
<a href="#panel5" data-scroll-goto="2">Bestuur van FOKOR</a>
<div id="panel5" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel6" data-scroll-goto="2">Ledenvergadering FOKOR</a>
<div id="panel6" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>

And it does a fine job > www.fokor.nl/info ... :)

Joop Vos commented on Joop Vos's post almost 2 years

No, I meant that on certain occasions the focus onto the header of a (the) panel just opened, is lost because the scroll position is somewhere set between the content of that panel. I guess it's caused because at the same time there is a panel being closed.

Joop Vos commented on Keith D Commiskey's post almost 2 years

It's important to give each div/panel the same but unique ID/number. Do you have two accordions on one page (HTML) with divs/panels with the same ID/number (e.g. #3) ... clicking on one of them will open both ... and so on. Look at www.fokor.nl/info ... :)

Example Accordion One:

<dl class="accordion" data-accordion="one">
<dd class="accordion-navigation">
<a href="#panel1">OneA</a>
<div id="panel1" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2">OneB</a>
<div id="panel2" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dl>

Example Accordion Two:

<dl class="accordion" data-accordion="two">
<dd class="accordion-navigation">
<a href="#panel3">TwoA</a>
<div id="panel3" class="content">
<txp:article_custom id="27" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel4">TwoB</a>
<div id="panel4" class="content">
<txp:article_custom id="28" form="article_single-notitle" />
</div>
</dl>

Joop Vos commented on Christian Matthias's post over 2 years
Joop Vos commented on yoshi's post over 2 years
Joop Vos commented on Michael's post over 2 years

Read this article > http://goo.gl/sCQVoo ... secret #1 ... :)

The settings.scss file is a little bit complicated and confusing because often you can change settings without sass errors but sometimes you can't and have to uncheck commented strings (variables) elsewhere in the file. Or even worse you'll have to uncheck strings like this one:

// 34. Top Bar
// Height and margin
   $topbar-height: rem-calc(45); // otherwise '$unbound variable' error(s) ...
// $topbar-margin-bottom: 0;

I hope Foundation will improve this confusing setup ... if it can be done.

Joop Vos commented on Jose Ricardo Milandro Hibaler's post over 2 years

Thanks Spencer ... your snippet does the trick. Nevertheless it's a bit weird because in _settings.scss I've found this piece of code >

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;

... but unchecking the string doesn't trigger a transition ... !?

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Joop Vos's post about 1 year

One more try with data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;" and the animation is working ... :)
 
<!-- banner -->
<div class="orbit" role="region" aria-label="banner pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
<ul class="orbit-container">
<li class="orbit-slide is-active">
<txp:image id="68" class="orbit-image" />
</li>
<li class="orbit-slide">
<txp:image id="69" class="orbit-image" />
</li>
</div>

You commented on Joop Vos's post over 1 year

With Foundation 6.1.2 the default breakpoints are:

$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);

With ...

@media screen and #{breakpoint(small)} {...}

'small' doesn't do it's job when set at 0px. It does work when set at 1px or larger.

Bug ... !?

You commented on Joop Vos's post almost 2 years

With Bryan (Codekit) done some research ... but the outcome is that the (new) function (http://foundation.zurb.com/sites/docs/media-queries.html#breakpoint-function) isn't recognised.

Foundationers ... why not?

You commented on Joop Vos's post almost 2 years

Thanks Maarten. I've used scrollIt.js (http://www.bytemuse.com/scrollIt.js).

Accordion without scrollIt.js:

<dl class="accordion" data-accordion="fokor">
<dd class="accordion-navigation">
<a href="#panel5">Bestuur van FOKOR</a>
<div id="panel5" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel6">Ledenvergadering FOKOR</a>
<div id="panel6" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>

And with scrollIt.js:

<dl class="accordion" data-accordion="fokor" data-scroll-index="2">
<dd class="accordion-navigation">
<a href="#panel5" data-scroll-goto="2">Bestuur van FOKOR</a>
<div id="panel5" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel6" data-scroll-goto="2">Ledenvergadering FOKOR</a>
<div id="panel6" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dd>
</dl>

And it does a fine job > www.fokor.nl/info ... :)

You commented on Joop Vos's post almost 2 years

No, I meant that on certain occasions the focus onto the header of a (the) panel just opened, is lost because the scroll position is somewhere set between the content of that panel. I guess it's caused because at the same time there is a panel being closed.

You commented on Keith D Commiskey's post almost 2 years

It's important to give each div/panel the same but unique ID/number. Do you have two accordions on one page (HTML) with divs/panels with the same ID/number (e.g. #3) ... clicking on one of them will open both ... and so on. Look at www.fokor.nl/info ... :)

Example Accordion One:

<dl class="accordion" data-accordion="one">
<dd class="accordion-navigation">
<a href="#panel1">OneA</a>
<div id="panel1" class="content">
<txp:article_custom id="25" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2">OneB</a>
<div id="panel2" class="content">
<txp:article_custom id="26" form="article_single-notitle" />
</div>
</dl>

Example Accordion Two:

<dl class="accordion" data-accordion="two">
<dd class="accordion-navigation">
<a href="#panel3">TwoA</a>
<div id="panel3" class="content">
<txp:article_custom id="27" form="article_single-notitle" />
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel4">TwoB</a>
<div id="panel4" class="content">
<txp:article_custom id="28" form="article_single-notitle" />
</div>
</dl>

You commented on Christian Matthias's post over 2 years
You commented on yoshi's post over 2 years
You commented on Michael's post over 2 years

Read this article > http://goo.gl/sCQVoo ... secret #1 ... :)

The settings.scss file is a little bit complicated and confusing because often you can change settings without sass errors but sometimes you can't and have to uncheck commented strings (variables) elsewhere in the file. Or even worse you'll have to uncheck strings like this one:

// 34. Top Bar
// Height and margin
   $topbar-height: rem-calc(45); // otherwise '$unbound variable' error(s) ...
// $topbar-margin-bottom: 0;

I hope Foundation will improve this confusing setup ... if it can be done.

You commented on Jose Ricardo Milandro Hibaler's post over 2 years

Thanks Spencer ... your snippet does the trick. Nevertheless it's a bit weird because in _settings.scss I've found this piece of code >

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;

... but unchecking the string doesn't trigger a transition ... !?

Posts Followed

Following

  • No Content

Followers