Modal dialog with resizing children
Hello all, I want to mimic one of our desktop applications with a web application. I'm using jQuery 1.8.2 and jQuery UI 1.9.0 for this. My problem is with modal dialogs. Almost all my modal dialogs consist of the following: A <div> that contains an items control like <select> and sort of a footer that contains an OK and Cancel button. One requirement is that the OK and Cancel buttons stay at the bottom of the dialog when it gets resized by the user. The <div> with the <select> should always resize
dialog close event
Hey all, Just having trouble with dialog close event. Here is my situation, I load the dialog and everything works fine, there is a form in this dialog which is used to update some data on the database...still working correctly, now, what I'm trying to do is, when the user close the dialog, the main page is loaded again, so it will show the changes he made without refreshing the screen... Here is my function function updateSpec() { var hareaold = $('#hareaold'), otherold = $('#otherold'),
Toggle direction bad animation
Hi everybody, in my sites, about few days, i have a problem with jquery toggle with direction left as option. The problem is when effect start, it make a flick becoming a bad effect. This is a simple example code: JS: $(document).ready(function(){ $('input.click').click(function() { $('div.slide').toggle("slide", { direction: "left" }, 150); }); }); HTML: <input type="button" class="click" value="CLICK"> <div class="slide" style="width:200px;margin-top:20px;display:none;background:#000000;color:#ffffff;">
How to I set focus
Here is some explanation: 1. When I click a button in the menu a JQuery-UI dialog named dlgNewVoyage is displayed. The markup for this dlgNewVoyage is listed below. 2. When I press key F4 in any of the fields(prevPortID,portID ornextPortID) in this dlgNewVoyage dialog a new JQuery-UI dialog named dlgSearchOrt is displayed. The markup for this dlgSearchOrt is also listed below. 3 This JQuery-UI dialog named dlgSearchOrt has an input element of type=text with id= ortDescription 4. Now this JQuery-UI
Javascript on Dialog run twice?
I have a JQuery UI Dialog and there is some Javascript on the content of this dialog. I noticed that my debugging calls were being hit twice, so I looked into the call stack of each and found that one of the calls was from the creation of the dialog (with autoOpen: false) and the second was from the opening of the dialog. Is there a good way to prevent this from happening? Some of the code is going to our web server and then to our application server, so two calls is a waste. I've written some code
Dialog Title Issue - will no longer show HTML correctly
I used to be able to use the dialog('option','title', "<span>formatted contents</span>) statement to display HTML in the title bar of any dialog. This seems to have been deprecated in 1.9 by the use of double quotes when this functionality is called. Is there a workround to be able to use HTML to display icons on the title bar? Regards, Peter Lane
How to set highlighted date as Server datetime in JQyery UI Datepicker . I am using PHP for server programming
Hi, I am using jquery datetimepicker with help of addon jquery-ui-timepicker-addon.js. how to set server date-time in datepicker instead of client machine date time. Pls very urgent to me..
draggable divs
Can I do the script that link: http://www.lansas.net/s/flowerzz/1/ with jquery?
Multiple Instances of same Modal Form Dialog passing unique data to/through dialog
My page has a list of possible files to download. The list is generated by user-controlled filters and content of the list will be different each time its created. The list is in a nice structured table layout where the available files to download are shown with an icon they can click on to get the file. I am attempting to intercept the process such that when the user clicks on the link, they will instead be diverted to a modal dialog that contains a form for them to supply their name and email.
Problem with selectable and iframe
Hello, I have problem when i want to select iframe element. Text or image are OK: i can stop selecting in any place over element, and all elements i want are selected. Iframe: - i must select whole or part of iframe element, but must stop event outside iframe, i can not stop selecting over iframe. Please try with sample page: http://msdrop.com/?i=1001&f=3 Thanks for help Piotr *** Read about msDrop at jQuery Forum
how to limit the number of selection in auto complete?
Hello friends, Is there any way to restrict the number of selection in multiple auto complete jquery widget. For example we are able to select multiple items from the auto complete list, but how do I restrict the number say 3, so that I should be able to select only three items from the list and should not be able to enter anything beyond this. I hope my question is clear. Thanks for any help. Regards, Amit
jQuery UI autocomplete scrollbar problem with IE
I have a probleme with jquery.ui.autocomplete and scrollbar in IE9 or IE10 with the following CSS: .ui-autocomplete { max-height: 250px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ padding-right: 20px; } If i click on the scroll bar to see the end of the list, it selects an element instead of scrolling down. This doesn't happen in FF or Chrome. I'm using jQuery UI Autocomplete 1.9.2 and jQuery 1.9.1 Can anyone help?
Getting 'Undefined' error when requesting element id of sortable object.
Hi, I have been looking through the forums and this question has popped up but none of the solutions work. I know I must be doing something wrong but cannot spot it. The code shown below is supposed to alert me the id when the the object is sorted. The update trigger is fine, but I keep getting the message the the id is undefined. $(function () { $("#sortsectiona, #sortsectionb, #sortsectionc").sortable({ connectWith: ".connected", scroll: false,
How to edit DatePicker cells?
Hello! I have just one question: I would like to add some additional text into the date cells (1...31). How would I be able to do that? Thank you!
jquery dialog close image
Hello. I have a problem when I use jquery dialog. When dialog opens, i cant see the X close image correctly... U can see it in the image that I have included. Why it happens??? Sorry with my english, i hope u understand me :S ThankS!!!
Problem with losing focus of a dialog.
I am trying to develop a test file to use dialog before I incorporate it in an application. When the dialog is not visible I want a link to show() and then to hide() when the dialog is visible. I have tried "blur', " focuslost", "focusout:, and "focus_lost". I am using FF. <!doctype html> <!--- http://jqueryui.com/dialog/#modal --> <html lang="en"> <style> #dialog{ border:2px solid #333; background:#f7f5d1; padding:1em 2em; color:red; text-align: left; } </style> <head>
IE 9 and jquery dialog ui
I am testing jquery-ui in ie9 + window7 + korea. http://jqueryui.com/dialog/ I was try to demo page of this url. but it's not working. Ie developer tool console show this message. ########################### SCRIPT16389: Unspecified error. jquery-ui.js, line 9839 charater 3 ########################### Is there a way to solve this problem?
JQueryUi Button with Link
Hello World, i would like to use a JQueryUI Button with an Icon as an Link-Button. On the web i didn't found a solution. I tried things like this, but especially this try destroys the look of the button. (Code was taken from example page). I know the possibility of using jquery and the onclick event to manipulate the document.location.href, but in my case i need a real link-element <a>. .... <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" } }); }); </script>
Highlight selected item in accordion
I'm using the accordion as a menu, containing items in folders. How do I style the selected item? Using the ui-accordion-header.ui-state-active and ui-accordion-content-active I can style the opened folder (respectively the header and all items in the content). But I can only style all items in the folder, not only the one clicked item.
jquery-dynamic-breadcrumbs license?
Hi All, For my development i need crumbar. I searched in jquery forum finally i got this link. I want to know about jquery-dynamic-breadcrumbs license. Is there any opensource for crumbar development? or Is there any jQuery component i can use as crumbar? Thanks..
Jquery _tiggerEvent doesn't working....! Why?
/* $Id$ */ (function($) { $.widget("ui.zflipswitch", { widgetEventPrefix : "flipswitch", //No I18N options: { type : undefined, view : undefined, option : undefined, labelFor : undefined }, _EVENTS: { 'ONCLICK': 'click', 'ONCHANGE': 'change', 'ONDRAG': 'drag' }, _create:function() { base = this; if(this.options.view == "iconOnly") { var insideDiv = "<div id='leftside'></div><div class='onoffswitch' ><input type='checkbox' name='onoffswitchcheckbox' class='onoffswitch-checkbox'
JQuery UI Tooltip AJAX Click/Mouseover
Dear All, I've put together subsequent code to show up dynamic content coming from an AJAX call. The call as well as showing up the tooltip works but the trigger mechanism is a bit weird. My aim it to a) show the tooltip when clicking the DIV container and b) to close the tooltip once I leave the DIV container But what actually happens is: c) When I click nothing happens and d) when I then move over the DIV container the tooltip appears (every time I move over the container) Does anybody know how
Here I wrote console.log. Its printing 2 times but it should be a one print at a time. And also next line is not working!
/* $Id$ */ (function($) { $.widget("ui.zflipswitch", { widgetEventPrefix : "zflipswitch", //No I18N options: { type : undefined, view : undefined, option : undefined, labelFor : undefined }, _EVENTS: { 'ONCLICK': 'click', 'ONCHANGE': 'change', 'ONDRAG': 'drag' }, _create:function() { base = this; if(this.options.view == "iconOnly") { var insideDiv = "<div id='leftside'></div><div id='onoffswitch' ><input type='checkbox' name='onoffswitch' id='onoffswitch-checkbox'
designing Questionnaire UI
Hi All, I having set of questions stored in db,i am displaying Questions to user using jquery and get response from users, on save saving responses to db. I want to display questions in attractive manner, please help me in achieving it,i am new to jQuery. Thank you, Kavitha
How do i use Jquery Autocomplete in an Iframe?
I am using a Jquery Autocomplete in an Iframe,I cant able to load the data in this frame.How can i load the data in an Iframe?
Jquery ui draggable with multiple drop areas.
Hi, I used Jquery UI Draggable and Droppable plugin. I have one carousel with draggable elements and 9*18 matrix with droppable cell. Drag and drop works fine on Desktop and IPAD but creates problem for dragging on Samsung galaxy tab and Motorola XOOM due to multiple droppable cells. Please give me solution to work this fine on those device. Thanks in adavance
problem in carousel
Hi I have a dynamic carousel. in which item varies from 2 to 14. Now if i have 2 items, then i want to show as soon as i load the carousel the right arrow disabled. How wud i show it on loading the carousel itself. Below is the code to handle the carousel arrows. function filterArrowButtonWasClicked(event) { var content = $('carousel_content'); var offset = parseInt(content.readAttribute('data-offset'), 10); var no_of_products = parseInt(ACProductBrowser.products.products.length, 10); var remainingProducts
I need a simple example of how to use an <a> link to dis play a modal dialog box
I have googled and googled but I can't find a simple answer to this question. The example shown on this site show how to display a dialog upon page loading but this is of no use to me. dialogs usually are used to respond to an onClick event. I have seen some that display when a button is clicked but I can't seem to modify that to clicking on a link. This is what I have: <!Doctype html> <html> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"
First Time Using Dialog and it won't show up
I have been using JQuery for some time but have just started trying to use the dialog widget recently. I must be missing some fundamentals because I can't even get the dialog box to show up. I have this HTML: <div id="dialog" title="Add New Need"> This is the dialog box from which new Needs will be added </div> Then I have this JQuery code: $("#dialog").dialog("open") Is there some type of initialization that needs to be done first?? Can someone
Making the SE handle for the UI resizable module lock in the aspect ratio
The standard resize module with jQuery-UI has a SE grip area for dragging east and south simultaneously, but it allows you to also just drag east or just drag south. So if your user doesn't pay attention to keep dragging at a 45 degree angle, they can easily drag east or south accidentally and destroy the aspect ratio of their object. I'd like to make the SE handle always lock in the aspectRatio so this doesn't happen. I put together a jsfiddle at http://jsfiddle.net/f9Vwp/2/ that I thought should
Draggable position: Fixed
I'm trying to build an app with the function to annotate documents. I want to use draggable as marking points. So the user drags from the toolbar onto a document, new draggable is then created and so on. The problem is that when a document is being scrolled down the draggable elements always stay on the top (they should go down with the page). I've tried to remove fixed position on the 'drop' event but still not there Please look at my fiddle http://jsfiddle.net/sUPsk/3/ Thanks
jquery autocomplete with checkboxes removing as search
On a page I have a search (input) box and below a few checkboxes with labels. The idea is as people type the variable projects are searched and the results in the list are replaced with the result. this would probably mean losing the whole list and re-writing it here is the js i am using var projects = [{ value: "open", label: "Open", },{ value: "inprogress", label: "In Progress", },{ value: "reopened", label: "Reopened", },{ value: "closed", label: "Closed", },{ value: "another", label: "Another
How to make the se grip handle larger for a jQuery-UI resizeable?
I'd like to make the SE grip handle of a resizeable DIV larger so my novice users won't be as likely to drag right or down when t hey mean to drag diagonally. It looks about 16px x 16px now and I can see that the icon assigned is ui-icon ui-icon-gripsmall-diagonal-se It seems like there should be a ui-icon-gripslarge-diagonal-se somewhere, or a way to use my own icon and choose the size. I'd like to end up with a grip handle about 32px x 32px. Thanks for any ideas.
Where is the documentation for things like this?
tabs("add", "tab"); tabs("remove" , "tab"); I am still very new to trying to use this library and am having a very difficult time locating the documentation that supports these options that are shown in many pieces of sample code. Any help in getting pointed to the right stuff would be appreciated.
Is there a way to add a validation without attaching it to an input field?
is there a way to add a validation without attaching it to an input field?
Loading alternative pages into jQuery Tabs via ajax/PHP/CodeIgniter - refresh problems ?
Hi, I'm not sure whether the following problem is a Javascript or PHP issue, but I'm stumped right now. I'm building an application. Part of it contains a section that is broken down into tabs. Because the information in each section is inter-linked, I can't load the contents of each tab at the outset. Each time a tab is clicked on the page is loaded via Ajax and if the data on the page is modified and updated, it is submitted back to the server via Ajax and a new page is generated via PHP and returned.
problems with tabs
Hi, I've problems with my jquery tabs. Clicking on the link does not change the tabs "biografia" and "palmares". how can I do it? Thanks a lot JAVASCRIPT - JQUERY $(document).ready( function() { $('.tabs a').each( function() { $(this).click( function() { $('.tab-content').fadeIn("slow").hide();; var tabSelector = $(this).attr('tabSelector'); $('#' + tabSelector).show(); }); }); }); // script per aggiungere-rimuovere la classe "activeTab" sul tab $(document).ready( function() { $(".tabs a").click(
Navbar Issue
Hello, I am seeing lines in my navbar buttons, and the icons are showing duplicates. I have attached a screen shot and a snippet of my code this relates to. What could be causing this? Please advise.
Is it unusual that jquery ui CSS fails W3C Validation?
Validating my site (www.bigsurgarrapata.com), The W3C CSS Validator found 26 errors and 26 warnings, but most of them were in jQuery CSS files. Is this to be expected? I'm using jquery 1.9.1 and jquery-ui 1.9.2
Using Datepicker and Tooltips
Hi I am using the datepicker with an input box, which is inside an <li> element (for formatting purposes). The <li> element has a tooltip attached to it. Both work fine, and it is more of an aesthetic problem, but when I click in the input box, the datepicker appears. The tooltip is also showing, because we are hovering over the <li> element, but behind the datepicker, as I have altered its z-index. If you then move out of the <li> element area, the tooltip disappears, as it should. However,
Next Page