Search jQuery

jQuery Forum

Screen name:
gianiaz
About Me:
Web developer, Mobile developer, Server-Side programmer
Website:
http://www.ueppy.com/

gianiaz's Profile

59 Posts

179 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Spinner value not updated?
[0Replies]
- 08-Feb-2013 09:52 AM
- Forum: Using jQuery UI
Hi, I'm using spinner widget for the first time.

I have a number of text fields width numerical value.

For every input field I have a spinner.

Everething work fine when I submit the form, but I have a strange behaviour when looking in the source code with firebug:
1. <input type="text" value="12" name="prop[70]" class="size ui-spinner-input" aria-valuemin="0" aria-valuemax="100" aria-valuenow="13" autocomplete="off" role="spinbutton">
A the time I'm looking at my code, I can see in the text field the value "13", but the value attribute is "12".
In the form I want to be able (if a checkbox is selected) to update all the fields with the same value in change event.

This works the first time, then when I try to select all input fileds with value of 13 I can't find anything cause the value attribute is set to 12.

Any suggestion?

Thank you.

[solved] tooltip in a dialog pop up without hovering.
[1Reply]
- 08-Nov-2012 01:07 AM
- Forum: Using jQuery UI
Hi, I'm using the new jquery tooltip to show help instructions for filling up a form. The form is a modal form that I show with ui dialog.

As I wrote in the subject when I open the dialog the first tooltips open without hovering it, and it cover the input.

I've set up a test case here:

http://jsbin.com/ozuset/2/edit

The code is this:

HTML
1. <!DOCTYPE html>
  <html>
  <head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  </head>
  <body>
  <h1>The problem:</h1>
  <p>When I put a helptip in a dialog when I open the dialog the tooltips pop ups without hovering it.
      You can test it opening the dialog with the button below:
  </p>
  
  <div id="dialog">
      <label>
      <a href="#" class="ht" data-help="Some help text here"></a>
        <span><- Hover Here</span>
          <input type="text" /><!DOCTYPE html>
  <html>
  <head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  </head>
  <body>
  <h1>The problem:</h1>
  <p>When I put a helptip in a dialog when I open the dialog the tooltips pop ups without hovering it.
      You can test it opening the dialog with the button below:
  </p>
  
  <div id="dialog">
      <label>
      <a href="#" class="ht" data-help="Some help text here"></a>
        <span><- Hover Here</span>
          <input type="text" />
      </label>
          <br />
      <label>
      <a href="#" class="ht" data-help="help for filling the form"></a>
        <span>Field label</span>
          <input type="text" />
      </label>
  </div>
  
      <a href="#" id="openDialog">Click to open the dialog</a>
  
  </body>
  </html>
CSS
1. #dialog {
  display:none;
  }
  .ht {
  float:left;
  }
  label {
  display:block;
  height:30px;
  
  }
  label span {
  display:block;
  float:left;
  width:140px;
  
  }
Javascript:
1. $(function(){
  $('.ht').click(function(e) {
      e.preventDefault();
  });
  $('.ht').button({'text' :false,
                     'icons': { primary: "ui-icon-help" }
                    });
  $('.ht').tooltip({
              items: "[data-help]",
              content: function() {
                return $(this).attr("data-help");
              }
          });
  $('#openDialog').click(function(e) {
      e.preventDefault();
      $('#dialog').dialog({title: 'My modal form',
                           modal : true,
                           overlay: {    backgroundColor: '#000',
                                     opacity: 0.5},
                           buttons: {'Ok' : function() { $(this).dialog('destroy'); }},
                           close: function(event, ui) {
                                    $(this).dialog('destroy');
                                  },
                           heigth: '450px',
                           width: '600px'
                          });
  
  });
  });
Do you have any suggestion to avoid this behaviour?

Thank you.

leave 50px of space at the bottom of the page
[5Replies]
- 14-May-2012 11:18 AM
- Forum: jQuery Mobile
Hi, what's the best way to position a div in the bottom of the page of a jquery mobile app with ad in it (I want to put a mobile leaderboard 320x50).

Thank you.

