Stacking DIV Click Events for JavaScript - javascript

Currently programming a web application that is a rendition of the Board Game Splendor for educational purposes. Right now I'm getting into the part of my coding where we will be handling events.
I'm looking to be able to have the user hover over the cards in the middle and have it dim displaying the word BUY at the top half and RESERVE at the bottom half. Then while hovering over the whole card the user can click either BUY or RESERVE depending on what they want to do.
My assumption right now of how to handle this would be to have a mouseover event in JavaScript for the whole div that contains the card image, and then to have two divs on top of that div (One for the top half and one for the bottom half) that each have separate click events since each will function differently.
I guess I'm wondering, will that be a problem since technically the whole card div will be beneath those two divs? And should I be looking to solve this problem with a different approach in the code? (I can't use things like jQuery in my project either, just HTML CSS and JS)

I would solve the problem using css, specifically using the :hover modifier. The BUY and RESERVE buttons would have display:none, but once you hover over the parent element, in this case the card, you can change to display: block. You can use both the z-index and position css properties to position both buttons anywhere on the card. For example
.card:hover {
position: relative;
z-index: 1;
.buy, .reserve { display: block; }
}
.buy, .reserve {
position: absolute;
z-index: 2;
display: none;
}
With html
<div class='card'>
<div class='buy'></div>
<div class='reserve'></div>
</div>

The two buttons that you are placing on top of each card can have CSS opacity elements on it's background-color property such as rgba(0,0,0,0.5) that allows the rest of the card to show underneath the two button divs and become partially transparent.
As for click events, you're right, the card itself will not be able to be clicked. However, you can access the card itself via event.target.parentNode in order to find what card you are clicking as well as manipulate the card itself on click.

Related

Is there an alternative to display: none; or position: absolute; when trying to remove an elements spacing from the flow of the page?

I'm making a filter feature that filters through cards using javascript. I do this by removing a "isVisible" class from the card if it does not match the selected category.
My question is, is there a way to remove the spacing a card takes up when its not currently visible on the screen? As the cards that are visible have blank spaces next to them due to the other cards that are hidden.
Here is the current code:
https://codepen.io/Jaromme/pen/poKXLLM
Is there some way I'm able to play the transition in a css keyframe animation or how it is currently, wait a certain amount of time in javascript, and then apply display: none;?
Any ideas would be greatful
I've tried to use display: none; , but that completely removes the transition I'm using. I've also tried using position: absolute; but that's causing an undesirable effect on the animation.
Maybe you can reduce the div heigth/width/padding till it gets 0
For example:
#keyframes animation{
0%{height:200px;}
/*...Some medium values*/
100%{height:0px;}}

Bring element on top of modal backdrop

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

Vertically aligning animated divs

I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.
I've tried float, vertical-align: top, display: inline-block, and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.
Image with a button's output displaying right under the buttons (as it should)
Image with the next button's output displaying lower than the first
I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.
HTML: The divs with IDs old_output and new_output are what I'm trying to align below the buttons
CSS: div.button_output_container and div.button_output are used for the output divs and their container
JS: Handles button clicks, decides which animation should be used, and sets the output text (aside from demonstrating the issue I think it's mostly irrelevant)
JSFiddle link
I am not sure I totally understand your alignment requirement,
but if you just want your divs to render on the same height, you could opt for position:absolute like so:
div.button_output_container {
position: relative;
}
div.button_output {
margin: 16px 24px;
width: 450px;
position: absolute;
}

Animating divs in a set

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?
Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.
Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle

Categories

Resources