How to add CSS class to the cloned div - javascript

I want to create something like "You're an idiot" hack that spawn some random stuff and the stuff is moving randomly. The issue is, the cloned div cannot be add with CSS modifier class.
What I currently doing is, I create a button that will spawn the same button infinitely. I want to make the cloned button to move randomly after they have been spawned. The problem is when I inspect, the spawned button cannot be added with CSS modifiers class. So the spawned buttons only spawned at random position but is not moving. Can tell me why I can't add CSS modifiers class on cloned div.
Here's my stackblitz: https://stackblitz.com/edit/angular-ivy-n1wuwc?file=src%2Fapp%2Fapp.component.ts

Related

want to implement a rotatation of images list interface using javascript

Actually i have a list 6 div elements and each div contains some images and two buttons.
my question is how can we select the list of images for each instance of div using javascript.
All the div's are having the same class name and all the images are having the same class name.
I tried querySelector but it selects only one instance and the same event doesn't run for the other div's
querySelectorAll selects all the div's so unable to execute the event for a particular image inside the div
I want to get this result, when the right button inside the div is clicked i want to display the next image and for the left it is opposite, and if the image is the last one it should display the first image. Like a rotation of images.
Sounds like a slider, no need to recreate the wheel. Use an array to index where you're at.
https://www.w3schools.com/w3css/w3css_slideshow.asp

Bring an element in front of others that have the same z-index

The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).
Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)
I assume you are doing something like
container.appendChild(newDiv)
Now, when you click and drag an element, you can move it to the front.
var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)
This inserts your desired div as the first child of its parent, which will move to the top.
Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.
recentlyClicked.parentElement.appendChild(recentlyClicked)
On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.
Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.

What's faster, to hide/show an HTML element, or to delete/insert it?

I am developing a navbar where the selected button is marked by a triangle. Do I put a triangle in every button of my navbar and keep all but one triangle invisible (or visible but same background as the button)? Or do I delete the triangle and reinsert it in the new button?
I understand the performance impact would probably be negligible, but I am learning my ropes, so mostly asking out of curiosity (and wanting to learn the best practices)
I would do this sort of thing with CSS. Create an "active" class, then add/remove the class with javascript. This is cleaner and will let you have more control over the styling of your chosen indicator (in this case, a triangle).
.normal{
//normal css for all tabs
}
.normal.active{
//triangle CSS for active one
}
now on selection by using JS add active class on particular tab and remove from others.
There should be a space for your triangle on every menu item. It should just be set to visible on hover. Setting something from invisable to visable takes almost no time. Its better practice than deleting and loading images on a selection.

Drag and fill table on HTML5

I am trying to make a Game of Life using HTML, CSS and JavaScript. I don't want to use jQuery.
So, I have to setup the initial state, which is to make an element on the table having the color green when we click over it. I do this by toggling the class 'alive' that has background-color 'green' whenever an element in the table is clicked.
However, it is a bit tedious to click each element. Is there a way that we can make this draggable? I want when you click your left mouse and drag it across the table it will append the class 'alive' to each of the element.
Thanks for the answer!

How to invoke an additional click and a drag when a button is clicked

Is it possible for a click or mouseup event to launch a function where an additional click and drag event is invoked on another part of the div or on another div?
In short when I click on something I want the mouseup event to create the equivalent of the user quickly selecting another div (or part of the same div) and dragging it. I am not looking for a css animation perse'. I know that sounds weird but read below for what I think I need this for
The problem I am trying to solve with this
The problem I am trying to solve with this is the following.
I am making this tool:
https://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/trace3.html
When the user types into the pad, clicks the green button and moves the editor all works fine. But if they then again click the green button and add additional content to the notepad (and then closes the editor) the JSplumb wire-nodes get out of wack and don't update as in the picture below.
https://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/img.png
However, when I drag the div the nodes fall back into place.
I was thinking if I could add an eventListener that slightly drags the div (using a mouse event) when the user clicks the green button I could subtly fix this.
You may be able to use trigger();
$("#myButton").trigger("click");
ymmv

Categories

Resources