Hope I'm not bothering the plugin creator with a stupid question.
I created a CodePen to test scrollify for my website but occasionally (1 out of 4 times) the scroll snaps between two sections and then, if I scroll again, it keeps the error going. I don't know why, but refreshing the page makes it work.
The option i'm using are:
$.scrollify({
section : "section.cat-section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1400,
offset : 0,
scrollbars: true,
setHeights: false,
overflowScroll: true,
touchScroll:true,
});
Link to the CodePen
Can anybody help me on this?
Related
Currently I am calling an API to populate data in the bar chart made using echarts, I used the following code.
var mychart = echarts.init(document.getElementById("test"));
mychart.showLoading();
Once the data comes then I hide the loading, but in echarts I am getting only the circular shape loading option, can I use vertical bars for showing loading animation in echarts.
Echarts has no another loading spinner but you can make own or take any spinner lib (for example) and place above. Of course you can use the custom series or graphic and draw something but is not quite right spent time because it's loader and its role just to show that chart is not dead and will continue action soon to prevent user leaving.
Try the DOC
https://echarts.apache.org/en/api.html#echartsInstance.showLoading
default: {
text: 'loading',color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0,
// Font size. Available since `v4.8.0`.
fontSize: 12,
// Show an animated "spinner" or not. Available since v4.8.0`.
showSpinner: true,
// Radius of the "spinner". Available since `v4.8.0`.
spinnerRadius: 10,
// Line width of the "spinner". Available since `v4.8.0`.
lineWidth: 5
}
I build WordPress sites using the Divi theme from Elegant Themes.
This theme provides a lot of visual modules to build your pages, and some of these modules have built-in animations.
For instance, the circle counter module displays a number with an animated circle around it, a percentage of the circle being colored based on the number displayed within the circle.
The animation plays when you scroll the page and when the circle counter module becomes visible in the browser.
I would like to know if I can use the browser development tools, and how, to find out how the animation is played, so I can trigger it whenever I want from my own scripts.
I also have access to the source code of the theme, but I don't know how to start to find what I am looking for.
And Divi support says "I am afraid that this feature is not supported. It would require customization which goes beyond the level of support that we can provide here.", so this is why I am here.
The circle version below will update during page load but the gauge doesn't adjust after that - only the number value changes. Passing a 'newval' to a progress bar will step up or down as necessary.
$(".et_pb_circle_counter_0").animate({
'data-width': newval
},{
duration: 1000,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_circle_counter_0 .et_pb_circle_counter_inner").attr("data-number-value", newval );
$(".et_pb_circle_counter_0 span.percent-value").html( Math.ceil(now) );
}
});
// Progress Bars
$(".et_pb_counter_0 span.et_pb_counter_amount").animate({
width: newval+"%"
},{
duration: 1500,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_counter_0 span.et_pb_counter_amount").attr("data-width", Math.ceil(now) + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").attr("data-width", Math.ceil(now) + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").html(Math.ceil(now) + "%");
}
});
I am testing SVG performance using RaphaelJS library.
My code works, can be found here: JSFiddle
When you type in textbox "1" and press "add", a rectangle will be generated on screen and 4 animations will loop on it- moving right, down, left, up (also rotating, scaling and changing colour).
Performance seems to be ok. But add another element on stage and the performance gets knocked down to minimum in 3-4 seconds. Checked in Chrome timeline, the thing that is getting stacked up is "Animation Frame Fired - > Install Timer".
Perhaps I am doing loop incorrectly? Altough next animation starts when the previous ends, through callback function. Or is it Raphael itself? Should I try doing this with SVG and SMIL? (Raphael uses VML)
Any ideas?
------------------------------------UPDATE--------------------------------------
With RaphaelJS I did bad animation loop hooks, see answer below.
But another problem that does occur - add 1 element 10 times and you can see how animations get distorted, not finishing their full cycle, or add 10 elements 1 time and after few seconds you can see delayed animations on some of the elements.
I made SMIL version JSFiddle (no Raphael here), animations do not lag, delay, but they get syncronized. Can anyone explain why? And how to make those animations NOT sync, but unique?
I think the problem is you are recursively calling animations on a set.
So at the end of each animation, each element in the set calls an animation for the set again, so it spirals and grinds to a halt. You can get around this, by using 'this' instead of the set 'rectangles'.
//define 4 animations
var move_up = Raphael.animation({fill: "green", transform: "t0,0r360s1,1"}, 400, function(){ this.attr({"transform" : "t0,0"}); this.animate(move_right); });
var move_left = Raphael.animation({fill: "yellow", transform: "t0,100r270s0.5,0.5"}, 400, function(){ this.animate(move_up); });
var move_down = Raphael.animation({fill: "red", transform: "t100,100r180s1,1"}, 400, function(){ this.animate(move_left); });
var move_right = Raphael.animation({fill: "blue", transform: "t100,0r90s1.5,1.5"}, 400, function(){this.animate(move_down); });
jsfiddle
There seems to be a bug in jqgrid, where one can not resize the last column.
This seems to be a quite old issue raised in 2009. I had a look and the latest jqGrid sample seems to have this issue...
What I found however was that last column can be dragged to resize the grid itself.
See here Go to section what is new in 3.6.
Any pointers if this is already fixed.
Seems I found a solution.
Resizing of the last column can be done only within the area of the header wrapper (div.ui-jqgrid-hbox). In the outer space resizing process losing focus.
Because of existing some padding-right area with default 20 pixels, increasing the size can be done in this small part only.
In addition, we need to temporarily cancel table wrapper influence, because he also cause to stop resizing process.
Here is my solution. I assume, that your table wrapper id is gbox_DataTable_u:
1:
CSS: define new wide padding-right area:
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}
2:
Append 2 events to your grid:
resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}
resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}
Example of working table: http://www.design.atplogic.co.il/aman/philips/users.htm#
I found that the best way is to add an empty unresizable column in the end of the grid.
I'm just doing it manually, by extending the colModel right before the execution of jqgrid constructor. Only problem being - I wasn't able to make it not draggable so far.
Here's an example:
colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});
Hope this helps.
It is resizing fine for me as well, although you have to resize from the right on the "RTL Support" example, which seems to make sense.
Also be aware that if you are using Chrome, there is a jqGrid bug that causes horizontal scroll bars to appear - see jqgrid-does-not-render-correctly-in-chrome-chrome-frame. This issue has since been resolved, but the demo page has not been updated yet. And it certainly gives the appearance of the last column's resizing not working because you have to scroll all the way over to the right before you can resize the last column.
I have tried to resize the last column with resizeStop, i do some trick like the other guy said. hope it help.
resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel =
$("#jsonmap").jqGrid('getGridParam','colModel'); var oW =
$oldWidths[index]; var cW = colModel[index+1].width+
downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[index] =
width;
$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW);
$('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW);
var w = amGrid.jqGrid('getGridParam', 'width');
$('.ui-jqgrid-htable').css("width",w);
$('.ui-jqgrid-btable').css("width",w); }
i still looking for a common way, can do on more tables in one page and don't affect to each other.
After 2 days of struggling...I finally found a way to work around.
It seems that jqGrid calculates the resizing object in the dragMove event, where it uses passed event object to get the position of mouse and calculates the new width of resizing column. However when dragging exceeds the grid's boundry, the dragMove event stop shooting...
So my work around is simply modifying jqGrid to calculates resizing object again in the dragEnd event. Here's the modified code
first find the dragEnd event.
...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
this.dragMove(e); // call dragMove event to calculate resize object
...
then find the mouseup event where dragEvent is triggerd...
...
$(document).mouseup(function (e) { // get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
return true;
});
...
Then columns should be able to resize to wherever mouse points.
Hope this would help.
I was wondering if there was some way to implement infinite scroll paging with jqgrid and its tabletogrid extension? I know you can implement regular paging with jqgrid, but would I need a different tool to do infinite scroll?
It's a while ago, but you can find a sample under http://trirand.com/blog/jqgrid/jqgrid.html under the section "new in version 3.4"
and a newer one under 3.7 "virtual scrolling"
Use jqgrid option scroll: true for infinite scroll pages.
.jqGrid({
datatype : "local",
data : JSONData,
height : ($(window).height() - 250),
width : ($(window).width() - 32),
scroll : true,
rowNum:20, // the number of row's to be displayed the first time
...
..
});
check http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
look scroll -- option.
.jqGrid({
scroll: 1,
});
by setting option to scroll