Foundation 5 off-canvas animation works well but I just hope to modify the menu in-out time, and I haven't found anything related to this control. can anyone help me out? Thanks!
Foundation 5 uses CSS transition rules to control the timing of the menu as it slides open and closed.
You can see in foundation/scss/foundation/components/_offcanvas.scss, around line 60 (depending on which minor version of foundation you are using), the following:
// Transition Variables
$menu-slide: "transform 500ms ease" !default;
And later in the file, it's applied to the inner-wrap element:
// INNER WRAP
// Main content area that moves to reveal the off-canvas nav
#mixin inner-wrap {
#extend %kill-flicker;
#extend %wrap-base;
#include clearfix;
-webkit-transition: -webkit-#{$menu-slide};
-moz-transition: -moz-#{$menu-slide};
-ms-transition: -ms-#{$menu-slide};
-o-transition: -o-#{$menu-slide};
transition: #{$menu-slide};
}
So if you want to change the timing, you'd change that 500ms to a different value.
Related
I am having difficulties implementing the marquee (scrolling) text view in SwiftUI. The problem is that the text needs to stay in the original (0) position for 2 seconds and the starts moving to the left, show up on the right and continue scrolling until the 0 position and wait for 2 seconds again.
You can work with what's in this video to get something working, but honestly it's difficult to make it work with varying screen sizes if your view is in any way responsive. But if you are using the foundation in that video for the animations and combining that with a geometry reader to get your zero position and rightmost entry point position, you could get the scroll positioning correct.
As for starting and stopping, I would suggest you use a Timer to toggle a boolean #State variable called scrollText to start/stop the animation 2 seconds after its duration. You would start by first toggling the animation in .onAppear, like this:
Text("Hello World")
.offset(x: scrollText ? zeroPoint : screenEntryPoint)
.animation(Animation.linear(duration: 8).repeatForever(autoreverses: false))
.onAppear {
self.scrollText.toggle()
}
If you then set a timer for 10 seconds to toggle scrollText, you would be able to get the animation to run for 8s, pause 2 seconds, and then run again.
Please note that to make marquee text work, you also need to REPEAT the text twice, so that the text will animate in from the right while it's also leaving from the left. Good luck!
I'm fairly new to Foundation and I searched for this answer everywhere, but couldn't find it.
Trying to create a page that has a navigation that starts half way of the page. When scrolling the navigation will stick to the top. That's easy and works like a charm..
But when you go onto the page with a smaller screen size I would like the 'mobile' menu to be fixed at top, not just floating around the page.
The div I have around my is:
<div class="contain-to-grid sticky">
Hope someone knows how I can make this work.
Couple of options, you could just use a media query for small screens, something like:
#media only screen and (max-width: 40em) {
.sticky {
position: fixed !important;
top: 0px !important;
}
}
Or you could conditionally only load Magellan (or whichever method you are using) when the screen size is large enough, e.g.
if($(window).width() > 670){
// init sticky nav stuff here
}
I use foundation 4 with SASS. but I can't really find how to change default font-size.
For my language, default font-size is too big.
I have tried to change some part. as you may know, it's related full-width as well.
1st of all I have changed full width size : $row-width: em-calc(1200)
1000 to 1200. I need wider. is it correct way to change full-width?
I have tried to change font size.
$base-font-size: 100% !default;
$em-base: 16px !default;
When I change these. it's related full width.
Then How Can I change font-size and full-width? if you have sass, please let me know which file I need modified.
Not 100% clear what you are asking for in your question, but I hope I got it right - you want to know how to change the font without changing the grid size right?
Then the answer can be found in the documentation:
/* Since the typical default browser font-size is 16px, that makes the calculation for grid size. */
/* If you want your base font-size to be a different size and not have it effect grid size too, */
/* set the value of $em-base to $base-font-size ($em-base: $base-font-size;) */
$em-base: 16px !default;
So basically just set:
#import "foundation/variables";
$base-font-size: 4px;
$em-base: $base-font-size;
Change the em-base back to the default and you'll see that the grid also changes accordingly to $base-font-size. You are also doing the right thing by setting the row-width.
If you'r having trouble getting the SASS function em-calc() to work, make sure you call it after #import "foundation/variables"; I don't know why em-calc() is used in the documentation, maybe the sourcecode on git is outdated - but I had to use emCalc(#px) - ie: emCalc(2000px);
This is currently an issue, Github repo.
Until it is fixed in a new version, this changes the font-size without changing the grid.
$base-font-size: 120% !default; // pixels to percent
body { font-size: $base-font-size; } // set the body font size to $base-font-size variable
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.