As per Foundation 4 it is possible to switch slides using a button outside the orbit slider. Is this possible in Foundation 3?
I have a button group (see below) that corresponds with individual slides within the orbit slider the goal is when button is clicked it changes slide in the slider.
<ul class="button-group even three-up">
<li>Slide 1 text</li>
<li>Slide 2 text</li>
<li>Slide 3 text</li>
</ul>
Any advice is greatly appreciated, thanks a ton in advance.
Related
In Laravel 8 / livewire 2.5 / alpinejs 3 application I use "te7a-houdini/laravel-trix": "^2.0.5",
which is warpper for https://github.com/basecamp/trix
and I found that in livewire blade template having :
<div class="p-2 w-full">
<div class="body-content" wire:ignore>
<trix-editor
class="trix-content"
x-ref="trix"
wire:model.debounce.1000ms="form.content"
wire:key="trix-content-unique-key"
></trix-editor>
</div>
<x-jet-input-error for="form.content" class="mt-2"/>
</div>
text entered in trix editor if not applied at form.content var when user clicks on style buttons of trix.
Can it be fixed somehow?
Can I on submit call apply method manually?
Thanks!
Have you tried using wire:model.defer instead of debounce?
When my page loads the active accordion item slides open which causes the other elements on the page to also move for a second.
I'd like the active accordion item to render "already opened", but still retain the animation for when a user clicks on another accordion item, or even the originally opened item in cases where the user selects another item and then the original.
I cant find any css being used to do this, so maybe its something in the javascript? If so, how would I go about overriding this.
Any suggestions on how to accomplish this would be greatly appreciated!
Foundation Accordion: http://foundation.zurb.com/sites/docs/accordion.html
There's no simple solution from what I know, but you can override some attributes on load so that the active item is displayed by default. You'd have to begin with an accordion none of the items are active i.e. none of the accordion items have a class of .is-active:
Html:
<ul class="accordion" data-accordion data-allow-all-closed='true'>
<li class="accordion-item" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content>
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content>
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content>
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
jQuery:
//Initialise the Foundation plugins
$(document).foundation();
function activateWithoutAnimation(itemIndex) {
//Get the accordion item according to its index (0 based)
var $accordionItem = $('.accordion-title:eq(' + itemIndex + ')');
//Set the aria attributes of the accordion item you want to appear
$accordionItem.attr('aria-expanded', 'true');
$accordionItem.attr('aria-selected', 'true');
//Set the attributes of the content.
$accordionItem.next().attr('aria-hidden', 'false');
$accordionItem.next().css('display', 'block');
//This is essential as it lets foundation know that the item is active (to re-allow toggling)
$accordionItem.trigger('click');
}
//Call the function.
activateWithoutAnimation(0);
There might be a better way to do the above, but from what I've read, there's no option that allows the animation to be disabled. I've tried overriding the defaults that Foundation provides to no avail.
Fiddle Demo
CSS Solution
If using the default helper class .is-active on initial load then some plain css can eliminate the slide open animation.
.is-active .accordion-content {
display: block;
}
https://jsfiddle.net/r6jvbohu/
CSS only (without losing the animation)
To always open the first item immediately while still keeping the animation, you can use the following code.
.accordion-item:first-of-type .accordion-content {
display: block;
}
The first item should still have the .is-active class to be consistent, but this removes the initial animation because we overwrite the display value from none to block. The JS still overwrites this state when another accordion item is clicked, resulting in the animation we want to keep.
When I add new list items to an existing dropdown button they do not show up on the front end. The dropdown just continues to show the original list items. All my caching systems are off and I cleared the cache locally, but I'm still getting the same issue. Anyone know what could be causing this?
<div class="sidebar-dropdown">
<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Select Type</button>
<br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
<li>All-Purpose (USA)</li>
<li>Mobile</li>
<li>E-Commerce</li>
<li>All-Purpose (CAN)</li>
<li>Tablet POS</li>
<li>High Risk</li>
</ul>
</div>
The Foundation-generated dropdown needs to be refreshed when new content is added to it. This can be done by adding this to your javascript, which adds a listener to the dropdown element(s):
$(document).foundation('dropdown', 'reflow');
See the docs for more info
How can I remove or turn off the timer progress bar of the orbit slider?
Looked at all the custom settings but don't see anything that would do that.
Add the following to your stylesheet:
.orbit-timer { display:none;}
It will completely hide the progress bar, it will just be on a continuous loop.
Inside the HTML file:
<ul data-orbit data-options="timer:false;">
<li>...</li>
<li>...</li>
</ul>
or inside the JS file:
$(document).foundation({
orbit: {
timer: false
}
});
If you use Foundation 5, see the docs here, and in case of Foundation 4 here. You can find the instructions about the JS-settings of Orbit at the end of the mentioned docs pages.
I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!
Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html
Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg
You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.
You can try this solution. First you need to have a layout something like this:
<div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>
And then have this script to move the first image on top:
$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});