I want to display particles only inside or as part of 1 div. I did come across many different solutions but I can't seem to get any to work on my React app.
Here is a sample code that I created - https://codesandbox.io/s/particles-inside-1-div-9vhqgi?file=/src/Stars.js
Could someone please help me alter the styles to show the particles as part of the background in the middle div
I used the workaround which was to give a ref to a div parent from the canvas container, then refer to the canvas element in the DOM and set it's style to absolute
Working solution is in the codesandbox in the question.
// outer div ref -> element parent div -> canvas style
myRef.current.children[0].children[0].style.setProperty(
"position",
"absolute",
"important"
);
// stars-config.json
In your particle Json, under the color part, add the "fullScreen" and the "style" (The "zIndex":"-1" is optional)
"color": {
"value": "#fcf6f4"
},
"fullScreen": {
"enable": "false",
"zIndex": "-1"
},
"style": {
"position": "absolute",
"height" : "100%",
"top": "0",
"left":"0"
},
Related
I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.
I am attempting to create an animation using jQuery but I am having an issue, the animation is broken down into cloning a div and placing in the DOM, changing the divs ID, animating the original div and then deleting the div this all works fine but I then assign the cloned element the original divs ID(since this is used for repeating the animation) and the cloned element moves to where the deleted element was.
Is this how IDs are supposed to work.
I have tried using .remove() on the original element and I tried assigning the original element to a variable and the using .remove() on that and I have tried changing its id then deleting that id none of these have worked.
//animation is here
$("#SecondPage").css("transform-origin", "center left");
$("#Corner").css({
"display" : "none",
"visibility" : "hidden"
})
//making the page to go underneath
$("#SecondPage").css("z-index","3");
let NewPage = $("#SecondPage").clone(true, true);
$(NewPage).attr("id", "NewSecondPage");
$(NewPage).css({
"left" : 0,
"top" : 0,
"position":"absolute",
"z-index": "1"
})
$('#SecondPageContainer').append(NewPage);
//after delete secondpage and change new cloned page to second page
//very important this makes sure that the rotation is centered around the left side of the page rather than its center making the page rotation effect
$({
deg: 0
}).animate({
deg: 180
}, {
duration: 2000,
step: function (now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$('#SecondPage').css({
transform: 'rotateY(' + now + 'deg)'
});
},
done : function(){
$("#Corner").css({
"display" : "block",
"visibility" : "visible"
})
}
});
setTimeout(function () {
$("#FirstPage").attr("src", FirstPage);
$("#SecondPage").remove();
$("#NewSecondPage").attr("id", "SecondPage");
$("#SecondPage").attr("src", SecondPage);
//this will be called when the image is rotated
}, 2000);
I started using Prismic as a headless CMS for a previous project, and it worked fine, but on a second project, I ran into a problem that surprised me, and that is Prismic's inability to do a simple blockquote. Considering that this HTML element has been around in HTML for decades, it blows my mind. According to their docs and forum responses, they are considering adding it to their editor, but you have to jump through hoops by using labels and applying them to your text, and this just wraps the text in <span> tag that has a class of your label name. In your front end, you then have to target those spans with CSS.
The problem with this in their Rich Text editor, if you have a multi-paragraph block that you want to quote inside of a larger body of text, the editor treats them as multiple paragraphs, so in your output, instead of one big block - like you would get with a standard <blockquote> tag - you get multiple paragraphs wrapped in individual <span> tags, which is more difficult to make look like one block with just CSS.
<p><span class="my-label">Paragraph 1 text</span></p>
<p><span class="my-label">Paragraph 2 text</span></p>
<p><span class="my-label">Paragraph 3 text</span></p>
<p><span class="my-label">Paragraph 4 text</span></p>
I'm doing this inside a Nuxt app using v-html, and since highlighted text could be anywhere inside a larger body of text, I really don't want to have to do code gymnastics inside an html serializer or the api data to identify the labeled items. I really don't want to have to switch to another CMS or local markdown just to get around this.
When I've tried targeting the tags, it gets challenging trying to do it so that everything looks like one large block.
Does any Prismic user know a way I can actually get a <blockquote> tag in the content in the Prismic editor itself? There's not an option to edit the raw html in their editor, and even with slices, I haven't seen a way to insert a tag in the content.
Is there a simple way with CSS to target those multiple paragraphs so that they look like one block? I'm not a CSS guru, and it looks like it requires some fine tuning with padding and line heights.
Regarding a solution on Prismic's end, using slices the idea would be to use the slice zone to have a simple "RichText" slice for basic text and another "BlockQuote" slice for doing fancy quotes. Slice definition could look like this:
{
"type": "Slices",
"fieldset": "Slice zone",
"config": {
"labels": {
"richtext": [],
"blockquote": []
},
"choices": {
"richtext": {
"type": "Slice",
"fieldset": "Rich Text",
"description": "Rich text slice",
"icon": "reorder",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
},
"blockquote": {
"type": "Slice",
"fieldset": "Block Quote",
"description": "Block Quote slice",
"icon": "format_quote",
"display": "list",
"non-repeat": {
"text": {
"type": "StructuredText",
"config": {
"multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
"allowTargetBlank": true,
"label": "Text"
}
}
},
"repeat": {}
}
}
}
}
Then it would be just about looping through the array, something in that fashion:
<template>
<prismic-rich-text v-for="slice in document.data.body" :field="slice.primary.text" :class="slice.slice_type" />
</template>
Is there a way to make the labels in a legend with horizontal direction wrap?
I made a simple example wtih the cars dataset where i transformed the categtories to generate longer strings in the Vega Editor:
Suppose I have more categories but also want to put the legend at the top/bottom to provide more horizontal space for the chart area.
Use the columns property of legend:
{
"legend": {
"orient": "top",
"direction": "horizontal",
"columns": 2
}
I've created a custom legend in a separate div.
The categories and their mapped colors in the Vega visualization can be accessed via the View API:
const colors = vegaView.scale('color').range();
const categories = vegaView.scale('color').domain()
I'm trying to achieve the following effect using CSS or CSS3 only:
The arrow in the diagram represents a picture. As the browser resizes, I want the picture to move to the left without touching the text and the picture does not resizes. So basically in this case, the arrow gets shorter as the browser resizes, so the remainder of the image is still there just hidden so that it can come back when I maximize the window again. Is this possible with CSS or CSS3 only?
[-------------------]
[ ]
[ text -----------> ] <--- Web Page
[ ]
[ ]
[ ]
[ ]
[-------------------]
[---------------]
[ ]
[ text -------> ] <--- Web Page
[ ]
[ ]
[ ]
[ ]
[---------------]
This is the best I could do:
http://jsfiddle.net/rmadhuram/czpnyn2x/
I could get the picture move left by positioning the background image, but the side effect is that the height of the right column had to be fixed.
.image {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/The_2010_Perseids_over_the_VLT.jpg/1920px-The_2010_Perseids_over_the_VLT.jpg');
background-position: right top;
height: 1280px;
}
I believe position: fixed might be what you are looking for ( jsfiddle).