zurb-foundation-6

问题 code below is long but really straight forward only require code to put forward ability to slide from first slide to last slide to that return to first slide to traverse. <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> <div class="orbit-wrapper"> <div class="orbit-controls"> <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button> </div> <ul

问题 About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out. my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample: https://codepen.io/anon/pen/bWaYzJ <label> Uploads <label for="exampleFileUpload" class="button">Upload File</label> <input type="file" id="exampleFileUpload" class="show-for-sr"> </label> now if i detached the plugin from element

问题 Example scrollmagic module, but it happens with others too. I suspect it is for Babel but not sure. How can we reproduce this bug? Git clone https://github.com/zurb/foundation-zurb-template projectname Install: npm install gsap --save-dev bower install scrollmagic --save-dev Add text line config.yml: "node_modules/gsap/src/uncompressed/TweenMax.js" "bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js" "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation

问题 I'm having some issues with Foundation 6 files, for some reasons they are just not including all of the sass components. I tried to use Foundation 5 and it worked fine. Here is my gulp task: gulp.task('styles', ['clearCss'], function() { gulp.src('assets/sass/app.scss') .pipe(plumber(plumberErrorHandler)) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compressed' }) .on('error', notify.onError(function(error) { return "Error: " + error.message; })) ) .pipe(autoprefixer({ browsers: ['last

问题 i would like to learn the best way how to add zurb foundation single component to my fresh laravel project. What i have done so far is: npm install foundation-sites --save And second is <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> to my layout.blade.php And my questions is what should i write in sass/app.scss webpack.mix.js And maybe there is something else that needs to be done? I want to use label component only... <span class="label success">Hello world</span> thank you very

问题 I've downloaded the new Zurb Foundation 6 complete package ( Foundation for Sites ). The archived file contains the following files and folders: [css] > app.css, foundation.css, foundation.min.css [img] > [empty folder] [js] > app.js foundation.js foundation.min.js vendor > jquery.min.js, what-input.min.js I included the JS file in the footer and the CSS at the header: <!-- foundation library and initialization --> <script src="/Foundation/js/foundation.min.js"></script> <script> $(document)

问题 I'm trying to use Magellan in a cli install of the Zurb fdn6 template. The page is running fine but Magellan just doesn't work for the sticky nav and throws the following console error: Uncaught TypeError: Cannot read property 'top' of undefined It would appear Magellan is registering because when viewing the source in DevTools I can see the data-sticky attr registering a value, and active class is being applied to the anchors when scrolling up/down. However, I do notice classes that aren't

问题 I have setup a new project to test Foundation 6 using Gulp and Sass but it doesn't seem to compile at all. There is another post close to this topic, but I personally believe the accepted answer is not the correct solution - as it includes all of the components and is actually the opposite of what Zurb suggests (see this issue: https://github.com/zurb/foundation-sites/issues/7537). Anyway ... I installed Foundation 6.1.1 from bower, and added the path to my gulp-sass function in gulpfile.js

问题 I have a sticky element with data-stick-to-bottom however when I refresh the page, it flashes at the top before sticking to the bottom. Is there a callback or a function to check if foundation is ready? 回答1: Solved the issue by adding: $(window).trigger('load.zf.sticky'); Before calling my showBanner function. 来源： https://stackoverflow.com/questions/52971831/foundation-6-sticky-fouc

问题 I am trying to create an off-canvas menu with foundation 6 like it's done in the official site. When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen. .title-bar { position: fixed; width: 100%; bottom: 0; } But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed . Anyone had this problem and solved it yet? 回答1: There are a few changes to be made. The <div class="content"> should be mentioned inside the <div