We Keep Coding

How can I stop jQuery UI dialogs from getting squashed?

I have a fairly simple div element which I want to turn into a popup via jQuery UI. The HTML is basically
<div id="login_form">
<table> ... </table>
</div>
Without any jQuery involvement, it renders fairly naturally like this (the green background comes from the div and fits around its contents):
When I make it into a popup with this code:
$(document).ready(function()
{
$("#login_form") .dialog (
{
autoOpen: false
});
$("#login_or_sign_up") .click (function()
{
$("#login_form") .dialog ("open");
});
});
It renders like this.
Yuck.
I'm fairly sure the reason is simply that I haven't included the jQuery UI CSS files. I don't want to include the jQuery UI CSS files.
By inspecting the popup I notice that jQuery has created another div which surrounds the one I provided, and this is styled to have a width of 300px. I expect this is the problem -- jQuery UI has picked a size which is too small and the inner elements are not reducing themselves to fit.
Can I make jQuery dialog-ify my div without shrinking it?
If not, I can probably work around this by adding width:100% styles to the inner elements individually. In that case, is there a general workaround which will not require me to alter any of the inner elements?

.dialog({ width: 'auto' }) works.

AngularJS: Update DOM after hidden panel is shown?

I'm using the AngularJS range slider directive from prajwalkman. The slider works fine while it is visible, but when it is embedded in a hidden options screen using ng-show, the DOM manipulation bits dont work due to the use of "offsetWidth". I am using these sliders in a panel that is by default hidden at screen launch, but still want to initialize the sliders so the pointers are at the correct positions and the colored selection bar is visible when the user toggles the panel.
wholeBar = element.children()[0].offsetWidth;
When the element is hidden offsetWidth is 0 and the calculations dont work correctly. I think what I need to do is show the panel, then run the DOM update code but I havent been able to figure out how to schedule it to run after the current apply/digest cycle completes.
I created a fiddle that is vastly simplified to show what I mean - when the DIV is shown the code works because offsetWidth is not 0, but when it is hidden the selection bar doesn't expand to 50%.

As comments mentioned, a simple solution would be to use a class to just move the slider out of view, effectively 'hiding' it.
Updated fiddle
I accomplished this by making the hide/show button toggle a var
<button ng-init="move=false" ng-click="move=!move">Show/Hide DIV</button>
creating a class to move the element off the screen
.move {
transform: translate(-9999px, 0);
}
and using ng-class to apply the class when we toggle the button
<div ng-class="{move: move}" my-component>
<h3>This is my hidden DIV</h3>
<div style="height:20px; width:100%; background-color:red; zindex=0; ">
<div style="height:35px; width:15px; background-color:blue; zindex=1; position:absolute"></div>
</div>
</div>

jquery resizable changing css

I'm using the jQuery resizable function on some divs on a page I'm working on. I also have some events that trigger an element to not be resizable anymore so I'm calling .resize('destroy');
however it seems like changing an element from resizable to not resizable is changing the css of the element and making it act strange. What css changes take place when an element becomes resizable?

when you apply .resizable()
your element takes position: relative;

When you call the resizable function on an element, you are adding classes to the element eg:
ui-widget-content ui-resizable
The css file which comes with the plugin has got style attributes referring to these new classes which essentially adds a corner image. This is the only thing I can see that changes visually in this jsFiddle.

jquery animating accordion header

I am trying to animate my accordion headers to simulate a ribbon dragged on to the wrapper on hover, and on hover out its dragged out of the wrapper.
Now if you check this first jsFiddle everything works fine, but when I try to animate the width of the h2 the ribbon bit outside of the wrapper disappears for a second and returns when the width animation is done. Check this jsFiddle to see the problem.
Am I doing this wrong? Is there a way to animate both the h2 and the span at the exact same time?

H2 gets an 'overflow:hidden' while animating, that's why your ribbon disappears. It seems that jQuery does this automagically, when animating a width.
What you could do is to use a different animation library like emile, or to animate an emtpy property set and use the step callback of $.fn.animate to set the width.
Or you can modify your css that an overflow hidden on the H2 does not affect you.

JQuery: How to make DIV within Scroll window focused?

I have the following HTML/CSS:
#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}
<div id="scrollpanel">
<div class="listing ref_1">...</div>
<div class="listing ref_2">...</div>
<div class="listing ref_3">...</div>
...
</div>
As you can see, the scrollpanel is a scrollwindow defined to have a height of 100px and width of 200px.
How can I programmatically scroll the scrollpanel scrollbar/window to make a particular DIV focused/viewable, even if that DIV is not not currently viewable?
For example, say I have 10 DIVs (ref_1 to ref_10). Only 3 of the ref_ DIV can be viewable at a time based on the height of scrollpanel window. Now let's say I want to have the scrollbar auto scrolled to DIV ref_7, which is currently not viewable. How do I programmicatly have the scrollwindow scroll to and focus on ref_7?

Use the jQuery ScrollTo plugin, it's as simple as:
$('#scrollpanel').scrollTo('.ref_7');

You can scroll an element into view by using element.scrollIntoView().

I would take a look this plugin.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Depending on what you need there may be a simpler solution without using a plug-in if you just want to scroll.