Menu icon Foundation

Designer | Zoetermeer, Zuid-Holland

My Posts

  • 4
    Replies
  • Orbit slider enable touch

    By Robbert Stapel

    OrbitsliderF6

    Hello everyone,  Im on foundation 6.5.3 (installed the zurb-template).In previous versions of f6, orbit slider works on mobile devices right out of the box...However, now when i do a clean install and paste in the orbit slider, nothing happens when ... (continued)

    Last Reply by Steve File 4 months ago



My Comments

Robbert Stapel commented on Kevin Neal's post over 1 year

Oke, it has been a while, but since i ended up on this page, i believe others will too. The solution:
You should opt-out AMD in webpack config. This is causing the errors.
First: install imports-loader.
npm install imports-loader --save
Second, (if you don't already have one) create a webpack config in your root directory.
webpack.config.js
In this webpack config, opt-out AMD by adding:
module: {
rules: [
{ parser: { amd: false } }
]
}
Now you can add the following rules to your app.js
import {TweenMax, TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
Let me know if this worked for you :) 

Robbert Stapel commented on Hari Harker's post about 2 years

Which version of foundation you are using? Seems there are some bugs in versions < 6.3Check this fiddle with a given (temp) solution. 

Robbert Stapel commented on Alex Dragan's post about 2 years

Did you try foundation's .no-js class to prevent FOUC? For example: (change code according to your drop-down menu). 
.no-js {
@include breakpoint(small only) {
.top-bar {
display: none;
}
}

@include breakpoint(medium) {
.title-bar {
display: none;
}
}
}
 

Robbert Stapel commented on kholis Muhaimin's post about 2 years

I think Wordpress automaticly adds the .is-active class to an active menu. So you should style the .is-active class.To be sure you can check this via the dev tool and click an menu item to see what class is added by Wordpress.

Robbert Stapel commented on Matthew Meaklim's post about 2 years
Robbert Stapel commented on Wiechert Hooghwinkel's post over 2 years

The markup causing the problems is likely to come from the template/CMS you use. My advise: start building your website in Foundation. Once it is finished, start with implementing it into the CMS.

Robbert Stapel commented on Elisandro Martinez's post over 2 years

To prevent the scrolling problem in contact use:
.footer .contact{
@include breakpoint(medium down) {
font-size: 0.7em
}
}
You can also reduce the margins on smaller screen since you have very little space.
 
For the logo problem... you should use .title-bar and .top-bar for your responsive behavior. 
1.the top-bar class, by default is visible at medium-up sizes.change it to be visible for large-up sizes
2.the title-bar class, by default is visible at small onlychange it to be visible for medium-down sizesBe sure to build your top-bar the right way... (semantics, syntaxis) this is how foundation is build and should be used. understanding the structure should already get you there. More important, it keeps you from messing around and solving problems you should not have. 
 

Robbert Stapel commented on Wiechert Hooghwinkel's post over 2 years

 
 
Seems the way you wrapped your top-bar causes the problem...You have wrapped your top-bar in a div with the following classes:
<div class="sticky is-anchored is-at-top">
<!-- Your top-bar div sits in here -->
</div>
With these classes the logo is invisible, but when i change these classes to 
<div class="sticky is-at-top is-stuck">
<!-- Your top-bar div sits in here -->
</div>
The logo displays fine...it seems your template causes these style changes when scrolling the page.
You can test this by using "inspect element" in your browser and change the classes as i did.Let me know if this solved your problem.
 

Robbert Stapel commented on Wiechert Hooghwinkel's post over 2 years

can you post your top-bar code? seems you havent wrapped it up correctly.
 

Robbert Stapel commented on Viper Scull's post over 3 years

Glad it helped! 
$(document).foundation(); is there to initialize all the Foundation Javascript. It starts running all the plugins... So therefore when you remove the app.js or even the line $(document).foundation(); your Foundation Javascript will not load...
Be aware that it is not the same as $(document).ready wich waits for the DOM to load and then fires the Javascript... For more info see the docs: http://foundation.zurb.com/sites/docs/javascript.html
 
 

Posts Followed











Following

    No Content

Followers

My Posts

My Comments

You commented on Kevin Neal's post over 1 year

Oke, it has been a while, but since i ended up on this page, i believe others will too. The solution:
You should opt-out AMD in webpack config. This is causing the errors.
First: install imports-loader.
npm install imports-loader --save
Second, (if you don't already have one) create a webpack config in your root directory.
webpack.config.js
In this webpack config, opt-out AMD by adding:
module: {
rules: [
{ parser: { amd: false } }
]
}
Now you can add the following rules to your app.js
import {TweenMax, TimelineMax} from "gsap";
import ScrollMagic from "scrollmagic";
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
Let me know if this worked for you :) 

You commented on Hari Harker's post about 2 years

Which version of foundation you are using? Seems there are some bugs in versions < 6.3Check this fiddle with a given (temp) solution. 

You commented on Alex Dragan's post about 2 years

Did you try foundation's .no-js class to prevent FOUC? For example: (change code according to your drop-down menu). 
.no-js {
@include breakpoint(small only) {
.top-bar {
display: none;
}
}

@include breakpoint(medium) {
.title-bar {
display: none;
}
}
}
 

You commented on kholis Muhaimin's post about 2 years

I think Wordpress automaticly adds the .is-active class to an active menu. So you should style the .is-active class.To be sure you can check this via the dev tool and click an menu item to see what class is added by Wordpress.

You commented on Matthew Meaklim's post about 2 years
You commented on Wiechert Hooghwinkel's post over 2 years

The markup causing the problems is likely to come from the template/CMS you use. My advise: start building your website in Foundation. Once it is finished, start with implementing it into the CMS.

You commented on Elisandro Martinez's post over 2 years

To prevent the scrolling problem in contact use:
.footer .contact{
@include breakpoint(medium down) {
font-size: 0.7em
}
}
You can also reduce the margins on smaller screen since you have very little space.
 
For the logo problem... you should use .title-bar and .top-bar for your responsive behavior. 
1.the top-bar class, by default is visible at medium-up sizes.change it to be visible for large-up sizes
2.the title-bar class, by default is visible at small onlychange it to be visible for medium-down sizesBe sure to build your top-bar the right way... (semantics, syntaxis) this is how foundation is build and should be used. understanding the structure should already get you there. More important, it keeps you from messing around and solving problems you should not have. 
 

You commented on Wiechert Hooghwinkel's post over 2 years

 
 
Seems the way you wrapped your top-bar causes the problem...You have wrapped your top-bar in a div with the following classes:
<div class="sticky is-anchored is-at-top">
<!-- Your top-bar div sits in here -->
</div>
With these classes the logo is invisible, but when i change these classes to 
<div class="sticky is-at-top is-stuck">
<!-- Your top-bar div sits in here -->
</div>
The logo displays fine...it seems your template causes these style changes when scrolling the page.
You can test this by using "inspect element" in your browser and change the classes as i did.Let me know if this solved your problem.
 

You commented on Wiechert Hooghwinkel's post over 2 years

can you post your top-bar code? seems you havent wrapped it up correctly.
 

You commented on Viper Scull's post over 3 years

Glad it helped! 
$(document).foundation(); is there to initialize all the Foundation Javascript. It starts running all the plugins... So therefore when you remove the app.js or even the line $(document).foundation(); your Foundation Javascript will not load...
Be aware that it is not the same as $(document).ready wich waits for the DOM to load and then fires the Javascript... For more info see the docs: http://foundation.zurb.com/sites/docs/javascript.html
 
 

Posts Followed

Following

  • No Content

Followers

  • No Content