I am looking for a plugin which can resize two parallel divs at the same time in the opposite direction.
<div class='one'></div>
<div class='handle'></div>
<div class='two'></div>
Assume the divs are floated next to each other.
When a user drags .handle to the right it should make .two smaller and .one bigger.
I've tried writing a basic plugin but I can't account for all browsers etc.
What I'm really trying to do if anyone is interested is resize multiple CKEditor instances. .one and .two would contain an instance of CKEditor and handle would need to resize them in parallel.
Thanks
You need is the plugin called "jQuery UI resizable".
There is an example of what your are trying to do on the samples page: Synchronous Resize
In my application, I had two divs side by side with same height, so I used jquery UI to make one resizable, and then using the size information from first div to set the position for the second one. This was done in the resize callback function.
<script>
$(function() {
$( ".one" ).resizable({
handles: "e",
resize: function(event, ui) {
$( ".two" ).css("left", $(this).width() );
}
});
});
</script>
Related
I've been using Animate.CSS and basic Jquery to animate elements on and off the screen. The issue is this has been creating a lot of lag due to a background slideshow occurring at the same time as the on screen animations. I've been looking into alternatives to help fix this issue.
I've read about using Opacity and TranslateZ etc to have elements come in and off of the page.
What would be the best way to change my code below to potentially lag less during animation?
//Screen 7 Start
//Highest Planned College
$( "#screen7" ).hide()
$(".buttonsQuestion7").click(function() {
$('#screen7').addClass('animated slideOutUp');
$('#screen7').fadeOut()
$( "#screen8" ).show()
$( "#screen8" ).addClass('animated slideInUp');
});
I had lag problems too with jQuery animations. The problem was lying in having several animations after one another like you have :
$('#screen7').fadeOut();
$( "#screen8" ).show();
What fixed it for me was to call the second animation in the callback of the first one like so:
$('#screen7').effect('fadeOut', {
direction: 'left',
mode: 'hide',
duration: '300',
complete: function(){
$('#screen8').show();
}
});
In this case i am using .effect() from jQuery UI but .fadeOut() has the same complete callback option
http://api.jquery.com/fadeout/
Hope that helps
Trying to make column resizing work with floatThead . I tried using jquery resizable and colResizable plugins but in vain. Does anyone know any example implementation of resizable columns with floatThead?
I am using the following configuration for floatThead.
useAbsolutePositioning: false,
autoReflow: false,
headerCellSelector: "tr:first>th:visible",
zIndex: 10,
debounceResizeMs: 300,
scrollContainer: function ($table) {
return $table.closest('div');
}
Thanks.
I have been struggling with similar problems now for 3 hours and I finaly solved it!
My problem was that the min-width in px on the table set by the floatThead script made it impossible to scale down the parent element with jQuery UI resizable. It was only possible to scale up.
My solution is to disable floatThead on resizing and enable it again after.
Probably you want to add code to store the scroll state.
var resizeId;
$("YourResizableParent").on( "resize", function( event, ui ) {
//Disabeling floatThead removes the min-width on the table
$("#assignment-table").floatThead('destroy');
//Fire function after resizing is finished
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
//Initiate floatThead again
$('#assignment-table').floatThead();
}
I had same problem, and in my case it was all because of simple mistake.
I was attaching resizer to both of my original table and the ghost table created by floatThead plugin. Then I was unable to resize anything.
So my advice is: Always init resizable before you init floatThead, then all works just fine
I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.
I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!
I am trying to have a resizable on a div, but the resizer handle is always contained within the div can I have it where scrollbars end.
/////////// Edit ///////////
I have achieved it with jScrollPane but after using jScroll I am unable to resize horizontally.
demo http://i53.tinypic.com/906rk9.png
It should work, if you put a wrapper around the element to be resized, and make this wrapper resizable.
I was playing around with that idea and this result seems to work:
<script>
$(document).ready(function() {
$(".resizable")
.wrap('<div/>')
.css({'overflow':'hidden'})
.parent()
.css({'display':'inline-block',
'overflow':'hidden',
'height':function(){return $('.resizable',this).height();},
'width': function(){return $('.resizable',this).width();},
'paddingBottom':'12px',
'paddingRight':'12px'
}).resizable()
.find('.resizable')
.css({overflow:'auto',
width:'100%',
height:'100%'});
});
</script>
Test with jsfiddle
jQuery UI team considers scrollable resizable div as a bad design. So it is "won't fix feature:
http://bugs.jqueryui.com/ticket/9119
Workaround as Dr.Molle already stated - resizable wrapper for scrollable div.
Check option http://api.jqueryui.com/resizable/#option-alsoResize
This works for me
$(".responsive-table th").resizable({
handles: "e",
containment: 'document',
alsoResize: ".responsive-table table"
});