I want to ask u how to make an iframe resizing when parent div is resizing. I think that I shoud use alsoResize, but i don't know if itll work with frames.
Any help will be appreciated!
You will have to create a javascript function in the onload of the iframe to set the .height and .width of the iframe to that of its parent as far as i'm aware for when it first loads and then on the resize event of your parent element you will have to set it again for further resizing.
Why can't you just have this CSS:
iframe {
width: 100%;
height: 100%;
}
so that it will eat all space left by its container?
$("#DIV").resizable({
start: function () {},
stop: function () {
$("A DIV or Body Tag Inside the IFRAME").height($("#DIV").height());
}
});
I think the same problem has been encountered by other people in stacoverflow previously. Please check out this thread : Resizing IFrame with JQuery UI
Related
I need "user-friendly" rotate, drag and resizable DIV. But, when this DIV is rotated, RESIZE function works very wierd. Not like in image editor. User can not handle resize properly. How to make it ?
jsFiddle Example
HTML :
<div id="blue"></div>
CSS :
#blue {
top: 100px;
left: 100px;
width:200px;
height:200px;
background-color:blue;
-ms-transform: rotate(120deg); /* IE 9 */
-webkit-transform: rotate(120deg); /* Safari */
transform: rotate(120deg);
}
jQuery
$("#blue").resizable({
aspectRatio: false,
handles: 'ne, se, sw, nw'
});
$("#blue").draggable();
Worked on a similar Question: How to get four corners rotate handle for a rotatable div..?
In this, OP wanted to add rotation handles to each corner. But it's a good example of what you're reporting too.
Take a look at: https://jsfiddle.net/Twisty/7zc36sug/
HTML
<div class="box-wrapper">
<div class="box">
</div>
</div>
Wrapping the box helps out for Draggable.
jQuery
$(function() {
// Assign Draggable
$('.box-wrapper').draggable({
cancel: ".ui-rotatable-handle"
});
// Assign Rotatable
$('.box').resizable().rotatable();
});
Resizing when at a rotated angle changes the location of the box, it's width and height, and causes it to move in a sort of weird way. This is why it does not work like it might in some graphics programs.
Since you did not indicate what you would prefer the behaivor to be like, I cannot properly answer your question: User can not handle resize properly. How to make it?
I hope this helps explain the issue.
I have a very simple script that utilises the jquery library and allows me to drag and resize the element with the class "moveabledraggable".
$(".moveabledraggable").draggable({
stop: function(){
alert('dragging stopped');
}
}).resizable({
stop: function(){
alert('resizing stopped');
}
});
It works perfectly, except I want "moveabledraggable" to be fixed on the screen as a user scrolls. It needs to be positioned using "fixed". Dragging the element doesn't alter my hardcoded inline style
position: fixed;
but on resizing the element, jquery ui changes it to
position: relative;
How can I stop this? Don't know if it's possible, but dragging and positioning (which is harder) doesn't change the position from fixed, so maybe it can be done.
Jsfiddle here!
(Jsfiddle doesn't actually work (possibly due to how it uses sub-windows within the viewport), but it can be copy-pasted to a jquery-ui linked local file.)
Ahh don't know why I didn't think of this at first. Just re-append inline css like this:
$(".moveabledraggable").draggable({
stop: function(){
alert('dragging stopped');
}
}).resizable({
stop: function(){
alert('resizing stopped');
$(".moveabledraggable").css("position", "fixed");
}
});
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
I am developing one mobile web application using jQueryMobile alpha3. In that am getting scrollbar in every page even-though the controls are within the screen.
I want scrollbar only when the controls went out of the screen else i have to remove the scrollbar. How do i set this?is there any way to specify?
I had this happening to me too for a time, the problem was with the overflow on certain elements. You can fix it by applying a CSS rule to any element with scroll bars. So, something like this...
.ui-content{
overflow:hidden;
}
try This .
CSS
body, html, div
{
width:100%;
height:3000px;
overflow:hidden;
}
jquery
$("div").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta * 20));
});
Library
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
I am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.
You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.
If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.
Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).
I tried several different things. autoHeight: false by itself did not work. This is what finally worked for me:
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
});
I'm using this in a SharePoint content editor webpart with a fixed width, which added to the height issue when adding content to the accordion widget.
using this combo options works for me, 1.current version of jquery/ui
$( '#x' ).accordion({
autoHeight: false,
clearStyle: true
});
I faced similar problem, for me the following change in CSS worked.
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.
jQuery("#accordion").accordion(
{
autoHeight:false
}
);
Having heightStyle: "content" helped resolve my issue.
Reference: Accordion
I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
For those lazy few who don't want to click, the short answer is:
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
in the accordion's CSS
try this
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion
I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.
.ui-accordion .ui-accordion-content{
height:auto!important;
}
This works for me:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}
I tried
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
but I saw some visual artifacts with first tab. So I fixed the problem this way:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>
Check if the padding for the ui-accordion-content is being overridden.
I experienced the same issue when I had put the following in my css:
.container .ui-widget-content {
padding-right: 3%;
}
I changed it as shown below and the scroll bars were gone!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
I don't have auto-height turned on either.