I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});
Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.
Related
I have multiple nested JQuery UI accordions - one accordion contains another.
Look at the attached fiddle and the animation (or rather missing animation) after unfolding the nested accordion which is not visible at first. It's hard to explain by words.
How can i achieve a smooth "pushing" animation?
HTML with accordions:
<div id="accordion_broadcasts">
<div id="acc_broadcasts_header">
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (working)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
<div>
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (poorly animated)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
</div>
Javascript:
//Outer accordion
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//Inner accordion
$( ".accordion_descriptions" ).accordion({
collapsible: true,
active: false,
header: ".acc_descriptions_header",
disabled: true,
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//fold outer accordion
$("#unfold_broadcast").click(function(){
if ($("#accordion_broadcasts").accordion( "option", "active") === false){
$( "#accordion_broadcasts" ).accordion({active: 0});
}
else{
$( "#accordion_broadcasts" ).accordion({active: false});
}
$( "#unfold_broadcast" ).remove();
});
//fold inner accordion
$(".broadcast_td2").click(function(){
if ($(this).closest(".accordion_descriptions").accordion( "option", "active") === false){
$(this).closest(".accordion_descriptions").accordion({active: 0});
}
else{
$(this).closest(".accordion_descriptions").accordion({active: false});
}
});
JSFiddle
Note 1: The jsfiddle example is a simplified version of my actual code. The problem remains the same.
Note 2: There are probably some unnecessary refresh calls on these accordions. I've played around with the refresh method until the accordions worked somewhat.
The magic is to add heightStyle: "content" to the properties of the outer accordion.
So its Javascript looks like that:
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
heightStyle: "content",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
See my updated JSFiddle.
I had the same problem, and fixed it this way.
During my research, i found out, that the content height of the outer accordion was zero while it was unfolded. So setting a height to the content div would be a solution, if you now the exact size of the nested content, but heightStyle: "content" does this for you.
I was toying about on jsFiddle and was wondering at all if it was possible to make an object both .draggable and .droppable, for example so that I would be able to make it so that Div.1 could be dropped onto Div.2 and vice versa.
My jQuery
$(function() {
$( "#draggable" ).draggable({revert: true, snap: 'inner'});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
and My HTML
<div id="draggable droppable">16.00 - 17.00</div></br>
<div id="droppable draggable">13.00 - 14.00</div></br>
<div id="draggable droppable">14.00 - 15.00</div></br>
<div id="droppable draggable">09.00 - 10.00</div></br>
<div id="draggable droppable">07.00 - 08.00</div></br>
<div id="droppable draggable">18.00 - 19.00</div></br>
Any ideas anybody? Thanks!
Try using classes instead of id's when using them more then once as id's can only be used once
also you cannot use 2 id's on 1 element.
i correct your code. problem is you use id, id is unique in html page when we use those id in java script. I replace those id with class.
$(function() {
$( ".draggable" ).draggable({revert: true, snap: 'inner'});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
<div class="draggable droppable">16.00 - 17.00</div></br>
<div class="droppable draggable">13.00 - 14.00</div></br>
<div class="draggable droppable">14.00 - 15.00</div></br>
<div class="droppable draggable">09.00 - 10.00</div></br>
<div class="draggable droppable">07.00 - 08.00</div></br>
<div class="droppable draggable">18.00 - 19.00</div></br>
I'm trying to set up a toggle where when one div is toggled to visible, the other will toggle to hidden. Clicking on "trigger one" toggles div "one" and clicking on "trigger two" toggles div "two". I'm basically looking for a way to make sure that only one of the divs is visible at one time (div one and div two should never both be visible, although both can be hidden).
I'm assuming some kind of if statement but my javascript is not great! Any help would be much appreciated.
HTML:
<a id="trigger-one" href="#">Trigger one</a>
<a id="trigger-two" href="#">Trigger two</a>
<div class="one">Here's one</div>
<div class="two">Here's two</div>
jQuery:
$( document ).ready(function() {
$( "#trigger-one" ).click(function() {
$( ".one" ).fadeToggle( "125", "swing" );
return false;
});
});
$( document ).ready(function() {
$( "#trigger-two" ).click(function() {
$( ".two" ).fadeToggle( "125", "swing" );
return false;
});
});
Here's one way:
$("a").click(function () {
$('div').eq($(this).index()).fadeToggle("125", "swing");
$('div:not(":eq('+$(this).index()+')")').fadeOut()
});
jsFiddle example
I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.
When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});