Nabble - jQuery UI Discussion

Usage of CSS Classe ui-widget

2009-12-18T12:57:24Z

Hello,

I'm trying to use the CSS classes from JQuery UI to style my page but
it seems like the out of the box fonts and sizes are very large.

As example, I apply the ui-widget class to a fieldset and then all of
the widgets (input, select, etc) are then changed based upon the ui-
widget class. They add a nice look to the contained controls, but
everything is huge.

Even if I don't use the ui-widget class and just try to use the
datepicker. The datapicker seems to be extremely huge. I realize I
can change these sizes myself, but I was thinking maybe I was missing
something as the default sizes are way big and maybe there is
something else I need to do.

Looking at the JQuery demo page that I downloaded, the font/controls
seem normal size in there but there is this in the body style:

font: 62.5%

which might be reducing everything.

Any help would be great. Thanks.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

jQuery UI dialog and Ruby on Rails searching

2009-12-18T11:51:49Z

Hello all,
I'm looking to perform a search via dialog box and return the results
within the box. I'm currently working in the Ruby on Rails platform.
I can get the dialog box to open and display a search field and
button. My next step is to do the search and return the results to
the open dialog box.

Thank you for any and all help on this.

JohnM

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Link a Tab from another Tab

2009-12-18T11:40:28Z

Hi all,
I'm new into jQuery UI.
I'm trying to add a link in a tab that points to another tab. Here is
an example :

<div id="tabs">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#My_preferences">My Preferences</a></li>
</ul>

<div id="Home">
<p> <a href="LINK TO PREFERENCES TAB">My Preferences</a></
p>
</div>

<div id="My_preferences">
<p>Some preferences</p>
</div>
</div>

how can do that that with jQueryUI ?

Thank you very much !

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Draggable buttons and other input methods?

2009-12-18T10:10:35Z

Hi,

I've been working on a custom UI for an application, and to prevent me
having to deal with every crazy user request for layout changes, made
it customisable.

Works fine for divs etc, I can layout the the various objects that
make up the UI, click my edit button that makes anything that needs to
be draggable, draggable and then save the positions to a database for
the next time the user pulls up that form.

Except ... textareas, buttons and input fields all seem to be a
problem ... wrapping them in a <div> block produces a div that is the
same size as the button, so you still can't get a handle to drag it
with ... I suppose I could pad out the div and click just off the side
of the button to drag, but then it would be tricky to know which
button you were about to pick up when trying to move one button in a
block of buttons ...

has anyone else got dragging to work on buttons? I suspect the button
is stealign focus ... but i don't really know.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Resizable only in one direction?

2009-12-18T09:36:52Z

Check out the handles option:

http://docs.jquery.com/UI/Resizable#option-handles

- Richard

On Fri, Dec 18, 2009 at 12:28 PM, MorningZ <morningz@...> wrote:

I must be going nuts as I have scoured the Demo and Documentation for
the Resizable functionality and cannot for the life of me figure out
how to make it so that the item is only resizable in one direction

I'm currently using this code since I couldn't find the "right" way to
do it

<div id="#div1" class="resizable">
<textarea></textarea>
</div>

<div id="#div2" class="resizable">
<object></object>
</div>

$(".resizable").each(function() {
var id = $(this).attr("id");
$(this).resizable({
alsoResize: "#" + id + " textarea, #" + id + " object",
stop: function(e, ui) {
$(this).width("100%");
var x = $(this).width();
$(this).find("textarea, object").width("" + (x - 26) +
"px");
}
});
})

the -26px thing is to give the enclosing/resizable <div> room for the
handle icon

Hopefully someone can enlighten me

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: form in modal dialog submission problem

2009-12-18T09:35:11Z

Thanks!

Steven Black-2 wrote:

Should that not be...

buttons : {
"submit" : function() { $("#formId").submit(callback);},
"Cancel" : ... }

**--** Steve

On Dec 18, 2:54 am, samRogue <samrogue.t...@gmail.com> wrote:
> Hello, I've set up a search form inside of a jQuery modal dialog but when I
> submit the form I get an error indicating that I left the form empty.
>
> - - - - - - - - - jQuery:
>
> $(function(){
>
> // Dialog
> $('#dialog').dialog({
> modal: true,
> draggable: false,
> resizable: false,
> autoOpen: false,
> width: 600,
> buttons: {
> "Submit": function() {
> document.advSearch.submit();
> },
> "Cancel": function() {
> $(this).dialog("close");
> }
> }
> });
>
> // Dialog Link
> $('#dialog_link').click(function(){
> $('#dialog').dialog('open');
> return false;
> });
>
> });
>
> What do I need to do to fix this?
> --
> View this message in context:http://old.nabble.com/form-in-modal-dialog-submission-problem-tp26840...
> Sent from the jQuery UI Discussion mailing list archive at Nabble.com.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com.
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Jquery UI tabs jumping with Rotate

2009-12-18T09:33:44Z

Hi,

Can anyone help me out with JQ UI Tabs. i am having same problem that
they are jumping the page to the top

Please help me out.

Thanks

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Resizable only in one direction?

2009-12-18T09:28:56Z

I must be going nuts as I have scoured the Demo and Documentation for
the Resizable functionality and cannot for the life of me figure out
how to make it so that the item is only resizable in one direction

I'm currently using this code since I couldn't find the "right" way to
do it

<div id="#div1" class="resizable">
<textarea></textarea>
</div>

<div id="#div2" class="resizable">
<object></object>
</div>

$(".resizable").each(function() {
var id = $(this).attr("id");
$(this).resizable({
alsoResize: "#" + id + " textarea, #" + id + " object",
stop: function(e, ui) {
$(this).width("100%");
var x = $(this).width();
$(this).find("textarea, object").width("" + (x - 26) +
"px");
}
});
})

the -26px thing is to give the enclosing/resizable <div> room for the
handle icon

Hopefully someone can enlighten me

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Inside Forms

2009-12-18T08:47:03Z

Thnks Steve, in others browsers work fine,but IE7 and 8 it doesn't
work, I use jQuery.

On 17 dic, 17:16, Steven Black <ste...@...> wrote:

