Menu icon Foundation

Designer | Germany

My Posts




My Comments

Tobias Malikowski commented on Tobias Malikowski's post almost 4 years

Hi Brian,

thanks for your answer. I could solve it this way:

 // Event fired everytime another breakpoint is reached
$(window).on('changed.zf.mediaquery', function(event, name) {

  // If breakpoint is large and up, reinit the tabs
  if (Foundation.MediaQuery.atLeast('large')) {

    var tabs = new Foundation.Tabs($('[data-tabs]'));
  }

});

In my case I don't need to destroy the tabs, cause my function gets invoked by the tabs init event.
I thought there would be a more straightforward way like reflow.

I tried

 $('[data-tabs]').foundation();

what should do the same as the old reflow(), but didn't work.

However problem solved. Thank you!

Tobias Malikowski commented on Tobias Malikowski's post almost 4 years

Okay could solve this by myself. Just add .collapse to the inner row. This will set the margins (left and right) to 0. Exactly what I needed.
HTML
<div class="row collapse">

This can be found in the docs (http://foundation.zurb.com/sites/docs/grid.html) and I already knew about it, but never tried this because of the description in the docs: "The .collapse class lets you remove column gutters (padding)."

But I forgot if there is no Padding on the outer row, there is also no negative margin on the inner row.

Tobias Malikowski commented on Tobias Malikowski's post almost 4 years

Okay I think what I want to archive is not possible.

If I set my $grid-row-width to the default:

$grid-row-width: rem-calc(1200);

I archive the desired result for large screens. However on small screens the .card has 100% width of the viewport because the nested row is 100% of the viewport. So I think the only way is to overwrite the .row .row css for this particular case on small screens.

Any suggestions of how doing this without overwriting default values from the grid system are highly appreciated.

Tobias Malikowski commented on Alex Barganier's post over 4 years

Hey there, I'm trying to archive a similar function. I'm using Magellan which is working fine, but i also want to have a normal link withing my content which triggers the same effect as Magellan (smooth scroll to a destination).

I've tried to simulate the links in the Magellan, but it's not working:

<p>
Some Text ...
<span data-magellan-arrival="brewery-tours">
<a href="#brewery-tours">
Brewery Tours,
</a>
</span>
Some Text
</p>

Is it possible to use the Magellan effect on normal links?

Tobias Malikowski commented on Scott Henning's post almost 5 years

There you go: http://foundation.zurb.com/docs/components/tooltips.html

Foundation has a great documentation and should be the first place to look for.

Tobias Malikowski commented on Brian's post almost 5 years

Hi Brian,

i'm using svg for icons and the logo on this site:

http://www.camba-bavaria.de/

Basically what you want to do is have all your svgs in a "icon sprite" in my example its icons.svg.
After that you can refer to this file with xlink:href. The #icon-camba-wordmark refers the the specific svg in the sprite. So theres no positioning stuff like with image sprites. There is also a bower libary for auto generating that icon.sprite from a src folder which includes all the svgs as single files, so you can easily edit, change, add or delete icons.

<svg class="wordmark">
     <use xlink:href="fileadmin/templates/camba/public/icons/icons.svg#icon-camba-wordmark" />
</svg>

However not all browers support this modern way (good old internet explorer). But theres a script called "svg4everybody" which solves this issue on older browsers.

The whole svg thing is a bit tricky so i highly recommend to read through the following links, which helped me alot:

http://css-tricks.com/svg-sprites-use-better-icon-fonts/
http://css-tricks.com/using-svg/
http://css-tricks.com/mega-list-svg-information/
https://www.youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be

Cheers,

Tobi

Tobias Malikowski commented on Tom Ta's post about 5 years

Hi there,

I'm trying to get the Stevens plugin working for a multilevel accordion.
The accordion is already working, but i can't get the plugin to do the sliding on all sub accordions.

It only works on the parent accordion and the first child...

Here's a fiddle, so you can get the idea: http://jsfiddle.net/Sbt75/514/

Any help would be very nice.

Thank you guys :)

Tobias Malikowski commented on Albert's post about 5 years

I've tried different solutions and did some testing, but haven't figured out a fully working solution.
It should possible to have a sticky top bar with an off-canvas function for mobile devices...

Tobias Malikowski commented on Mihail Minkov's post about 5 years

Some guys managed to fix that issue. But they had to modify the interchange source code.
It would be nice if some guys from the Foundation Team could check that.

Here is the link: https://github.com/kenwheeler/slick/issues/424

Tobias Malikowski commented on Mihail Minkov's post about 5 years

Hi Mihail,

i've the same issue with Interchange and Slick Slider. It seems that this always happens to the last slide.
If i use Interchange for the first 2 slides and a normal image without Interchange for the 3 slide it quite works well.

