I am making a small video game where I want the avatar picture glow red as if taking damage from a npc. To do this effect i'm trying to animate a red shadowBox over my player, but its not working. Can someone help me figure out what i'm dong wrong in particular? I tried using .css but that does not animate it. It only changes it right away.
$(document).ready(function() {
$('#usercontainer').click(function() {
$(this).animate({
boxShadow: '10px 10px 10px red'
},'slow');
});
});
Extra CSS + HTML
#usercontainer {
float: left;
border: 1px solid;
background-color: rgb(255,255,255);
height: 200px;
width: 200px;
overflow: hidden;
}
#userimage {
background-color: rgb(0,255,255);
height: 200px;
width: 200px;
}
<div id="usercontainer">
<div id="userimage">
<img src="images/wingedwarrior.jpg" alt="warrior" style="width:200px; height:200px">
<div id="userHitSplat"> </div>
</div> <!--END OF USER IMAGE-->
</div><!--END OF USER CONTAINER-->
This is probably easier with css animations:
#usercontainer {
float: left;
border: 1px solid;
background-color: rgb(255,255,255);
height: 200px;
width: 200px;
overflow: hidden;
transition: 1s;
}
#usercontainer.glow {
box-shadow: 10px 10px 10px red;
}
#userimage {
background-color: rgb(0,255,255);
height: 200px;
width: 200px;
}
And then to animate:
$(document).ready(function() {
$('#usercontainer').click(function() {
$(this).addClass('glow');
});
});
The reason the js animation doesn't work is that jquery can't animate colors. Jquery-ui includes the ability to do this, but it's probably not woth it for this when you can use css animations instead.
Demo
Related
I am having problems getting the content in a div (or its value) to wrap around inside and having the div's height adjust to the contents.
The top one a container, message-box. There are three divs inside like in the picture attached. I need to have divs each-message and each-message-content adjust its height to fit the contents inside. I have looked at many posts in this site and tried many combinations of overflow:hidden and height:auto, but they mostly end up making the each-message-content scroll sideways, and am at wits end.
How can I achieve this?
**** Updated with HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
Create a function to record in real time the number if char entered and to change the width of the the container accordingly using javascript.
if your CSS div height not expanding to fit content or wrapping content.
Just use a simple trick.
before the closing tag of the message-box div add a div with class cl
<div class="message-box"><div class="cl"></div></div>
Now in your Css Give this style .cl{clear:both;}
by using this if you have height auto on the div it will still wrap the content.I hope it will work for you.
I am using the toggleClass feature to apply and remove a CSS class due to the nature of the class itself containing :before, however the code here will be more generic to help others understand the nuts and bolts.
I can have a transition when the class is added to the element, but I can't seem to get one when removing it. Can anybody help?
HTML
<div class="container" id="container" on-scroll="toggleShadow">
<div class="content">
</div>
</div>
CSS
.blue {
transition: all 1s;
background: blue;
}
.container {
height: 300px;
border: 1px solid grey;
overflow: auto;
}
.content {
margin: auto;
width: 50px;
height: 800px;
background: linear-gradient(lightblue, limegreen);
}
JS (Polymer)
toggleShadow : function(){
if(scroll >= 2) {
this.toggleClass('blue',true,this.$.container);
} else {
this.toggleClass('blue',false,this.$.container);
}
}
You only have the transition effect when .blue is applied, instead place the transition on the .container
.blue {
background: blue;
}
.container {
transition: all 1s;
height: 300px;
border: 1px solid grey;
overflow: auto;
}
I am trying to create a structure similar to panels. This is what i have tried:
FIDDLE
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>Panel 2
<div id='slide'>Panel 3</div>
</div>
</div>
and CSS is
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}
I am curious to know how browser renders HTML while parsing. As we can see there are three panels, Panel 3 being child of Panel 2, is seen on top of Panel 2. Whereas as per requirement , Panel 2 should be on top of Panel 3 and say when i click on some button in panel 2, panel 3 should slide behind panel 2 and comes forward on right side of panel 2. Hope i made myself clear. Please help.
If you want panel 2 to be on top of panel 3 then you will need to apply something like z-index:-1;.
I have modified your fiddle to show this working.
Panel 3 is behind panel 2 as you requested and there is a button that when clicked transforms the panel to the right. You can easily neaten this up to hide the entire panel and do some cool jQuery stuff to make the slide transition nicer.
Just try to remember that unless you say otherwise, children will usually appear in front of their parent.
This isn't about browser rendering, it's your CSS that's making the children exceed the height of the parent.
Because you've fixed the height of the parent, yet you've said that #slide is 100% in height, but there's another child of #secondp, which is the text node Panel 2. So technically, #secondp has a height of 100% + height of Panel 2, hence the overflow.
To remedy this, put the text node Panel 2 inside an element, then set the height of that element (I've used 10%) and then adjust the height of #slide to be 100% - specified height of the new element.
Here's an example:
Fiddle
HTML:
<div id='main'>
<div id='firstp'>Panel 1</div>
<div id='secondp'>
<div id="slide1">Panel 2</div>
<div id='slide'>Panel 3</div>
</div>
</div>
CSS:
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#firstp{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#secondp{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
box-sizing: border-box;
}
#slide{
width: 100%;
height: 90%;
position: relative;
border: 1px solid green;
background-color: green;
box-sizing: border-box;
}
#slide1 {
height: 10%;
}
You'll also notice I've added vertical-align: top to firstp aswell, otherwise it'll be off the top.
Also, I've added box-sizing: border-box to prevent the border overlapping the parent.
#main{
width: 300px;
height: 300px;
border: 1px solid black;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid blue;
display: inline-block;
}
#main>div{
width: 20%;
height: 100%;
border: 1px solid red;
display: inline-block;
position: relative;
background-color: red;
}
#slide{
width: 100%;
height: 100%;
position: absolute;
border: 1px solid green;
background-color: green;
}
I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy
I have two div elements side by side. When i move the mouse over the first and animates it, the next one strangely shakes. See here: http://jsfiddle.net/YqZSv/1/ I've noticed it only happens when padding and border are involved. If i replace border with margin, the 'shaking' effect stops.
HTML
<div class='a'></div>
<div class='b'></div>
CSS
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
}
jQuery
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
I can't use margin instead of border because i use a background image with border origin, so i don't want it to move together with its content.
Any help?
Tell the browser to keep both the padding and the border-width inside the defined height/width so it doesn't think the size is changing:
div.a { box-sizing:border-box; }
http://jsfiddle.net/exvEa/
If you DO NOT Mind some modification... I'd go for CSS Positioning.
Though this will have an additional tag
Something like:
<div id="mother">
<div class='a'></div>
<div class='b'></div>
</div>
and the in your original CSS:
#mother{
position:relative; width:210px;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block;
position:absolute;
left:0px;
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
position:absolute;
right:0px;
}
jQuery:
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
Try that....
http://jsfiddle.net/8jFyL/
If small html/css changes aren't problem:
http://jsfiddle.net/YqZSv/8/
HTML:
<div class="box">
<div class='a'></div>
</div>
<div class="box">
<div class='b'></div>
</div>
CSS:
.box {
width:100px;
height:100px;
margin-right:20px;
float:left;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 80px;
height: 80px;
padding: 10px;
background-color: blue;
display: inline-block;
}
Basically, one div as wrapper...