How do I get positioning to work correctly with lists / menu?
I'm working on a menu system where I want a <ul> to show as a dropdown when the users does a mouseOver on <li> in another <ul>. I thought I'd use position to set the position of the dropdown (so it actually looks like a menu). What I want is the dropdown's top left corner to start at the same place as the bottom left corner of the wrapping listitem. Unfortunately the positioning fails in several different ways: * In firefox it seems like the dropdown's are offset with approximatly -100 25 pixels
UI draggable behavior issue
There seems to be a bug with either my code or that of the draggable UI element. When I drag a draggable UI element onto a droppable element, the draggable item does not "stay in place", it "moves" across the screen and sometimes off the screen if, when I am placing it, I drag it further to the right. My code is as follows: $('.draggable').draggable({ grid: [1,1], cursor: 'move', revert: 'invalid', revertDuration: 1000, helper: 'clone', stop: function(event, ui) { $(ui.element).css({'position':
show() effects, some working, some not
I've got an image tag like so: <img id="hello" src="hello.png" />and if I try to .show() it with certain effects, it won't work. For example, $('#hello').show("bounce") works, while $('#hello').show("drop") doesn't. A number of other effects won't work either (while some others do). What am I missing here? I've got the proper jQuery 1.4 and jQuery UI 1.8 includes, and jQuery UI CSS stylesheets in place. I'm stumped...
Accordion height issue when embedded within tabs
Hello All, I have noticed an issue with the accordion height when it is inside of a tab. It seems the accordion content does not display. This only happens on the non-selected tab at init time (default is zero). Also, it only seems to happen when the tabs are initialized prior to the accordion. I put a demonstration here: http://jsbin.com/ehori Not sure if this is a bug and I didn't spend much time trying to figure out why. Thoughts anyone? Dave
jQuery UI Datepicker Reset ??
Hello everybody; today I'm comming with this little issue I came across with: I have two datepickers [A From date and a To date] to add dinamically a Row to a table below. After that, the inputs are set to empty with the val('') function. So far, so good, everything works like a charm. The issue is when I want to select new Start and End dates to add another row. The calendars display with the previous dates selected, and as I use some restrictions on the selections, the problem is that I can`t
Datepicker
Hello, Can anyone help me with the datapicker how can I put a style on the input box and also I want to place a space between the input box and the image icon trigger for the datepicker ? All I can see in the css is how to control the actual calendar but not the input box or around the image icon ? Hope someone can help David
jQuery UI Controls + show() not working
I have a container that has a series of jQuery UI sliders and a container that will hold results: <div id="question-set-1"> <ol id="plan-questions"> <li><input type="checkbox" /> I am <strong>only</strong> interested in viewing plans that allow me to choose my own specialists.</li> <li><input type="checkbox" /> I am <strong>not</strong> interested in viewing plans that provide financial incentives and/or tax advantages <li> How important is it to
Jquery UI Tabs: How do i hide a tab and its corresponding div when i close it.
I have used Jquery UI Tabs, and given close option to the tabs. By default i am creating three tabs and its corresponding three divs. Now when i close a tab then the tab and its div are removed. I need to just hide the tab and div and when i click Add Tab i should just show the hidden tab and div. I am not sure how to show/hide the tab and div property. Thanks in advance. Jeevi
Modal dialog with ui-lightness theme
Hi, This code works well with the smoothness CSS theme. However, with the ui-lightness CSS theme, the dialog popup window does not appear correctly. I mean the cross to close the the popup appears on the left side, under the title, instead of the right side. And the little thing in the bottom corner to increase the popup also appears on the left side, instead of the right side. What's wrong with the code ? Thanks in advance for helping. Here is the code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
custom ajax in jquery ui-tabs
I am trying to integrate jquery ui-tabs in the CMS Flatnux, in such a way as to degrade gracefully if javascript is not enabled. This means that I want to leave the flatnux menu-type href's which are all of the type "index.php?mod=nnn", where "nnn" is the name of the section to be loaded. But I don't want that url to be loaded via ajax if javascript is enabled because that will load the whole page (index.php) and not just the center section, creating an infinite loop. I want to ajax load a different
UI Accordion Doesn't Redraw Properly in IE
I've attached a screenshot of this problem I've been wrestling with. Searching the forum and Google hasn't turned anything up, but maybe I am not referring to the problem correctly. When I use the UI Accordion with a definition list (where the DDs contain might contain both text and images, if that matters) the page loads fine, but after clicking on a DT to expand it, some DTs are redrawn after moving down on top of other DTs below them. Hovering over the misplaced DTs a few times will pop them into
MaxHeight & loading data in dialog
Hi, Need some help om the maxHeight value of the dialog box. After opening the dialog box I am adding some data in it via an Ajax call. The dialog therefore expands after initial load. When this happens the maxHeight is ignored untill I try to resize once. After this a when I have a page reload the thing I described does not happen anymore. Is this a bug? Or is there anyway to invoke the maxHeight check?? Thanks Tieske
jQuery UI Tabs INSIDE Google Maps - Dynamic Create
Hi Guys, I'm running here: http://www.winemap.co.nz/marc.html based on examples from http://marcgrabanski.com All looks great, but I need to be able to load data into the TABS for each Marker (as you would with Google InfoWindow tabs).... can anyone give me some assistance on how to create instances of the Tab window with content loaded specific for the marker. At the moment the content is loaded through the HTML div's, but I need to do this through the Javascript loop. I just can't find any tuts
appended element not draggable
Hiya. I have few elements on my page and user is able to append more of those elements from a link. All those elements are draggable, but somehow appended elements aren't draggable at all. I found some answer to this that said "you have to bind draggable event again" but I'm not quite sure what that means or how that happens. I've tried a few things but haven't been able to get it to work. Any helps?
Usage of tabs and ID on s
SCENARIO: i have a software that, on menu selection, fires up a dialog box and load its content via AJAX. Within the context, there always is a TABS element that has always two tabs (edit, and preview). The tabs element is generated server-side using a smarty template and is the following: <div class="tabber"> <ul> <li><a href="#edit_form">{$caption}</a></li> <li><a href="#edit_preview">Submit form to get a preview...</a></li> </ul> <div id="edit_form"> .. . here goes all the
Accordion within a Dialog and Showing/Hiding Accordion Panels
I am unable to get an accordion to function properly within a dialog. Below is the closest I can get it to working. It renders well in IE but in Firefox, the accordion scrolls unnecessarily. Furthermore, my desire is to hide and show panels based on the link clicked, but the accordian does not respond well to that. Is that even possible? If there is any example code available, I have been unable to find it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Triggering resize event set by resizable?
Howdy.. $("#element").resizable({ "resize" : function(event,ui) { console.log("Resizing!"); } }); How do I programatically fire off that resizable event once so that resize also gets fired? $("#element").resize(); doesn't work, nor does .trigger('resize')..
Where to put js action files and css files for extern loaded pages by UI Tabs
I've got an index page including two (actually) tabs, each loading on turn extern1.html and extern2.html Each tab is defined as <class="u-tabs-hide">i Each of these two external pages need its own js action script (using jQuery) and css file.. (Note : They can also be tested in stand alone debug condition with php loadind condition <if ($localDebug)>). Actually : JQuery and JQueryUI libraries are loaded in the index page Functions for the extern loaded pages are loaded in the index page Each page
Jquery Droppables
Hi, I have 5 boxes in my page which i have made droppables with th use of jquery UI droppable. Now what i want to do is to add a button to the page when all the five boxes have got some thing dropped in them. Or i want to check that all the five boxes are set. Can anyone tell me a way to check if all of the droppables boxes are set or not? Kind Regards
asp:Button issue with button from jquery ui
I am trying to implement the media toolbar (mentioned in http://jqueryui.com/demos/button/#toolbar), with asp.net buttons. Anyone who has successfully implemented this? Here is my code: <div> <asp:Button ID="tebtnTest" runat="server" Text="Sample button" /> </div> <script type="text/javascript"> $(document).ready(function() { $("input[id$=btnTest]").button({ text: false, icons: { primary: 'ui-icon-seek-start'
Add a day to selectedDate.
Does anyone know how to add a day to selectedDate in jQueryUI datepicker?
Draggable, Sortable & Tabs: Getting Draggables onto a Sortable when Tab is activated
Basically I have two Draggables: Tab One Elements, Tab Two Elements I also have two Sortables: Tab One Display, Tab Two Display The initial Tab One combination works fine but when Tab Two is activated, along with Tab Two Elements, the elements are Draggable but not received by the associated Sortable. Here's the Demo: Draggable, Sortable, Tabs: Broken Demo Here's the Script: $(document).ready(function() { /* */ function contentPaneTabs(wrapper, tabs, pane) { var panes = wrapper + " > " +
radio button in header of accordion
Hi, In my accordion I have inserted a radio button. I would like to be able to click on the radio button et expand or collapse. This is my code or see attach. It does not work properly. Please help. Thx Joe <html> <head> <title>jQuery UI Accordion - Collapse content</title> <link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script> <script type="text/javascript" src="javascripts/jquery.ui.core.js"></script>
Solution for restricting input values to the source returned by autocomplete
I spent most of my day trying to implement input "validation" on a field employing the jquery ui autocomplete feature. I'm not experienced enough with javascript to truly understand how terrible I am at it, so please be kind. Problem: The out of the box autocomplete examples allow users to enter anything they want into the autocompleted field. Ideal Behavior: If, upon field exit, the value left in the field does not match what any of the items returned by the source property, clear the field and
jquery UI effects
I would like to use some of the jquery effects with the jquery ui sortable interface but cant find any documentation saying this is possible. Please could someone tell me if i can use the effects such as slide with the sortable interface Thanks Nick
Bring to front with draggable.
Is there a way to bring a draggable box to the front and make it stay in front until another box is clicked? I have it set to where the box is in front when I drag it, but it goes back to its original z-index afterwards. Here's the code I'm using right now: $(function() { var dragOpts = { cursor: 'move', zIndex: 1000 }; $('.drag').draggable(dragOpts); }) Thanks
.destory() not resetting height?
Having a problem in that each cycle of show / destroy increments the height of the dialog box by 16 pixels. I initially had a problem with sizing not being correct when I use the simple method to load up dynamic content: function showDialog(divId,script) { $(divId).load(script).dialog().siblings(".ui-dialog-titlebar").hide(); }That doesn't work because dialog doesn't seem to see the size of the script that was loaded in. My solution was to use the ajax function first, then set width/height:
ASP.Net site with masterpage - root page works, subpages do not
Hi there, I am building an ASP.Net site. All pages on my site share the same masterpage. This masterpage has... <script language="javascript" type="text/javascript" src="<%# ResolveClientUrl("~/JS/jquery-1.4.2.min.js") %>"></script> <script language="javascript" type="text/javascript" src="<%# ResolveClientUrl("~/JS/jquery-ui-1.8.custom.min.js") %>"></script> ... in the head tag (with runat="server" set); an OnLoad method in the code behind that performs a databind; and the following mark-up... <div
dynamically make an input as a datepicker ?
how can I dynamically make an input as a datepicker ? Currently, the datepicker enable coding should be inside jquery ready function. If inside a button javascript event, I want to make an input field as datepicker, what should I do ? Thanks.
Problem en IE and slider Handle height
Hi all, I'm new in JQuery and plugin. I'm trying to customize the slider and especially the Slider Handle Here my code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript"
draggable stop function - bring form to front
Hello, I have the following libraries referenced: jquery jquery.ui.core.js jquery.ui-1.8.custom.js jquery.ui.widget.js jquery.ui.draggable.js ui.datepicker.js interface_1.2 jquery.form.js My code has a loop based on records in a db table. As it loops it includes code which has a form relevant to the db row id. The form is hidden. When a person clicks on a link this form appears allowing them to enter information etc and submit for that record id. The form is also draggable (which works). Loop through
Where are JQueryUI 1.8 themes ?
Hello I upgraded to jqueryui 1.8rc1 and I'm having some css problems with the new button widget . seems that there are changes in jqueryui 1.8 themes. Since I'm using a theme switcher, and I need to store all themes on my server, is there a package of all jqueryui 1.8 themes ? (like the package for 1.7.x ) where can I download it ? thank you :)
accordion with cufon replacemant
Hello from an absolute newbie! I downloaded and use the jquery UI accordion, wich is working well - of course no problem! At the next step i tried to replace the clickable headlines at the accordion (for me these are the h6-tags!) with cufon font-replacement - the following js-lines (sorry, js-newbie!): $(function(){ // Accordion $("#accordion").accordion({ header: "h6", autoHeight: false });
Autocomplete - how to set a different value that the display value ?
Hi, I use autocomplete to fill a full address. I have 4 fiels, I manage to get the 4 result values when selection a choice from the autocomplete, but I'd like to display the full adresse, and the dispatch in 3 different fields (that works already) and change the autocomplete fiel by a different value... To be a little clear : I use ZendX_Jquery to generate the Autocomplete code. echo $this->autoComplete("customer_adress_complete", "", array('url' => URL.'customer/recherche/', 'select'
Autocomplete combobox using Jquery
Could any body please share the links of documentation and detailed illustrations to implement Autocomplete combobox using jquery?
How to determine where in the html code a draggable is dropped?
Hi All, I've got an interesting challenge here. Is there an easy answer? I've got a list of draggable blocks. They will each be associated with a block of text. I would like the user to be able to drag these blocks of text onto a web page, and have them auto-inserted into the web page. The web page is a bunch of <div>s at particular locations on the page. There's text inside the <div>s. 1) When a user drops the draggable onto a <div>, I'd like to have it inserted into the inner html at the
Jquery show and hide ui tags.
Hello my name is Mark Dunbavan. I am fairly new to jquery and I have been developing a few bits for my website. I am trying to create a tab at the side of my site that when moused over it creates a reveal so the rest of the tab pops out from the side and then when clicked it opens the rest of the tab that will slide across the page above the content on which it is placed over. Here is an example of what i mean. look for the tab that says 'tags' on the left. http://www.formfiftyfive.com I cannot seem
Bind dialog to parent
Hi I have created a jQuery dialog. I would like it to have the same behaviour on its parent element as it has right now on the browser window. That is, even if the pointer is dragged beyond the parent elements border, the dialog should stop at the edge of parent element. Is that possible? Thanks Carsten
Problem with inline AJAX datepicker (jQuery UI 1.7 - Chapter 7)
I'm not a very experienced JavaScript programmer and strugling with a problem using the datepicker. I'm trying to implement the AJAX datepicker from Dan Wellman's jQuery 1.7 book (chapter 7). The sample code works fine. However, when attaching the datepicker to a <div> to display the datepicker inline, the sample code no longer works as expected. Can anybody out there help me with this?
Jquery 1.4 with ui 1.8 give wrong value
Hello, I don't think this is in the dev bug list or if I'm doing something wrong but here is the problem : When you move the cursor quickly to far right or far left it seems to show the wrong value ... Is there a way to make sure that the slider gives the correct value while sliding ? Sometimes the value is only wrong by a few decemals but sometimes it can be more. Any ideas ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
Next Page