I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.
The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)
This is my current JavaScript logic:
$('#container img').mouseover(function(){
$(this).siblings('.discr').show();
$(this).mouseout(function(){
$(this).siblings('.discr').hide();
})
})
For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.
You can try something like this:
JavaScript version
$('#container').mouseover(function () {
var $controls = $(this).find('.discr');
$controls.show();
$(this).mouseout(function () {
$controls.hide();
})
})
Example http://jsfiddle.net/b6hjm3t1/
Pure CSS version without JavaScript
You can have the same results just with CSS without the using JavaScript just by adding to the CSS:
#container:hover .discr {
display:block;
}
Example: http://jsfiddle.net/t6hf0fqg/
I think that this does what you're looking for. I've modified the code a little bit:
http://jsfiddle.net/jfkk78cn/1/
$( "#container" )
.mouseover(function() {
$(this).find('.discr').show();
})
.mouseout(function() {
$(this).find('.discr').hide();
});
Here is a CSS only solution for the same effect.
The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.
img {
width:200px;
height:200px;
display:block;
}
#container {
float:left;
position:relative;
border:2px solid green;
}
.discr {
position:absolute;
color:red;
background:rgba(0, 0, 0, 0.2);
bottom:0px;
width:100%;
text-align:center;
display:none;
}
/*ADDED THIS RULE*/
#container:hover .discr{
display:block;
}
.next {
left:185px;
}
.next, .prev {
bottom:50%;
width:15px;
border-radius:9px;
}
<div id='container'>
<img src='http://goo.gl/Rwf5SG' />
<div class='discr prev'><</div>
<div class='discr next'>></div>
<div class='discr'>lorem ipsum</div>
</div>
Related
I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});
What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>
I got some elements, and when an event is triggered one of them is removed or added to the DOM, when this happens the rest of the elements moves around to find their right place on the DOM, what I want is to animate that movement.
Any ideas? I would like to only use CSS if it's possible.
Note that when clicked the button, the element 2 goes off or on and the others move's, I want that movement animated.
Here is my code
$('button').click(function(){
element = $('#dos').is(":visible");
if(!element){
$('#dos').show();
}
else{$('#dos').hide();}
})
section{
margin:auto;
display:block;
text-align:center;
}
#uno{
width:200px;
background:rgba(255,229,0,1.00);
height:100px;
display:inline-block;
}
#dos{
width:200px;
background:rgba(0,255,60,1.00);
height:100px;
display:inline-block;
}
#tres{
width:200px;
background:rgba(232,0,255,1.00);
height:100px;
display:inline-block;
}
button{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
<div id="uno">1</div>
<div id="dos">2</div>
<div id="tres">3</div><br>
<button>Click</button>
</section>
If you want it to be done in CSS, then work with .addClass()/.removeClass() instead of .show() and .hide(). Learn about keyframes – it's easy, intuitive and gives full control over CSS animations. It's as easy as:
#keyframes hide-animation {
to {
width: 0%;
visibility: hidden;
}
}
.hidden {
animation: hide-animation .3s linear forwards;
}
You can bind any animation you want to the class you are adding. Here's your JSFiddle with working hide animation.
It's hard for me to give an exact answer without knowing what kind of movement you want but I'll take a stab at it.
One general solution is to put the element you are hiding/showing in a container div, and then animate the width or height of the container div. Let me see if I can give you an example for vertical:
HTML:
<div id="uno">1</div>
<div id="dos-container">
<div id="dos">2</div>
</div>
<div id="tres">3</div>
CSS:
#uno{
height:100px;
}
#dos{
height:100px;
}
#dos-container{ /* same height as dos if starting visible, if starting hidden set to 0*/
height:100px;
}
#tres{
height:100px;
}
JS(with jquery):
$('button').click(function(){
element = $('#dos').is(":visible");
if(!element){
//animate container height to match content div height
$('#dos-container').animate({height: "100px")},500); //500 is the speed of the animation
//show content in container
$('#dos').show();
}
else{
//animate container height to 0
$('#dos-container').animate({height: "0px")},500);
//then hide content div
$('#dos').hide();
}
})
My fiddle: http://jsfiddle.net/neowot/e786hLnL/
The goal: Overlay and SignUpScreen fade together when you click anywhere outside of SignUpScreen.
The current problem: Overlay and SignUpScreen are fading when you click inside SignUpScreen.
Also, Overlay is appearing over SignUpScreen despite the z-indexes set to attempt preventing this.
Where am I going wrong?
HTML
<body>
<div id="overlay"></div>
<div id="SignUpLink">Sign Up</div>
<div id="SignUpScreen">You're signing up!</div>
</body>
CSS
#SignUpLink{
background:green;
width:300px;
height:300px;
}
#SignUpScreen{
background:blue;
width:600px;
height:600px;
display:none;
z-index:1;
color:white;
}
#overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color: rgba(0, 0, 0, .50);
display:none;
z-index:2;
}
JS
$(function() {
var container = $('#SignUpScreen');
$(document).mouseup(function (e) {
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut(450);
$('#overlay').fadeOut(450);
}
});
$('#SignUpLink').click(function() {
$('#SignUpScreen').fadeIn(450);
$('#overlay').fadeIn(450);
});
});
Your z-index's are backwards (your overlay has 2 and SignUpScreen has 1, highest number is the one on top) and SignUpScreen needs a position value like relative in order for z-index to work.
See this fiddle.
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
I want the bottom div to slide up down on hover at the bottom of screen. But, I want the text link to move with it. BUT, have the like slide down and stop like bottom:20px so it still visible to slide back up. Here's an example: http://sorendahljeppesen.dk/. Here's what I got so far: (the link isn't set to move with the dive cause it keeps vanishing below the screen on hover).
Jquery:
<script type='text/javascript'>
$(document).ready(function(){
$("#mp3-text a").hover(function() {
$("#mp3-player").stop().slideToggle(1000, function () {
$(noop);
$("#mp3-player").slideToggle(1000);
});
});
});
</script>
CSS:
#mp3-player-holder {
height:100px;
width:960px;
bottom:0;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
overflow:hidden;
}
#mp3-player {
height:95px;
width:100%;
bottom:0;
position:absolute;
border-top:1px solid #ccc;
border-right:0px;
border-bottom:0px;
border-left:0px;
z-index:1000;
text-align:center;
}
Best way to do it would be to have two separate functions--one that's called onmouseover to slideit up, and one that's called onmouseout to slide it back down. Like this:
function slideup() {
$("#mp3-player").slideToggle(1000);
}
function slidedown() {
$("#mp3-player").slideToggle(1000);
}
And your HTML:
<div id="mp3-text">
hover to slide!
</div>
<div id="mp3-player-holder">
<div id="mp3-player"> </div>
</div>
Or, to make it like the one you linked, put the onmouseout onto the mp3-player div. Then it would slide back down when you removed your mouse from over the entire mp3-player div.