> Please clarify: does this work in another browser, or have you only
> tried it in IE 7?
>
> First thing I would suggest is try loading your jQueryUI Javascript
> earlier. Try and isolate it so it's just jQuery and jQueryUI. It's
> hard to tell here... maybe there is a JS error in cmxforms.js? Who
> knows?
>
> **--** Steve
>
> On Dec 17, 6:02 pm, faby <faby...@...> wrote:> Hi, I have a register form inside of the accordion, it doesn't work
> > on IE7, why? this is my code:
>
> > <html>
> > <head>
> > <link type="text/css" href="js/development-bundle/themes/base/
> > ui.all.css" rel="stylesheet" />
> > <link type="text/css" href="js/development-bundle/demos/demos.css"
> > rel="stylesheet">
> > <script src="js/jquery.js" type="text/javascript"></script>
> > <script src="js/jquery.validate.js" type="text/javascript"></script>
> > <script src="js/cmxforms.js" type="text/javascript"></script>
>
> > <script type="text/javascript" src="js/development-bundle/ui/
> > ui.core.js"></script>
> > <script type="text/javascript" src="js/development-bundle/ui/
> > ui.accordion.js"></script>
> > <script type="text/javascript">
>
> > $.validator.setDefaults({
> > //submitHandler: function() { alert("submitted!"); }
>
> > });
>
> > $().ready(function() {
>
> > // validate the comment form when it is submitted
> > $("#commentForm").validate();
>
> > // validate signup form on keyup and submit
> > $("#signupForm").validate({
> > rules: {
> > nombre: "required",
> > lastname: "required",
> > username: {
> > required: true,
> > minlength: 4
> > },
> > pass: {
> > required: true,
> > minlength: 5
> > },
> > confirm_pass: {
> > required: true,
> > minlength: 5,
> > equalTo: "#pass"
> > },
> > correo: {
> > required: true,
> > email: true
> > },
> > topic: {
> > required: "#newsletter:checked",
> > minlength: 2
> > },
> > agree: "required"
> > },
> > messages: {
> > nombre: "Introduce un nombre",
> > //lastname: "Please enter your lastname",
> > username: {
> > required: "Introduce un alias",
> > minlength: "El alias debe contener mínimo 4 caracteres"
> > },
> > pass: {
> > required: "Introduce una contraseña",
> > minlength: "La contraseña debe contener al menos 5 caracteres"
> > },
> > confirm_pass: {
> > required: "Introduce una contraseña",
> > minlength: "La contraseña debe contener al menos 5 caracteres",
> > equalTo: "La contraseña debe ser igual a la anterior"
> > },
> > correo: "Introduce un email valido",
> > agree: "Please accept our policy"
> > }
> > });
>
> > // propose username by combining first- and lastname
> > /*$("#username").focus(function() {
> > var firstname = $("#firstname").val();
> > var lastname = $("#lastname").val();
> > if(firstname && lastname && !this.value) {
> > this.value = firstname + "." + lastname;
> > }
> > });
>
> > //code to hide topic selection, disable for demo
> > var newsletter = $("#newsletter");
> > // newsletter topics are optional, hide at first
> > var inital = newsletter.is(":checked");
> > var topics = $("#newsletter_topics")[inital ? "removeClass" :
> > "addClass"]("gray");
> > var topicInputs = topics.find("input").attr("disabled", !inital);
> > // show when newsletter is checked
> > newsletter.click(function() {
> > topics[this.checked ? "removeClass" : "addClass"]("gray");
> > topicInputs.attr("disabled", !this.checked);
> > });*/
>
> > });
>
> > $(function() {
> > $("#accordion").accordion({
> > autoHeight: false
> > });
> > });
> > </script>
>
> > <style type="text/css">
> > #commentForm { width: 500px; }
> > #commentForm label { width: 250px; }
> > #commentForm label.error, #commentForm input.submit { margin-left:
> > 253px; }
> > #signupForm { width: 500px; }
> > #signupForm label.error {
> > margin-left: 10px;
> > width: auto;
> > display: inline;}
>
> > #newsletter_topics label.error {
> > display: none;
> > margin-left: 103px;}
>
> > </style>
>
> > </head>
>
> > <body>
> > <div class="demo">
> > <div id="accordion">
> > <h3><a href="#">Login</a></h3>
> > <div>
> > <form>
> > <table><tr><td>Usuario(Email)</td><td><input type="text"></td></tr>
> > </table>
> > </form>
> > </div>
>
> > <h3><a href="#">Registro</a></h3>
>
> > <div>
> > <form class="cmxform" id="signupForm" action="val_reg.php"
> > method="post" enctype="multipart/form-data">
>
> > <table border="0" cellspacing="4" cellpadding="0">
> > <tr>
> > <td align="right"><span class="a1 Estilo1">Email:</span></td>
> > <td><input name="correo" type="text" id="correo" size="20"
> > maxlength="150" /></td>
> > </tr>
> > <tr>
> > <td align="right"><span class="a1 Estilo1">Contraseña:</
> > span></td>
> > <td><input name="pass" type="password" id="pass" size="10"
> > maxlength="50" /></td>
> > </tr>
> > <tr>
> > <td align="right">Confirma la contraseña: </td>
> > <td><input name="confirm_pass" type="password" id="confirm_pass"
> > size="10" maxlength="50" /></td>
> > </tr>
> > <tr>
> > <td align="right"> </td>
> > <td> </td>
> > </tr>
> > <tr>
> > <td align="right"> </td>
> > <td> </td>
> > </tr>
> > <tr>
> > <td align="right" class="a1 Estilo1">Nombre completo:</td>
> > <td><input name="nombre" type="text" id="nombre" size="20"
> > maxlength="150" /></td>
> > </tr>
>
> > <tr>
> > <td align="right"><span class="a1 Estilo1">Alias:</span></td>
> > <td><input name="username" type="text" id="username" size="10"
> > maxlength="50" /></td>
> > </tr>
> > <tr>
> > <td align="right"><span class="a1 Estilo1">Imagen:</span></td>
> > <td><input name="userfile" type="file" id="pic1" size="20"
> > maxlength="150" /></td>
> > </tr>
>
> > <tr>
> > <td align="right"><span class="a1 Estilo1">Fecha de nacimiento: </
> > span></td>
> > <td><table>
> > <tr>
> > <td class="a1 Estilo1"><select name="d" id="d" type="text"
> > maxlength="2" class="a11" >

> > </select></td>
> > <td class="a1 Estilo1"><select name="m" id="m" type="text"
> > maxlength="2" class="a11">
> >
> > </select></td>
> > <td class="a1 Estilo1"><select name="a" id="a" type="text"
> > maxlength="2" class="a11" >
> > <option value="">aaaa</option>
> >
> > <option value="1977">1977</option>
> >
> > <option value="1910">1910</option>
> > </select></td>
> > <td class="a1 Estilo1">(dd-mm-aaaa) </td>
> > </tr>
> > </table></td>
> > </tr>
> > <tr>
> > <td align="right"> </td>
> > <td><table>
> > <tr>
> > <td class="a1 Estilo1"><input type="radio" name="s" value="H"
> > class="a11" />
> > Hombre</td>
> > <td class="a1 Estilo1"><input type="radio" name="s" value="M"
> > class="a11" />
> > Mujer</td>
> > </tr>
> > </table></td>
> > </tr>
> > <tr>
> > <td align="right"><span class="a1 Estilo1">País:</span></
> > td>
> > <td><input name="pais" type="text" id="pais" size="20"
> > maxlength="150" /></td>
> > </tr>
> > <tr>
> > <td align="right"> </td>
> > <td align="right"><input name="Submit" type="submit"
> > value="registrar" /></td>
> > </tr>
> > </table>
> > </form>
>
> > </div>
> > </div>
> > </div>
>
> > </body></html>

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

