I'm experiencing some problems with jQuery's slideUp and slideDown functions. If you go to this site
www.confide.re/confide
and click on one of the boxes, it normally works fine, but after you scroll the page and it loads some more boxes, then the slide function bugs and does it twice for no reason, if you get what I mean.
Is this something I've done wrong somewhere or is this a known bug?
Thanks
Here is the code:
var state = 'down';
$('.overlay').click(function() {
if(state == 'down') {
$(this).next().slideDown(155);
state = 'up';
} else {
$(this).next().slideUp(150);
state = 'down';
}
.overlay is a transparent div on top of each of the boxes.
Define your click event outside your ajax success callback like this (Use a better selector that body, it is just for the example)
$("body").on("click", ".overlay", function(e){
$(this).next().slideToggle(150);
$(this).css('background-color', 'rgba(0,0,0,0)');
});
you should do something like this: http://jsfiddle.net/chanckjh/Jak6Q/
html:
<div class="something">
<div class="bar">
</div>
</div>
jquery:
$(function() {
$('.something').click(function() {
$('.bar').slideToggle();
});
});
css:
.something{
width: 500px;
height: 500px;
border: 1px solid red;
}
.bar{
display: none;
width: 500px;
height: 50px;
background: blue;
}
or like this for the child: http://jsfiddle.net/chanckjh/Jak6Q/1/
$(function() {
$('.something').click(function() {
$(this).find('.bar').slideToggle();
});
});
You can not share a single variable state amongst many elements which need to record their specific status. Instead, you have to keep state for each of the elements.
Related
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/
You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
you code is working you didn't include jquery see updated fiddle
demo
I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}
I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect.
When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-out to the .notice class had no effect on the object when its sibling was remove.
Minimal JS interpertation :
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Better yet fiddle here :
http://jsfiddle.net/kMxqj/
I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.
This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any notice div in the stack regardless of it position within the stack.
Try:
$('body').on('click','p.notice', function(e) {
$(this).fadeOut(500,function(){
$(this).css({"visibility":"hidden",display:'block'}).slideUp();
});
});
Fiddle here
Update August 7th, 2018:
As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrame to animate the height of an element. Fiddle can be found here.
jQuery's Animate() method is a great tool to learn because not only can you fade your objects in and out, but you can move them around, all at the same time.
The CSS:
.notice {
position:relative;
top:20px;
width: 100%;
height: 50px;
background-color: #ccc;
opacity:0;
}
The jQuery:
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('.notice').animate({opacity: 1, top:0}, 1000);
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
And my jsFiddle demo
A simple way of doing this would be to animate the height and margin properties - http://jsfiddle.net/kMxqj/14/
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).animate({'height':0,'margin':'0'});
$(this).fadeOut();
});
This will animate the height and margins to 0, while also fading out the object which results in a smooth transition. Also adding overflow hidden to your notice box so any content inside is covered as the animation happens.
How about this fiddle
CSS
.notice {
width: 0;
height: 0;
background-color: #ccc;
}
JS
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('#container p.notice:last-child').animate({
width: 100%,
height: 50px
});
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Tweak the values as needbe, but something like this should accomplish what you'd like - it sounds like animate() might be what you want though
No JQuery:
Preferable way is with max-width:
HTML
<div id="wrapper">
<div class="myspan">
child
</div>
<div id="removable" class="myspan">
removable child
</div>
<div class="myspan">
child
</div>
<div class="">
child
</div>
</div>
CSS
.myspan {
display: inline-block;
font-size: 30px;
display: inline-block;
max-width: 200px;
transition: all 1s;
overflow: hidden;
}
.myspan:hover {
max-width: 0;
}