Fiddle here.
Description of problem:
I'm attempting to make this image scale into view (centered), and then give the appearance that it's "bouncing" away from the screen briefly after reaching its maximum size of 100%. Unfortunately, it is moving down and to the right with each new effect chain. Why?
Note that the effect I'm attempting to achieve is completely different from the bounce effect.
Try 'scale': 'box' option for scale effect.
scale (default: "both")
Type: String
Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.
As yours box div doesn't actually have any content, probably, that's the reason of unwanted shifts...
Yours fiddle with modification.
Another fiddle variant.
Upd.
As you can see in second fiddle, you can use separate function for each animation phase (effect). So, just in outermost phase pick current box size, and in each next phase calc scale percentage with honored current/initial box size, like following:
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
box.stop().effect(scale_effect(box, 80, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
box.stop().effect(scale_effect(box, 90, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
}));
}));
}));
}));
}));
function scale_effect(box, percent, duration, complete) {
box = $(box);
var size = box.data('size');
var absolutePercent = percent * size.w / box.width();
console.log(absolutePercent);
return {
'effect': "scale",
'percent': absolutePercent,
'scale': 'box',
'duration': duration,
'queue': false,
'complete': complete
};
}
See the fiddle for preview.
And here's some nifty variant with following syntax:
$('.box').bouncedScale([
{'percent': 100, 'duration': 250},
{'percent': 80, 'duration': 100},
{'percent': 100, 'duration': 100},
{'percent': 90, 'duration': 100},
{'percent': 100, 'duration': 100},
]);
Related
I have a scenario like I have a Bootstrap slider, in that I want track points on the track of the slider and the tool tip must be fixed (i.e. it must be exist even after click).
Here is my Plunker link:
http://embed.plnkr.co/D3GJQn/preview
I need to get points on the track as shown in below image:
Add property tooltip:"always" to show the tooltip always
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
tooltip:"always"
});
});
You can see the complete set of options here - https://github.com/seiyria/bootstrap-slider#options
To get the current value of slide, see below.
$("#slider-input").on('slide', function (ev) {
console.log($("#slider-input").val());
});
You can use ticks: [0, 500, 1000, 1500], property to show intermedaite points. for more http://seiyria.com/bootstrap-slider/
example - https://plnkr.co/edit/W8c2UuPMiEeMwQ8g7kCV?p=preview
This is how I got the current value:
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
formatter: function(value) {
return 'Current value: ' + value;
}
});
});
You can also show the value by doing:
$("#mySlider").on("slide", function(slideEvt) {
$("#sliderValue").text(slideEvt.value);
});
with HTML:
<span>Current Value: <span id="sliderValue">1</span></span>
Here is a link to show some examples I found after doing this:
http://seiyria.com/bootstrap-slider/
Hope this helps!
Take a look at Example 13. Here is the example code, take note of the ticks property:
var slider = new Slider("#ex13", {
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
First :
I have a problem with a dynamic modal-dialog with a diagram in it.
The code is pretty easy:
https://jsfiddle.net/c2abnhja/1/
As you can see, no diagram is in the created div container. But if you resize your window, the diagram is drawn correctly with the correct size of the modal-dialog. [Also it doesn't matter if I trigger the resize event in manual : https://jsfiddle.net/ywaoec3d/1/ ]
And in second:
If I set a size to the modal dialog of bootstrap, like here:
https://jsfiddle.net/aqs5fhha/1/
the diagram never get the correct height of the modal-content... but the documentation of c3.js says :
size.height
The desired height of the chart element.
If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.
Any idea why the diagram is not drawn correctly?
Thanks in advance
I was able to fix your problem using this :
$('#myModal').on('shown.bs.modal', function() {
var chart = c3.generate({
bindto: '#diagramAppend',
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
]
}
});
});
Basically what is happening is that you try to generate your graph on a div with 0 width. Waiting the event shown.bs.modal allow you to have a width at this point.
Updated JSFiddle
Using OpenLayers 2.13. I have a map with 2 vector layers, and a JQuery slider which allows adjustment of the layer opacity.
If I set up a selector to include both layers (for highlighting and popups), my JQuery slider to adjust the opacity doesn't work (layername.setOpacity(x) fails to set the opacity of the layer). If only one layer participates in the selector then setOpacity works fine. Both layers use the same styleMap.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
} });
This selector allows the opacity to be set for both layers:
var selector = new OpenLayers.Control.SelectFeature(layer1,{
hover:false
});
But this selector does not (setOpacity() fails no matter what):
var selector = new OpenLayers.Control.SelectFeature([layer1, layer2],{
hover:false
});
The Selector is added and activated.
map.addControl(selector);
selector.handlers.feature.stopDown = false; //allow dragging on map
selector.activate();
Is there some way to have multiple layers participate in the selector, while allowing the opacity to be changed?
It might be bad form to answer your own question, but I found a workaround and am posting it here for anyone else with this problem.
Deactivate the selector before changing the opacity.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
selector.deactivate();
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
selector.activate();
}
I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});
As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}
Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...
I have a simple network diagram. It contains of circle elements and lines connecting them. Now sometimes there could be quite a lot of those circles and they go 'behind' the screen (see the image attached).
The image doesnt cut off the edges, its the edge of my screen :)
Its a force diagram (code used can be found in this fiddle ). Setting the width = 400;
height = 500; or changing these two variables doesn't really help.
What variable am I missing here. Id like them not to go 'behind' the screen or is it just how it should behave ?
Thanks,
Neil
DEMO
map.set('C1', {
fixed: true,
x: 100,
y: height / 2
});
problem is that your 'C1' is fixed at 100 in x axis change it to 200 or 250 according to your need
map.set('C1', {
fixed: true,
x: 250,
y: height / 2
});
OR
you can change fixed: false, to achieve the same DEMO2
map.set('C1', {
fixed: false,
x: 100,
y: height / 2
});
OR
set C1 width half DEMO3
map.set('C1', {
fixed: true,
x: width/2,
y: height / 2
});