zurb-foundation

问题 What's the best way to maintain the state of a Foundation tab on postback? Preferably a way that doesn't use cookies. <dl class="tabs"> <dd class="active"><a href="#simple1">Simple Tab 1</a></dd> <dd><a href="#simple2">Simple Tab 2</a></dd> <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd> </dl> <ul class="tabs-content"> <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li> <li id="simple2Tab">This is simple tab 2s content. Now you see it!<

问题 So, I'm creating a fairly complex Vue application that fetches data from our backend API and displays it on the front-end, depending on filters the person selects. Its default is to display everything at once, then once the user selects filters, it will pull out the "card" components that don't have those attributes. Everything has been going great until today, which I tried to add Google Maps into it, via their API (I'm using the vue2-google-maps package to make this easier on myself, since

问题 I have tried the following code to create an active button in F5, but its NOT giving active class effect, please let me know why? <ul class="button-group radius small"> <li class="active"><a href="#" class="button small alert">Button 1</a></li> <li><a href="#" class="button small alert">Button 2</a></li> <li><a href="#" class="button small alert">Button 3</a></li> <li><a href="#" class="button small alert">Button 4</a></li> </ul> 回答1: Zurb foundation does not have any active classes for

问题 I've created a site using foundation sites. It's using the standard install using the Foundation CLI. I've got the site running locally using foundation watch . When I push this to Heroku the build succeeds in the Heroku console but when I visit the site in a browser I only get an application error. Heroku support has said I should be using $PORT in my startup script but I don't know where to configure this. This also seems strange as it's the first install. Has anyone had similar problems?

问题 I'm a front-end web developer working on my first serious rails project (v3.2.8). I've successfully installed Foundation version 3.2.0 using the gem. I am having trouble with the navigation toggle, which appears on smaller screen sizes and is used to expand and collapse the navigation links. When I click on it, it does nothing. (You can see the documentation for the responsive zurb nav on their website: http://foundation.zurb.com/docs/navigation.php). The code in question is: <nav class="top

问题 I'm using zurb foundation to help me make a website responsive. The idea is that the header should look like this on larger screens (and it does): ####### |------ Search ----------| %%%%%%%%%%% And this on smaller screens (which it doesn't): ###### %%%%%%%%%% |---- Search ---| There are two problems. The first is that the mobile one actually looks like this: ###### |---- Search ---| %%%%%%%%%% And the second is that the Search bar is unclickable . I tried changing the z-index and making the

问题 Short version: I'd like to have the same kind of cmsplugin use different templates in different placeholders. Is this possible? Or, should I go and make my custom plugin? Long version: Using Django and Django-CMS and using the cmsplugin-video-youtube plugin, I have two youtube videos on the home page and they are styled using Foundation 4's grid system to be stacked one and then another below it and at a certain 'breaking point' of the browser's width, they will be side-by-side. This is all

问题 I've made $(document).foundation() fire on viewContentLoaded but for some reason it still does not run: var myApp = angular.module("myApp", []).run(function($rootScope) { $rootScope.$on('$viewContentLoaded', function () { console.log('loaded!'); $(document).foundation(); }); }); See the demo here: http://jsfiddle.net/UpwvU/ I've followed several answers from this question but none of them made me succeed. 回答1: $viewContentLoaded sounds like a simple event.... but unfortunately it doesn't mean

问题 I was working on a Foundation 5 project that turned out to have an outdated _global.scss component. I was trying to get range sliders working, but they were mysteriously not. Turns out, I was missing the following 2 lines of CSS: meta.foundation-data-attribute-namespace { font-family: false; } Can someone explain these lines to me? The Docs say this: // Used to provide media query values for javascript components. // Forward slash placed around everything to convince PhantomJS to read the

问题 I have setup streched background on the homepage of https://picup.it through the class <div class="bg-background"> Which is defined as below: .bg-background { height: 100%; } .bg-background:after{ background: url({% static "images/picup-bg-01.jpg" %}) no-repeat; background-size: 100%; content: ""; opacity: 0.6; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }; However, it looks slight different on localhost. In production (picup.it) background image is stretched to the