progress bar acting really wierd

2009-12-18T08:04:45Z

hi,

So, I have a asp.net page with a jquery ui progress bar. It shows when
I run the page from visual studio on my computer. However, when I send
the files to the server, the same page, the progress bar just doesn't
show! In other words, the progress bar is not there on the page? And
worst, this line of code in the body doesn't run?!

function LoadJobClient() {
alert($get("JobID").value);
alert($("#container").progressbar('value'));
}

On my computer both alerts popup, but when I run it on the server, the
second alert doesn't show!? Any idea what could cause such a vague
problem?

My aspx page inherits from a Master page, this above script, and 3
other references to the jqueryui libraries is in one of the content
controls.

Thanks
Gideon

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

How do I collapse a tab on an link click?

2009-12-18T07:24:55Z

I have been searching around and can't seem to find anything on this.
What I have right now is this...

$('#close1').click(function() { // bind click event to link
$tabs.tabs('select', 1);
return false;
});

and collapsible =true.
I don't see anything about a toggle event.

Any help appreciated.

Derek

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Tabs within AJAX-created pages

2009-12-18T06:42:36Z

I have a page that is basically an empty div at load; pulls multiple
screens into a hidden buffer via AJAX, and then swaps buffered content
in and out of the div as user navigates through the article. Tabs that
work perfectly as standalone pages fail in this environment - I see
the url changing in response to clicks on the tabs, but the action
doesn't hit the target - the tabs don't change, and the content
doesn't change. Anyone else encounter this issue?

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: GreaseMonkey & jQueryUI

2009-12-18T06:23:26Z

This is probably a cross-window problem. The UI scripts run in a
different context than the actual page, and we don't currently set the
context for new elements to the document that the main element is
from. For example, when creating a slider handle, we create it in the
document the script is running in, not the document the container
lives in. We're aware of the problem and hope to have it fixed in 1.9
or 2.0. In the meantime, if you have time to track down specific
problem areas and file patches, that would be great. You can create
tickets at http://dev.jqueryui.com/newticket (requires registration).

On Dec 17, 10:54 am, Klaus <dott.pero...@...> wrote:

