Develop Reference

Adding buttons next to the Close button in dialog title bar

I have added two customized buttons on my dialog box, but they are currently just in the middle. How can i move these buttons next to the close button on the title bar, without covering or touching the close button, and also without using anyCSS?
My fiddle: http://jsfiddle.net/ZSk6L/928/

If you are alright using css within your jQuery then you could add a class to the minus button:
$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() {
$('#resultId').parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 90
}, 50);
});
And then set the margin
$(".minusButton").css("margin-left", "105px");

If you are happy to use inline styling in the jquery, this gets you what you want (without floats or covering the close button - simply set a left margin to the first custom button:
$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {
Fiddle

There is absolutely no way to do this without at least using inline CSS, written in through jQuery.
Your best bet is just using a float and a fixed small margin on the + button so it doesn't overlap the closing button. Be aware, that any answer written here is probably going to have a problem when the user resizes the dialog window a lot, and the only way to prevent that is to give the whole dialog window a min-width property.
Here is what you should do:
$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...
And for the other button:
$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...
You can see the working Fiddle Here

JScrollPane not working properly with hidden content

I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).

Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin

I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}

Correct way to reset jScrollPane viewport position

I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.

Page shifts up when overflow:hidden css property is set to <html> tag only in Firefox

My webpage height is quite long, i have a requirement like when i have a modal dialog in the page, page scroll bar has to be disabled. Since the modal dialog has a scroll bar in it once the modal dialog scroll bar comes to an end, page scroll bar will be activated. To fix this i have added this code to JQuery modal dialog method.
open: function () {
$("html").css("overflow", "hidden");
return false;
},
close: function () {
$("html").css("overflow", "visible");
return false;
}
Now i'm in the bottom of the page on opening the modal dialog the page shifted to top only in Firefox browser, its because of overflow:hidden property added to the tag, due to this i can't see the modal dialog opened, which is opened in the bottom of the page.
But this code works fine(Page will not shift up) as expected in all other browsers expect Firefox.
Could anyone please suggest me to fix any other way to disable the page scroll bar or how to stop page to shift up only in Firefox.
Thanks
Gopi

I'd personally attach the css property to your element rather than the one, as there is a chance that the property is being inherited. Just a thought.

It's hard to tell without seeing the page, but this could be caused by the reflow after the overflow set being interrupted. If you add a reflow flush (e.g. document.body.offsetWidth) right after the css() calls, does that help?

HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)

Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}

move the element off the page to the left, moving it off to the right increases the width of the page

You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/

Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.