JSFIDDLE DEMO
I couldn't figure out how to go about doing these following:
Show the default item on load. Currently, it loads a blank page and shows the data only when I drag the slider.
Show a fading effect when the items are loaded.
Here's the HTML
<div class="sli3"></div>
<div class="div-0">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
</div>
CSS:
.div-0 {
position: relative;
}
.div-1 {
position:absolute;
top:150px;
left:150px;
}
.div-2 {
position:absolute;
top:100px;
left:60px;
}
.div-3 {
position:absolute;
top:210px;
left:260px;
}
JS:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
value: 10,
min: 0,
max: 100,
slide: function(event, ui) {
if (ui.value<=20) {
$(".div-1").text("whatever");
$(".div-2").html("hello <strong>world</strong>");
$(".div-3").text("");
}
else if (ui.value>=21 && ui.value<50) {
$(".div-1").text("yay");
$(".div-2").text("whoo");
$(".div-3").text("");
}
else if (ui.value>=50 && ui.value<70) {
$(".div-1").text("star");
$(".div-2").text("wars");
$(".div-3").text("");
}
else if (ui.value>=70 && ui.value<90) {
$(".div-1").text("night");
$(".div-2").text("crawler");
$(".div-3").text("rocks");
}
else {
$(".div-1").text("example text 1");
$(".div-2").text("example text 2");
$(".div-3").text("");
}
}
});
});
How do I go about doing this?
A bit of change to your code:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
min: 0,
max: 100,
slide: onSlide,
change: onSlide
}).slider('value', 10);
});
(I took the slide function out so I could call it both on change and slide).
Check the update to your demo:
https://jsfiddle.net/m7uhdsy9/1/
Related
I have the following function which increases the size of circles but instead of starting over after they were scaled, I want to scale back to original size. Backwards. So when it reached scale 2, it should go back incrementally to 1.
How can I accomplish this?
function animateCircles() {
var circles = document.getElementsByClassName('circle')
setTimeout(function () {
for(i=0;i<circles.length;i++) {
circles[i].animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'scale(2)' }
], {
// timing options
duration: 2000,
iterations: Infinity
});
}
},0)
setTimeout(function () {
for(i=0;i<circles.length;i++) {
circles[i].animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'scale(1.5)' }
], {
// timing options
duration: 2000,
iterations: Infinity
});
}
},2000)
}
Just add another keyframe within your first animation (and adjust time accordingly):
function animateCircles() {
var circles = document.getElementsByClassName('circle')
setTimeout(function() {
for (i = 0; i < circles.length; i++) {
circles[i].animate([
// keyframes
{
transform: 'translateY(0px)'
}, {
transform: 'scale(2)'
}, {
transform: 'scale(1)'
}
], {
// timing options
duration: 2000,
iterations: Infinity
});
}
}, 0)
}
animateCircles();
.circle {
background-color: #F00;
border-radius: 50%;
width: 75px;
height: 75px;
}
<div class="circle"></div>
I have a column that slides to the left on a click function. I then add the class of w to the container to change its width once the column slides out. What I am trying to do is add the class of e when it slides back in and then remove the class of w by wrapping it in the toggle functions, but the container still contains the class of w and won't add the class of e. Thoughts?
FIDDLE:
http://jsfiddle.net/QDUQk/1926/
.container {
border: 1px solid #000;
width: 200px;
}
.container.e {
width: 80%;
}
.container.w {
width: 100%;
}
<div class="togl">Menu</div>
<div class="col">
SLIDE ME SLIDE ME PLX PLX
</div>
<div class="container">
</div>
$('.togl').click(function() {
if ($('.container').is(':visible')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
The visibility of .container does not change from true. Check for "w" className at .is()
$('.togl').click(function() {
if (!$('.container').is('.w')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
jsfiddle http://jsfiddle.net/QDUQk/1927/
Your container visibility does not change on click. Try following,
$('.togl').click(function() {
if ($('.container').hasClass('e')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}});
I have a question regarding the browser compatability of Web Animations. I am aware that it is not working on some browsers.
However, is it possible to still use the transformation that is normally applied by the animation. My animation runs (through neon-animation from Polymer), but the result doesn't stay. It reverts back when the animation is finished.
(Small note, the $$("paper-item") is from polymer and is equivalent to querySelector("paper-item"))
I fixed this on Chrome with the following code:
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = "0px auto";
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
As said, this is working on Chrome. Firefox and Safari are having trouble with it though. How can this be fixed?
My complete code is as following:
<!-- Custom element -->
<dom-module id="agenda-item">
<template>
<style>
paper-item {
background-color: #ffffff;
width: 72vw;
margin: 0 auto;
height: 72px;
}
</style>
<paper-item>
- content -
</paper-item>
</template>
<script>
Polymer({
is: 'agenda-item',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
opened: {
type: Boolean,
value: false,
reflectToAttribute: true
},
animationConfig: {
value: function() {
return {
'expand': [{
name: 'expand-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}],
'collapse': [{
name: 'collapse-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}]
};
}
}
},
listeners: {
'tap': 'onClick',
'neon-animation-finish': '_onNeonAnimationFinish'
},
onClick: function(event) {
if (this.opened) {
this.collapse();
} else {
this.expand();
}
},
expand: function() {
this.cancelAnimation();
this.playAnimation('expand');
this.opened = true;
},
collapse: function() {
this.cancelAnimation();
this.opened = false;
this.playAnimation('collapse');
},
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = '0px auto';
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
});
</script>
</dom-module>
<!-- Custom animation -->
<!-- Both custom animations have the same idea and similar code -->
<script>
Polymer({
is: 'expand-list-item-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
this._effect = new KeyframeEffect(node, [{
offset: 0.0,
'margin': '0 auto',
'width': '72vw',
'height': '72px'
}, {
offset: 0.6,
'margin': '16px auto',
'width': '84vw',
'height': '72px'
}, {
offset: 1.0,
'margin': '16px auto',
'width': '84vw',
'height': '144px'
}], this.timingFromConfig(config));
return this._effect;
}
});
</script>
EDIT:
I found the problem, but not how to solve it. It would be great to get some help.
The neon-animation-finish is not called at the moment the animation finishes. It is called just before that (not on chrome btw). Then, when the function is called to adjust the styling, it is overwritten by the animation.
You need to define a listener to the animation-finish and define what you want to see when the animation has finished like this:
listeners: {
// this event is fired when the animation finishes
'neon-animation-finish': '_onNeonAnimationFinish'
},
Have a look at the Polymer documentation at: https://github.com/PolymerElements/neon-animation/blob/master/README.md
I'm new to NoUISlider and I've managed get the slider to work. However, the slider value is not visible or appears to work.
I'm new to jQuery as well, so I'm not sure why the slider value code isn't working.
The website I'm editing is right here: Experian Map
Here's my code:
<script>
$(function(){
$('#slider-range').noUiSlider({
range: {
'min': 0,
'10%': 10,
'20%': 20,
'30%': 30,
'50%': 50,
'60%': 60,
'70%': 70,
'90%': 90,
'max': 100
},
snap: true,
start: [20]
});
});
</script>
<script>
$(function(){
$('#slider-range').Link('lower').to($('#slider-range-value'));
</script>
.example-val{
color: #FFF;
display: block;
margin: 15px 0px;
}
.example-val:before {
content: "Value: ";
font: 700 12px Arial;
}
#slider-range-value{
color: #FFF;
}
<div id="slider-range"></div><span id="slider-range-value" class="example-val"></span>
The logic is OK, but you've got several syntax errors. Opening your browser console (press F12) would help.
Fixed code:
$(function(){
$('#slider-range').noUiSlider({
range: {
...
},
snap: true,
start: [20]
});
$('#slider-range').Link('lower').to($('#slider-range-value'));
}); // << was missing
The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>
The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});
Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);