Is it possible to run a function after a transition in the v-carousel?
I want to show some percetage numbers in my v-carousel and when the v-carousel changes I want that the numbers count from 0 to (e.g.) 97%. So that the user is focussed on exactly this number.
Is there any possible solution how I can run a function in a v-carousel-item after the transition?
Thanks and best regards,
Chris
I found it out myself. Here the answer. In the v-carousel task I v-model(ed) the item of the carousel and every time the item changes, the watcher will start an action.
...
<v-carousel v-model="currentIndex">
EXAMPLE CONTENT
</v-carousel>
...
...
currentIndex: 100
...
watch: {
currentIndex: function() {
DO SOMETHING
}
}
Related
I've started learning a-frame recently and I'm trying to create a domino effect type thing. I want all of my animations to start after I click on the first object. I've tried using delay but the delay starts immediately instead of after I start the animation. How do I make it so after someone clicks object 1, object 2's animation would start shortly after?
Let's try the delay approach - with a custom component for some managment :)
Lets say you have a setup like this (html pseudocode):
<a-box class='domino' foo animation='startEvents: go; ...
<a-box class='domino' animation='startEvents: go; delay: 200 ...
<a-box class='domino' animation='startEvents: go; delay: 400 ...
All items have some attributes / components:
The class attribute to make them easy to both grab and distinguish from any other entities.
The animation component which will make them animate - whats important: startEvents - here we'll throw the event which will be emitted simultaneously on all boxes, delay - so every next box will wait before moving.
This foo component - we'll make it by ourselves. It will detect a mouseclick, and emit the go event on all boxes.
So the concept is as follows:
We click one box with the foo component
the foo component detects the click and emits go on all .domino elements
all .domino elements should start their animations one after another - but each one 200ms later than the previous one.
Now lets make the custom component. Keep in mind it has to be defined before the <a-scene>:
<script src='component.js'></script>
<script>
// component
</script>
<a-scene>
</a-scene>
We will implement all logic within the init function - which is called upon initialisation.
// component definition
AFRAME.registerComponent('foo', {
// this is called upon initialisation
init: function() {
// grab all the domino pieces
var pieces = document.getElementsByClassName('domino')
// if this one gets pressed...
this.el.addEventListener('click', e => {
// ...emit the event on all of them
for (let piece of pieces) {
piece.emit('go')
}
})
}
})
and actually - thats it. To see it in action - here are two examples - in both clicking the blue box, should start the animation.
Simple delayed animation cascade
Domino-like animation
The is pretty straightforward. I'm trying to find a way to get the active section Index number. I want the number to change when you scroll to a different section.
What I want to achieve:
Demo
Make use of fullPage.js callbacks or state classes.
Notice you have the slideIndex on the callbacks:
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
//do whatever here
$(body).append(slideIndex);
},
Because the afterSlideLoad callback won't get fired on section change, you'll need to also make use of the afterLoad callback and get the slide number by using the state classes added by fullPage.js:
afterLoad: function(anchorLink, index){
var slideNumber = $('.fp-section.active').find('.fp-slide.active').index() + 1
//do whatever here
$(body).append(slideNumber);
}
I am using smoothdivscroll plugins. I want to start scrolling at different position f text when page is reloaded or refreshed. How can I do this?
Thanks.
You would have to write some code yourself for this special function. SmoothDivScroll has an option, startAtElementId, that you can use to tell the scroller to start at the position of a certain element (id). If you are loading the content of the scroller dynamically on the server side (using PHP, ASP.NET or something similar) you could make the server side code pick one of the content elements and add a certain id to it. Then you would set the option like this:
<script type="text/javascript">
$(document).ready(function() {
$("#makeMeScrollable").smoothDivScroll({
startAtElementId: "yourID"
});
});
</script>
You could also use the method jumpToElement. First you would initialize the plugin. Then directly after you would make a call to jumpToElement and tell it to jump to an element with a random number between 1 and the total number of elements you have loaded. This is not tested in any way, but I think it would look something like this:
<script type="text/javascript">
$(document).ready(function() {
// Initialize the plugin
$("#makeMeScrollable").smoothDivScroll();
// Randomize an element
var numberOfElements = $("#scrollableArea *").length;
var randomNumber = Math.floor(Math.random() * numberOfElements + 1 );
$("#makeMeScrollable").smoothDivScroll("jumpToElement", "number", randomNumber);
});
</script>
As I said, the above code has not been tested, but something along those lines should work.
Good luck!
Seems like an easy solution but I can't wrap my head around it. I have four divs like the one below
<div ontouchstart="touchStart(event)" ontouchmove="touchMove (event)" ontouchend="touchEnd (event)" class="c1" id="c1">copy1</div>
The code for touchStart is very simple at the moment:
function touchStart (e) {
e.preventDefault();
e.target.style.color="#ff0000";
return false;
}
The issue is how can the touch functions target a different div (not the target that was touched) and change it's opacity from 0 to 1 in touchStart, then from 1 to 0 in touchEnd.
Thanks
I'm no expert but here's my two cents and hopefully will help you find a solution
With jquery, clicking one element can trigger a different one and change the target's css opacity attribute like:
$("#div_thats_touched").click(function(){
$("#target_div").css("opacity","1");
})
in javascript it would be something like
this.onClick(function(){
target=document.getElementById('target');
target.style.opacity("1");
});
or if you want to trigger the event of another element:
$("#div_thats_touched").click(function(){
$("#target_div").trigger("click");
})
And instead of having touchstart and touchend, you could use jquery's toggle method to combine them into one method (maybe)
http://api.jquery.com/toggle/
http://api.jquery.com/trigger/
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.