> I'm trying to inject through GreaseMonkey a script supposed to show a
> slider component.
> The code is (after including the right css and the @require lines for
> jQuery and jQueryUI) :
>
> $("<div id='container'><div class='slider'></div></
> div>").appendTo("body");
> $(".slider").slider();
>
> But this throws an error:
> "Component is not available" ns_result:0x80040111
> (NS_ERROR_NOT_AVAILABLE)
>
> Any idea??

Re: form in modal dialog submission problem

2009-12-18T05:33:04Z

Should that not be...

buttons : {
"submit" : function() { $("#formId").submit(callback);},
"Cancel" : ... }

**--** Steve

On Dec 18, 2:54 am, samRogue <samrogue.t...@...> wrote:

> Hello, I've set up a search form inside of a jQuery modal dialog but when I
> submit the form I get an error indicating that I left the form empty.
>
> - - - - - - - - - jQuery:
>
> $(function(){
>
> // Dialog
> $('#dialog').dialog({
> modal: true,
> draggable: false,
> resizable: false,
> autoOpen: false,
> width: 600,
> buttons: {
> "Submit": function() {
> document.advSearch.submit();
> },
> "Cancel": function() {
> $(this).dialog("close");
> }
> }
> });
>
> // Dialog Link
> $('#dialog_link').click(function(){
> $('#dialog').dialog('open');
> return false;
> });
>
> });
>
> What do I need to do to fix this?
> --
> View this message in context:http://old.nabble.com/form-in-modal-dialog-submission-problem-tp26840...
> Sent from the jQuery UI Discussion mailing list archive at Nabble.com.

Re: Re: Datepicker initialization

2009-12-18T05:23:25Z

I see your point. Please create a ticket here:

http://dev.jqueryui.com/newticket (note: requires registration)

Thanks.

- Richard

On Fri, Dec 18, 2009 at 8:19 AM, Chrazy <cwolgast@...> wrote:

Exactly my point. I don't see why it shouldn't be display: none from
start since that's what it's getting when it has been used since it
can be "glitchy". Unfortunately I can't easilly provide you with a
demo (not a case of not having a host, just a lot of code) but I can
if you absolutely must see it for yourself.

On 18 Dec, 13:53, "Richard D. Worth" <rdwo...@...> wrote:
> It's not hidden display:none or visibility:hidden. It's hidden off-screen by
> the ui-helper-hidden-accessible class.
>
> - Richard
>

> On Fri, Dec 18, 2009 at 4:56 AM, Chrazy <cwolg...@...> wrote:
> > You can see it on the official demo pages -->
> >http://jqueryui.com/demos/datepicker/
> > If you look at the bottom of the body (I use Firebug) you can see the
> > ui-datepicker-div there and that it's not in fact hidden. In most
> > cases (I didn't notice it until just recently) this won't be an issue
> > at all since you can't normally see it but I stumbled upon it in a
> > weird 100% height layout. It the whole dialog isn't showing but
> > padding (or margin) was, causing a scrollbar to appear where it
> > shouldn't. It was easy to fix by hiding the div after init but it
> > should seem like this would be the default behaviour. After you click
> > the input and then close the dialog it will be hidden, just like it
> > should be from start.
>
> > On 17 Dec, 11:30, "Richard D. Worth" <rdwo...@...> wrote:
> > > Can you post a live sample page showing this? If you don't have a place
> > to
> > > host one, use jsbin.com:
>
> > >http://jsbin.com/
>
> > > Thanks.
>
> > > - Richard
>
> > > On Tue, Dec 15, 2009 at 6:00 AM, Chrazy <cwolg...@...> wrote:
> > > > Posted the same thing in the datepicker plugin on pbworks but it was
> > > > evidently the wrong place for it.
>
> > > > I noticed that when you the datepicker is initialized the first time
> > > > the ui-datepicker-div isn't hidden which sometimes can cause a layout
> > > > glitch. When you've opened up the dialog the first time and closed it
> > > > the div will be hidden, like imo it should be from start. It's not
> > > > hard to hide it manually yourself but this feels like a bug.
>
> > > > --
>
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "jQuery UI" group.
> > > > To post to this group, send email to jquery-ui@....
> > > > To unsubscribe from this group, send email to
> > > > jquery-ui%2Bunsubscribe@...<jquery-ui%252Bunsubscribe@...>

> > <jquery-ui%252Bunsubscribe@...<jquery-ui%25252Bunsubscribe@...>

>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/jquery-ui?hl=en.
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to
> > jquery-ui%2Bunsubscribe@...<jquery-ui%252Bunsubscribe@...>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/jquery-ui?hl=en.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Remove Tab with confirmation dialog?

2009-12-18T05:21:43Z

Since you must actively call .tabs("remove", index), can you not wrap
this in a conditional that would invoke a dialog and trap its return
value?

In other words, no, there is no built-in pre-hook in tabs' remove
method.

**--** Steve

On Dec 18, 5:59 am, Dirk Wilhelm <dwilh...@...> wrote:
> Hello,
>
> i have a page with some tabs and my users will be able to add and
> remove tabs. Is there a way to implement a confirmation dialog that
> asks the user if he is sure to delete a tab?
>
> Thanks for help,
> Dirk

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Datepicker initialization

2009-12-18T05:19:50Z

Exactly my point. I don't see why it shouldn't be display: none from
start since that's what it's getting when it has been used since it
can be "glitchy". Unfortunately I can't easilly provide you with a
demo (not a case of not having a host, just a lot of code) but I can
if you absolutely must see it for yourself.

On 18 Dec, 13:53, "Richard D. Worth" <rdwo...@...> wrote:

> It's not hidden display:none or visibility:hidden. It's hidden off-screen by
> the ui-helper-hidden-accessible class.
>
> - Richard
>
> On Fri, Dec 18, 2009 at 4:56 AM, Chrazy <cwolg...@...> wrote:
> > You can see it on the official demo pages -->
> >http://jqueryui.com/demos/datepicker/
> > If you look at the bottom of the body (I use Firebug) you can see the
> > ui-datepicker-div there and that it's not in fact hidden. In most
> > cases (I didn't notice it until just recently) this won't be an issue
> > at all since you can't normally see it but I stumbled upon it in a
> > weird 100% height layout. It the whole dialog isn't showing but
> > padding (or margin) was, causing a scrollbar to appear where it
> > shouldn't. It was easy to fix by hiding the div after init but it
> > should seem like this would be the default behaviour. After you click
> > the input and then close the dialog it will be hidden, just like it
> > should be from start.
>
> > On 17 Dec, 11:30, "Richard D. Worth" <rdwo...@...> wrote:
> > > Can you post a live sample page showing this? If you don't have a place
> > to
> > > host one, use jsbin.com:
>
> > >http://jsbin.com/
>
> > > Thanks.
>
> > > - Richard
>
> > > On Tue, Dec 15, 2009 at 6:00 AM, Chrazy <cwolg...@...> wrote:
> > > > Posted the same thing in the datepicker plugin on pbworks but it was
> > > > evidently the wrong place for it.
>
> > > > I noticed that when you the datepicker is initialized the first time
> > > > the ui-datepicker-div isn't hidden which sometimes can cause a layout
> > > > glitch. When you've opened up the dialog the first time and closed it
> > > > the div will be hidden, like imo it should be from start. It's not
> > > > hard to hide it manually yourself but this feels like a bug.
>
> > > > --
>
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "jQuery UI" group.
> > > > To post to this group, send email to jquery-ui@....
> > > > To unsubscribe from this group, send email to
> > > > jquery-ui+unsubscribe@...<jquery-ui%2Bunsubscribe@...>
> > <jquery-ui%2Bunsubscribe@...<jquery-ui%252Bunsubscribe@...>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/jquery-ui?hl=en.
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to
> > jquery-ui+unsubscribe@...<jquery-ui%2Bunsubscribe@...>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/jquery-ui?hl=en.

Re: Accordion question

2009-12-18T05:08:22Z

On Thu, Dec 17, 2009 at 11:57 PM, speedy33417 <speedy33417@...> wrote:

I'm new to jQuery and I have a very basic and easy question.

I'm trying to use the accordion on my website. I've already created the page
and have the layout done.

What I'm trying to do is shown on the demo page: jQuery UI Demo -> Accordion
-> Collapse Content.
I need all my accordions to be collapsible but by default it's set to one
always being expanded.

On the demo page it says that this can be achived by setting the collapsible
option to true.

How do I do that? Is it done in my html code, or the js code, or the css
code? What is the actual script and where do I paste it?

If you want to do it for one accordion, you can do it on init:

$('#accordion').accordion({ collapsible: true, active: false });

demo: http://jsbin.com/ekiro3
source: http://jsbin.com/ekiro3/edit

If you want to change the defaults so all accordions initialize collapsible and without an active section, extend the defaults before init:

$.extend($.ui.accordion.defaults, { collapsible: true, active: false });
$('#accordion1').accordion();
$('#accordion2').accordion();
$('#accordion3').accordion();

- Richard

Re: datepicker event handler

2009-12-18T04:55:38Z

On Fri, Dec 18, 2009 at 1:49 AM, Louis-David Mitterrand <vindex%2Blists-jquery-ui@...> wrote:

On Thu, Dec 17, 2009 at 04:50:31PM -0500, Richard D. Worth wrote:
> What type is inst?

'inst' is the start_date datepicker. That's why I'd like to use directly
this object instead of going through a selector.

jQuery can accept the element directly, in place of the selector:

$(inst).datepicker('getDate');

- Richard

> - Richard
>
> On Thu, Dec 17, 2009 at 8:53 AM,

> <vindex%2Blists-jquery-ui@...<vindex%252Blists-jquery-ui@...>

> > wrote:
>
> > Hi,
> >
> > I have start_date and end_date DatePickers. When selecting a start_date
> > I'd like end_date to be initialized to the same as start_date. So I
> > added this event handler to start_date:
> >
> > onClose: function(dateText, inst) {
> > $("#end_date").datepicker('option', 'defaultDate',
> > $("#start_date").datepicker('getDate'));
> > }
> >
> > which works. But how could I use the passed 'inst' object instead of
> > $("#start_date) ?
> >
> > Thanks,
> >
> > --
> >
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to

> > jquery-ui%2Bunsubscribe@...<jquery-ui%252Bunsubscribe@...>

> > .
> > For more options, visit this group at
> > http://groups.google.com/group/jquery-ui?hl=en.
> >
> >
> >
>
> --
>
> You received this message because you are subscribed to the Google Groups "jQuery UI" group.
> To post to this group, send email to jquery-ui@....
> To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
> For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
>
>

--
http://www.critikart.net

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Accordion question

2009-12-18T04:53:41Z

Why is it not an accordion??? I just need to change one setting in the accordion initiate settings. I even found the code:

//getter
var collapsible = $('.selector').accordion('option', 'collapsible');
//setter
$('.selector').accordion('option', 'collapsible', true);

I just don't know where to put it. Html? JS? Please help!

lightrain wrote:

As you say, your require is not a accordion.

Re: Re: Datepicker initialization

2009-12-18T04:53:17Z

It's not hidden display:none or visibility:hidden. It's hidden off-screen by the ui-helper-hidden-accessible class.

- Richard

On Fri, Dec 18, 2009 at 4:56 AM, Chrazy <cwolgast@...> wrote:

You can see it on the official demo pages --> http://jqueryui.com/demos/datepicker/
If you look at the bottom of the body (I use Firebug) you can see the
ui-datepicker-div there and that it's not in fact hidden. In most
cases (I didn't notice it until just recently) this won't be an issue
at all since you can't normally see it but I stumbled upon it in a
weird 100% height layout. It the whole dialog isn't showing but
padding (or margin) was, causing a scrollbar to appear where it
shouldn't. It was easy to fix by hiding the div after init but it
should seem like this would be the default behaviour. After you click
the input and then close the dialog it will be hidden, just like it
should be from start.

On 17 Dec, 11:30, "Richard D. Worth" <rdwo...@...> wrote:
> Can you post a live sample page showing this? If you don't have a place to
> host one, use jsbin.com:
>
> http://jsbin.com/
>
> Thanks.
>
> - Richard
>

> On Tue, Dec 15, 2009 at 6:00 AM, Chrazy <cwolg...@...> wrote:
> > Posted the same thing in the datepicker plugin on pbworks but it was
> > evidently the wrong place for it.
>
> > I noticed that when you the datepicker is initialized the first time
> > the ui-datepicker-div isn't hidden which sometimes can cause a layout
> > glitch. When you've opened up the dialog the first time and closed it
> > the div will be hidden, like imo it should be from start. It's not
> > hard to hide it manually yourself but this feels like a bug.
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to

> > jquery-ui%2Bunsubscribe@...<jquery-ui%252Bunsubscribe@...>

> > .
> > For more options, visit this group at
> >http://groups.google.com/group/jquery-ui?hl=en.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Remove Tab with confirmation dialog?

2009-12-18T02:59:25Z

Hello,

i have a page with some tabs and my users will be able to add and
remove tabs. Is there a way to implement a confirmation dialog that
asks the user if he is sure to delete a tab?

Thanks for help,
Dirk

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Datepicker initialization

2009-12-18T01:56:06Z

You can see it on the official demo pages --> http://jqueryui.com/demos/datepicker/
If you look at the bottom of the body (I use Firebug) you can see the
ui-datepicker-div there and that it's not in fact hidden. In most
cases (I didn't notice it until just recently) this won't be an issue
at all since you can't normally see it but I stumbled upon it in a
weird 100% height layout. It the whole dialog isn't showing but
padding (or margin) was, causing a scrollbar to appear where it
shouldn't. It was easy to fix by hiding the div after init but it
should seem like this would be the default behaviour. After you click
the input and then close the dialog it will be hidden, just like it
should be from start.

On 17 Dec, 11:30, "Richard D. Worth" <rdwo...@...> wrote:

> Can you post a live sample page showing this? If you don't have a place to
> host one, use jsbin.com:
>
> http://jsbin.com/
>
> Thanks.
>
> - Richard
>
> On Tue, Dec 15, 2009 at 6:00 AM, Chrazy <cwolg...@...> wrote:
> > Posted the same thing in the datepicker plugin on pbworks but it was
> > evidently the wrong place for it.
>
> > I noticed that when you the datepicker is initialized the first time
> > the ui-datepicker-div isn't hidden which sometimes can cause a layout
> > glitch. When you've opened up the dialog the first time and closed it
> > the div will be hidden, like imo it should be from start. It's not
> > hard to hide it manually yourself but this feels like a bug.
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to
> > jquery-ui+unsubscribe@...<jquery-ui%2Bunsubscribe@...>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/jquery-ui?hl=en.

form in modal dialog submission problem

2009-12-17T23:54:14Z

Hello, I've set up a search form inside of a jQuery modal dialog but when I submit the form I get an error indicating that I left the form empty.

- - - - - - - - - jQuery:

$(function(){

// Dialog
$('#dialog').dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 600,
buttons: {
"Submit": function() {
document.advSearch.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});

// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});

});

What do I need to do to fix this?

Re: datepicker event handler

2009-12-17T22:49:04Z

On Thu, Dec 17, 2009 at 04:50:31PM -0500, Richard D. Worth wrote:
> What type is inst?

'inst' is the start_date datepicker. That's why I'd like to use directly
this object instead of going through a selector.

> - Richard
>
> On Thu, Dec 17, 2009 at 8:53 AM,
> <vindex+lists-jquery-ui@...<vindex%2Blists-jquery-ui@...>
> > wrote:
>
> > Hi,
> >
> > I have start_date and end_date DatePickers. When selecting a start_date
> > I'd like end_date to be initialized to the same as start_date. So I
> > added this event handler to start_date:
> >
> > onClose: function(dateText, inst) {
> > $("#end_date").datepicker('option', 'defaultDate',
> > $("#start_date").datepicker('getDate'));
> > }
> >
> > which works. But how could I use the passed 'inst' object instead of
> > $("#start_date) ?
> >
> > Thanks,
> >
> > --
> >
> > You received this message because you are subscribed to the Google Groups
> > "jQuery UI" group.
> > To post to this group, send email to jquery-ui@....
> > To unsubscribe from this group, send email to
> > jquery-ui+unsubscribe@...<jquery-ui%2Bunsubscribe@...>
> > .
> > For more options, visit this group at
> > http://groups.google.com/group/jquery-ui?hl=en.
> >
> >
> >
>
> --
>
> You received this message because you are subscribed to the Google Groups "jQuery UI" group.
> To post to this group, send email to jquery-ui@....
> To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
> For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
>
>

--
http://www.critikart.net

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Re: problem with Tabs unless I set "async: false"

2009-12-17T22:33:58Z

On Thu, Dec 17, 2009 at 1:23 AM, Steven Black <steveb@...> wrote:

> Two suggestions:
<snip>

Many thanks. I'll be looking into this over the next 48 hours.

Bob

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Accordion question

2009-12-17T22:11:04Z

As you say, your require is not a accordion.

2009/12/18 speedy33417 <speedy33417@...>

I'm new to jQuery and I have a very basic and easy question.

I'm trying to use the accordion on my website. I've already created the page
and have the layout done.

What I'm trying to do is shown on the demo page: jQuery UI Demo -> Accordion
-> Collapse Content.
I need all my accordions to be collapsible but by default it's set to one
always being expanded.

On the demo page it says that this can be achived by setting the collapsible
option to true.

How do I do that? Is it done in my html code, or the js code, or the css
code? What is the actual script and where do I paste it?

Thanks so much in advance!!!
--
View this message in context: http://old.nabble.com/Accordion-question-tp26839199s27240p26839199.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Accordion question

2009-12-17T20:57:42Z

I'm new to jQuery and I have a very basic and easy question.

I'm trying to use the accordion on my website. I've already created the page and have the layout done.

What I'm trying to do is shown on the demo page: jQuery UI Demo -> Accordion -> Collapse Content.
I need all my accordions to be collapsible but by default it's set to one always being expanded.

On the demo page it says that this can be achived by setting the collapsible option to true.

How do I do that? Is it done in my html code, or the js code, or the css code? What is the actual script and where do I paste it?

Thanks so much in advance!!!

Re: prompt before closing dialog

2009-12-17T20:31:53Z

Hi,
window.prompt("statements") return type isn't bool. OK == "undefined", Cancel == "null".
In dialog, it will judge the return value with false use option "===", so the dialog is closed.

Code set for option beforeclose:
beforeclose:function(){return window.prompt("sure close?") != null;},

2009/12/17 Obi1 <gurreiro_fabio@...>

Hi, i'm having some trouble because i'm using a dialog witch has a
form in it where someone can change info about their hotel. this
dialog also has 2 buttons one to close and the other to save changes.
what i'm trying to accomplish is - when someone made sany change and
tries to close de dialog without saving he will be prompt if he
really
wants to leave without saving the changes an the dialog only closes
if
person choses 'yes'.

when closing the window clicking the 'close' button i can accomplish
this, but i wanted it also to work when closing dialog using the "x"
button on the top of the dialog.

I allready tried callign the prompt on "close" event and then return
true or false according to the choosen option but the prompt only
shows after dialog is closed;
Tried the same with "beforeclose" event but the prompt doesn't even
show.

any ideas?

Thanks

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: SlickGrid updates!

2009-12-17T15:42:11Z

The SlickGrid source code has been migrated to GitHub:
http://github.com/mleibman/SlickGrid

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Inside Forms

2009-12-17T15:16:59Z

Please clarify: does this work in another browser, or have you only
tried it in IE 7?

First thing I would suggest is try loading your jQueryUI Javascript
earlier. Try and isolate it so it's just jQuery and jQueryUI. It's
hard to tell here... maybe there is a JS error in cmxforms.js? Who
knows?

**--** Steve

On Dec 17, 6:02 pm, faby <faby...@...> wrote:

> Hi, I have a register form inside of the accordion, it doesn't work
> on IE7, why? this is my code:
>
> <html>
> <head>
> <link type="text/css" href="js/development-bundle/themes/base/
> ui.all.css" rel="stylesheet" />
> <link type="text/css" href="js/development-bundle/demos/demos.css"
> rel="stylesheet">
> <script src="js/jquery.js" type="text/javascript"></script>
> <script src="js/jquery.validate.js" type="text/javascript"></script>
> <script src="js/cmxforms.js" type="text/javascript"></script>
>
> <script type="text/javascript" src="js/development-bundle/ui/
> ui.core.js"></script>
> <script type="text/javascript" src="js/development-bundle/ui/
> ui.accordion.js"></script>
> <script type="text/javascript">
>
> $.validator.setDefaults({
> //submitHandler: function() { alert("submitted!"); }
>
> });
>
> $().ready(function() {
>
> // validate the comment form when it is submitted
> $("#commentForm").validate();
>
> // validate signup form on keyup and submit
> $("#signupForm").validate({
> rules: {
> nombre: "required",
> lastname: "required",
> username: {
> required: true,
> minlength: 4
> },
> pass: {
> required: true,
> minlength: 5
> },
> confirm_pass: {
> required: true,
> minlength: 5,
> equalTo: "#pass"
> },
> correo: {
> required: true,
> email: true
> },
> topic: {
> required: "#newsletter:checked",
> minlength: 2
> },
> agree: "required"
> },
> messages: {
> nombre: "Introduce un nombre",
> //lastname: "Please enter your lastname",
> username: {
> required: "Introduce un alias",
> minlength: "El alias debe contener mínimo 4 caracteres"
> },
> pass: {
> required: "Introduce una contraseña",
> minlength: "La contraseña debe contener al menos 5 caracteres"
> },
> confirm_pass: {
> required: "Introduce una contraseña",
> minlength: "La contraseña debe contener al menos 5 caracteres",
> equalTo: "La contraseña debe ser igual a la anterior"
> },
> correo: "Introduce un email valido",
> agree: "Please accept our policy"
> }
> });
>
> // propose username by combining first- and lastname
> /*$("#username").focus(function() {
> var firstname = $("#firstname").val();
> var lastname = $("#lastname").val();
> if(firstname && lastname && !this.value) {
> this.value = firstname + "." + lastname;
> }
> });
>
> //code to hide topic selection, disable for demo
> var newsletter = $("#newsletter");
> // newsletter topics are optional, hide at first
> var inital = newsletter.is(":checked");
> var topics = $("#newsletter_topics")[inital ? "removeClass" :
> "addClass"]("gray");
> var topicInputs = topics.find("input").attr("disabled", !inital);
> // show when newsletter is checked
> newsletter.click(function() {
> topics[this.checked ? "removeClass" : "addClass"]("gray");
> topicInputs.attr("disabled", !this.checked);
> });*/
>
> });
>
> $(function() {
> $("#accordion").accordion({
> autoHeight: false
> });
> });
> </script>
>
> <style type="text/css">
> #commentForm { width: 500px; }
> #commentForm label { width: 250px; }
> #commentForm label.error, #commentForm input.submit { margin-left:
> 253px; }
> #signupForm { width: 500px; }
> #signupForm label.error {
> margin-left: 10px;
> width: auto;
> display: inline;}
>
> #newsletter_topics label.error {
> display: none;
> margin-left: 103px;}
>
> </style>
>
> </head>
>
> <body>
> <div class="demo">
> <div id="accordion">
> <h3><a href="#">Login</a></h3>
> <div>
> <form>
> <table><tr><td>Usuario(Email)</td><td><input type="text"></td></tr>
> </table>
> </form>
> </div>
>
> <h3><a href="#">Registro</a></h3>
>
> <div>
> <form class="cmxform" id="signupForm" action="val_reg.php"
> method="post" enctype="multipart/form-data">
>
> <table border="0" cellspacing="4" cellpadding="0">
> <tr>
> <td align="right"><span class="a1 Estilo1">Email:</span></td>
> <td><input name="correo" type="text" id="correo" size="20"
> maxlength="150" /></td>
> </tr>
> <tr>
> <td align="right"><span class="a1 Estilo1">Contraseña:</
> span></td>
> <td><input name="pass" type="password" id="pass" size="10"
> maxlength="50" /></td>
> </tr>
> <tr>
> <td align="right">Confirma la contraseña: </td>
> <td><input name="confirm_pass" type="password" id="confirm_pass"
> size="10" maxlength="50" /></td>
> </tr>
> <tr>
> <td align="right"> </td>
> <td> </td>
> </tr>
> <tr>
> <td align="right"> </td>
> <td> </td>
> </tr>
> <tr>
> <td align="right" class="a1 Estilo1">Nombre completo:</td>
> <td><input name="nombre" type="text" id="nombre" size="20"
> maxlength="150" /></td>
> </tr>
>
> <tr>
> <td align="right"><span class="a1 Estilo1">Alias:</span></td>
> <td><input name="username" type="text" id="username" size="10"
> maxlength="50" /></td>
> </tr>
> <tr>
> <td align="right"><span class="a1 Estilo1">Imagen:</span></td>
> <td><input name="userfile" type="file" id="pic1" size="20"
> maxlength="150" /></td>
> </tr>
>
> <tr>
> <td align="right"><span class="a1 Estilo1">Fecha de nacimiento: </
> span></td>
> <td><table>
> <tr>
> <td class="a1 Estilo1"><select name="d" id="d" type="text"
> maxlength="2" class="a11" >
> <option value="">dd</option>
> <option value="01">1</option>
> <option value="02">2</option>
> <option value="03">3</option>
> <option value="04">4</option>
> <option value="05">5</option>
> <option value="06">6</option>
> <option value="07">7</option>
> <option value="08">8</option>
> <option value="09">9</option>
> <option value="10">10</option>
> <option value="11">11</option>
> <option value="12">12</option>
> <option value="13">13</option>
> <option value="14">14</option>
> <option value="15">15</option>
> <option value="16">16</option>
> <option value="17">17</option>
> <option value="18">18</option>
> <option value="19">19</option>
> <option value="20">20</option>
> <option value="21">21</option>
> <option value="22">22</option>
> <option value="23">23</option>
> <option value="24">24</option>
> <option value="25">25</option>
> <option value="26">26</option>
> <option value="27">27</option>
> <option value="28">28</option>
> <option value="29">29</option>
> <option value="30">30</option>
> <option value="31">31</option>
> </select></td>
> <td class="a1 Estilo1"><select name="m" id="m" type="text"
> maxlength="2" class="a11">
> <option value="">mm</option>
> <option value="01">1</option>
> <option value="02">2</option>
> <option value="03">3</option>
> <option value="04">4</option>
> <option value="05">5</option>
> <option value="06">6</option>
> <option value="07">7</option>
> <option value="08">8</option>
> <option value="9">9</option>
> <option value="10">10</option>
> <option value="11">11</option>
> <option value="12">12</option>
> </select></td>
> <td class="a1 Estilo1"><select name="a" id="a" type="text"
> maxlength="2" class="a11" >
> <option value="">aaaa</option>
> <option value="1996">1996</option>
> <option value="1995">1995</option>
> <option value="1994">1994</option>
> <option value="1993">1993</option>
> <option value="1992">1992</option>
> <option value="1991">1991</option>
> <option value="1990">1990</option>
> <option value="1989">1989</option>
> <option value="1988">1988</option>
> <option value="1987">1987</option>
> <option value="1986">1986</option>
> <option value="1985">1985</option>
> <option value="1984">1984</option>
> <option value="1983">1983</option>
> <option value="1982">1982</option>
> <option value="1981">1981</option>
> <option value="1980">1980</option>
> <option value="1979">1979</option>
> <option value="1978">1978</option>
> <option value="1977">1977</option>
> <option value="1976">1976</option>
> <option value="1975">1975</option>
> <option value="1974">1974</option>
> <option value="1973">1973</option>
> <option value="1972">1972</option>
> <option value="1971">1971</option>
> <option value="1970">1970</option>
> <option value="1969">1969</option>
> <option value="1968">1968</option>
> <option value="1967">1967</option>
> <option value="1966">1966</option>
> <option value="1965">1965</option>
> <option value="1964">1964</option>
> <option value="1963">1963</option>
> <option value="1962">1962</option>
> <option value="1961">1961</option>
> <option value="1960">1960</option>
> <option value="1959">1959</option>
> <option value="1958">1958</option>
> <option value="1957">1957</option>
> <option value="1956">1956</option>
> <option value="1955">1955</option>
> <option value="1954">1954</option>
> <option value="1953">1953</option>
> <option value="1952">1952</option>
> <option value="1951">1951</option>
> <option value="1950">1950</option>
> <option value="1949">1949</option>
> <option value="1948">1948</option>
> <option value="1947">1947</option>
> <option value="1946">1946</option>
> <option value="1945">1945</option>
> <option value="1944">1944</option>
> <option value="1943">1943</option>
> <option value="1942">1942</option>
> <option value="1941">1941</option>
> <option value="1940">1940</option>
> <option value="1939">1939</option>
> <option value="1938">1938</option>
> <option value="1937">1937</option>
> <option value="1936">1936</option>
> <option value="1935">1935</option>
> <option value="1934">1934</option>
> <option value="1933">1933</option>
> <option value="1932">1932</option>
> <option value="1931">1931</option>
> <option value="1930">1930</option>
> <option value="1929">1929</option>
> <option value="1928">1928</option>
> <option value="1927">1927</option>
> <option value="1926">1926</option>
> <option value="1925">1925</option>
> <option value="1924">1924</option>
> <option value="1923">1923</option>
> <option value="1922">1922</option>
> <option value="1921">1921</option>
> <option value="1920">1920</option>
> <option value="1919">1919</option>
> <option value="1918">1918</option>
> <option value="1917">1917</option>
> <option value="1916">1916</option>
> <option value="1915">1915</option>
> <option value="1914">1914</option>
> <option value="1913">1913</option>
> <option value="1912">1912</option>
> <option value="1911">1911</option>
> <option value="1910">1910</option>
> </select></td>
> <td class="a1 Estilo1">(dd-mm-aaaa) </td>
> </tr>
> </table></td>
> </tr>
> <tr>
> <td align="right"> </td>
> <td><table>
> <tr>
> <td class="a1 Estilo1"><input type="radio" name="s" value="H"
> class="a11" />
> Hombre</td>
> <td class="a1 Estilo1"><input type="radio" name="s" value="M"
> class="a11" />
> Mujer</td>
> </tr>
> </table></td>
> </tr>
> <tr>
> <td align="right"><span class="a1 Estilo1">País:</span></
> td>
> <td><input name="pais" type="text" id="pais" size="20"
> maxlength="150" /></td>
> </tr>
> <tr>
> <td align="right"> </td>
> <td align="right"><input name="Submit" type="submit"
> value="registrar" /></td>
> </tr>
> </table>
> </form>
>
> </div>
> </div>
> </div>
>
> </body></html>

[accordion] Inside Forms

2009-12-17T15:02:37Z

Hi, I have a register form inside of the accordion, it doesn't work
on IE7, why? this is my code:

<html>
<head>
<link type="text/css" href="js/development-bundle/themes/base/
ui.all.css" rel="stylesheet" />
<link type="text/css" href="js/development-bundle/demos/demos.css"
rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>

<script type="text/javascript" src="js/development-bundle/ui/
ui.core.js"></script>
<script type="text/javascript" src="js/development-bundle/ui/
ui.accordion.js"></script>
<script type="text/javascript">

$.validator.setDefaults({
//submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {

// validate the comment form when it is submitted
$("#commentForm").validate();

// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
nombre: "required",
lastname: "required",
username: {
required: true,
minlength: 4
},
pass: {
required: true,
minlength: 5
},
confirm_pass: {
required: true,
minlength: 5,
equalTo: "#pass"
},
correo: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
nombre: "Introduce un nombre",
//lastname: "Please enter your lastname",
username: {
required: "Introduce un alias",
minlength: "El alias debe contener mínimo 4 caracteres"
},
pass: {
required: "Introduce una contraseña",
minlength: "La contraseña debe contener al menos 5 caracteres"
},
confirm_pass: {
required: "Introduce una contraseña",
minlength: "La contraseña debe contener al menos 5 caracteres",
equalTo: "La contraseña debe ser igual a la anterior"
},
correo: "Introduce un email valido",
agree: "Please accept our policy"
}
});

// propose username by combining first- and lastname
/*$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});

//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" :
"addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});*/
});

$(function() {
$("#accordion").accordion({
autoHeight: false
});
});
</script>

<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left:
253px; }
#signupForm { width: 500px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>

