Can <div> Elements Interact with Canvas Elements? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 days ago.
This post was edited and submitted for review 6 days ago.
Improve this question
I'm creating a simple game where you are a square fighting a circle that shoots a laser. I make the circle and laser <div> elements and the problem is that I tried to make the <div> element and canvas square interact with each other, but nothing is happening.
div#boss {
width: 100px;
height: 100px;
border-radius: 50%;
left: 135px;
top: 5px;
background: gray;
position: absolute;
z-index: 3;
overflow: hidden;
animation: moveboss 10s linear infinite;
}
div#lazer {
width: 30px;
height: 245px;
background: #0FF;
opacity: 0.5;
top: 7px;
position: absolute;
left: 169px;
z-index: 2;
animation: movelazer 10s linear infinite;
}
var laz = document.getElementById('lazer');
if(laz.style.left == x) {
health -= 1;
}
// x is the horizontal position of the canvas square
I was expecting that when the laser is in the same position as the canvas square, the square would take damage.

Related

How to make a progress bar with image [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.

Logo Over Multiple Divs at once [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am creating a website and have designed the header
The Red and Blue is an image
The Yellow is a navigation bar
The circle is a logo
My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.
Your question is about having the same image on both the nav and that div.
Pen here!
You can do it easily with background-image and set the same image aswell.
background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
background-size: cover;
backgroud-position: center center;
This can be achieved using pure CSS. This is a possible approach to get what you want:
#one {
height: 100px;
background-color: blue;
}
#two {
position: relative;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100px;
transform: translateY(40px);
margin: 0 auto;
z-index: 1;
}
#three {
position: relative;
height: 30px;
background-color: yellow;
bottom: -20px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.

Particles.js as a background? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to use this example as a background but I can't seem to get it to work.
http://vincentgarreau.com/particles.js/#nasa
In order to get around this I'm forced to use a margin top of -1500px just to place my text over the top of it and it's causing major issues with responsiveness.
Does anyone have any idea on how I can use it strictly as a background?
The creator of the plugin has done it here on his website.
http://vincentgarreau.com/en
You can tell because when you inspect it, there is no "canvas" hovering over the top as there is on the CodePen example.
I just managed to do this with the next css code, just as the creator does in his nasa page:
body,
html {
height: 100%
}
#particles-js canvas {
display: block;
vertical-align: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
transition: opacity .8s ease, transform 1.4s ease
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}
Then I wrote <div id="particles-js"></div> just after the body opening tag. Note that you can't see the canvas class because it's being generated by the particles.js library.
Canvas creation code fragment
I've ran into this problem before and fixed it by doing this:
/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
display:block;
background: rgb(33,36,50);
position: fixed;
z-index: -1;
}
then create a div/main element for your content and add this to it:
mainElementNameHere {
position: absolute;
}
Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;
#main-section {
overflow: hidden;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0.48;
}
Try this:
#particle_background canvas{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
where your body has id="particle_background"
I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.
See this pen by Michael Van Den Berg
#particles-js {
width: 100%;
height: 100%;
background-color: #437993;
/*background-image: url('');*/
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
}
canvas {
display: block;
vertical-align: bottom;
}
<body>
<div id="particles-js"></div>
<div> #*Content you want to be in front goes here*# </div>
<body>
If your using particle js for wordpress website and following this link :
http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/
Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”
In this picture, the search bar wasn't working. So, I gave
"z-index: 5"
to it. Now it works fine. Also, the particles are responding well.
You also can implement it like this
<body id="particles-js">
<div class="something">
<h1> something here </h1>
</div>
</body>
in css
.something {
z-index:1;
}
all the element of particle-js placed at the background.
hope useful.
In id="particles-js" just add this code to your css:
position: fixed !important;
display: block;
You can add !important to override the previous styles.

How to modify tick to dash in css for bootstrap checkbox [duplicate]

This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 6 years ago.
My task is to modify "tick" inside of the checkbox to "dash". I am new to css and so far I see that I need to modify this bit to have the "dash".
I will appreciate if someone points me to documentation and suggest a solution which parameters can be used to do this.
input[type='checkbox'].input-checkbox {
&::before {
border-bottom: 5px solid $charcoal;
border-right: 5px solid $charcoal;
content: '';
height: 20px;
left: 9px;
opacity: 0;
position: absolute;
top: 2px;
transform: rotate(45deg);
transition: $transition-default;
width: 11px;
z-index: 1;
}
Thanks!
You can't change that I think. What you could do is create a custom checkbox using css or a background image. Wrap the label around the input and set background image to the label. You can then set opacity: 0 for the input.

positioning and looping an objects in random order [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have created 3 balls and I want to run a loop that animates them by doing the following:
randomly positions them
give them a starting point
give them a duration
Here is the fiddle link:
http://jsfiddle.net/X3SVp/1/
Javascript
function flipper(){
$('#ball_1').animate({
"left": '-90',
}, function(){
$('#ball_1').animate({
"left": '200',
}, flipper());
});
}
flipper();
HTML
<div id="ball_1">
</div>
<div id="ball_2">
</div>
<div id="ball_3">
</div>
CSS
#ball_1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
left: 200px;
position: absolute;
}
#ball_2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
}
#ball_3{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
}
What about something like this:
JavaScript
function flipper() {
$('.ball').each(function () {
var rndm = Math.floor(Math.random() * 201);
$(this).animate({
"left": '-' + rndm
}, function () {
$('.ball').animate({
"left": rndm
}, flipper());
});
});
}
flipper();
HTML
<div id="ball_1" class="ball"></div>
<div id="ball_2" class="ball"></div>
<div id="ball_3" class="ball"></div>
CSS
#ball_1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
left: 200px;
position: relative;
}
#ball_2 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
position: relative;
}
#ball_3 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #354390;
position: relative;
}
Fiddle here
As a point of guidance and without doing all the work for you.
Make a function which you call before flipper that sets each of the balls in a random x-y start position on the page. I recommend giving each ball the same class of ball so you can do something like this
`$.('.ball').each(function(index, ball){
//do something with ball
});`
For that you will need
http://api.jquery.com/each/
http://api.jquery.com/css/
and javascript math.random() http://www.w3schools.com/jsref/jsref_random.asp (perhaps not letting random be more than the dimensions of the visible page which you can get with $(document).height() and $(document).width())
Also not forgetting that they will perhaps need absolute CSS positioning depending on the use-case.
Then look at another function which you can loop in this case flipper which will loop through each() of the balls and animate a random direction for a random distance and perhaps back again depending on what you want.

Categories