I'm trying to translate or create similar code using RaphaelJS. If you look at the code, you will see that I'm trying to create an animated path using css and js.
http://plnkr.co/edit/FC2qiZumzgjKSJOs6Zm5?p=info
var spinner = function() {
this.transition = function() {
var path = document.querySelector('#spinner-wrapper .spinner #main-path');
path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = '205.951';
path.style.strokeDashoffset = 430;
path.getBoundingClientRect();
path.style.strokeDashoffset = '0';
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};
this.startInterval = function(immediate,time) {
if(immediate){
setTimeout(transition,0);
}
this.interval = setInterval(function() {
transition();
}, time);
return this.interval;
};
this.start = function() {
clearInterval(this.interval);
startInterval(true,2700);
};
this.stop = function() {
clearInterval(this.interval);
startInterval(false,0);
};
return this;
};
I'm using jQuery and RaphaelJS. It still doesn't work in IE browsers for some reasons. Maybe you can figure this out.
http://jsfiddle.net/shojib/ceqs86go/
var paper = new Raphael('canvas');
var pathString = "M16.47,19.938c7-0.5,4.5-10.5-2-7c-7,3.5,1,13,7.5,10 c13.5-7-9.5-27-16-6.5c-4.5,16,22,17,26,2c4.5-15.5-15-22.5-25-11.5c-5.5,6.5-9,16-0.5,21.5c4,2.5,15,6,19,2.5 c-3-3.5-7.5-8-9.5-10.5";
var pattern2 = paper.path(pathString);
pattern2.attr({fill: 'none',stroke: '#ffffff',"stroke-miterlimit": '10','stroke-opacity': '1'});
var pattern1 = paper.path(pathString);
pattern1.attr({fill: 'none',stroke: '#CD5300',"stroke-miterlimit": '10','stroke-opacity': '1'});
$(pattern1.node).css({
'stroke-dasharray': '210.991px',
'stroke-dashoffset': '430px'
});
$(pattern1.node).animate({
'stroke-dashoffset': '0'
},{
duration: 3000,
easing: 'linear'
});
Related
I'm trying to add event listener for snackbar on all buttons with class add-culture-button, but it only works for the first element. For other elements, snackbar doesn't show at all (and there are no errors in console).
var snackbarContainer = document.querySelector("#notification");
var showSnackbarButton = document.querySelector(".add-culture-button");
var plantingLabel = document.querySelector("#planting-label");
var handler = function(event) {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount - 1);
}
showSnackbarButton.addEventListener("click", function() {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount + 1);
var data = {
message: "Kultura je dodata u listu za setvu.",
timeout: 2000,
actionHandler: handler,
actionText: 'Opozovi'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
Is there a way to make it work for all elements without repetition of the code?
Turns out I only had to use querySelectorAll instead of querySelector...
var snackbarContainer = document.querySelector("#notification");
var showSnackbarButton = document.querySelectorAll(".add-culture-button");
var plantingLabel = document.querySelector("#planting-label");
var handler = function(event) {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount - 1);
}
for (var i = 0; i < showSnackbarButton.length; i++) {
showSnackbarButton[i].addEventListener("click", function() {
var culturesCount = parseInt(plantingLabel.attributes["data-badge"].value);
plantingLabel.setAttribute("data-badge", culturesCount + 1);
var data = {
message: "Kultura je dodata u listu za setvu.",
timeout: 2000,
actionHandler: handler,
actionText: 'Opozovi'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}
Can anyone tell me how to show all popup of markers in openlayers 3 map. I searched many sites but couldn't get any answer please anyone know about this then help me
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 50]),
zoom: 2
})
});
var vectorSource = new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
name: 'London'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
name: 'NY'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([30.69, 55.21])),
name: 'Paris'
})
]
});
var markers = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
})
});
map.addLayer(markers);
function showpopup(){
// For showing popups on Map
var arrayData = [1];
showInfoOnMap(map,arrayData,1);
function showInfoOnMap(map, arrayData, flag) {
var flag = 'show';
var extent = map.getView().calculateExtent(map.getSize());
var id = 0;
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'center'
});
map.addOverlay(popup);
if (arrayData != null && arrayData.length > 0) {
arrayData.forEach(function(vectorSource) {
/* logMessage('vectorSource >> ' + vectorSource); */
if (vectorSource != null && markers.getSource().getFeatures() != null && markers.getSource().getFeatures().length > 0) {
markers.getSource().forEachFeatureInExtent(extent, function(feature) {
/* logMessage('vectorSource feature >> ' + feature); */
console.log("vectorSource feature >> " + markers.getSource().getFeatures());
if (flag == 'show') {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
/* var prop;
var vyprop = ""; */
$(element).popover({
'position': 'center',
'placement': 'top',
'template':'<div class="popover"><div class="popover-content"></div></div>',
'html': true,
'content': function() {
var string = [];
var st = feature.U.name;
if (st != null && st.length > 0) {
var arrayLength = 1;
string = "<table>";
string += '<tr><td>' + st + "</table>";
}
return string;
}
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
}
});
}
};
}
I used this code in my file but it show only one popup on all markers please someone tell me how to show all markers popup simultaneously.
I'm not sure exactly what you're trying to show in your popups, but I would probably try this approach. This extends the ol.Overlay class, allowing you to get the map object and attach a listener which you can use to grab the feature that was clicked. Is this what you're trying to accomplish?
function PopupOverlay() {
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element
});
}
ol.inherits(PopupOverlay, ol.Overlay);
PopupOverlay.prototype.setMap = function (map) {
var self = this;
map.on('singleclick', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
ol.Overlay.prototype.setPosition.call(self, feature.getGeometry().getCoordinates());
var el = self.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return feature.get('name');
};
$(el).popover('show');
});
});
ol.Overlay.prototype.setMap.call(this, map);
};
Check out this example
So after your comment, I see what you're trying to do now. I would say that you want to take the same basic approach, make a class that overrides ol.Overlay, but this time just loop through all the features, creating an overlay for each feature.
This Updated Example
function PopoverOverlay(feature, map) {
this.feature = feature;
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element,
map: map
});
};
ol.inherits(PopoverOverlay, ol.Overlay);
PopoverOverlay.prototype.togglePopover = function () {
ol.Overlay.prototype.setPosition.call(this, this.feature.getGeometry().getCoordinates());
var self = this;
var el = this.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return self.feature.get('name');
};
$(el).popover('toggle');
};
// create overlays for each feature
var overlays = (function createOverlays () {
var popupOverlays = [];
vectorSource.getFeatures().forEach(function (feature) {
var overlay = new PopoverOverlay(feature, map);
popupOverlays.push(overlay);
map.addOverlay(overlay);
});
return popupOverlays;
})();
// on click, toggle the popovers
map.on('singleclick', function () {
for(var i in overlays) {
overlays[i].togglePopover();
}
});
Now when you click anywhere on the map, it should call the togglePopover method and toggle the popover on the individual element.
I am attempting to increase the scale or the size of the surface so that it takes up the window when I click on it. Assume that a surface is created and is called surface3.
I have a boolean marked as flag that changes its value everytime the surface3 is clicked. true will cause a 'growSurface' event to be emitted that the eventHandler will respond to.
I do not know how to smoothly animate using a Famous.Transitionable to tween the increase in scale or size. I am able to successfully place a surface3.setSize([undefined, undefined]); to get it to jump to take up the window. How do I get it to animate in size or scale using a Transitionable?
Template.projects.rendered = function() {
Famous.Engine = famous.core.Engine;
Famous.Surface = famous.core.Surface;
Famous.Transform = famous.core.Transform;
Famous.Transitionable = famous.transitions.Transitionable;
Famous.Modifier = famous.core.Modifier;
Famous.StateModifier = famous.modifiers.StateModifier;
Famous.Easing = famous.transitions.Easing;
Famous.EventHandler = famous.core.EventHandler;
var mainContext = Famous.Engine.createContext();
var eventHandler = new Famous.EventHandler();
var surface3 = new Famous.Surface({
size: [300, $(window).height()],
content: "surface 3",
properties: {
color: '#FFF',
backgroundColor: 'green'
}
});
var flag = false;
var scaleModifier = new Famous.Modifier({
size: [300, $(window).height()]
});
scaleModifier.sizeFrom(function(){
return transitionable.get();
});
eventHandler.on('growSurface', function(){
// can do surface3.setSize( $(window).width() );
var transitionable = new Famous.Transitionable( 300 );
return transitionable.set( $(window).width(), {duration: 1500} );
});
eventHandler.on('shrinkSurface', function(){
console.log('shrink surface init');
// code to shrink size back to [300, $(window).height()]
// should reverse 'growSurface' event
// can do surface3.setSize([300, undefined]);
});
// Handles Clicks
surface3.on('click', function(event) {
if (flag === false) {
eventHandler.emit('growSurface');
flag = !flag
} else {
eventHandler.emit('shrinkSurface');
flag = !flag
}
});
mainContext.add(scaleModifier).add(alignSurface3Modifier).add(surface3);
I got it both animating on the growSurface and shrinkSurface events:
var eventHandler = new Famous.EventHandler();
var flag = false;
var transitionable = new Famous.Transitionable([300, undefined]);
var scaleModifier = new Famous.Modifier({
size: [300, $(window).height()]
});
scaleModifier.sizeFrom(function(){
return transitionable.get();
});
eventHandler.on('growSurface', function(){
surface3.setSize([undefined, $(window).height()]);
transitionable.set([$(window).width(), $(window).height()], { duration: 1500 });
});
eventHandler.on('shrinkSurface', function(){
transitionable.set([300, $(window).height()], { duration: 1500 });
});
// Handles Clicks
surface3.on('click', function(event) {
if (flag === false) {
eventHandler.emit('growSurface');
flag = !flag
} else {
eventHandler.emit('shrinkSurface');
flag = !flag
}
});
I wonder if this is the correct solution to update the state with two dictionares
var PopulationCityView = React.createClass({
getInitialState: function() {
return {
prod_diff : {'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0}
};
},
componentWillMount: function() {
this.prod_diff = {'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0};
},
handleM: function(res,child_new_res_diff){
var new_prod_diff = this.prod_diff;
new_prod_diff[res] = child_new_res_diff;
this.setState({prod_diff:new_prod_diff});
},
render: function(){
........
if anyone knows of a better and faster solution would ask for a hint...
Much safer and more efficient way is to keep your state as simple object with primitive values:
var PopulationCityView = React.createClass({
getInitialState: function() {
return {
wheat: 0,
meat: 0,
fish: 0,
};
},
handleM: function(res,child_new_res_diff){
var new_state = {};
new_state[res] = child_new_res_diff;
this.setState(new_state);
},
render: function() { /* your render code */ }
});
If you really have to store your values in nested object you have to remember to clone nested object before modifying it:
var PopulationCityView = React.createClass({
getInitialState: function() {
return {
prod_diff: { wheat: 0, meat: 0, fish: 0 }
};
},
handleM: function(res,child_new_res_diff){
var new_prod_diff = _.clone(this.state.prod_diff);
new_prod_diff[res] = child_new_res_diff;
this.setState({ prod_diff: new_prod_diff });
},
render: function() { /* your render code */ }
});
I've made your initial state a little smaller to simplify code examples.
Also consider using React Immutability Helpers which makes operating on nested objects inside state safer.
I forgot to add that handleM function arguments are sent by the child.
In my solution it does not work smoothly (slider that adjusts the prod_diff jams), the same effect is when I apply the solution #daniula
Now I have decided to make use of CortexJS and everything runs smoothly
I would ask to correct me if I used this library incorrectly:
PARENT
var PopulationCityView = React.createClass({
getInitialState: function() {
return {
prod_diff_C : new Cortex({'wheat':0,'meat':0,'fish':0,'bread':0,'fruit':0,'wine':0,'beer':0,'wool':0,'cloth':0,'leather':0,'paper':0,'ceramics':0,'furniture':0,'glass':0}),
};
},
componentWillUnmount: function() {
delete this.state.prod_diff_C;
},
componentDidMount: function(){
var that = this;
this.state.prod_diff_C.on("update",function (updatedRes) {that.setState({prod_diff_C: updatedRes});});
},
// handleM: function(res,child_new_res_diff){
// var new_prod_diff = this.prod_diff;
// new_prod_diff[res] = -child_new_res_diff;
// this.setState(new_prod_diff);
// },
render: function(){
var foods = {}, goods = {};
for(var g = 0; g< this.goods.length; g++){
R = this.goods[g];
goods[R] = <div style={{display:"inline-block"}}>
<CHILD_1 res_par={this.props.data.res_uses[R]} res={R} prod_diff_cortex={this.state.prod_diff_C}/>
<SLIDER prod_diff_cortex={this.state.prod_diff_C} res={R} res_have={this.props.data.res_uses[R][0]} res_need={this.props.data.res_uses[R][1]} />
</div>
}
}
return ( .... )
}
})
CHILD_1
var CHILD_1 = React.createClass({
render: function(){
var val = this.props.res_par[3] + this.props.prod_diff_cortex[this.props.res].getValue()
return (
<div className='population-production-upkeep'>
{val}
</div>
)
}
})
SLIDER
var SLIDER= React.createClass({
......
handleMouseDown: function(event){
var start_val = this.props.res_have + this.props.prod_diff_cortex[this.props.res].getValue()
this.val_start = start_val;
this.res_diff_start = this.props.prod_diff_cortex[this.props.res].getValue()
this.touched = 1;
this.pos_start_x = event.screenX;
this.prev_pos_x = this.width_step * start_val;
event.stopPropagation();
event.preventDefault();
},
handleMouseMove: function(event){
if(this.touched) {
var x_diff = event.screenX - this.pos_start_x ;
var x = this.prev_pos_x + x_diff;
if (x < 0) x = 0;
if (x > this.state.max_pos_x) x = this.state.max_pos_x;
var stor = Math.round(x* 100 / this.width_step ) / 100
var new_res_diff = this.res_diff_start + stor - this.val_start;
this.props.prod_diff_cortex[this.props.res].set(new_res_diff)
}
},
......
render: function() {
var val = Math.round((this.props.res_have+this.props.prod_diff_cortex[this.props.res].getValue())*100)/100;
return (
..../* slider render */
);
}
});
Trying to fix a widget on my website which displays some RSS feed. Got the scrolling but can't figure out how to restart the scrolling.
I have tried The 'appendTo' but without any succes. I can't find a solution, please help me out.
http://server.info-spot.net/
Regards!
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 3000,
showItems: 3,
animation: '',
mousePause: true,
isPaused: false
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height, paused){
if(paused) return;
var obj = obj2.children('ul');
first = obj.children('li:first').clone(true);
obj.animate({top: '-=120px'}, options.speed, function() {
$(this).children('li:first').remove();
first.appendTo(obj);
});
if(options.animation == 'fade') {
obj.children('li:first').fadeOut(options.speed);
obj.children('li:last').hide().fadeIn(options.speed);
}
first.appendTo(obj);
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
var itempause = options.isPaused;
//obj.css({overflow: 'hidden', position: 'relative'})
obj.css({position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function() {
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
var interval = setInterval(function(){ moveUp(obj, maxHeight, itempause); }, options.pause);
if (options.mousePause)
{
obj.bind("mouseenter",function() {
itempause = true;
}).bind("mouseleave",function() {
itempause = false;
});
}
});
};
})(jQuery);