</head>

<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Login</a></h3>
<div>
<form>
<table><tr><td>Usuario(Email)</td><td><input type="text"></td></tr>
</table>
</form>
</div>

<h3><a href="#">Registro</a></h3>

<div>
<form class="cmxform" id="signupForm" action="val_reg.php"
method="post" enctype="multipart/form-data">

<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td align="right"><span class="a1 Estilo1">Email:</span></td>
<td><input name="correo" type="text" id="correo" size="20"
maxlength="150" /></td>
</tr>
<tr>
<td align="right"><span class="a1 Estilo1">Contraseña:</
span></td>
<td><input name="pass" type="password" id="pass" size="10"
maxlength="50" /></td>
</tr>
<tr>
<td align="right">Confirma la contraseña: </td>
<td><input name="confirm_pass" type="password" id="confirm_pass"
size="10" maxlength="50" /></td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td align="right" class="a1 Estilo1">Nombre completo:</td>
<td><input name="nombre" type="text" id="nombre" size="20"
maxlength="150" /></td>
</tr>

<tr>
<td align="right"><span class="a1 Estilo1">Alias:</span></td>
<td><input name="username" type="text" id="username" size="10"
maxlength="50" /></td>
</tr>
<tr>
<td align="right"><span class="a1 Estilo1">Imagen:</span></td>
<td><input name="userfile" type="file" id="pic1" size="20"
maxlength="150" /></td>
</tr>

