Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
Related
what I would like to do in RED BOX:
hello. obviously I am new and very much a beginner.
I am using ember.js for my application frontend and bootstrap to ease the styling process. I want to build a top fixed menu bar like the picture attached and a left navigation bar with scrolling like the picture attached. maybe because I am new thats why I am unable to use the manuals properly to land me at this point.
if anyone choose to help, need to know 1st that if there are already defined builtin components in ember.js to solve this issue (I am using ember v3.18), I am unable to find any.
2nd, if 1st question answer is no, then how can I build it - or are there any suggestive codes available online for me to learn from?
In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
I just upgraded from version 4.1 from a month or so back and suddenly my section (horozintal-nav) is being hidden on screen sizes above 768px. Prior to the upgrade it would display as a horizontal nav above 768px and as an accordion on smaller screens.
I am using compass and sass.
I have also tried cutting and pasting their example code from their documentation into the top of my page and I get the same behaviour with that as well.
The CSS that hides the control...
/* line 49, ../../../../../lib/gems/1.9.1/gems/zurb-foundation-4.3.1/scss/foundation/components/_section.scss */
[data-section='horizontal-nav']:not([data-section-resized]):not([data-section-small-style]), .section-container.horizontal-nav:not([data-section-resized]):not([data-section-small-style]) {
visibility: hidden;
}
Is anyone else having this problem?
Seems I just needed to add data-section-resized attribute to my container.
<div data-section="horizontal-nav" data-section-resized>...</div>
So simple fix, but that isn't in the zurb documentation - does anyone one know what that attribute is for?
I ran into this problem as well. The above answer didn't quite work for me because all my tabs were squashed to the top right, overlapping each other.
This thread helped me sort it out:
https://github.com/zurb/foundation/issues/3555
This isn't broken. Sizing can't be calculated correctly when elements aren't visible. If you're going to hide them and then show, you'll need to call reflow or fire the resize event to get things to calculate the correct sizes.
At least for my case, my items were being loaded AFTER Foundation was able to calculate the widths, so it always went to 0.
Hope this helps!
By the 'Prezi-like animation' I mean that your canvas rotate/zoom/shift to the tiny little portion in a sequential manner.
P.S.: The question is not limited to AE. Any animation sw would be relevant.
Some suggest HTML5, but that targets web design (my purpose is only creating some animation for self entertainment.)
Still, if HTML5 is an option have a look at layerJS, an open source library which can create Prezi-like web interfaces. It even allows multiple layers if you need some elements to move independently of each other.
It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.
The HTML code would look like this:
<div data-wl-type="stage">
<div data-wl-type="layer" data-wl-layout-type="canvas">
<div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
</div>
<div data-wl-type="frame" ...>
</div>
</div>
</div>
Yes.
You could do it manually. A little tedious, but you would place your text layers in 3d space and push your camera around. You will spend a lot of time tweaking everything like the things in the visible things in the background and the easing moves into and away from the text.
Sure Target is free and could be a big time saver. You basically use it to square up the camera to null objects and it takes a lot of the tedium out of the process, even though you have to spend a few minutes up front to figure out how it works.
http://www.videocopilot.net/tutorial/energetic_titles/
Webpgr does offer this. It's HTML5 based and comes with a Photoshop-like online editor. It's in beta but you can request an account.
I was wondering if anyone knows of a jQuery or MooTools script that will do the exact same thing as YOOcarousel (http://tools.yootheme.com/extensions/yoocarousel).
I'm looking to emulate the 'List Styling' setup they have where on the left you have the tabbed navigation and on the right it fades in/out thru each of the tabbed items as they are clicked.
Thanks,
Ryan
iCarousel might work for your purposes (demo and code examples here as well), created by Fabio Zendhi Nagao. The functionality isn't exactly identical (tab based control) to the YooTools Carousel but foundation is there to make it very close to the YooTools offering.
slideItMoo is another alternative- however, it appears to have fewer customized examples and less of a fan base.