Investigation into memory leaks in jQuery UI and possible workarounds
[note: I posted this http://dev.jqueryui.com/ticket/4566 but think this is the right place to post] In my jQuery UI tests I have been experiencing memory leaks in IE 7 caused by the repeated use of filter: in the theme css which is used to apply a transparent overlay on modal dialogs or to create shadow effects such as : .ui-datepicker-cover { ... filter: mask(); /*must have*/} .ui-widget-overlay { ... filter:Alpha(Opacity=30);} .ui-widget-shadow { ... filter:Alpha(Opacity=30);} IE has a known bug
How to find a dialog without using an id
Hi Guys :) I've noticed that in the process of jQuery UI creating and marking up dialogs, it changes the structure of the document, placing the new dialogs at the bottom of the body. This is giving me grief because I don't use id's on these dialogs, and when I need to provide a selector to attach the behaviour to open the dialog to the link, I can't find my dialog, which is referenced relatively. $('#results .versionDialog').dialog({ autoOpen: false, width: 600 }); $('#results .dialogLink').click(function(e){
Rendering issue with IE7 and ui.sortable
Hi List, I've got a rendering issue with IE7 and ui.sortable. After sorting elements on my page disappear or overlap even though the dom is build correctly. Triggering another dom operation may cause IE7 to re-render the page and everything is fine. I am sure this is a bug in IE7 and it is probably not directly related to ui.sortable, but maybe someone had this kind problem before? Has anybody some insight what exactly triggers these issues and how to avoid them? Greetings, Tobias
Setting JQuery UI Dialog buttons label with the content of a variable
Hi, I use JQuery UI 1.7.2. Dialog widget. Is it possible to set the label of a button with a value contained in a variable ? I need to build a generic dialog box, the label of the buttons being not known until runtime. May be the answer is more on the javascript side rather than on the Jquery UI side ...
Flicking in Firefox with toggle or show/hide
I'm getting a "flickering" effect in Firefox when using jQuery "show" and "hide" or "toggle" on some div's. Any idea why this could be happening? Seems to be more pronounced when scrollbar is at bottom and window has to resize. Scrollbar does not disappear and reappear so it's not due to that. Thanks.
alsoResize problem
Hi all, i have several nested div sections, used for border effects for a square game board. This game board is resizable. The outer div is resizable, all others should resize too when resizing the outer div. But not all nested div's are resizing too? I have used the next code: <!-- used divs in following order <div id="bordwrapper"> <div id="bordContainer"> <div id="buitenrand"> <div id="middenrand"> <div id="binnenrand"> <div id="bordframe"> --> <script
javascript in ajax loaded tab
I know that when loading tab content via ajax, all scripts get stripped to prevent IE from returning a 'permission denied' error, but i'm wondering if there is an alternative way to load scripts in an ajax loaded tab. the example is the following page (click the professional" tab) http://netimpact.org/displaycommon.cfm?an=1&subarticlenbr=2934 I'm trying to load a tab with ajax that has a fancybox content slider. Thanks for your help in advance - i am new and just learning!
Gap between tabs and tab panel
Hi everyone, I'm working on a page right now that centers around the jqueryui tabs as the main form of navigation. Right now, the page works fine on Safari, FF and Chromium (OS X) but it doesn't work in the new beta of Opera 10. I had initially thought this would be Opera's fault as a beta but the tab examples on the jqueryui site work perfectly fine. I've combed through my code (I'm new to web dev so bear with me) and nothing appears to be wrong. The js for the tabs is as follows: $(document).ready
onChangeMonthYear and inline datepicker
hi, i have an inline datepicker with the following options: $('#options #date').datepicker({ minDate: 0, maxDate: "+2Y", regional: $('html').attr('lang'), changeMonth: true, changeYear: true, showOtherMonths: true, hideIfNoPrevNext: true, dateFormat: 'yy-mm-dd', defaultDate: new Date($('ul.events li:first span.date').attr ('title')), beforeShowDay: highlightEventDates, onSelect: showEventsOnDate, onChangeMonthYear: showEventsFromMonth }); The problem:
Get directions on google map with jquery
Hi guys, I am using a google maps implementation in an asp.net page. Essentially i have a business with its location shown on a google map on the page. On the asp.net side i just return instructions based on the locations properties. let me show you my script foreach(GoogleMapLocation g in profileElement.GetGoogleMapLocations()) { %> <script type="text/javascript"> $(document).ready(function() { if(GBrowserIsCompatible()) { var map = new GMap2(document.getElementById('map_canvas'));
Activating accordion panel with selector
Hi! In the jQuery UI documentation http://jqueryui.com/demos/accordion/#method-activate it says: 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. Pass false... I wanted to use an selector instead of an index number, but what will I have to select? I tried to select an element in the header of the panel I want to open, but only got an error. Can anyone supply an example
jQuery tab select doesn't work.
Hello, I am trying to use the UI Tabs widget, it shows fine but when i click a tab, the address bar does change with #tab-X. But nothing changes on the widget itself. It just hangs on the first tab. This is my code: <script language="Javascipt" type="text/javascript"> $(document).ready(function(){ $('#tabpage').tabs(); }); </script> <div class="panel"> <div id="tabpage"> <ul> <li><a href="#tab-1"><span>Content 1</span></a></li> <li><a href="#tab-2"><span>Content
[datepicker] turn off effect
Hi to all. How to turn off the default effect on datepicker?(i think it is scale). I want to datepicker appears after click without effect. I checked manual but cannot finde proper command. Greetings
Question about draggable with helper function in UI 1.5.3
Hi i'm for diffrent reasons still using jquery core 1.2.6 and UI 1.5.3 and at this moment not able to switch to the newest versions. I have looked at the example code for making a draggable with helper function on http://jqueryui.com/demos/draggable/#visual-feedback, this is UI version 1.7. The problem is that when i'm using the example code with my versions of jquery i keep getting a "e is undefiend"-error for the draggable with helper function. clone and original works fine thou. Has there been
Cant find draggable items in droppable div
Hi there, I'm building a userinterface for site adminitrators to defince custom screens. I have a div with possible controls all adorned with class="draggable". Another div with id="droppable" where the administrator can drop the controls he wants the end user to see. I want to find all the dragged controls and thought I could do something like this: $("#gathercontrols").click(function(e){ e.preventDefault(); var $children = $("#droppable").children(); $children.each(function(i){ // Do the stuff
Duplicate page content in tabs?
Hi, I'm using jQuery 1.3.2 and UI 1.7.2 and having a little problem with my tabs implementation, and I'm totally stumped. When I look at the generated source of my page it appears that the whole page is being loaded again within the tab panel, I'm guessing thru ajax. I wondered if it was to do with the base tag causing the tabs to load the linked content, but removing it didn't change anything. Has anyone else seen this? Is there a way to turn off the ajax loading? Cheers L
Linkable Header and Persistant State for Accordion
Hi, I'm trying to implement the accordion navigation menu for one of my sites and have a quick question on how to properly set up the call...I went through the documentation and I think that I'm obviously missing something... I want the header to be a link as well as any content within the div to contain links. So something like... Guitars (links to guitars.html) - Electric (links to guitarsElectric.html) - Accoustic (links to guitarsAccoustic.html) Drums (drums.html) - big (bigdrums.html - small
Dialog modal form
Hi all I am struggling to submit the form that I am using I am using the jqueryui dialog modal form http://jqueryui.com/demos/dialog/?#modal-form the form is populated with the correct data from a database I have a button in place and am following the example to validate but how do I submit the form to a specific url? thank you in advance much appreciated
Stopping event propagation between a sortable and accordion
I have a sortable and accordion defined on the same element, and I'm having a hard time stopping event propagation after the sortable handlers fire, in order to prevent the accordion from opening an item after it has been sorted. In other words, after the sortable's handlers are invoked, the accordion should not be invoked. I am trying to accomplish this by calling Event.stopImmediatePropagation() at the end of my sortable's event handlers (including 'stop' event handler), but the accordion still
add keypress event to a form in a jquery ui dialog
Hello, my fellow jquery UI developers, I am having trouble with binding 'keypress' event to an input field for a form in a jquery ui dialog. It seemed that when I type 'enter' in an input field, the whole page is refreshed (which means the dialog disappeared completely). Can somebody shed some light on this one? thx in advance, requestContactForm = function() { $.ajax({ type: "POST", url: "ajax/profile.ajax.php", data: dataString, success: function(data){ $dialog = $("#dialog"); $dialog.html(data).dialog({
sortable and input text
hi, I have sortable list: <ul id="sortable"> <li class="ui-state-default" id="item_new1"> <input type="text" id="item_value_new1" name="item_value_new1"> </li> </ul> but in the input field I cannot select text with, neither with shift +left(or right)..etc. this bug is only for FF and IE (chrome and opera allows to select text ) has anybody the same problem?
Datepicker: re-rendering a day in onSelect?
Hi, I'm using datepicker to display 6 months where on any given day, a cell is rendered (using the beforeShowDay event/callback) according to some record in our database. In the onSelect handler, the user should be able to "toggle" the underlying record in our database. This is working fine; my onSelect handler gets the selected Date, based on that date, it works out the id of the database row and updates it. However, at that point, I need to update the look of the cell that was clicked on so I can
DatePicker and showCurrentAtPos
hello i'm using the datepicker in a div to view the current month and the past month so i write: $("#datepicker").datepicker({ numberOfMonths: 2, showCurrentAtPos: 1, changeMonth: true }); ......... <div id="datepicker"></div> but i have a problem, the position of the current month is not what i need. e.g. today is 08/14/2009 so i need to see on the left July and on the right August what i see is on the left June and on the right July. anyone else have this problem? is there a
Firefox JQuery Sortable element with IFrame
Hi All, I am using iframe in widgets which need to be sorted. The problem is-> In firefox,when a widget is moved from one place to other, the resource in iframe is reloaded. It looks like when a widget is moved the widget's "li" or "div" element is removed from one place and appended at other place in the page. Is there any way to prevent iframe to get reloaded in firefox when using it inside a sortable widget
How to get the sequence from sortable
If I grag c to a, it means c from position 3 to positon 1 how to get the information positon 3 to 1? <ul> <li>a</li> <li>b</li> <li>c</li> </ul> <script> $('ul').sortable(); </script>
Linking to specific tabs externally, using multiple tab sets, scrollTo & localScroll
Hello, I am building a tab interface for a web page, and I want to be able to link to the individual tabs' content. I figured out quickly I could use the hash tags from each of the tab sections appended to the url, but that scrolled the page to a place where the tabs themselves were not visible. I found this article that showed how to use the scrollTo and localScroll plugins to scroll the page to the top of the tabs and make them visible, so far so good. The problem comes when I try to set up a second
Dialog show / hide effect options do not work!
Hi there, I'm getting a problem where the show / hide options on dialog do not work and actually cause it to bug out. For example, the following code does not work: $("#dialog").dialog({ show: 'drop', hide: {effect: 'drop', direction: 'right'}, modal: true, autoOpen: false }); When the "close" button is clicked, this causes the modal background to disappear but the dialog box remains on the screen and will not close. I need to be able to set effect options such as 'direction'. Is
Adding sortable/draggable in iframe from parent -> strange behavior
Hi all, as a newby to jquery-ui is was wondering if it is possible to add draggable/sortable behavior to a collection in an iframe from the parent. If have tried the following... 1) Both parent and iframe document load jquery and jquery ui. I added the latter as without it I got no such method errors without it. 2) In the parent I monitor the onload of the iframe and then try to apply sortable to collections with the appropriate class. $("#cframe").load(function(){ $("#cframe").contents().find("#sortable").each(function(i){
Static dialog.close event handler
Hello, I'm trying to perform some cleanup when I close my jQuery UI dialog. However, the code which should clean up doesn't know about it being in a dialog. (It's an HTML file elsewhere and is loaded using Ajax.) I've tried binding the dialogclose event to document but it doesn't seem to be doing anything (handler isn't being called). How can I know when the dialog closes then clean up? Is there some static/global event I can add my handler to? (There will only be one dialog active at a time. It
Dialog + iframe (some pages) + show effect + IE = Bug?
Hello, So what I'm basically trying to do is load Google Calendar (iframe) in the ui dialog. This does not work when you enable the "show" effect with some websites. I tried loading google.com in the iframe and that worked. This is what I tried: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css/overcast/jquery- ui-1.7.2.custom.css" /> <script type="text/javascript"
tabs placement
Is it possible at all to place the tabs below the content items rather than above them? regards Andrew Australia
Getting dialog title from droppables?
Hey guys, I've got a little bit of a chain of UI things going on, namely a draggable that can be dropped on one of several droppables, which pops up a dialog with a slider in it. What I intend to do is to give the dialog a title from whichever droppable the user drops on. It seems that the demo getter/setter on the jQuery UI could do the trick, but I can't quite wrap my head around how I'd go about this. The code I've got looks like this right now: <script type="text/javascript"> $(function() {
slider styling: possible that handler dont overlap ui-slider-range?
The UI Slider overlaps the ui-slider-range DIV bei default for 50% of the handler. is there any chance to stop this? I need the slider "stops" INSIDE the ui-slider-range. because of styling the sliderbar with up and down arrow-buttons on each side.
jquery or jquery UI?
per the jquery UI documentation the line below should return the index of the open tab var selected = $('.selector').tabs('option', 'selected'); When I access the data using that line in the error console I get F is undefined jquery-1.3.2.min.js - line 12 using <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ jquery-ui.js"></script>
IE 6 - Datepicker not displayed properly - half shown half blank
Hello every one can some one help me with this Problem: the datepicker is not displaying properly, it is half seen and half not like faded or washed away paper it works on every browser i tested even IE 6 on some machines but other which use IE 6 have this problem. below is the screen shot of how it looks. image link: not able to put links in here, it doesent allow me to post message saying error in postin message using : jquery 1.3 jquery UI 1.7.2 IE 6 datepicker theme : smoothness using animation
Problem setting options of draggable after init.
Hello everybody! I'm new using this great library... I'm interested in using the draggable option... I'm doing what the this link (http://jqueryui.com/demos/draggable/#option-containment) says, but it just doesn't work... I want to set the container option after the init... and if I put those options nothing happens... This is my code: This WORKS: <body> <div id="limite" style="width:400px;height:400px;border:3px dotted black;"> <div id="draggable" style="width:200px;height:200px;border: 2px dotted
UI Accordion within UI Tab first Accordion not displaying.
I am having an issue with a dynamicly setup tabs and accordion's that fit within them. The fist tab will not properly display the accordions within it however every tab following this seems to work fine. Here is the script. For the example I have included an array that show what is used to create the tabs and accorions: Any help would be most apreciated. <script type="text/javascript"> $(function() { $("#staffTabs").tabs(); }); </script> <script type="text/javascript"> $(function() { <? $o = 0; $uploadsStaff
Changing zIndex for resizable's handles
Hi, The resizable function works great for me, but I have little problem: the handles are overlapping everything else: if I have a floating DIV (fake popup) above my resizable element, the handles for resizing will overlap my DIV. Is there a way to change this. It seems there was a zIndex option in some previous version, but it doesn't seem to work anymore. Can someone help? Thanks a lot! Thomas
Handling Multiple Droppable divs
Hi All, In my project, I have assigned with the new task in which, I have a div with draggable elements. And multiple droppable divs(accepts the draggable elements). I have to identify to which droppable div, an element has been dragged into. there is no direct property to find the droppable's ID value. Here is my HTML code : <div id="div_container"> <div id="div_blocks" class="secondlevelDIV"> <?php for($i=0;$i <= count($this->Count) ;$i++) { ?>
Background disappears when doing .hide('slide'...)
Here's my code: $('#categories-toggle').toggle(function() { $('#product-list-categories').hide("slide", {direction:"left"}, 500); }, function() { $('#product-list-categories').show("slide", {direction:"left"}, 500); }); When #categories-toggle is clicked, #product-list-categories properly slides left. However, the background on #product-list-categories disappears during the animation. Whoopsie. Here's the CSS on #product- list-categories: #product-list-categories
Next Page