<tr>
<td align="right"><span class="a1 Estilo1">Fecha de nacimiento: </
span></td>
<td><table>
<tr>
<td class="a1 Estilo1"><select name="d" id="d" type="text"
maxlength="2" class="a11" >
<option value="">dd</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></td>
<td class="a1 Estilo1"><select name="m" id="m" type="text"
maxlength="2" class="a11">
<option value="">mm</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
<td class="a1 Estilo1"><select name="a" id="a" type="text"
maxlength="2" class="a11" >
<option value="">aaaa</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
</select></td>
<td class="a1 Estilo1">(dd-mm-aaaa) </td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"> </td>
<td><table>
<tr>
<td class="a1 Estilo1"><input type="radio" name="s" value="H"
class="a11" />
Hombre</td>
<td class="a1 Estilo1"><input type="radio" name="s" value="M"
class="a11" />
Mujer</td>
</tr>
</table></td>
</tr>
<tr>
<td align="right"><span class="a1 Estilo1">País:</span></
td>
<td><input name="pais" type="text" id="pais" size="20"
maxlength="150" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="right"><input name="Submit" type="submit"
value="registrar" /></td>
</tr>
</table>
</form>

</div>
</div>
</div>

</body></html>

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: Accordion - open to item

2009-12-17T14:53:05Z

