I'm using dojo toolkit. (version 1.6)
I'm unable to stop the fading effect at certain opacity (say 0.5)
Here is the code I'm using
var fadeArgs = {node: "disabled_div", duration: 3000};
dojo.style("disabled_div", "opacity", "0");
dojo.fadeIn(fadeArgs).play();
But the above code is fading the element's opacity from 0 to 1.
My requirement is to stop fading effect at 0.5 opacity.
Please help me out
Thanks in advance!
SuryaPavan
you may try like this:
var w = dojo.animateProperty({
node:"disabled_div",
duration: 3000,
properties: {
opacity: 0
},
onAnimate:function(a){
if(a.opacity <= .5)
w.stop();
}
})
OR
dojo.style("disabled_div", "opacity", "1");
var fadeArgs = {node: "disabled_div", duration: 3000,onAnimate:function(o){
if(o.opacity <= .5){
anim.stop()
}
}};
anim = dojo.fadeOut(fadeArgs);
anim.play();
You could use fadeTo from the DojoX extensions
Related
I am using cytoscape.js and the edgehandles extension (https://github.com/cytoscape/cytoscape.js-edgehandles).
Currently I am automatically resizing the line width of my edge using the event 'zoom':
cy.on('zoom', function (evt) {
let zoomFactor = cy.zoom()
let newFontSize = defaut_font_size.general * 1 / zoomFactor;
cy.filter("node[type='main-WP'][parent !^= 'compound']").style({
"font-size": newFontSize,
});
cy.edges().style({
'width': (0.3 * newFontSize),
});
});
How can I achieve something similar on the classes (.eh-preview, .eh-ghost-edge)?
You can give a function for a style. The drawback is the functions are not JSON serializable. So If you need to import/export a graph with cy.json() you should also apply the function styles.
cy.style().selector('edge.eh-preview')
.style({
'width': () => {
let zoomFactor = cy.zoom()
let newFontSize = defaut_font_size.general * 1 / zoomFactor;
return (0.3 * newFontSize);
},
}).update();
I have this code which animate an object of opacity 1 to 0 .
But I want to know how I can do to make this action is repeated infinitely, each 1 second ?
Any ideas ?
var tl = new TimelineMax();
tl.add(timeLine_parpados.to($parpados,0.1,{opacity:1})); // parpados aparecen
tl.add(timeLine_parpados.to($parpados,0.1,{opacity:0})); // parpados desaparecen
tl.play();
You could do something like this:
var el = document.getElementById("element");
var tl = new TimelineMax();
tl.to(el, 1, {alpha:0, repeatDelay:1, repeat:-1, yoyo:true})
tl.play();
JSFiddle demo
1 second between the element displaying and fading out. repeat:-1 will repeat the animation indefinitely.
yoyo:true, this works with the repeat property, and makes the animation reverse, so it's smooth when the div next fades in
It also works without a timeline
gsap.to(group.rotation, {
y: 2 * Math.PI, x: 2 * Math.PI,
repeat: -1, duration: 5 , delay: 0
})
I want to show a progress bar when till the layers load on open layer 3.9.0 any hints or direction would help.
It should be something like:
var
tile_loading = 0,
tile_loaded = 0,
tiles_loaded_all = false
;
yourTileLayer.getSource().on('tileloadstart', function(evt){
++tile_loading;
});
yourTileLayer.getSource().on('tileloadend', function(evt){
++tile_loaded;
if(tile_loaded === tile_loading){
tile_loading = 0;
tile_loaded = 0;
tiles_loaded_all = true;
}
});
The official example - http://openlayers.org/en/v3.9.0/examples/tile-load-events.html
I am trying to use Datatables with fixedheader (v3) as well as enable horizontal scrolling. Attached is the fiddle http://jsfiddle.net/xF8hZ/344/
$(document).ready(function() {
var table = $('#example').DataTable({
searching: false,
paging: false,
ordering: false,
info: false,
fixedHeader: true,
scrollX: true
});
} );
.
When scrolling the fixedheader width doesn't align with the rest of the table. Can you help me solve this please?
Thanks
Pure css solution using css sticky (not work in ie 11):
remove the fixHeader plugin
add this css
.dataTables_scrollHead {
position: sticky !important;
top: 119px;
z-index: 99;
background-color: white;
box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
}
I have read for 2 days about this, so joining all of them together, here's my contribution.
I got it figured out, hopefully this is useful for someone or help in the development as well.
My datatables is in a DIV and horizontal Scrolling enable due to huge table. When fixed header was set it was set as FIXED, and a new table is inserted at the BODY rather than inside the div.
I made it appended to the DIV instead of BODY so that the overflow rule might be inherited.
File:
dataTables.fixedHeader.min.js (search for "appendTo")
From:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo("body")
To:
e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo(".dataTables_scroll")
Now that it's appended to the the datatables-created-div, same level as dataTables_scrollHead, dataTables_scrollBody rather than stranded alone at body, whatever overflow still showing/sticking out.
File:
fixedHeader.bootstrap.min.css
From:
table.dataTable.fixedHeader-floating{position:fixed !important}
To
table.dataTable.fixedHeader-floating{position:absolute !important}
or File:
fixedHeader.dataTables.min.css
From:
table.fixedHeader-floating{position:fixed !important;background-color:white;}
To
table.fixedHeader-floating{position:absolute !important;background-color:white;}
Careful of CACHE of the CSS and JS files.
Now that the floating sticky row has appeared but out of place and overflow in effect.
Have this JS running, detecting when fixedHeader-floating appears, keep adjusting them to follow the horizontal scroll and stick to the top.
setInterval(function(){
if($('.fixedHeader-floating').is(':visible')){
var myoffset = Math.round($(window).scrollTop() - $('#Detail2Container').position().top + $('.topbar').height() - 145);
var positionleft = $('.dataTables_scrollHeadInner').position();
$('.fixedHeader-floating').css({ 'top': myoffset, 'left': positionleft.left + 10 });
}
}, 50); //every 50ms
Detail2Container is the DIV that wrap the Datatables.
I couldn't use dataTables_wrapper as reference as there are a few of them in the same page. In my page, I only one table that needs fixedHeader, if I need 2, it will be tough. But I will deal with it when the needs arise.
You could adjust the calculation according to your own design.
2 days for me to figure this out. So I feel like sharing it too.
I found a solution on my project by doing this:
$('#example').scroll(function() {
if ( $(".fixedHeader-floating").is(":visible") ) {
$(".fixedHeader-floating").scrollLeft( $(this).scrollLeft() );
}
});
DataTables creates a new table as the fixedHeader when you scroll down, what I'm doing here is to detect when the user scrolls horizontally on the $('#example') table and then I use scrollLeft() on the fixedHeader to match the scroll position.
I also added this to my .css so the user won't be able to scroll on the fixedHeader table:
.fixedHeader-floating {
overflow: hidden;
}
Following is working to me
$('.dataTables_scrollBody').on('scroll', function () {
$('.dataTables_scrollHead', $(this).parent()).scrollLeft($(this).scrollLeft());
});
This fixed the problem.
let tableParams = {
autoWidth: false,
// etc...
scrollX: true,
fixedHeader: true,
initComplete: function(settings, json) {
// To fix the issue of when scrolling on the X axis, the header needs also to scroll as well.
this.find('.dataTables_scrollBody').on('scroll', function() {
this.find('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft());
});
},
};
Also to hide the vertical scroll bar.
me.containerElement.find('.dataTables_scrollBody').css({'overflow-y': 'hidden'});
where containerElement is the parent element of the datatable element.
Based on this, I was able to make it working (issue: when FixedHeader is floating, sorting would not work ==> see update 1 below to fix it)
Explanations:
FixedHeader (.dataTables_scrollHeadInner) is a different table outside of datatable (.dataTables_scrollBody)
when scrolling vertically, it will check scrolltop and set FixedHeader top accordingly.
when scrolling horizontally, it will scroll FixedHeader with body ($('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft()))
JS
// sorry - had to use global variable
// global variable for scroll-body y position
var yPositionOfScrollBody;
function adjustDatatableInnerBodyPadding(){
let $dtScrollHeadInner = $('.dataTables_scrollHeadInner');
let outerHeightOfInnerHeader = $dtScrollHeadInner.outerHeight(true);
//console.log('outerHeightOfInnerHeader => ' + outerHeightOfInnerHeader);
$('.dataTables_scrollBody').css('padding-top', outerHeightOfInnerHeader);
}
function setFixedHeaderTop(header_pos){
//console.log("header_pos : " + header_pos);
$('.dataTables_scrollHeadInner').css({"top": header_pos});
}
function fixDatatableHeaderTopPosition(){
//console.log("fixHeaderTop...");
yPositionOfScrollBody = window.scrollY + document.querySelector('.dataTables_scrollBody').getBoundingClientRect().top;
//console.log("yPositionOfScrollBody: " + yPositionOfScrollBody);
setFixedHeaderTop(yPositionOfScrollBody);
}
function onDataTableInitComplete(settings, json) {
// for vertical scolling
yPositionOfScrollBody = window.scrollY + document.querySelector('.dataTables_scrollBody').getBoundingClientRect().top;
// datatable padding adjustment
adjustDatatableInnerBodyPadding();
// data table fixed header F5 (refresh/reload) fix
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
//console.log("scrollTop => " + scrollTop);
if(scrollTop > 1){
let header_pos;
if (scrollTop < yPositionOfScrollBody){
header_pos = yPositionOfScrollBody - scrollTop;
} else {
header_pos = 0;
}
setFixedHeaderTop(header_pos);
}
let $dtScrollHeadInner = $('.dataTables_scrollHeadInner');
// horizontal scrolling
$('.dataTables_scrollBody').on('scroll', function () {
let $dtScrollBody = $(this);
// synchronize
let amountOfLeftScroll = $dtScrollBody.scrollLeft();
$dtScrollHeadInner.scrollLeft(amountOfLeftScroll);
let scrollDiff = $dtScrollHeadInner.scrollLeft() - amountOfLeftScroll;
//console.log("scrollDiff: " + scrollDiff);
if(scrollDiff < 0){
$dtScrollHeadInner.css('left', scrollDiff);
}else{
//console.log("scroll back to left side");
$dtScrollHeadInner.css('left', '');
}
});
//console.log("adjusment mergin: " + yPositionScrollHeadInner);
$(document).on('scroll', function () {
let scroll_pos = $(this).scrollTop();
if(scroll_pos <= 0){
fixDatatableHeaderTopPosition();
}else{
let margin = yPositionOfScrollBody; // Adjust it to your needs
let cur_pos = $('.dataTables_scrollHeadInner').position();
let header_pos = cur_pos.top;
if (scroll_pos < margin){
header_pos = margin - scroll_pos;
} else {
header_pos = 0;
}
setFixedHeaderTop(header_pos);
}
});
}
$(function(){
$("#tableId").DataTable({
scrollX: true,
fixedHeader: true,
initComplete: onDataTableInitComplete,
// ... : ...
});
});
CSS
/* data table - scroll and fixed header */
table.dataTable.fixedHeader-floating {
display: none !important; /*Hide the fixedHeader since we dont need it*/
}
.dataTables_scrollHeadInner{
margin-left: 0px;
width: 100% !important;
position: fixed;
display: block;
overflow: hidden;
/*margin-right: 30px;*/
background: white;
z-index: 1;
}
.dataTables_scrollBody{
padding-top: 2.5em;
}
div.dataTables_scrollHead table.dataTable {
padding-right: 0;
}
Update 1 - sort issue fix
use fixedHeader: false
$(function(){
$("#tableId").DataTable({
scrollX: true,
fixedHeader: false,
initComplete: onDataTableInitComplete,
// ... : ...
});
});
You can change 'left' but saving initial value first:
var initLeft = 0;
$(".dataTables_scrollBody").scroll(function () {
if ($(".fixedHeader-floating").is(":visible")) {
if (initLeft == 0)
initLeft = $(".fixedHeader-floating").position().left;
$(".fixedHeader-floating").css("left", $(this).scrollLeft() * (-1) + initLeft);
}
});
$(document).ready(function() {
var table = $('#example').DataTable({
searching: true,
paging: true,
ordering: true,
info: false,
scrollY: 400,
dom: 'Blfrtip',
});
} );
Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.