I have instantiated a YUI and I need to scroll to the bottom right away (and also after adding some elements dinamically later). Any ideas how can I do that?
Here is the code so far:
yInstance = YUI();
yInstance.use('scrollview-base', function(Y) {
Y.scrollview = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: main_scrollable_div_height,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "y"
},
axis: "y"
});
Y.scrollview.render();
});
I can see in the official docs that there is a "scrollY" variable, but have no idea how to modify it (is it just read-only?)
Got it!
The solution is to add this when initializing "scrollY: max_height":
Y.scrollview = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: main_scrollable_div_height,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "y"
},
axis: "y",
scrollY: max_height
});
Related
I'd like to set an image of a map - or, better yet, a generated map - on the x-z plane of a high-charts graph. Is there a way to do this with background image? I understand you can set the color of the back, bottom, and side frame, is there any way to set images for those frames?
You can use SVG <pattern> element with <image> added inside of it, and set the chart.options3d.frame.bottom.color equal to this pattern, just like that:
First you need to create new pattern basing on current dimensions of mentioned frame. The best place to implement it, should be the chart.events.load function:
chart: {
events: {
load() {
var chart = this
var frameBottomDim = chart.frameShapes.bottom.element.getBBox()
var defs = document.querySelectorAll('defs')[0]
var pattern = chart.renderer.createElement('pattern')
var img = chart.renderer.createElement('image')
pattern.attr({
"patternUnits": "userSpaceOnUse",
"x": frameBottomDim.x,
"y": frameBottomDim.y,
"width": frameBottomDim.width,
"height": frameBottomDim.height,
"id": "frameBg",
})
img.attr({
"href": "https://static.makeuseof.com/wp-content/uploads/2010/03/clouds-1-670x335.jpg",
"width": frameBottomDim.width,
"height": frameBottomDim.height,
preserveAspectRatio: 'none'
})
img.add(pattern)
pattern.add(this.renderer.defs)
}
}
}
Then set the frame color property to url(#[pattern_name]):
options3d: {
enabled: true,
alpha: 10,
beta: 20,
depth: 400,
frame: {
bottom: {
color: 'url(#frameBg)'
}
}
}
Live example: https://jsfiddle.net/h8tv4xpg/
Web API Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern
I'm using Scrollreveal.js to reveal some divs on my website.
Now i want Scrollreveal to call a function after it has revealed a specific div.
As the documentation says:
"
// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}"
My code:
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
afterReveal: function (domEl) {domEl.demo();}});
Can anyone tell me what the correct syntax is to call my variable after the div has been revealed?
I have tried for a long time to do it myself, with no positive results, so i think it's ok to ask someone for help now :)
Thanks!
Figured it out, it wasn't difficult, as i suspected, just me being new to this :)
so to shorten this, this is how i used CountUp.js with Scrollreveal.js
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
beforeReveal: function(){var options = {
useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}},
});
I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?
I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}
I'm new to charting and js and don't have much experience with js and jqplot so maybe someone can help me out?
I try to replot a jqplot meter gauge when the browser window is resized. I could find some examples during my research that seem to work fine but as soon as I try it myself, I can't make it work.
Here is my code:
A fiddle can be found here
$(document).ready(function(){
s1 = [72];
var plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
$(window).resize(function() {
plot0.replot( { resetAxes: true } );
});
});
Maybe someone can see what I'm doing wrong? Any help is highly appreciated! I'm totally frustrated :(
UPDATE
So I read again through all the documents and found this little sentence on the jqplot homepage:
"A meterGauge plot does not support events."
So I guess it just won't work whatever I do?
Any other idea how to make the jqplot meter gauge responsive?
Wow, we finally found a solution.
For anybody else interested in the topic, here is how we did it in the end.
<script>
var plot0;
$(window).resize(function(){
$('#chart0').html('');
plotGauge();
});
$(document).ready(function(){
plotGauge();
});
s1 = [22]
function plotGauge(){
plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
}
</script>
<div id="chart0"></div>
The above solution had problem with animation of graph(update data and replot), because when you have updated the data before resizing, again it shows from starting.So, you have to update the data before replot the graph.
But i found one more solution for this graph(i don't know what exact problem with graph), but somehow i had managed the graph replot by adding some dummy data to replot function. Please follow the below snippet.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy:'dummy' });
});
The above snippet is working fine, and is best instead of creating new object.
Hope this is helpful.
I also faced this problem with Gauge replot.
What I did is passed a dummy parameter to replot and it worked for me.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy: 'dummy' } );
});
I didn't dig into the jqPlot code, will open an issue in free time.
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...