Ok, for closure here, I got the rest of it. After using activate to
open the section as above, I found I can use the ScrollTo plugin to
scroll to the element I want. Usage for me is like: $
(document.getElementById('anchor2_17').parentNode).scrollTo
( document.getElementById('anchor2_17'));

Now to implement it "for real"...

On Dec 17, 10:37 am, TC <tc_online2...@...> wrote:

> Ah, the index is for the sections -- somehow I thought I'd be able to
> specify the *item* and have the accordion find it. Other questions now
> arise but lemme try to work through them... Thanks.
>
> On Dec 16, 4:14 pm, "Richard D. Worth" <rdwo...@...> wrote:
>
> > Seehttp://docs.jquery.com/UI/Accordion#method-activate
> > "
> > Signature: .accordion( 'activate' , index )
> > Activate a content part of the Accordion programmatically. The index can be
> > a zero-indexed number to match the position of the header to close or a
> > Selector matching an element.
> > "
>
> > This method currently does not accept a selector, only a numeric index.
> > Since you want the 2nd section open, and it's zero-based:
>
> > $('#accordion').accordion('activate', 1 );
>
> > Alternatively, you could initialize the accordion with this section active:
>
> > $("#accordion").accordion({
> > active: 1,
> > collapsible: true
>
> > });
>
> > It seems this option accepts more types than the method, including
> > selectors. Seehttp://docs.jquery.com/UI/Accordion#option-active
>
> > - Richard