Calling .button() on a link that was display none.
[1Reply]
- 20-Jan-2012 02:03 AM
- Forum: Using jQuery UI
Hi, take a look at this code: (http://jsfiddle.net/DTcNf/2/)
1. #btn {
    display:none;
  }
  
  <a id="btn" href="#">Button after .show()</a>
  
  $(function() {
    $('#btn').show();
    $('#btn').button();
  });
The button is messed up. This doesn't appen if I create the button without display:none and then show/().

There's a workaround? I have in a page a link generated by php and I want to be sure that is displayed only after the javascript is fully loaded.

Thank you

[autocomplete] Avoid automatic close of result list
[0Replies]
- 14-Feb-2011 12:24 PM
- Forum: Using jQuery UI
Hi, there's a way to avoid the automatc close of the result list when an item is selected?

Thank you

Apply theme to dynamically added dom elements

[1Reply]

07-Feb-2011 12:57 PM
Forum: jQuery Mobile

Hi, I add to the dom this code:

<div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
 <legend>Layout view:</legend>
 <input type="radio" name="radio-view" id="radio-view-a" value="list" />
 <label for="radio-view-a">List</label>

 <input type="radio" name="radio-view" id="radio-view-b" value="grid" />
 <label for="radio-view-b">Grid</label>
 <input type="radio" name="radio-view" id="radio-view-c" value="gallery" />
 <label for="radio-view-c">Gallery</label>
 </fieldset>
 </div>

And I want to apply the jquerymobile theme like in the bottom in this page:

http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-radiobuttons.html

There's some jquery method to call?

Thank you

Get current page
[15Replies]
- 04-Feb-2011 12:02 PM
- Forum: jQuery Mobile
Hi, I'm trying to create my first app with jquery mobile.

I have an app with 3 div with data-role page, and I want to know in wich page the user is every time the pagehide event is fired.

I've tried to print:

console.log(ui.nextPage.selector);

and I obtain id="myId"

There's another way to know wich div is opened?

Thank you

Dialog unstyled
[5Replies]
- 30-Jan-2011 02:59 PM
- Forum: jQuery Mobile
Hi, I can't understand why dialogs opened from my app are unstyled.

I'm using phonegap with jquery mobile.

I have this index.html with a button that opens another html page as a dialog:
2. <!DOCTYPE HTML>
3. <html>
4. <head>
5. <meta name="viewport" content="width=device-width; user-scalable=no" />
6. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
7. <title>Test app</title>
8. <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0a2.min.css" type="text/css" charset="utf-8" />
9. <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
10. <script src="jquery.mobile/jquery-1.4.4.min.js"></script>
11. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
12. <script type="text/javascript" charset="utf-8" src="main.js"></script>
13. <script src="jquery.mobile/jquery.mobile-1.0a2.min.js"></script>
14. </head>
16. <body>
17. <div data-role="page" id="homepage">
18. <div data-role="header">
19. <h1>Header</h1>
20. </div>
22. <div data-role="content">
23. <a href="info.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
24. </div>
26. <div data-role="footer">
27. <h1>Footer</h1>
28. </div>
29. </div>
30. </body>
31. </html>
And the info.html page contains:
2. <!DOCTYPE HTML>
3. <html>
4. <head>
5. <meta name="viewport" content="width=device-width; user-scalable=no" />
6. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
7. <title>PatenteOk</title>
9. <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0a2.min.css" type="text/css" charset="utf-8" />
10. <link rel="stylesheet" href="pgandjqm-style-override.css" type="text/css" charset="utf-8" />
11. <script src="jquery.mobile/jquery-1.4.4.min.js"></script>
12. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
13. <script type="text/javascript" charset="utf-8" src="main.js"></script>
14. <script src="jquery.mobile/jquery.mobile-1.0a2.min.js"></script>
15. </head>
17. <body>
18. <div data-role="page" id="info">
19. <div data-role="header">
20. <h1>dialog title</h1>
21. </div>
23. Dialog content
24. <a href="index.html" data-role="button">Close</a>
25. <div data-role="footer">
26. <h1>dialog footer</h1>
27. </div>
28. </div>
29. </body>
30. </html>
Please help me understand where's the error.

Thank you

Somethin not clear (for me) about page navigation
[1Reply]
- 06-Jan-2011 01:03 PM
- Forum: jQuery Mobile
I've set up a test case here:

