Closing a dialog on outside click and allowing width to be set via CSS
I see these as 2 major issues with the current dialog. I can't use it if these aren't fixed. Clicking anywhere on the window outside of the dialog should close the dialog. This seems obvious doesn't it? I don't want to set the width of the dialog through the init options. I want to set the width in CSS where it belongs. I am not interested in extending jQuery UI to fix these, I've already fixed the width issue by extending the dialog with a new widget and overriding the _size method, and I know
onSelect and onClose events not happening...
Hi, I'm using datepicker, and i want the selection of a new date to have the effect of loading a new url. So used the onSelect: event I tried, didn't work. Simplified my code to just have this : $(function() { $( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' ); $("#trigger").click(function() { $("#datepicker").datepicker( "show" ); }); $("#datepicker").datepicker({ onClose: function(calDate) { //window.location.href
Workaround For Clicks In A .Selectable()?
Hello, For a part of my website, I had to set a .selectable() on the <body> tag of the webpage and filter the elements. But now clicks wherever on the webpage are not registered as clicks. The .selectable() method of jQuery probably catch the click and does something with it ... HTML: <body> <h2>Selectable table cells</h2> <table> <tr> <td>Cell1</td> <td>Cell2</td> <td>Cell3</td> <td>Cell4</td> </tr> <tr> <td>Cell5</td> <td>Cell6</td> <td>Cell7</td> <td>Cell8</td> </tr> </table> <br /> <h3>If you
Accordion error through Prototype
I am trying to use the jQuery accordion in my JSP but encounter some issues from Prototype 1.4.0. I have no way of booting Prototype from the application (especially since it's included in the page that encapsulates mine, of which I have no access or control), so I'm left trying to make the two coexist well enough. The code is pretty basic and rudimentary at this point, but I'm simply trying to prove the two can coexist and go from there. Running the page displays everything correctly with the first
How to set Button look independent
I'm using the Themeroller to design my own theme. I need colorful window title bars / accordion bars but clean button colors. Is it possible to set Button color / background independent from "clickable states" attributes used by most other controls? Any help appreciated!
jQueryUI Tabs look very large in IE 8
Is there any reason why my jQuery UI tabs would appear 3 times larger in IE 8 than in Firefox or Chrome? I use jQuery tabs throughout my site without a problem. The on one page I decided to nest in a set of tabs. This works fine on Firefox and Chrome, but on IE the tabs and associated fonts have become huge. I don't think I'm doing anything weird in CSS. Here's what my code is like (yeah, I ripped it off from another post I submitted recently :-)) : <div id="main" class="ui-widget" ..... <div
Drag & drop into iframe
Hello guys. I need to drag a div element from the body section of a document and drop it into another div. The droppable div is into an iframe. How can i do this? I'm getting myself crazy. Kind regards and thanks for advance.
Sortable wont work after creating new dynamic tab
Hi How do I bind the contents of a dynamically created tab so that I can use the contents as a sortable container? I cannot drag into it after creating a new tab. var $navigation = $("#navigation").tabs({ tabTemplate: "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-wrench'>Edit Navigation Item</span><span class='ui-icon ui-icon-close'>Remove Navigation Item</span></li>", add: function(event, ui){ var tab_content = $tab_url_input.val() || "Tab content.";
Focus in IE 8 after using sortable
I'm using the .sortable function in my page and it works great, except in IE 8 (haven't tried other IE versions). What happens is in my <li> I have text with hyperlinks and after the sort I have to click the hyperlinks twice to get them to work. On first page load BEFORE the sort they're fine. I appears as if the focus is being held by the parent object. Any ideas on a fix or how to debug this myself?
slider is not a function
Hello, i am having a problem with my slider function. Here is the Code scrollbar = $(".content-slider").slider({ animate: true, slide:function(event, ui){ if( scrollContent.width() > scrollPane.width() ) { scrollContent.css('margin-left', -1 + Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); //moveFixedClones(200); moveFixedClones(1 - Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ))); } else { scrollContent.css('margin-left', 0); }
Ui.buttonset on changing DIV
I have a div that is a form. I have hidden divs on the page that when the user hits the next or prev button changes the information displayed in the div (form). I was trying to use ui.buttonset here but whenever the user access the different "page" in my form, Ui.buttonset breaks and is no longer clickable. I was using $("#chartChanges").html($("#saveChart").html()); to change the content of the div and then $("#chartChanges").buttonset(); when the page loaded.
reload ajax tab twice or more times
i have jquery tab in my project, and add tab from remote, i want to reload a tab when a button clicked, i successed except the reload times,following is my code: main_tab=$('#outer_center').tabs(); main_tab.tabs("load", get_target_tab_index(title)); function get_target_tab_index(title){ return $('#tab_nav>li').index($("#tab_nav>li>a>span:(0):econtains("+title+")").parent().parent().get(0)); } first click will reload tab once, second will reload tab two times, thirth will reload tab six times...
need help fixing "wobble" for a draggable object
So I've been rewriting a image cropping utility to utilize jquery (to make it easier to maintain, and get it ready to extend to other projects). Unfortunately, the jquery version seems to wobble alot when you drag the crop area around. Here's the original: http://subcog.net/croptool2/layer_test.html Here's the jquery version http://subcog.net/croptool3/layer_test_jquery.html There's 3 layers that comprise the crop utility. On the bottom is simply the photo itself. On top of that is a semi-transparent
Getting the select menu's droplist to have multiple columns instead of one? Having difficulties
I'm currently working with the select menu: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html Problem: My droplist is getting quite long, I want to shift it to another 'column' instead of having a very long scroll bar. Below is an image that I've made to visualize what I want, div is my droplist, elements are my droplist items: I hope someone can tackle this problem... I've no clue how to implement it.
datepicker setDate fire onSelected
Hi, I'm using datepicker from the UI package. I have a case when I have to programatically set up the date selected. I use the setDate method and this works fine. However, I'd like to fire the onSelected event once I have programatically selected the date. Is there any way to do it? How can I fire the event programatically (I don't know what format should I use for the dateText parameter, and how to set the $(this) and inst parameters). Thanks!
Google Chrome Bug with Accordion
Strange issue with Google Chrome and my latest project... When I initially load the page, my accordion appears with proper formatting. Upon refresh, it overflows beyond the parent element. If I clear cache and reload, issue resolves and then repeats... Cannot get this behavior to replicate in FF, IE, or Safari, etc... Anybody have an idea? Here is link to page, can look at the problem code there: http://anthonychavez.me/lab/summit/template.html
combobox - data source????
What do I have to do to get an object array to act as data source for the combobox version of the autocomplete? I can not for the life of me get it to work, or find an example of this scenario... Thanks in advance!
jQuery Slider problem
Hi I am using a jQuery slider. I have it setup to update a textbox with the sliders value property as you slide it. This works fine, however when I go to save the form, the value of my textbox is always 0. I'm working in a .net environment and viewstate for this control is on. I should be able to grab that value in my code behind, no problem, but... I don't know. I'm sure i am doing something really stupid, although I admit, i haven't been working with jQuery very long. Thanks for any help or insight
jQuery UI Dialog Widget Showing Resize control on lower left corner instead of right??
So I'm simply creating a modal dialog, and for some reason, the resize image and functionality is showing on the left side of the dialog instead of the right side...any idea why this would happen and how I could fix it??
JQuery 1.4.4 & JQuery UI 1.8.6 Selectable helper: 'clone' not working for a table object
JQuery 1.4.4 & JQuery UI 1.8.6 Selectable helper: 'clone' not working for a table object. I have a HTML table with rows and data. Selectable is working OK, but helper: 'clone' is not working. When I start dragging, the original row immediately disappears, no matter what I put as a helper value. I even created a custom helper function which explicitly clones the current row, but with no result. I ended up creating a workaround like adding start: 'start' and setting up the function like this: var start
Can jQuery dialog be used in place of a javascript confirm?
I can not figure out how to replace a javascript confirm with a jQuery dialog. I can attach it to my links, but when the user clicks Yes, I don't know how to find the link that initiated the action and how to continue the click event so it works universally for href and onclick. Thoughts? <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <link rel="stylesheet"
resizable and chrome
The following web page and application.js should just make an image resizable... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.6.custom.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
Autocomplete Problem
Hi, i am using jquery auto complete in combo box format. after loading or changing i am using another button which has click event and will show a alert box with the value of combo box. please help me asap.. Thnx.
Cloned table with datepicker always opens the datapicker from the original NOT the one from the cloned one
I have a table (has more info than this, but to save space I removed the extra fields) and inside this table, I am using jQuery UI calendar datepicker. See #1 <table class="formInfo" cellpadding="0" cellspacing="0" id="newShowToVenue"> <tr> <td><img src="img/information.png" alt="help" width="16" height="16" class="help" title="Date" /></td> <td>Date</td> <td class="datepicker_box"><input name="show_date[]" id="show_date" class="datepicker" type="text" value="$showDate" /></td> </tr> </table> I have
how do I set pulsate mode to hide?
in the documentation they explain that you can stop the pulsation prematurely by setting the mode to hide but they dont give an example of how to do that In my script I need to cause the pulsate to run in an infinite loop and then stop the pulsation on a mouseout event. I almost have it .... I just am working with the mouseout event how do I prematurely stop the pulsation animation I tried so many things $(this).effect.stop(); $(this).effect.stopALL(); etc... how do I do it?? here is my code <script>
Newbie, question Autocomplete remote datasource
Hello there. I just can't figure out how i can make the autocomplete (with remote datasource) show more than one json data-field suggestion in the textbox. I want to show the city, state and country fetched from my database. I use the same code as in the example for "remote datasource". The database works, the output is valid JSON, but the coding in jquery isn't working. I tried to combine the examples for "remote datasource" and "remote JSONP datasource" but to no succes. If it's not to much trubble
Ui Dialog Position in Webkit (banging head against wall!!) kinda solved but still not sure why.
I figured out that just by setting position: absolute; in the stylesheet it carries over to the dialog once it is created. The dialog having absolute positioning on it solved the left position problem for me. I just don't understand why. Is that a bug in webkit or jQuery UI that it needs to be absolutely positioned in order to calculate the left position correctly? Anyone know about this? As you can tell from the post title I have a webkit problem. I have pretty straight forward code for this and
hey Jquery Ui not working
Hey, i'm currently learning how to use j-query but i'm a little stuck. I was trying out J-queryui and it doesn't seem to work. This is what i did (below) I went on this site and viewed source. Copied all of that put it on a html file (http://jqueryui.com/demos/tabs/) [xhtml] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;
Load HTML into a DIV and then use Dialog from loaded html
I have a page where I do: $("#pendingEmployees").load('pendingemployees.php?randval='+ Math.random()); This loads a small list into a small box on a much larger page. Once the list is there, I want the user to be able to click on an item in the list and have a UI-Dialog display with information on that employee. However, it seems that the html that is loaded can not be used for jquery or such. What am I doing wrong? Is there something I need to do with this? Is there an example of using
Retrieving data from remote form
Hello, is it possible to retrieve data from remote form, from another domain that I can't control. I want to type in number in my local form text field and then post it to remote form and retrieve data. I know how to retrieve data from local mysql, but don't know how to retrieve it from remote form. Remote form: http://www.otto.de/is-bin/INTERSHOP.enfinity/WFS/Otto-OttoDe-Site/de_DE/-/EUR/PV_DirectOrder-Start?ls=0#lmPromo=la,3,hk,home,fl,Sidebar_Bestellen Working number: 31477682 I want to type in 31477682
Trying to get access to a FlashVar
I'm sure this is fairly simple but i'm still a newb when it comes to jQuery. I'm trying to get access to the flashvar element on my page. The code looks like this: <object id="kdp3" class="player" height="348" width="620" type="application/x-shockwave-flash" name="kdp3" data="..." style="visibility: visible;"> <param name="quality" value="best"> <param name="wmode" value="opaque"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars"
Trigger UI autocomplete select
Is there any way to trigger the select event for an autocomplete with an open menu? I'd like to emulate a tab event in a autocomplete menu. Summoning a $.click on the selected item works, but is a bit awkward. Otherwise, when selecting an item in the menu with the tab key, is there any way to prevent focus from moving to the next input while still selecting the item in the AC? -Ben
Have to click twice to initiate datepicker. Alert solves it. Why?
Hello.. I have trouble with datepicker and I dont understand it. This is my code: $("#mytextbox").click(function(){ $("#mytextbox").datepicker(); }) If I want to show calendar for the first time I have to click three times. First click to the textbox, second one anywhere else and third click again to textbox. But if I write this: $("#mytextbox").click(function(){ $("#mytextbox").datepicker(); alert("useless alert"); })... calendar appears after the first click to the textbox when the alert
How to trigger javascript function from footer in jQueryMobile
Using the following example <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> How would I trigger a javascript event from the button? Any/Every other time I try it fails...though using <buttons> elsewhere on my site works fine.
Dialog error in IE 8
I am trying to open a dialog box when someone drags a "step" box into a droppable. In the ready function I declared the dialog like this: $('#addStepPopUP').dialog({ autoOpen: false, modal: true }) Then on the droppable event I make a call to this div to open as so: $("#dropbox").droppable({ drop: function (ev, ui) { if ($(ui.draggable).hasClass("newStep")) { $("#addStepPopUP").dialog('open'); This works for the first DIALOG (and subsequent ones in Firefox
Dynamically loading accordion items - Problem
Hello jQuery UI forum, I have a DIV which I'm dynamically populating with messages. I'm building the DIV's innerHTML on the fly. However, I'm unable to make the messages be presented as an Accordion. When loading statically (i.e. in advanced, I get a pretty accordion). Hope you can help. function loadMails(){ var accord=document.getElementById("accordion"); //get msg table object var inner=populateAccordion("inbox"); accord.innerHTML=inner; $(function(){ // Accordion
Trying to combine Sortable Demo examples for Display as Grid and Connected Lists Through Tabs
Hi all. I am trying to combine two of the Sortable Demo examples. The links are below. http://jqueryui.com/demos/sortable/#connect-lists-through-tabs http://jqueryui.com/demos/sortable/#display-grid I am able to take the code from the Connected Through Lists and get it to work locally fine. However, when I try and add the Float attirbute to the style like the Display Grid example says, it doesn't fully work. It does display the items as a Grid, but the issue is the div for the tab doesn't
Draggable Collide Block Not Working
Im using jQuery UI/Draggable with a collide add on.-- The desired behavior is that there is an area of a page that allows a user to drag and drop a "widget" anywhere they want but the widgets should not be allowed to overlap even while dragging. The collide seems to be working as when you drag one element close to another they kind of bump but if you drag them around a bit you can make one overlap the next and drop it underneath or above it. - While this seems a little unreasonable I have a 'demand'
jQuery Dialog difference between 1.7.2 and 1.8.0
There seems to be a change between the way jQuery UI Dialog boxes position is handled between 1.7.2 and 1.8.0. In 1.7.2, if you position a dialog box to be off screen the browser will have scroll bars and the dialog box will be where you put it. In 1.8.0, if you position a dialog box to be off the screen it puts it on the right most edge of the viewable area of the browser. I can see the use case for both, but updating broke some functionality. Is there a way to have 1.8.0 act like 1.7.2. I have
Saving JQuery UI sortable arangement
Hi folks I'd like to save the position of every single children in a sortable (portlets to be exact). I've a 3 row sortable and I'm able to sort everything within each of the rows and to share elements between them. My next step is to save the positions of the elements into my database so that when i reopen the page it'll restore my arrangement. I've now tried for hours to read the id's, positions and so on but it seems, my ideas wont work properly. And here's what I need: When a children is moved
Next Page