How can I keep the #panel slide down/open when mouse traveling/hovering between #flip and #panel? And how slide up only when mouse is out of these two?
$(document).ready(function() {
$("#flip").hover(function() {
$("#panel").slideDown("slow");
}, function() {});
$("#panel").hover(function() {
}, function() {
$(this).slideUp("slow");
});
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
And how slide up only when mouse is out of these two?
In order to achieve this result you need to:
show the panel (slideDown) when mouse enters the panel or the flip and the panel is hidden
hide the panel (slideUp) when mouse leaves the panel or the flip and the panel is visible. Here, the selector should be :not(#flip, #panel)
$("#flip, #panel").on('mouseenter', function (e) {
if ($("#panel").is(':hidden')) { // this test in order to reduce useless slideDown....
$("#panel").slideDown("slow");
}
});
$(":not(#flip, #panel)").on('mouseleave', function(e) {
if ($("#panel").is(':visible')) { // this test in order to reduce useless slideUp....
$("#panel").slideUp("slow");
}
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
if you add a #container around #flip and #panel
you can add a .mouseleave() event to it, so when you click on #flip the panel slides down (and expand the container), as long as you keep the mouse inside that container the panel stays open (you can hover on flip or panel). When the mouse leaves the container the panel slide back up.
(I changed the event you had on flip to a click event as well as it says "click to slide")
as a tip, you might want to refacor your code to use CSS classes instead of id, this would make your code reusable (you could have multiple sliding pannel in the same page)
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown("slow");
});
$("#container").mouseleave(function() {
$("#panel").slideUp("slow");
});
});
body {
padding-top: 20px;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
Related
I have a div with the class name 'content' and it has some content. I have set its height to 80px. height:80px; overflow:hidden;
I have a button with class name 'button' and I am trying to toggle and make the height auto or remove the height 80 px on click and then once clicked again take the div back to 80px.
I am also trying to have the button change its value in-between show more/show less
Thanks
.height {
height: 80px;
}
$(".button").click(function(){
$("div.container").toggleClass("height");
});
Here is a solution for to get rid to much javascript,
$('.button').click(function(){
$('.content').toggleClass('changeHeight');
$('.button > *').toggleClass('show hide')
})
.show {display: block;}
.hide {display: none;}
.content {height: 80px; background: red; color: white;}
.content.changeHeight {height: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content">
<div>Some contents</div>
</div>
<button class="button">
<span class="show">Show</span>
<span class="hide">Hide</span>
</button>
If you want to animate it, you can add transition to class content.
Also there is another useful way to toggle class to parent element containing both these elements (button and div).
Check this code snippet. Hope it helps!
$(".btn").on("click", function(){
var $btn = $(".btn");
var $content = $(".content");
$content.toggleClass("sized");
if($btn.text() == "Show More"){
$btn.text("Show Less")
} else if($btn.text() == "Show Less"){
$btn.text("Show More")
}
});
body{
font-family: sans-serif;
}
.content{
height: 80px;
background: #f3f3f3;
padding: 5px 10px;
box-sizing: border-box;
border-radius: 3px;
}
.btn{
margin-top: 10px;
padding: 10px;
background: #d63333;
display: inline-block;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
.sized{
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content sized">Hello World!</div>
<div class="btn">Show More</div>
here is something that may help you
$(document).ready(function (){
$("#button").on("click", function (){
if ($(".content").height() == 0) {
$(".content").animate(
{height: "80px"});
}
else if ($(".content").height() == 80) {
$(".content").animate({height: "0px"});
}
});
});
I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?
The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
This is a change in Chrome 49 from previous versions. In 49, if I have a draggable element, when I drag it over a vertical scrollbar it causes the horizontal scrollbar to scroll to the right, even when it's not accepted.
$(document).ready(function() {
$("#dragItem").bind("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("Text", 'data');
});
});
#dropContainer {
border: 1px solid black;
overflow-x: auto;
overflow-y: auto;
width: 250px;
height: 250px;
display: inline-block;
}
#bigContent {
width: 1000px;
height: 1000px;
}
#dragSourceContainer {
display: inline-block;
vertical-align: top;
margin-top: 20px;
}
#dragItem {
border: 1px solid black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropContainer">
<div id="bigContent">
</div>
</div>
<div id="dragSourceContainer">
<div id="dragItem" draggable="true">
drag me to the left, over top the vertical scrollbar
</div>
</div>
JS Fiddle:
https://jsfiddle.net/a1qnbkeb/
My question is: how can I stop this behaviour without doing some crazy temporary scroll binding? The reason I ask this is because inside "dropContainer", I do allow things also to be dragged, and if they are dragged "within" drop container, I do want this behaviour.
I just don't want it when they're dragging new things in from outside.
I have two block inside container and under them button. I need, when I click on the button, then the first div slowly moves up and removed. I tried so:
HTML:
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
CSS:
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.move {
display: block
}
jQuery:
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
$(this).remove();
});
});
});
But when I click on the button, then first .block just removed. I need to first move it up. How to fix it?
JSFiddle
You're animating the scrollTop of the element which will not have the effect you want. You can animate the height instead. However there is also the slideUp() function which will do this for you. Try this:
$('.move').click(function() {
$('.block:first-child').slideUp(function() {
$(this).remove();
});
});
Example fiddle
If you have to do it without resizing the block, you can set overflow: hidden on the container, then animate the margin-top of the block itself.
Example fiddle
Add position: relative to element. top property works on positioned elements that is position is anything other than static. position: relative suits in this case.
$(document).ready(function() {
$('.move').click(function() {
$('.block:first-child').animate({
top: '-100px'
}, 1000, function() {
$(this).remove();
});
});
});
.container {
border: 2px solid blue;
display: inline-block
}
.block {
width: 100px;
height: 100px;
background: red;
margin: 5px;
position: relative
}
.move {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<button class="move">Click</button>
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}