http://lab.gianiaz.com/jqmobile/

Can you explain me why when I click on the "options" button I lost all the jquery-mobile functionality?

Thank you :-)

[jQuery] Jquery Tree View, collapsed tree with opened branch
[0Replies]
- 05-Nov-2009 07:58 AM
- Forum: Using jQuery
Hi, I'm wondering if there is simple way to to render a collapsed tree
with a preopened branch.
:-)
--
gianiaz.net - web solutions
via piedo, 58 - 23020 tresivio (so) - italy
+39 347 7196482

[jQuery] Create a custom rule
[2Replies]
- 19-Oct-2009 08:03 AM
- Forum: Using jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi, I'm trying to create a new validation rule to check if a button has
a class.
I try to explain the scenario.
I have a button that makes an ajax call to check the availability of a
product.
When the app loads the button as class "to_check", when the button is
clicked an ajax call is fired, a server script return the availability
of the product and basing on this answer I change the class of the
button from "to_check" to "ok" or "ko".
Now I want to validate the button to se if the availability is being
checked and is ok, then I wrote this:
<pre>$.validator.addMethod('hasClass', function(value, element) { if($(element).hasClass(value)) {
return true;
} else {
return false
}
}, jQuery.format('Please check the button'));</pre>
Now I want to add this rule to the button with the metadata plugin
inside the class name with this syntax:
<pre id="line175"><span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);"><<span
class="start-tag">input</span><span class="attribute-name"> type</span>=<span
class="attribute-value">"button" </span><span class="attribute-name">name</span>=<span
class="attribute-value">"verifica_disponibilita" </span><span
class="attribute-name">
class</span>=<span class="attribute-value">"to_check {validate:{<b>hasClass:'ok'</b>, messages:{hasClass:'Verifica disponibilità'}}}"
</span><span class="attribute-name">id</span>=<span
class="attribute-value">"verifica_disponibilita" </span><span
class="attribute-name">value</span>=<span class="attribute-value">"Verifica disponibilità" </span><span
class="error"><span class="attribute-name">/</span></span>>
</span></pre>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);">When I submit the form
it returns always false, I tried to log "value" and I get the button
value. </span>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);"></span>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);">How I can get the "ok"
passed via the metadata class? (bold one)</span>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);"></span>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);">Bye </span>
<span id="__firefox-tidy-id"
style="background-color: rgb(221, 221, 255);"></span>
<pre class="moz-signature" cols="72">--
gianiaz.net - web solutions
via piedo, 58 - 23020 tresivio (so) - italy
+39 347 7196482
</pre>
</body>
</html>

[jQuery] new plugin, gzoom v.0.1 magnifier
[8Replies]
- 30-Jun-2009 03:52 AM
- Forum: Using jQuery
Hi, I wrote my first plugin, you can find it here:
http://lab.gianiaz.com/jquery/gzoom/
Please report any bugs or consideration about it here... but be kind...
I'm a newbie :-)
Bye
--
gianiaz.net - web solutions
via piedo, 58 - 23020 tresivio (so) - italy
+39 347 7196482

[jQuery] [validate plugin] How to call a function before the validation start?
[3Replies]
- 23-Dec-2008 05:43 AM
- Forum: Using jQuery
Hi, I'm using the validate plugin, I have a comment form where I want to
leave the possibility to insert an anonymous comment, but I want to
alert the user before the submit.
Then, if I have this code, what I have to do, to add a confirm('Are you
sure')?
I'm looking for a method like "onBeforeSubmit" :-)
Thank you.
if($('#commenti_form').size() > 0) {
$("#commenti_form").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("div#error_container").show();
} else {
$("div#error_container").hide();
}
},
onfocusout: false,
onkeyup: false,
onclick:false,
meta: "validate",
errorClass: "invalid",
errorPlacement: function(error, element) {
$labelToAppendTo = $('label[for='+element[0].id+']');

error.appendTo($("div#error_container")).clone().appendTo($labelToAppendTo);
$('<br />').appendTo($("div#error_container"));
}
});
}
--
gianiaz.net - web solutions
via angelo custode, 10 - 23100 sondrio (so) - italy
+39 347 7196482

