I'm using freewall.js for displaying a grid on my frontpage. But it doesn't work correct. It only loads after resize. And also after the resize it calculates false heights and puts some objects on other places where they shouldn't be.
Here's my JS:
$(function(){
var wall = new Freewall(".freewall");
wall.reset({
selector: '.freewall-item',
animate: false,
cellW: 150,
cellH: 'auto',
gutterY: 15,
gutterX: 15,
onResize: function() {
wall.fitWidth();
}
});
wall.container.find('.event-intro-image').load(function() {
wall.fitWidth();
});
$(window).trigger('resize');
});
As you can see i also tried to use $(window).trigger('resize');, without sucess.
Related
Has anybody used the Easy Split Layout Plugin For jQuery as shown here?
The ondrag, ondragstart, and ondragend events only fire once when the plugin is initialized. After that, nothing.
Here is my code:
function setSplitters() {
$('#widget').width(1500).height(768).split({ //left container
orientation: 'vertical',
limit: 150,
position: '20%',
onDrag: console.log("dragging..."),
onDragStart: console.log("dragging has started"),
onDragEnd: console.log("dragging has ended")
});
When I refresh the browser (chrome), I see the three console.log outputs but when I drag the splitter bar, nothing.
Here are the dependencies:
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.splitter.js"></script>
Any ideas?
That works in fiddle:
I used:
https://cdn.jsdelivr.net/npm/jquery.splitter#0.28.5/js/jquery.splitter.min.js
https://cdn.jsdelivr.net/npm/jquery.splitter#0.28.5/css/jquery.splitter.css
and
JQuery 3.4.1
HTML
<div id="widget">
<div id="leftPane">Foo</div>
<div id="rightPane">Bar</div>
</div>
Jquery
function setSplitters() {
var splitter = $('#widget').width(1500).height(768).split({
orientation: 'vertical',
limit: 150,
position: '20%',
onDrag: function(event) {
console.log(splitter.position());
},
onDragStart: console.log("dragging has started"),
onDragEnd: console.log("dragging has ended")
});
}
setSplitters();
Gives the position in console.log if you drag the divider
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...
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
});
In ExtJS 4, by default, the dragdrop proxy is displayed to the right bottom position of the mouse position during drag operation. Let say I click into the center of my target and move my mouse by 1 px. I would like the proxy to itself over the original element, shifted by 1 px.
Basically, I need proxy to behave like the example at http://jqueryui.com/demos/draggable/#sortable. In this example the proxy is over the original element and then moves around when the mouse is dragged.
How can I achieve this?
Here is sample code illustrating the problem when dragging a custom widget.
Ext.onReady(function(){
var hewgt = Ext.define('Demo.widget.Complex', {
extend: 'Ext.panel.Panel',
alias: 'widget.complex',
frameHeader: false,
draggable: false,
layout: 'table',
initComponent: function() {
this.callParent(arguments);
var txtFld;
this.superclass.add.call(this, txtFld = new Ext.form.field.Text({fieldLabel:'test'}));
this.superclass.add.call(this, new Ext.button.Button({text:'Save'}));
}
});
Ext.define('Demo.dd.DragSource', {
extend: 'Ext.dd.DragSource',
b4MouseDown: function(e) {
this.diffX = e.getX() - this.el.getX();
this.diffY = e.getY() - this.el.getY();
this.superclass.setDelta.call(this, 0, 0);
},
getTargetCoord: function(iPageX, iPageY) {
return {x: iPageX - this.diffX, y: iPageY - this.diffY};
}
});
var panel = Ext.create('Ext.panel.Panel', {
layout: 'absolute',
title: 'Navigation'
});
var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
var img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:20 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:150 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
});
I am new to Ext JS.
Please let me know how can the dragged proxy be positioned correctly?
Thanks