Does anyone has a solution for this issue? I mean Zurb is recommending the Slick Slider (which is pretty awesome by the way), but it has to work with the Foundation Interchange feature.

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Tobias Malikowski's post almost 4 years

Hi Brian,

thanks for your answer. I could solve it this way:

 // Event fired everytime another breakpoint is reached
$(window).on('changed.zf.mediaquery', function(event, name) {

  // If breakpoint is large and up, reinit the tabs
  if (Foundation.MediaQuery.atLeast('large')) {

    var tabs = new Foundation.Tabs($('[data-tabs]'));
  }

});

In my case I don't need to destroy the tabs, cause my function gets invoked by the tabs init event.
I thought there would be a more straightforward way like reflow.

I tried

 $('[data-tabs]').foundation();

what should do the same as the old reflow(), but didn't work.

However problem solved. Thank you!

You commented on Tobias Malikowski's post almost 4 years

Okay could solve this by myself. Just add .collapse to the inner row. This will set the margins (left and right) to 0. Exactly what I needed.
HTML
<div class="row collapse">

This can be found in the docs (http://foundation.zurb.com/sites/docs/grid.html) and I already knew about it, but never tried this because of the description in the docs: "The .collapse class lets you remove column gutters (padding)."

But I forgot if there is no Padding on the outer row, there is also no negative margin on the inner row.

You commented on Tobias Malikowski's post almost 4 years

Okay I think what I want to archive is not possible.

If I set my $grid-row-width to the default:

$grid-row-width: rem-calc(1200);

I archive the desired result for large screens. However on small screens the .card has 100% width of the viewport because the nested row is 100% of the viewport. So I think the only way is to overwrite the .row .row css for this particular case on small screens.

Any suggestions of how doing this without overwriting default values from the grid system are highly appreciated.

You commented on Alex Barganier's post over 4 years

Hey there, I'm trying to archive a similar function. I'm using Magellan which is working fine, but i also want to have a normal link withing my content which triggers the same effect as Magellan (smooth scroll to a destination).

I've tried to simulate the links in the Magellan, but it's not working:

<p>
Some Text ...
<span data-magellan-arrival="brewery-tours">
<a href="#brewery-tours">
Brewery Tours,
</a>
</span>
Some Text
</p>

Is it possible to use the Magellan effect on normal links?

You commented on Scott Henning's post almost 5 years

There you go: http://foundation.zurb.com/docs/components/tooltips.html

Foundation has a great documentation and should be the first place to look for.

You commented on Brian's post almost 5 years

Hi Brian,

i'm using svg for icons and the logo on this site:

http://www.camba-bavaria.de/

Basically what you want to do is have all your svgs in a "icon sprite" in my example its icons.svg.
After that you can refer to this file with xlink:href. The #icon-camba-wordmark refers the the specific svg in the sprite. So theres no positioning stuff like with image sprites. There is also a bower libary for auto generating that icon.sprite from a src folder which includes all the svgs as single files, so you can easily edit, change, add or delete icons.

<svg class="wordmark">
     <use xlink:href="fileadmin/templates/camba/public/icons/icons.svg#icon-camba-wordmark" />
</svg>

However not all browers support this modern way (good old internet explorer). But theres a script called "svg4everybody" which solves this issue on older browsers.

The whole svg thing is a bit tricky so i highly recommend to read through the following links, which helped me alot:

http://css-tricks.com/svg-sprites-use-better-icon-fonts/
http://css-tricks.com/using-svg/
http://css-tricks.com/mega-list-svg-information/
https://www.youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be

Cheers,

Tobi

You commented on Tom Ta's post about 5 years

Hi there,

I'm trying to get the Stevens plugin working for a multilevel accordion.
The accordion is already working, but i can't get the plugin to do the sliding on all sub accordions.

It only works on the parent accordion and the first child...

Here's a fiddle, so you can get the idea: http://jsfiddle.net/Sbt75/514/

Any help would be very nice.

Thank you guys :)

You commented on Albert's post about 5 years

I've tried different solutions and did some testing, but haven't figured out a fully working solution.
It should possible to have a sticky top bar with an off-canvas function for mobile devices...

You commented on Mihail Minkov's post about 5 years

Some guys managed to fix that issue. But they had to modify the interchange source code.
It would be nice if some guys from the Foundation Team could check that.

Here is the link: https://github.com/kenwheeler/slick/issues/424

You commented on Mihail Minkov's post about 5 years

Hi Mihail,

i've the same issue with Interchange and Slick Slider. It seems that this always happens to the last slide.
If i use Interchange for the first 2 slides and a normal image without Interchange for the 3 slide it quite works well.

Does anyone has a solution for this issue? I mean Zurb is recommending the Slick Slider (which is pretty awesome by the way), but it has to work with the Foundation Interchange feature.

Posts Followed

Following

  • No Content

Followers