I want to create a HUD display on the bottom of my game. To the right of the HUD bar will be a nested minimap.
When I hover over the HUD, it will increase opacity of the
When I click on the minimap (child of HUD), it will expand a larger map. When I click on the HUD (parent element), it will apply the opacity rule with toggleClass().
I don't want this opacity rule to be applied when I click on the child minimap though, only when I click on the parent HUD. Right now it's being applied when I click on parent and child.
See DEMO
HTML
<div id="HUD">
<div id="map"></div>
</div>
JS
$("#HUD").click(function(){
$(this).toggleClass("HUDactive");
});
CSS
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float:right;
}
In Javascript a concept called "event bubbling" occurs. When you click on an element the events registered to that element occur first. Once they are completed, the event travels to the parent, and so on. You can use this to your advantage in this case, by stopping the event at the "#map" element.
Jquery has a handy way of doing this using stopPropagation.
Just add this code to your example:
$("#map").on('click', function(event){
event.stopPropagation();
});
You can check whether the click was happened in the #map element like
$("#HUD").click(function(e) {
//if #map don't have any descendants then
//if (!$(e.target).is('#map')) {
if (!$(e.target).closest('#map').length) {
$(this).toggleClass("HUDactive");
}
});
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HUD">
<div id="map"></div>
</div>
Related
How can I animate a height change after changing the height with javascript?
Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>
Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}
I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.
The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', '-205px');
$('.content-wrapper').css('margin-right', "0");
$('.full-page-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', '0');
$('.content-wrapper').css('margin-right', "205px");
$('.full-page-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
transition: left 1s ease;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
<ul class="sidebarList">
<li>
</li>
</ul>
</div>
<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>
add overflow-x:hidden to your outer container
You need to transition the right CSS property on the sidebar, because that's the one you're changing.
#sidebar-right {
transition: right 1s ease;
}
Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
background: red;
transition: all 0.7s ease;
}
#sidebar-right {
transition: all 1s ease;
}
'all' enable to use transition on all property
Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)
at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));
I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
So I have a tr within a table. onClick it appends some html. I'm trying to make the tr it appends transition nicely, so I'm trying to set the height to 0, then onClick set it to auto.
However, my div isn't taking height 0. I can add height: 0; but it still keeps the height.
My HTML:
<tr class="info_container">
<td colspan="7">Pick a time
<button id="time_btn">Button</button>
<span class="tickets_left_cont"> 7 tickets left</span>
</td>
</tr>
CSS:
.info_container {
background: #fff;
color: #000;
z-index: 999;
left: 0;
width: 100%;
padding: 15px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
opacity: 0;
text-align: left;
font-family: BreeSerifLt;
border-bottom: 3px solid #000;
}
#time_btn {
outline: 0;
padding: 10px;
background: #9A0FC7;
border: 0;
color: #fff;
display: block;
margin-top: 10px;
font-weight: 300;
font-family: BreeSerifLt;
}
What am I doing wrong? Why can't I make info_container class height 0 so it hides the div?
Thanks!
On tables, height and width behave as min-height and min-width
I want to highlight element on which arrow is pointing while using the onscreen guide for displaying instructions
here is the link for the fiddle
Fiddle
Some of code from fiddle is:
$("#overlay").on("click", function(){
this.style.display = "none";
$("#clk").show();
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#clk").hide();
});
You need to tweak your styles a little bit to achieve this.
Add margin to your overlay div so the main is visible. Likewise, adjust the position of the arrow and the corresponding text to get it to an appropriate position.
Note that this solution wont work if the box is visually inside as in the carmin demo.
updated jsFiddle
Updated CSS:
*{
margin: 0px;
padding: 0px;
}
#overlay{
font-family: "Comic Sans MS", cursive, sans-serif;
position: fixed;
width: 100%;
height: 100%;
margin-top: 120px;
z-index: 999999;
background-color: #000;
opacity:0.5;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#overlay p, #overlay img{
position: relative;
}
#overlay p{
color: blue;
}
#instruction1{
top: 50px;
left: 400px;
}
#arrow1{
width: 100px;
position: relative;
top: -30px;
left: 150px;
}
#instruction2{
top: -10px;
left: 225px;
}
#dismiss{
font-size: 12px;
}
.shome{
display: block;
}
main{
z-index: 0;
}
main div{
padding: 50px;
background: rgb(0,120,170);color:#fff;
z-index: 9999999;
opacity: 0.8;
}
Hope this is what you want. I have remove this.style.display = "none"; from the overlay block. Now it is working.
$("#overlay").on("click",function(){
$("#clk").show();
// $("#overlay").hide(); //Add this line if you need same behaviour while click on overlay.
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#clk").hide();
});
Didn`t understand what did u mean.
Maybe u just need to correct your styles,like this fiddle
I have added a class glow to your div and add the same on the click and removed the same when overlay.
$("#overlay").on("click", function(){
this.style.display = "none";
$("#clk").show();
$("#maincont").removeClass("glow");
});
$("#clk").on("click", function(){
$("#overlay").show();
$("#maincont").addClass("glow");
$("#clk").hide();
});
*{
margin: 0px;
padding: 0px;
}
#overlay{
font-family: "Comic Sans MS", cursive, sans-serif;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
opacity:0.5;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#overlay p, #overlay img{
position: relative;
}
#overlay p{
color: blue;
}
#instruction1{
top: 50px;
left: 400px;
}
#arrow1{
width: 100px;
position: relative;
top: 100px;
left: 150px;
}
#instruction2{
top: 100px;
left: 225px;
}
#dismiss{
font-size: 12px;
}
.shome{
display: block;
}
main{
z-index: 0;
}
main div{
padding: 50px;
background: rgb(0,120,170);color:#fff;
z-index: 1;
opacity: 0.8;
}
.glow{
opacity: 1;
z-index: 2;
color: white;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
<p id="instruction1">This is some instruction.<br/>
<span id="dismiss">(tap to dismiss)</span>
</p>
<img id="arrow1" src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" />
<p id="instruction2">This is something cool!</p>
</div>
<main>
<div id="maincont">This is my main content.</div>
</main>
<br/>
<div style="cursor:pointer;background:rgb(0,120,190);color:#fff;padding:10px;width:25%;text-align:center" id="clk">Click to see Instructions.</div>
PS. Your image of the arrow is blocked in this snippet sorry for that
Animating the element your mouse is on, can be done e.g. using .hover from jquery:
$("#maincont").hover(
function() {
$( this ).addClass( "hover" );
},
function() {
$( this ).removeClass( "hover" ); }
);
Although at the moment your overlay div prevents the trigger to fire, because the maincont is "behind" the overlay.
It might be necessary to rethink the design.
EDIT:
Maybe it´s a better aproach to implement some kind of "at mouse position" tooltip mode, which can be activated and show the informations in a mouse-near info div.
Changing the mousecursor to
cursor: help;
CSS property would additionally help to difference between the two modes