Develop Reference

react-particles-js: Can't set a background and width

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this:
<Particles
params={{
particles: {
number: { value: 35, density: { enable: true, value_area: 800 } },
color: {
value: [
'BB4D10',
'#820E42',
'#BD740F',
'#248592',
'#5F4DAF',
'#8BA00F',
],
},
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 3 },
image: { src: 'img/github.svg', width: 100, height: 100 },
},
opacity: {
value: 1.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 9,
random: true,
anim: {
enable: false,
speed: 43.15684315684316,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 100.82952832645452,
color: '#ffffff',
opacity: 1.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'bubble' },
onclick: { enable: false, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 109.63042366068159,
size: 13,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
}}
style={styling}
/>
After that, I'm trying to add a background color to make it look correctly, but as I can see the styling which I try to pass to the particle it just doesn't work, at least the position applies.
const styling = {
backgroundColor: '#2a2e31',
position: 'absolute',
width: '10%',
};

There are several ways to control the styling:
You can provide a className prop for canvas wrapper, and width prop for the width of canvas:
<Particles
...
style={styling}
width="10%"
className="particles-wrapper"
/>
And, write the CSS:
.particles-wrapper {
background-color: #2a2e31;
height: 100%;
width: 10%; // You may need this or may not depending on your requirement
}
Or, you can add a new div which would wrap the <Particles .. /> and set styling for this div as by default canvas is transparent.
Or, you can use canvasClassName prop and set the style for this class.
Here is a snapshot after using the 1st method from above:
The reason that we need to pass width, height separately is, as seen in source code, those present in props.style is being overwritten like this:
style={{
...this.props.style,
width,
height
}}

The easiest way to set a background to the particles is using the background option.
<Particles params={{
background: {
color: "#000"
},
/* all other options you set */
}} />
This will set a background to the canvas. If you need a transparent one use #ajeet-shah answer.

Custom style to hover button in gojs

I have created a button which displays when user hovers on chart node using below code. But the button looks normal without any styles.
I would like make this button similar to bootstrap primary button. How can we add custom css to this hover button
JSFIDDLE
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
}),
$("Button",
{ alignment: go.Spot.Left, alignmentFocus: go.Spot.Right },
{ click: function(e, obj) { alert("started!"); } },
$(go.TextBlock, "Start")),
$("Button",
{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
{ click: function(e, obj) { alert("Stopped"); } },
$(go.TextBlock, "Stop"))
);

I have managed to style the button as follows
$("Button", {
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Left,
"ButtonBorder.fill": "#007bff",
"ButtonBorder.stroke": "#007bff",
"_buttonFillOver": "#007bff",
"_buttonStrokeOver": "#007bff",
cursor: "pointer",
width: 80,
padding: go.Margin.parse('30 0 0 5')
},
$(go.TextBlock, "Analyse", {
stroke: '#fff',
margin: 2,
}))

//Supplement two attributes:
$("Button", {
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.Left,
"ButtonBorder.fill": "#007bff",
"ButtonBorder.stroke": "#007bff",
"_buttonFillOver": "#007bff",
"_buttonStrokeOver": "#007bff",
"_buttonFillPressed": '#3A8EE6',
"_buttonStrokePressed": '#3A8EE6',
cursor: "pointer",
width: 80,
padding: go.Margin.parse('30 0 0 5')
}

How to assign attributes or functions to objects added after DOm ready with jquery

I am working in some personal project it is like the front-end of a chat. So i have my users and i have a JSON with the list of online and offline users. When the website firs load I also load plugins for custom scroll and make elements draggable with jquery ui. what i would like to know is if there is a way to make the new elements added to the body (chat windows) automatically be scrollable and have this custom scroll bar every time I add them. So far what I do es something like :
$(document).on("ready", functions);
function functions() {
$("#contacts-container").slimScroll({
height: '220',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false
});
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$("#online .user-name").on("click", checkUser);
};
function checkUser(){
console.log("clicked");
var user = $(this).html();
$.getJSON("js/options.json", function(json){
var itemsLength = json.chat.OnlineContacts.length;
for ( var i = 0; i < itemsLength; i++) {
var jsonUserName = json.chat.OnlineContacts[i].name;
var jsonUserStatus = json.chat.OnlineContacts[i].status;
var jsonUserAvatar = json.chat.OnlineContacts[i].picture;
if(user == jsonUserName){
displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);
}
};
});
}
function displayChatWindow(user, status, avatar){
console.log(avatar);
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
$("body").prepend(template);
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$(".friend-window").draggable({handler: ".header"});
}
On the DisplayChatWindow I append the template wich is s div representing the chat window, but i also have to re add the slimScroll function and the draggabla function, but i would like them to automatically have it once i append it, I am learning Java Script so I don't know if using an object i can achieve this or if there is another way, basically what i have done here it the most i know how to do so far, i will appreciate if you guys can help me :)

This should work I believe.
$(document).on("ready", function() {
functions();
$(document).bind('DOMNodeInserted', function() {
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
});
});

Keep QTip Tooltips from going off screen? (Bound to body?)

I have QTips:
eventRender: function (event, element, view) {
element.qtip({
content: event.title + event.hours,
position:{
target: 'mouse'
},
// show: { event: 'click' },
hide: { event: 'mousedown mouseleave' },
style: {
width: 200,
padding: 5,
color: 'black',
textAlign: 'left',
border: {
width: 1,
radius: 3
},
classes: 'custSideTip'
}
});
}
CSS:
.custSideTip
{
position:fixed !important;
right:0 !important;
max-width:200px !important;
}
But they go off the page...
I tried right and fixed position and nothing seems to work...
The right coordinate of the tip should never exceed the body.right / page.right... if that makes sense..
Thanks

Taken from here.
You can try to use viewport config:
position: { viewport: $(window) }

This worked for me and other examples didn't with some error in jQuery code. Perhaps some version discrepancy?
position: { viewport: $(document.body) }

Mootools jquery's blockUI equivalent

I am searching for jquery's plugin blockUI functionality for mootools. Do You know some plugin or simple way to block browser for a given time by mootools ?

Here's some code to get you started. http://jsfiddle.net/5BCPS/
taken it out of my plugin here: https://github.com/DimitarChristoff/Modal/blob/master/Source/js/Modal.js
(function() {
this.Modal = {};
Element.implement({
diffuse: function(position){
return this.setStyles({
position: position || 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: '100%',
width: '100%'
});
}
});
Modal.Overlay = new Class({
Implements: [Events, Options],
options: {
zIndex: 900000,
opacity: .3,
backgroundColor: '#555',
fx: {
duration: 300
}
},
initialize: function(container, options){
this.setOptions(options);
this.container = document.id(container);
var self = this;
this.element = new Element('div', {
'class': 'overlay',
styles: {
display: 'none',
opacity: 0,
zIndex: this.options.zIndex,
backgroundColor: this.options.backgroundColor
},
events: {
click: function() {
self.fireEvent("overlayClick");
}
},
tween: this.options.fx
}).diffuse('fixed').inject(this.container);
return this;
},
show: function(){
this.element.setStyle("display", "block").fade(this.options.opacity);
return this.fireEvent("show");
},
hide: function(){
this.element.fade(this.options.opacity).get("tween").chain(function() {
this.element.setStyle("display", "none");
});
return this.fireEvent("hide");
}
});
})();
var modal = new Modal.Overlay(document.body, {
hideAfter: 5,
onHide: function() {
// do something.
}
}).show();
modal.hide.delay(3000, modal);
all you need is what you display on top / counter. thats just plain js.