JQuery Dialog Widget Problems in IE Compatibility Mode
I will preface my post with the caveat that I am a brand-new jQuery user. I am an experienced programmer -- started programming on IBM System/34 in 1985. I have only been doing web-development for the past 5 years -- using the IBM System i as the http server; writing applications for K-12 schools (attendance, grading, etc.). I have fallen in love with jQuery -- it's the closest thing to poetry I have ever come across in the programming world. However, I still have A LOT to learn about it. Anyway
Datepicker in a dialog box month/year dropdown is not working in fire fox
I am not sure, why the datepicker in a dialog box is not able to open the month and year drop down, showing only the default selected once and unable to select the other month/year. this is only in Mozilla Fire Fox and in chrome and IE this is working fine.
creating a jqueryui selectable causes Uncaught TypeError: Object [object Object] has no method 'selectable'
I have a ul which I turn into a selectable using: $(".ul01").selectable({ filter: "li", selected: this.li01Selected }); on 'selected', I call a function that creates another selectable: this.li01Selected = function(event, ui){ $(".ul02").selectable({ ... The problem happens when $(".ul02").selectable() is called: "Uncaught TypeError: Object [object Object] has no method 'selectable'" I have tried var x = jQuery.noConflict(); x(".ul02").selectable() but I get the same error. I have checked that
Hi and Hello...Newbie here in Jquery UI
I found this in jquery site. This is the code <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Dialog - Modal form</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> body { font-size: 62.5%; } label, input { display:block; } input.text
About using a button in a JQuery-Ui dialog
I have added a button called Confirm to this JQuery-UI dialog called dlgPassage by adding it in this way <a href="#" id="btnConfirm">Confirm</a>. It's also possible to add a button in this way I wonder which of these two ways to add abutton is the prefered way ? $('#dlgPassage ').dialog({ ... ... ... buttons: { "Confirm": function () { Click_btnConfirm() } } }); <div id="dlgPassage" title="Passage" style="display:none"> <table> <tr><td>Opening</td></tr> <tr> <td>
May i know how to popup a form when i double click on the image?
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>abcd</title> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> <link href="abcd.css" rel="stylesheet" type="text/css"> <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.9.1.js"></script>
Cannot see the arrow for Previous month and Next Month in Date Picker
Dear all, I am using Date Picker. I can selecte date from the Date Picker. But I cannot see the arrow for the Previous Month and Next Month in Date Picker Top display. I try to change the follows in jquery-ui-1.10.3.custom.css . But it not works. So may I know the step to let the picker show the arrow for previous month and next month. Thanks .ui-icon-circle-triangle-e {background: url(images/east.png) 50% 50% repeat-x; background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position:
Latvian initialisation for the jQuery UI date picker plugin
Made some translation to Latvian language, hope it will be useful! ;) /* Latvian initialisation for the jQuery UI date picker plugin. */ /* Written by Alexander Zagorsky (alexandersolo777@gmail.com) */ jQuery(function($){ $.datepicker.regional['lv'] = { closeText: 'Pabeigts', prevText: 'Iepr.', nextText: 'Nāk.', currentText: 'šodien', monthNames: ['Janvāris','Februāris','Marts','Aprīlis','Maijs','Jūnijs', 'Jūlijs','Augusts','Septembris','Oktobris','Novembris','Decembris'],
ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work
so at first I had a page I was loading with an ajax call. this page does an ajax post. I discovered this issue when do the post when the page returned the date pickers wouldn't change the dates in the text boxes, I had a lot of options setting on both the modal and the date pickers. in an attempt to isolate the problem. I strip out all the configurations, also I had read some thing about dialog doing funny things when they are not living on the base page, so I moved the modal to the base page. user
Ui modal - loading outside content
I am using the Ui modal popup on a page to edit a user profile - when they click the "edit" button it loads another html page into the modal div, this page has some of it's own javascript and jquery. Is this ok or is there another way to accomplish this to go along with conventions? Thanks for your help!
Resizeable detect the resize direction.
Hi, I need to know how to determine the direction the resize is occurring. if it's going in the x direction. meaning west and east and if it is going to the North and South direction to detect the directions. I have 4 custom images. I have them inside a div and when this div resizes I need to be able to keep the borders to be the same thickness and cover the div. I wan to keep it like a border around the div. So, if the div resizes currently the borders don't grow or resize with the div and yes
about dialog question
Click on the '123' dialog box ，then Click on the '456' dialog box ,why '123' dialog box iframe will Automatic refresh;how to do it ? code: $('<iframe frameborder="0" src="http://www.baidu.com/"/>').dialog( { title:"456", autoOpen: true, height: 700, position: 'center', width: 700 }).width(700).height(350); $( "#dialoga" ).dialog({ title:"123", maxHeight: 600 });
On a click of a button i should open one diallog form i am doing this in asp.net and jquery please do help me
Below is my code <script type="text/javascript"> $("#BtnMakeallotment") .button() .click(function () { $("#dialog-form").dialog("open"); }); </script> <form> <fieldset> <asp:GridView ID="GridAllotment" runat="server" AutoGenerateColumns="false"></asp:GridView> </fieldset> </form> But i am not getting dialog form dont know what is the problem . Please help me
serialize() blank after clone?
after i clone a form and insert it back on the page, i can't understand why serialize() returns an empty string? http://jsfiddle.net/AKpa4/ <table> <tr> <form> <td><input type="text" name="abc[def]" value="ghi" /></td> </form> </tr> </table> alert( $("table tr:last").find('form').serialize() ); // works $("table tr:last").clone().insertAfter("table tr:last") alert( $("table tr:last").find('form').serialize() ); // doesn't
Is it bad to call .draggable function multiple times on the same element if the element has been removed between the two function calls?
I understand that attaching handlers multiple times can cause trouble, but in my case, the element in question has been removed in between the times that I'm attaching the handler. Here's a sample of what I mean: HTML: <div id="parent"> <div id="child></div> </div> javascript: $('#child').draggable({ helper : 'clone', revert : 'invalid', revertDuration : 400, opacity : 0.35, appendTo : 'body' }); //do something in between.. then $('#child).remove(); //do something else
'data(...)' is null or not an object
As of 1.10.0 I get the following when I click on the window behind a modal dialog: 'data(...)' is null or not an object jquery-ui-1.10.3.custom.min.js, line 7, character 13553. only happening in IE 8, Firefox works fine. Anyone else seen this problem? The Demo on the jQUeryUI Demos works fine...
jQuery errors and rewrite
(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth(); $("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function
Autosuggest Placeholder text
AutoSuggest Placeholder text is not supporting in mobile chrome browser when we start typing in box then placeholder message remains as it is. Can any body help me to find out solution of this issue.
Animation queue and the Slide UI effect
I'm fairly new to jQuery and web site design in general, so I was wondering if I could get some assistance with an issue. I have 3 separate slide effects going off in one function, but the animations are all going off at the same time. I thought that there is an animation queue in jQuery to prevent this type of behavior. I've tried to create a queue and manually force the steps to go one by one, but they just aren't behaving. Is there any extra steps I need to take to get these effects to queue properly?
Datepicker & Dialog
Hello I have failed to show jquery UI datepicker on the jquery UI dialog. on main window Datepicker works fine, but on dialog windows it is pretty dead. Can someone provide working sample for this issue? Thanks!
Jquery week calendar only loads header
I create a jquery week calendar in a div tag after showing it, i.e. div.show() then #calender.weekCalender();, etc. Problem is that when I first show the div I only see the calendar header. If I hide() and go back to show(), I see the calendar load. Why might this be happening? Thanks for any helpful tips!
JQuery UI not working in chrome
I have executed the sample code from our site, it will work in Firefox, but not in chrome(see the attached image). Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> body { font-family: "Trebuchet
$(s).position({ my: “center+0 top”}) is being positioned with offset
I am using this plugin http://api.jqueryui.com/position/ to position element. If I do $(s).position({ my: "center top", at: "center top", of: '#main_container', }); $(s) is being positioned by the center but if I do $(s).position({ my: "center+0 top", at: "center top", of: '#main_container', }); it moves a bit right from the center.
Newbie problem with text toggle
Hi - here's all my code. When it runs, the link flashes and then the whole page becomes blank! What am I not seeing? THIS IS EXAMPLE CODE DIRECTLY FROM A BOOK! -Thanks Tom <!DOCTYPE html> <html> <head> <title>Show/Hide Text</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script> <script> $(document).ready(function() { //$("#bodyText").hide(); $("#textToggle").toggle( function()
How could I show part of pic in div?
My photo 's so big.How could I show some middle part of it In div?
jQuery UI show/toggle problem in IE9
Hello all, Am wondering if you can help. I'm using a simple snippet of jquery to show/hide or toggle the visibility of a div. This is working fine in all browsers accept Internet Explorer 9. I've created a jsfiddle to show the problem; http://jsfiddle.net/JaVfp/ The script even does its job it's just the way it does it! They say a picture tells a thousand words, here's the problem:
Calculate weeks given 2 dates
In the image below I show 2 JQuery UI datepicker which I implemented, now I need to calculate the number of weeks between the 2 dates picked and place them in that form. I tried using this in one of the datepickers (special attention on bold text) $('#dateF').datepicker({ dateFormat: 'dd-mm-yy', yearRange: '-2:+2', changeMonth: true, changeYear: true, onSelect: function(date, inst) { var week = $.datepicker.iso8601Week(new
my datetimepicker is behind my JQuery-ui dialog
I have associated a link to this ChangeTime so when I click on the link the JQuery-UI Dialog dlgPassage is opened. In the dialog dlgPassage I click on the img tag to bring up i datetimepicker The datetimepicker is being displayed behind the dlgPassage. In this datetimepicker I can select both a date and a time. I have downloaded this datetimepicker from some site. Here is some code and markup I need some suggestion how to bring the datetimepicker in front of my JQuery-UI dialog ? I just tried to
Revert draggable item after it has been dropped
I have a situation where certain items dropped are mutually exclusive with each other. If one is dropped, I need to check for the others and revert them to their draggable container. I've tried a number of approaches but nothing has worked yet. Online search only showed how to set up the revert function, but I didn't find anything that met this specific need. Here is what I need to occur: 1. User drops a draggable item onto a droppable item. 2. Droppable item is checked for the mutually exclusive
Using nivo slider for image slide show, not working
I test two image and wanted slides show. However it is not working. <div id="slider" class="nivoSlider"> <img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" alt="" /> <img src="http://workshop.rs/projects/coin-slider/games/prince_of_persia.jpg" alt="" /> </div> The demo is at jsfiddle. Basically it is 2 column layout. The images are put on the left side. Even the simplest one is not working. $('#slider').nivoSlider();
How do I write if I want to pass two data item
In this example I only pass one key value pair if (type == "opening") { myID = bookingItem.Objectid + "_" + bookingItem.VesselID + '_1'; $('#' + myID).live('click', function (e) { $("#dlgBooking").data("id", myID).dialog({ width: 230 }); }); } but if I want to pass a second key, value pair. So my first key, value pair is "id",myID and my second key,value pair is "fullid",fullID How do I write
How do I best style this JQuery-ui dialog
Below is the markup html code. As you can see I base the dialog on the table element. Here is how I start the JQuery-UI dialog $("#dlgPassage").dialog({ width: 600 }); At the end I have a print screen of the dialog. So how do I best style this dialog ? <div id="dlgPassage" title="Passage" style="display:none"> <table> <tr><td>Opening</td></tr> <tr> <td><input id="Text1" type="text" style="width:170px" /></td> <td> </td>
Getting the value of second(=last) element in a DIV
Greetings, There maybe several good answers to below question, but i have not come up with a single one. Thanks in advance Pancras Situation: a droppable 's function drop: function (event, ui) { $(this).prepend(ui.draggable); ScoreUpdate(ui.draggable); passes the ui.draggable to ScoreUpdate in ScoreUpdate the draggable is passedin the variable TheItem function ScoreUpdate(TheItem) so The contents of TheItem: <div id="Item" class="clsItem ui-draggable">
Resizeable using google.load
Hello everybody I have created a page in which i have loaded jquery UI using google.load("jqueryui", "1.7.2"). I have performed Drag and drop functionality of jqueryui.That works perfect. But now i have to resize the image so i have to load js for resize.so what is the way to add the js of resize of jquery 1.7.2. Thanks
I have a problem with how to use JQuery-UI in the way that I want
I must say that I'm quite new to JQuery. None of the suggestion that I have got so far has been working. I don't really know if it's possible to use JQuery-UI and passing data in the way that I now want. I might have to change something in order to have it work. I open my JQuery-Ui dialog dlgBooking in this way. $("#dlgBooking").data("id", this.id).dialog({ width: 230 }); as you can see I pass in this.id. Lets call the passed data this.id for X just to simplify
Datetimepicker not calling/binding properly after removing dynamic input field
I am using jquery datetimepicker with the following version JQuery v1.7.2 JQuery UI - v1.10.3 jQuery timepicker addon V1.3 In a module, I am creating input field dynamically by clicking "+" as well as binding the datetimepicker for those input which are created dynamically as well as removing that input field by clicking "-". My dynamic input fields always create like below: datepickerfrom_1_1 datepickerfrom_1_2 datepickerfrom_1_3 datepickerfrom_1_4 datepickerfrom_1_5 . . . I am binding the datetimepicker
Writing datepicker value to console
Hello, I have this code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>datepicker demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <div id="datepicker"></div> <script> var x = $( "#datepicker" ).datepicker(); </script> </body> </html> What I want to do is write x , where
How can I do this.
I have a problem that I don't know how to solve. I have got some suggestion from this forum but none of these has worked. First of all when I click on a div I pass data to JQuery_UI dialog in this way this.id is 10_100_3 $("#dlgBooking").data("id", this.id).dialog({ width: 230 }); It's now the problem starts The dialog that is displayed looks like this. It a vertical menu styled with CSS. <div id="dlgBooking" title="Booking menu" style="display:none"> <ul
Resizable aspectratio bug?
I'm having a problem where if I set a div to be resizable with the aspectRatio set to true and contained in another div. If I drag past the north/south west side of the container div the inner div simply shrinks to zero. Dragging straight west will break containment but won't shrink the div. Here is a simple demonstration: <div id="container" style="height:600px;width:600px;"> <div id="inner" style="height:100px;width:100px;background-color:black;"></div> <div> <script> $(document).ready(function()
sequence of events
Hallo, I'm using the autocomplete widget in a HTML document. I added a change event handler to the widget. The source code looks like this: $("#id_of_autocomplete_widget").autocomplete({ ..., change: function(event, ui) { ... }, ... }); If I type text into the widget and blurs it a change event is triggerd and is processed correctly by the event handler. In the same HTML document I also added a submit button: <INPUT ... type="submit" onclick="openConfirmationWindowFunction(0)" ... /> When I enter
Next Page