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;
}
Related
overflow: hidden prevents users from scrolling with input devices, but it's still possible to scroll the element with focus(), scrollIntoView(), etc. I have some content that should be hidden with overflow: hidden, but calling focus() on a hidden input sometimes causes the browser to scroll the overflow: hidden element and reveal the hidden content.
Here's a demo where the right element should always be hidden:
document.querySelector('input').focus();
// document.querySelector('.right').scrollIntoView(); works too
body {
overflow: hidden;
margin: 0;
}
.container {
width: 200vw;
display: flex;
}
.left {
width: 100vw;
border: 1px solid red;
}
.right {
width: 100vw;
border: 1px solid blue;
}
<div class="container">
<div class="left">left</div>
<div class="right">
right
<input />
</div>
</div>
Adding position: fixed to .right fixes this issue, but it introduces other styling issues. Is it possible to make body never scrollable without using position: fixed?
The issue I'm facing is caused by React calling focus() when a hidden input has the autoFocus property. It's called in ReactDOMHostConfig's commitMount. Even if I add a lint rule to disable React's autoFocus, it's likely that someone will call focus() and cause a bug.
You set overflow: hidden on both the html and body elements so that the body will not be scrollable. Then, you set overflow: scroll on the .right element, so that if focus() is called on a hidden input, the .right element will scroll instead of the body.
html,
body {
height: 100%;
overflow: hidden;
}
.container {
width: 200vw;
height: 100%;
display: flex;
}
.left {
width: 100vw;
height: 100%;
border: 1px solid red;
}
.right {
width: 100vw;
height: 100%;
border: 1px solid blue;
overflow: scroll;
}
With javascript
document.querySelector('input').focus();
document.querySelector('.right').scrollIntoView();
document.querySelector('.left').addEventListener('click', function(event) {
document.querySelector('input').focus();
document.querySelector('.right').scrollIntoView();
console.log('focus input');
});
// Reset the scroll from javascript
window.onscroll = function() {
window.scrollTo(0, 0);
console.log('reset scroll');
};
body {
overflow: hidden;
margin: 0;
}
.container {
width: 200vw;
display: flex;
}
.left {
width: 100vw;
border: 1px solid red;
}
.right {
width: 100vw;
border: 1px solid blue;
}
<div class="container">
<div class="left">left - click me</div>
<div class="right">
right
<input />
</div>
</div>
I have been for long trying to make an HTML box slide on hover and reveal the text beneath it using CSS or JS. I am new to JavaScript so it would be great if you provide a bit of explanation with the answer if its to be achieved by JS.
I have searched many sites and asked a lot of people but I haven't been able to achieve it.
I have made two DIVs, one being underneath the other
I tried writing some example text, but it appears before the box
.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="box"></div>
</div>
All you need to do is add a z-index:
.trigger {
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
z-index: 2;
}
.content {
position: absolute;
z-index: 1;
}
.trigger:hover .box {
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="content">Content</div>
<div class="box"></div>
</div>
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
This question is to broad, I know, but anyway...
How can I achieve the same result as the image below using HTML, CSS and JS (maybe images)? The number of "levels" are unpredictable and every "level" of the building must be clickable, an , or something like this.
Is that possible?
I build something with css transformations. Not perfect but i guess you'll see the point. It's using transformations for the roof and the side elements and adds the side elements through a pseudo class.
#stack {
padding: 10px;
}
.roof {
width: 100px;
height: 20px;
background: #aff;
transform: translateX(10px) skewX(135deg);
padding-top: -20px;
}
.level {
text-align: center;
width: 100px;
height: 20px;
background: #99f;
margin: 1px;
}
.level:after {
display: block;
width: 20px;
height: 20px;
background: #00f;
content: "";
margin-left: 100px;
transform: translateY(-30px) skewY(135deg);
}
.level:hover {
background: #f99;
}
.level:hover:after {
background: #f00;
}
<div id="stack">
<div class="roof"></div>
<div class="level">1</div>
<div class="level">2</div>
<div class="level">3</div>
<div class="level">4</div>
</div>
Feel free to use links inside of the levels.
Edit: added :hover highlighting
You have to play a bit with css transform and pseudo elements.
Just a quick and dirty example:
a {
display:block;
width:100px;
background:blue;
height: 30px;
line-height:30px;
color: #fff;
text-align:center;
margin-bottom:2px;
position:relative;
}
a:after {
position:absolute;
content:"";
background:darkRed;
height: 20px;
width: 42px;
right: -36px;
top:-2px;
transform: skew(-45deg) rotate(45deg);
}
div {
padding:100px;
}
<div>
one
two
three
four
</div>
Yes, it is possible
you can use canvas or SVG
Okay so here is my code:
HTML
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>
CSS:
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
visibility: hidden;
}
JS
$('.custom_class_1').click(function() {
$('#overlay-2').fadeIn(300);
});
I want to toggle the visibility of #overlay-2 when I click on my button ".custom_class_1"
How can I do this?
Not sure if visibility: hiddenis the route to go in the css. But I do want it hidden on page load as it would cover the entire screen with a dark overlay.
Any help would be much appreciated!
Thanks
If you are using JQuery then use the .hide() method:
$("#overlay-2").hide();
http://api.jquery.com/hide/
This should work:
$('.custom_class_1').click(function() {
$('#overlay-2').toggle();
});
And in your main css, as others have suggested you should use Display: none in place of Visibility: hidden
Use display: none; instead of visibility: hidden;
Here is a pure CSS solution - FIDDLE
HTML
<input type='checkbox' id='inputstyle'></input>
<div class='centerme'>
<label for="inputstyle"><span>Click Me</span></label>
</div>
<div class='hideme'></div>
CSS
.centerme {
width: 80px;
margin: 0px auto;
}
.hideme {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
.clickme:active > .hideme {
display: none;
}
input[type=checkbox]:checked ~ .hideme {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type="checkbox"] + div label span {
display:inline-block;
width:80px;
height:30px;
background-color: gray;
border-right: 2px solid black;
border-bottom: 2px solid black;
line-height: 30px;
color: white;
text-align: center;
}
From THIS excellent page.