basically, I want to show a table, and when the user clicks a link, I want the table to slide out to the left and another table to slide in from the right to the position where the original table was.
I've come so far (http://jsfiddle.net/JqkyA/4/):
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
Problem is, while the second table is sliding in, its x-position is correct but it is always displayed below the original table. I don't want that - I want the second table to slide in at the exact same y-position as the original table.
Any ideas on how to achieve this?
EDIT:
To be clear, I would like the new table to slide in on the same y-coordinate as the old table, but I still want the old table to be shown during slide-out. I also would like to have the new table slide in right next to the old one (no 'pause' between the tables as wm.p1us suggested).
Thanks for any help.
I think you should go with a different approach.
Instead of sliding the 2 tables just slide their container using negative margin and then hide the first table using the complete callback.
I also added display: inline-block to both tables.
Something like this:
$(".grids").animate({'margin-left': -110 }, 5000, function () {
$('table.grid-1').hide();
$(this).css("margin-left", 0);
});
See this working demo
$( function() {
$( "a" ).click( function() {
$( "table.grid-1" ).css({'position': 'absolute'});
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
I've forked your JSFiddle
I added
<div class="inner">
as an inner wrapper and floated the tables to the left. animation is done by changing margin-left of the first table.
This will work as you wanted - the first table is still visible when the second one comes in..
Try this,
$( function() {
$( "a" ).click( function() {
if($( "table.grid-1" ).css('display') != 'none')
{
$( "table.grid-1" ).hide();
}
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
Let me know is it usefull?.
Related
I have a bootstrap table with overflow set to auto inside it's container, and a locked first column. A horizontal scroll bar appears to see additional data, but I'd like to add a button too. The visitor would be able to use their mouse, the scrollbar, or the buttons, to navigate horizontally in the table.
How would I go about building this out?
I can get my code working with a div (https://codepen.io/gregbarbosa/pen/axjKbL), but not the table (https://codepen.io/gregbarbosa/pen/eojbrJ). My only guess is that the JS animate doesn't apply to tables?
$("#right-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "+=300px"
},
"slow"
);
});
$("#left-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "-=300px"
},
"slow"
);
});
Target .table-responsive instead of #content.
$("#right-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "+=300px"
},
"slow"
);
});
$("#left-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "-=300px"
},
"slow"
);
});
Here's an updated CodePen.
I have this code.. the problem is that the CSS is not applying in both div's but only in the first one #main-wrapper
I have the same code but this time in a button press and its working, but with the if statement only the single works.. im not sure if the codes is somewhere wrong please help ... i tried to put the script in the end of the body tag but still nothing
if (window.location.href.indexOf("#expand") > -1) {
$( "#main-wrapper" ).animate({ 'width':'984px' }, 'slow');
$( "#sidebar-wrapper" ).animate({ 'display':'none' }, 'slow');
}
You can't animate 'display':'none'.
You could animate the opacity:
$( "#sidebar-wrapper" ).animate({'opacity':0}, 'slow', function(){
$(this).remove();
});
or, as suggested by Me.Name in comments:
$( "#sidebar-wrapper" ).fadeOut('slow');
or use slideUp:
$( "#sidebar-wrapper" ).slideUp();
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
I have accordion is collapsible and sortable.
Look here full code in action http://jsfiddle.net/wvtPw/
And this the JS code I'm using
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size
See this image below is example of collapsed div, see how easy to use and you can see below it easily.
So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this
And when he drop the element just turn back to expanded like normal
I recommend doing the following:
$(function() {
var active = false,
sorting = false;
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true,
activate: function( event, ui){
//this fixes any problems with sorting if panel was open
//remove to see what I am talking about
if(sorting)
$(this).sortable("refresh");
}
})
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
start: function( event, ui ){
//change bool to true
sorting=true;
//find what tab is open, false if none
active = $(this).accordion( "option", "active" );
//possibly change animation here (to make the animation instant if you like)
$(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );
//close tab
$(this).accordion({ active:false });
},
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
//possibly change animation here; { } is default value
$(this).accordion( "option", "animate", { } );
//open previously active panel
$(this).accordion( "option", "active", active );
//change bool to false
sorting=false;
}
});
});
DEMO:
http://jsfiddle.net/m939m/2/
Please let me know if you have any questions! Cheers!
have a look at the documentation for sortable
look at the sortable event start( event, ui ). The logic would then check to see if the item is expanded. if so then close it. after sort expand it again
http://api.jqueryui.com/sortable/#event-start
Add the code below before the stop event on your sortable object.
over: function(event, ui) {
$('#accordion').accordion({active:false});
},
http://jsfiddle.net/wvtPw/8/
While this code works for the collapsing/expanding issue when sorting, the "activate"-function causes an issue regarding opening the first item in the accordion. Opening and closing the first item makes it impossible to reopen. Continuing with the next item, same thing happens. In the end the complete list of items will not be possible to expand.
Since this is more of a UX question, my suggestion is to offer a different UX. I would disable sorting by default and offer a button to toggle sorting on/off. When sorting is enabled, collapse all the fields and disable the accordion.
$( '.accordion-toggle' ).on('click', function() {
$( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
.accordion({
header: "> div > h3",
collapsible: true
});
$( "#accordion.sorting" )
.sortable({
handle: "h3",
placeholder: "ui-state-highlight",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
EDIT: (2018-06-18)
I missed that this is jQuery UI. You probably want to use the enable/ disable features.
$( '.accordion-toggle' ).on( 'click', function() {
if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
$( '#accordion' ).removeClass( 'sorting' )
.accordion( "enable" )
.sortable( "disable" );
} else {
$( '#accordion' ).addClass( 'sorting' )
.sortable( "enable" )
.accordion( "disable" )
I build a project something like "trip planner" but I need to add on my cloned div-object an verticl line on left border with css:
.line
{ width:5px, height:200px; background:red;}
so to be something like this (you can see on hover an vertical line)
I was try to do this with code:
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({
containment:"#table",
snap: "#drop_here td"
})
// 3 make the clone resizable
.resizable());
//HERE IS MY PROBLEM IN CODE
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});
}
});
});
but dont work!
DEMO
The first problem is that your css has a , insted of a ;
.line {
display: none;
width: 5px;
height: 200px;
background: red;
}
Then for the jquery modify like this:
$('.draggable').hover(function(){
$(this).find('.line').show();
}, function() {
$(this).find('.line').hide();
});
In your markup place a .line (only one) just after every .draggable, but not on hover or it will append it every time you hover the .draggable creating tons of .lines
JSfiddle : http://jsfiddle.net/steo/JB7jN/1/
You have to bind the .hover() in the document ready like this:
$(document).ready(function(){
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).children('.line').remove();
});
});
Your "hover out" handler removes the class from $(this) -- not from the appended child.
It's probably bad practice to dynamically create elements on hover, that are never deleted & will presumably gradually fill the document with garbage.
if you only want to add the line to the clone add the start property to the draggable options like this:
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7,
start: function(event, ui){
var clone = $(ui.helper);
if (clone.children('div.line').length == 0)
clone.append("<div class='line'></div>");
}
});
Tested this and it works like a charm.. Dont forget to remove this part:
$(".draggable").hover(function() {
$(this).append("<div class='line'></div>");
}, function() {
$(this).removeClass("line");
});