[jQuery] Error on validation plugin documentation?
[2Replies]
- 20-Dec-2008 09:51 AM
- Forum: Using jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
Hi, I'm tryng for the first time the validation plugin, I was looking
at the doc here:
<a class="moz-txt-link-freetext" href="http://docs.jquery.com/Plugins/Validation/validate">http://docs.jquery.com/Plugins/Validation/validate</a>
In the "invalidHandler" sample code there is:
<pre><a href="http://docs.jquery.com/Core/%24" title="Core/$">$</a>(".selector").<strong
class="selflink">validate</strong>({
invalidHandler: function(form) {
var errors = validator.numberOfInvalids();
</pre>
This gave me an error (validator is not defined), and reading the
explanation above this code there is:

Callback for custom code when an invalid form is submitted. Called
with a event object as the first argument, and the validator as the
second.

Then I changed the code in :

<pre>
<a href="http://docs.jquery.com/Core/%24" title="Core/$">$</a>(".selector").<strong
class="selflink">validate</strong>({
invalidHandler: function(form, <b>validator</b>) {
var errors = validator.numberOfInvalids();
</pre>
and now it works.

I have an account on the jquery site, but before editing some code I
don't know, I ask here if my suggestion is right...

Bye

<pre class="moz-signature" cols="72">--
gianiaz.net - web solutions
via angelo custode, 10 - 23100 sondrio (so) - italy
+39 347 7196482
</pre>
</body>
</html>

Can't sort LI items that has also draggable/droppable event listener
[2Replies]
- 15-Oct-2008 10:42 PM
- Forum: Using jQuery UI
Hi, I'm tryng to organize a menu using draggable/droppable/sortable:
I've put an example here:
http://lab.gianiaz.com/jquery/sortable-droppable/unsolved.html
What I want to do is to move LI nodes between the four list, and be
able to sort LI nodes inside every UL.
If I comment the code about the draggable/sortable the sort
functionality works.
Any help appreciated.
Bye :-)

Can't retrieve selected Tab
[2Replies]
- 04-Oct-2008 01:56 AM
- Forum: Using jQuery UI
Hi, I'm tryng to retrieve the selected tab, and after reading the doc
I wrote this code:
$(document).ready(function(){
$tabs = $(".tabs").tabs({ select : function(event, ui) {
$('<li>Select Event</li>').appendTo($('#logs'));
$('<li>Tab Selected :'+ui.index+'</li>').appendTo($('#logs'));
}});
$('<li>Tabs Created</li>').appendTo($('#logs'));
$('<li>Selected Tab on load :'+$tabs.data('selected.tabs')+'</
li>').appendTo($('#logs'));
$tabs.bind('tabsselect', function() {
$('<li>Tab Clicked</li>').appendTo($('#logs'));
});
});
and this markup:
<div id="tabs_links">
<ul class="tabs">
<li><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab2</span></a></li>
</ul>
<div id="tab1">
<span>TAB 1</span>
</div>
<div id="tab2">
<span>TAB 2</span>
</div>
</div>
<ul id="logs"></ul>
I've also put this page at this address: http://lab.gianiaz.com/jquery/selected_tab/problem.html
But in my logs when I click on a tab I read:
Tab Selected :undefined
What I'm doing wrong?

[jQuery] Help with ajaxForm in tabs, file uploads fail with strange error
[1Reply]
- 08-Sep-2008 06:08 AM
- Forum: Using jQuery
Hi, I'm going crazy with file upload ans ajaxform when the file field
is in a tab.
When I click on submit button I got this error in firefox console:
form.submit is not a function
(?)()()jquery.form.js (riga 223)
[Break on this error] form.submit();
I've put a sample page here:
http://lab.gianiaz.com/jquery/file_upload_in_tab/index.php
Thank you in advance.

[jQuery] jqueryPngFix and links on IE6
[5Replies]
- 02-Sep-2008 12:28 AM
- Forum: Using jQuery
Hi, I'm using the pngFix plugin to show some png images with
trasparency.
These images are part of a list of menu, and each one is inside on
link tag.
When the png fix is applied I can see trasparency but the linkable
area is restricted to the visible part of the image.
I've putted an example page here:
http://lab.gianiaz.com/jquery/menupngfix/
There's only an image in it with dimensions : 200pxX150px.
If you look the page with firefox and Internet Explorer 7 you will be
able to click on the entire area of 200x150px.
With Internet explorer 6 you'll be able to click only on the black
part of the image.
I know that pngfix replaces the image with a span, and I can with some
selector intercept the click on the parent of the span, but maybe
there's some css fix to make the entire span area clickable.
Any suggestion?
Thank you

[jQuery] Suggestion for the rss about new plugins
[0Replies]
- 29-Aug-2008 10:01 PM
- Forum: Using jQuery
Hi, I'm here for a little suggestion, I write here cause I think my
suggestion would be lost in the flame about the rockstar banner.
I am subscribed to the rss about new plugins, and when I read in
thunderbird the topic about a new plugin the page displayed is the one
about the release notes and there isn't a link to return to the plugin
main page (where there are the others link about it, e.g.
documentation, demo page etc).
Hope this feedback is appreciated :-)

[jQuery] Modifyng a plugin, how to pass and execute a callback function?
[1Reply]
- 21-Aug-2008 01:15 AM
- Forum: Using jQuery
Hi, I'm trying to modify the pngfix plugin to be able to launch a
function after the pngfix has applied, anyone can help me?
I've writed a few lines of code:
function test() {
alert('prot');
}
$(document).pngFix({'blankgif':'images/pngfix/blank.gif', 'funzione':
test});
and inside the plugin If I do an alert of "settings.funzione" I can
see the code of the function "test", but How can I launch It?
Sorry, I'm not very expert on javascript, and I'm looking to other
plugins but I can't found anythin I can understand :P
Thank you

[jQuery] An easy question: Selecting DOM nodes that doesn't have class "active"
[3Replies]
- 19-Aug-2008 01:09 AM
- Forum: Using jQuery
Hi, I have this code:
<ul>
<li>
<ul class="menu">
<li>...</li>
</li>
<li>
<ul class="menu active">
<li>...</li>
</li>
<li>
<ul class="menu">
<li>...</li>
</li>
</ul>
I want to set css property display:none to all the elements that are
not active.
I'm looking at the doc on ":not" selector, I've tried:
$(':not(.active)').css({'display:none'});
But doesn't works... Where I'm doing wrong?
Thank you

How to set Dialog height to auto?
[33Replies]
- 29-Jun-2008 04:41 AM
- Forum: Using jQuery UI
Hi, here there's a test of the dialog plugin.
http://lab.gianiaz.com/jquery/dialog/
I've tried with this init options:
var dOffset = $('#dialogContent').offset();
$('#dialogContent').dialog({
buttons: {
'Okay': function() {
$('#dialogContent').dialog('close');
}
},
modal : true,
height: 'auto'
});
But with height auto the content is displayed also under the
button_pane.
How can I say to the plugin to resize in the correct way?
Another question about dialog, I've seen the "overlay" option, but I
can't understand how to use it, there's an example to look at?
Thank you

UI Shadow Demo page doesn't work
[1Reply]
- 16-Jun-2008 09:35 PM
- Forum: Using jQuery UI
I was reading some random doc on jquery site and I found that this
example doesn't work:
http://dev.jquery.com/view/tags/ui/1.0.1a/demos/ui.shadow.html
Don't know If is a known bug.
Bye :-)

[jQuery] Get the first li clicked
[2Replies]
- 09-Jun-2008 05:03 AM
- Forum: Using jQuery
Hi, maybe this is a stupid question, but I can't find a solution.
I have different nested lists
<ul>
<li id="id_1">
<ul>
<li id="id_10"></li>
</ul>
</li>
</ul>
And this piece of code:
$('ul li').bind('click', function() {
alert(this.id);
});
When I run this code and I click inside the nested li I got 2 alerts
"id_10" and "id_1".
What I can do to block the click event to the first li clicked?
Thank you

[jQuery] Two little question css/jquery related
[2Replies]
- 28-May-2008 08:23 PM
- Forum: Using jQuery
Hi, I have 2 little questions:
1. In a piece of code I

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend