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.
Related
I added fullpage.js to my project and my css transitions stopped working.
I analyzed the code using code inspector to see, if the classes have been removed or if the transitions have been overwritten but I can't find something. It looks like I don't have naming issues with my classes, as well.
My transitions are simple. I have a class like
.element {
opacity: 0;
transition: opacity .5s ease-in;
}
.element-animated {
opacity: 1;
}
Then a little bit of jQuery to active the animation on load:
$(document).ready(function(){
$('.element').addClass('element-animated');
});
When adding $('#fullpage').fullpage(); to my code, my transitions stop working. When I remove it, they work again.
My architecture looks like:
<div id="fullpage">
<div class="section">
<div class="element"></div>
</div>
<div class="section2">
<div class="element2"></div>
</div>
</div>
If you read the fullpage.js faqs you'll it is recommended to fire those actions on the afterRender callback:
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js
new fullpage('#fullpage', {
afterRender: function(){
$('.element').addClass('element-animated');
}
});
I started with learning EmberJS and maybe the answer is trivial, but after some researching, I still can't find a solution.
In my model template, I have some buttons(each for the different object) which after click should expand sidebar with its details.
What do I want to reach is something like this:
Could someone provide me with some simple twiddle?
There are two ways to achieve this effect.
Using controller's variable
{{#foreach model as |obj|}}
<button onclick={{action (mut activeModel) obj}}>{{obj.name}}</button>
{{/foreach}}
<!--Somewhere later in template-->
{{#if activeModel}}
<!--Code of overlay and sidebar, close button sets activeModel to undefined-->
{{/if}}
Using child (nested) route
Parent template:
{{#foreach model as |obj|}}
{{#link-to 'parentRoute.childRoute' obj tagName="button"}}
{{obj.name}}
{{/link-to}}
{{/foreach}}
<!--Somewhere later in template-->
{{outlet}}
Child template should contain code of overlay and sidebar, close button redirects back to parent route
well, one of the options is that you can create components and pass the modified model(modify the model using onclick function) as the data to that component.
for example,
let us just say that this is your main template
<button onclick="changeSideBar()">click</button>
<div style="display:none; //render it in the left-half(using bootstrap models)">
{{sidebar-component model=model.modified}}
</div>
in the javascript code (component.js),
function changeSideBar()
{
var modified= ;//set as per your convienince by iterating actual models or by any means
this.set('model.modified',modified);
//make display of sidebar div "block"
}
sidebar-component is your component. make the component as per your wish.
hope it helps.
I can't help much without your templates or codes. It would be great if you provide some of your works.
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
What is the best way to implement a loading screen in Ember 2.5? What I want to achieve is: show splash screen -> load data in background -> when DOM is ready, hide splash screen.
I tried several options, but I cannot achieve to hide the splash screen when the document is ready. I am loading a large table, so it will take some time to finish the DOM, so model-ready is not the right hook.
I did this by adding custom HTML (simple loading div) to the app/index.html:
<body>
<div class="loading-overlay" id="initialLoading"></div>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/event.js"></script>
{{content-for "body-footer"}}
</body>
Then I added the following to my app/application/route.js:
actions: {
loading(transition/* , originRoute*/) {
let controller = this.get('controller');
if(controller) {
controller.set('currentlyLoading', true);
}
transition.promise.finally(function() {
$("#initialLoading").remove();
if(controller) {
controller.set('currentlyLoading', false);
}
});
}
}
In my app/application/template.hbs I also had to add the loading div:
{{#if currentlyLoading}}
<div class="loading-overlay"></div>
{{/if}}
So what does happen?
index.html is loaded and no javascript is parsed yet: your loading screen is visible.
index.html is loaded and your javascript has been parsed. ember.js calls the loading action and sets currentlyLoading to true: both loading screens are shown.
the transition is complete, the first loading and second loading screen get removed
for every transition that is now happening, the loading screen is shown. To remove this behaviour, remove the second loading screen logic.
I hope it helps.
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.