Re: close x link

2009-12-17T13:59:45Z

It sounds like you're missing the icons images, which should be in a images directory in the same directory as your theme css file. See here for example:

http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/ui-lightness/jquery-ui.css

references icon image files in

http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/ui-lightness/images/

- Richard

On Thu, Dec 17, 2009 at 2:21 AM, brainee <ashutosh.options4u@...> wrote:

hi everybody, i'm new to jQuery and i'm stuck in a problem.

I'm using a dialog box using jQuery and downloaded a theme using
Themeroller.
The problem is that i cannot see 'x' to close the dialog box.
however when i move my mouse over it, it gets highlighted(only a
square box) and hence it is there.
i've tried to edit ui.theme.css but of no use.

Anybody having the idea to make it visible or put another image,plz
suggest me.
It would be very helpful.

Thanking you in advance

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Re: datepicker event handler

2009-12-17T13:50:31Z

What type is inst?

- Richard

On Thu, Dec 17, 2009 at 8:53 AM, <vindex%2Blists-jquery-ui@...> wrote:

Hi,

I have start_date and end_date DatePickers. When selecting a start_date
I'd like end_date to be initialized to the same as start_date. So I
added this event handler to start_date:

onClose: function(dateText, inst) {
$("#end_date").datepicker('option', 'defaultDate', $("#start_date").datepicker('getDate'));
}

which works. But how could I use the passed 'inst' object instead of
$("#start_date) ?

Thanks,

--

You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@....
To unsubscribe from this group, send email to jquery-ui%2Bunsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.