I have several elements below one transparent element(it has some things in it that are visible though). But it seems the padding is not allowing the mouse events through. I have it so when the mouse hovers over one of the lower elements, it changes color, then when it leaves, it slowly turns back to its original color. But for the areas where the element above it covers them, the hover doesn't go through. Does anyone know how to get those events to pass through to lower elements?
HTML
<body>
<div id="background">
<canvas class="gridBox" id="grid1x1"></canvas>
<canvas class="gridBox" id="grid2x1"></canvas>
<canvas class="gridBox" id="grid3x1"></canvas>
...
<canvas class="gridBox" id="grid18x8"></canvas>
</div>
<div id="header">
<p id="logo"><img src="img/logo.png"></p>
</div>
<div id="content">
<p>Nothing here yet</p>
</div>
<div id="footer">
</div>
</body>
CSS
body,html{
padding:0;
margin:0;
}
#background{
padding:0;
margin:0;
width:110%;
height:100%;
z-index:-1;
position:fixed;
top:0;
left:0;
overflow:visible;
line-height: 0;
}
.gridBox{
margin:0;
padding:0;
height:50px;
width:50px;
border:1px solid #000000;
background:black;
transition:background-color 1s linear;
}
.gridBox:hover{
background-color:green;
transition:background-color 0s linear;
}
Since you did not post your code, I guess that you are working with something like light box, hover parent element and making animation.
I recommend you to look at this question has been resolved
jQuery hover problem due to z-index
I think what you are looking for is this:
.gridBox:hover, .gridBox:hover * {
background-color:green;
transition:background-color 0s linear;
}
It just selects the .gridBox plus any child on the condition
that the user is hovering .gridBox
Related
I would like to build a slidepanel with js. For that I would like a div that resizes when slider opens.
Trying to do as following:
html
<div class="wrapper">
<div class="left">original content</div>
<div class="right">sliding from right side</div>
</div>
css
.wrapper {width:100%;height:100%;position:relative;}
.left {width:auto;height:100%;display:inline-block;}
.right {width:50%;height:100%;}
This is the basic setup. I would like to have left take the full width. But when I click a button I want right to Slide in to 50%. Before adding js, I am trying to position the two divs, but it does not work. I tried with table cell, flex, ... I m just not able to get it right. Someone a good tip?
$("#expand").on("click", function(){
$(".wrapper").toggleClass("expand");
});
.panel {
height:100vh;
transition: width .5s;
}
.left {
float:left;
width:100%;
Background:red;
Text-align:right;
}
.right {
float:right;
width:0%;
background:#ddd;
overflow:hidden;
}
.pos {right:5px;}
.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="panel left">
original content
<button class="pos" id="expand">Click</button>
</div>
<div class="panel right">sliding from right side</div>
</div>
This might be a stupid question but is there a way to create animations like mobile app in the browser.
Ref link: http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples
It would be great if something could be built like this. I know a bit of javascript/jquery but this seems to be way out of my knowledge.
Any technical details would be helpful
You can try using famo.us: http://famo.us/
It's a new framework so there are some issues but it has potential. It relies on matrix transforms and can do really amazing things such as this: http://www.youtube.com/watch?v=6jg-PlisAFc
You can check out more demos here: http://famo.us/demos/
And there is a DNA helix example here: http://www.youtube.com/watch?v=JbIL3asjZBs
Hope this helps.
Here is a little example of what you can do with a bit of jQuery to trigger the animation with a class change and CSS3 transitions to handle the animation.
It will need some tweaking and customizing to reach the quality of the linked animations but it shows that CSS3/jQuery animations can be pretty smooth.
DEMO
HTML :
<header></header>
<section>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
<article>
<div class="wrap">
<img src="" alt="" />
<p>some text</p>
</div>
</article>
....
</section>
CSS :
body,html{margin:0;}
header{
height:100px;
background:#000;
}
article{
float:left;
width:50%;
padding-bottom:16%;
position:relative;
color:#fff;
}
article .wrap{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
background-color: rgba(0, 0, 0, 0.9);
-webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
display:block;
width:100%;
height:auto;
}
footer{
height:50px;
width:100%;
position:fixed;
bottom:0;
left:0;
background:#000;
}
article:nth-child(odd) .wrap.show{
width:200%;
height: 100vh;
z-index:2;
-webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
transition: width 0.2s ease-out, height 0.6s ease-out;
}
jQuery :
$('.wrap').click(function(){
$('.wrap').not(this).removeClass('show');
$(this).toggleClass('show');
});
Hi im a beginner in javascript/jquery. I am making an application that takes batteries (drawn in CSS) and allows the user to connect the + and - terminals by clicking and then displays an overall voltage and Amp hour output based on how the batteries are wired.
How would I allow the user to click the positive or negative squares (which are just div tags within the battery class) and then relay to javascript that the user has clicked certain boxes, THEN somehow a wire (just a line) would appear between where the user clicked. I really don't know how I would go about coding this. THANKS
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="batterypagestylesheet.css">
<script>
</script>
</head>
</body>
<div id="batterysection">
<div id="pterminal">+ terminal</div>
<div id="nterminal">- terminal</div>
</div>
<div class="battery">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
<div class="battery2">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
</body>
</html>
CSS:
#batterysection{
background-color:purple;
margin-left:auto;
margin-right:auto;
width:1100px;
height:800px;
}
#pterminal{
position:absolute;
left:500px;
top:50px;
width:200px;
height:100px;
background-color:red;
color:white;
text-align:center;
font-size:40px;
}
#nterminal{
position:absolute;
left:700px;
top:50px;
width:200px;
height:100px;
background-color:black;
color:white;
text-align:center;
font-size:40px;
}
.battery{
position:absolute;
top:200px;
left:600px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
.battery2{
position:absolute;
top:200px;
left:700px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
#pos{
position:relative;
height:25px;
width:25px;
background-color:red;
color:white;
margin-left:40px;
text-align:center;
}
#neg{
position:relative;
height:25px;
width:25px;
background-color:black;
color:white;
margin-left:40px;
top:20px;
text-align:center;
}
With a very basic
$('#pterminal').click(function() {
// pterminal clicked
});
you have a click-event handler with jQuery.
Drawing a line sounds something you would do on a HTML5 canvas-element these days. Seeing you're a beginner, you might invest some time in a course like http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1.
Also watch out with what is an id and what a class. Id's (#) are unique, there is only one - Classes (.) are a bit like tags: use them when you have similar stuff. Thus, it makes more sense to make #battery1 and #battery2 id's and .pos and .neg classes.
Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.
LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)
<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/
http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...
I have several elements below one transparent element(it has some things in it that are visible though). But it seems the padding is not allowing the mouse events through. I have it so when the mouse hovers over one of the lower elements, it changes color, then when it leaves, it slowly turns back to its original color. But for the areas where the element above it covers them, the hover doesn't go through. Does anyone know how to get those events to pass through to lower elements?
Here is my slimmed down code. The grid boxes are made whenever the page resizes so they always fill up the background. Things like <div id="content"> are in front of the background despite being transparent. So the boxes are visible but you can't interact with them.
HTML
<body>
<div id="background">
<canvas class="gridBox" id="grid1x1"></canvas>
<canvas class="gridBox" id="grid2x1"></canvas>
<canvas class="gridBox" id="grid3x1"></canvas>
...
<canvas class="gridBox" id="grid18x8"></canvas>
</div>
<div id="header">
<p id="logo"><img src="img/logo.png"></p>
</div>
<div id="content">
<p>Nothing here yet</p>
</div>
<div id="footer">
</div>
</body>
CSS
body,html{
padding:0;
margin:0;
}
#background{
padding:0;
margin:0;
width:110%;
height:100%;
z-index:-1;
position:fixed;
top:0;
left:0;
overflow:visible;
line-height: 0;
}
.gridBox{
margin:0;
padding:0;
height:50px;
width:50px;
border:1px solid #000000;
background:black;
transition:background-color 1s linear;
}
.gridBox:hover{
background-color:green;
transition:background-color 0s linear;
}
Try pointer-events: none; in the CSS. The #content element will no longer detect the mouse, but the boxes below will detect it.
#content {
pointer-events: none;
}