ui.tabs.js I want entire page to show with a certain tab open
Situation: I have a list of topics on my index page that have anchors that go to a different web site page that utilizes tabs using ui.tabs.js. The anchors work just fine, that tab opens up, that subject is shown, etc. What I would like to have happen is that I can see the top of the web page with the header in addition to the specific tab and subject opened up. As it is, the user can't get to the navigation to other pages on the site without scrolling - it could be a little confusing. They
How to pre-select dates within a date range ?
Hello all, I have following problem. I have 2 input fields, a from date and a to date. If I select as start date for example the 5. June, than I can not select an earlier date in the to date field. Thats ok. But how can I set the dates if they come from the database ? I load a page and in the from date and to date is already filled, because dates are in the database. Now when I select for example the start date I can also select dates after the to date and also I can select earlier to dates than
show/hide UI won't submit data to the server
Dear Friends, I am a newbie to JQuery and would greatly appreciate if anyone can help me about this confusing problem: I have a drop-down menu/single select wrapped into a div, which is controlled by jQuery hide/show. this div is dynamically generated by a JSTL tag and is in a form. the show/hide effect is controlled by another selection's choice. However, no matter what I do, the value of the select within the hide/show div won't submit to the server at all! (for example, I pre-select some un-null
Open dialog in other frame
Hi, I'm a new user (of this forum and JQuery). I would like to know if it is possible to open a dialog window (JQueryUI) in another frame. I have a toolbar on a (header) frame and I need to open the window on the center (main) frame. Really thanks.
Datepicker in fixed DIV on the bottom of the page pops up out of the visible area of the page
Hello! i have a Datepicker on an input field in fixed DIV on the bottom of the page. This pops up out of the visible area of the page when I have scrolled to the end of the page. How can I influence the positioning of the calendar? In the middle of the content: WORKS! When the page is at is end: DOESN'T WORK!! Can anyone help? Thank you
Slider with multiple date range in one slider
Hello, im trying to do something like employees vacation arrangement. There is 120+ employees vertically listed and i want to put slider near them for a year and mark their vacation times on that year with slider range. So i need more than 1 date range in 1 slider because there is vacation ranges in year more than 1 also that ranges can be moved with drag and drop middle of it. I can show the dates with tooltip while moving start and end position of slides. I know currently there is no function like
i need a combo box with images in it
i need to show a list of items and its icon by the side .can i get a combobox wid images
jquery datepicker - disable weekends and specific dates
I've been trying to follow similar posts and the solutions do not seem to work for me. Any help would be appreciated. I'm trying to disable weekends and specific dates. I can't seem to get the beforeShowDay working. In the example below I can get either the weekends or the specific dates disabled by calling either onDate: $.datepick.noWeekends or onDate:nationalDays (respectively) I'm using jQuery 1.4.4 Datepicker extensions for jQuery v4.0.5 var natDays = [[4, 15],[4, 28] ]; $(function() {
How to make fade in/out keep looping
I have this code to fade in a button on hover and fade out . It works on the first hover but it stops and wont do it on a repeat hover. How can I make it continuous? here's the html: <a href="#" class="offerbutton"><span></span></a> here's the jquery: $(function() { $(".offerbutton") .find("span") .hide() .end() .hover(function() { $(this).find("span").stop().fadeIn(2000); }, function() { $(this).find("span").stop().fadeOut(2000); }); });
How can I put ICON's on my tab's
I have used various icons on buttons - kind of like a visual cue as to what the button will display in the tab-set below. Tab are created on the fly as buttons are clicked. I would like the tab label itself to have the same icon as the button that "created" it. But apparently the tab labels are too small for the icon causing the icon and the text of the tab to not align. Is there are tried-and-trued way of accomplishing this? I've attached what I tried to do and what it looks like.
Create modal dialog
I'm new to use jquery ui. I'd like to create a modal dialog that appears when user open the page;I need to hide close button and user can close popup by clicking on link or image within the modal dialog. Can someone give me full code to obtain this? I have attached an example what I would get from msn
Draggable elements shift position after invoking remove()
Hello all, I'm working on a game/experiment that is similar to chess. A big <div> element is the board and I have little <img> elements inside it that act like pieces/figures which I can drag around the board. So everything is working fine up to that point. The problem comes when I capture an opponent's piece. Like in chess, the captured piece has to be removed from the board, so when that event happens I invoke the remove() method to remove the little <img> from the board <div>. But when one little
draggable in IE9
I have an app that uses draggables, and it's not working in IE9. Either jquery 1.3.2 or 1.4.2 (no difference) and UI 1.7.2. I see the posts about the UI needing to be upgraded. Upgrading UI is fine, and this does solve the problem. However, I have a separate app that also uses draggables, and is also on jquery 1.4.2 and UI 1.7.2, and its draggables work fine in IE9. I'd like to narrow down what the difference is, so that I'll know that the issues with the first app are truly fixed, and whether
Date picker cut off
When I use the date-picker and the following css, the date picker comes up "hidden" per the screen shot http://screencast.com/t/O82aw7iREz Here is the css <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" /> here is the html <div id="headersc"> <span id="hC1R1">Date</span><span id="hC2R1"><input id="headersc_datereqs_1" name="headersc_datereqs_1" type="text" title="headersc_datereqs_1" size="11" maxlength="10"></span>
jQueryUI.button triggers click when form submits
I found this is expected behaviour on old IE, but now hit it with latest broweser. I have a form: input[text] with datepicker, input[text] with datepicker, button with .click registered, input[text] without any event connected Everytime I press [Enter] on any input, button triggers click() event. Doesn't matter, whether I have submit() on that form or not. How to avoid it? My button is a dropdown menu, triggered with .click(), so everytime I'm trying to submit a form with [Enter] I get dropdown menu
CSS styles are kind of a pain to use. I want the styles for most things, but I want to blow away them for tabs
I think the way that tabs are styled are a little ill-conceived. You see, I want the basic styles for a theme just fine for date pickers and autocomplete drop-down boxes... but I don't want the styles for tabs. I think the problem comes in where you guys are using .ui-widget-content and stuff for the tabs - the fact that you are sharing a lot of classes across widgets makes things less configurable and harder to customize. A lot of people will want their tabs to really reflect how their site looks
Modal window: resizable abnormally works on bottom left but not on bottom right corner
Version: 1.8.10 My jQuery modal window works properly (thanks to you guys for such a beautiful job). I have one issue though and that is: I want to resize the modal window but it does not let me do it from bottom right corner of window, instead the resizing works on bottom left corner of window, also the image to represent resizing is missing. Why does this happen and how to fix it?
Open Accordion on external Link
Hi, I have a problem like many before me. I use as standard accordion as can be seen here. But I would also open a link outside of the Accordion on the page a section. Unfortunately I can not find any reasonable instructions for it. cu Phillip
draggable stop and droppable bug?
Hello. I have the same code (i created a backgammon game) in two pages. In one it is a simple html with the js attached, and it does not communicate with the server. So i cannot send the move to the other player. The other other one is an aspx page with the same html (literally nothing changed) and is imported at a main page as an iframe so as to create the tables for two players to play. The weird think is this. In both pages, in the js code (which i repeat that it is the same exactly) i have a
A challenge perhaps?
I'm working on a website which requires a chunk of code, the nature of which is proving to greatly exceed my limited knowledge of JQuery. The structure of the site is as follows (not quite sure if this is optimally structured for what needs to be done with it, JQuery-wise): <script> $(function() { $(".menutype,.contenttype").draggable({revert:true}); $(".content").droppable({accept:".menutype,.contenttype"}); $(".content").droppable({ drop:function(event,ui){ $(this) $('div.content').attr('id', 'contenthover')
Jquery: can't drag input images.
Hi, I got a few input images that I want to be draggable. but when I used the jquery .ui draggable it would add the class to the input images but the input image won't be draggable. Does the drag by jquery .ui allow input images to be draggable? here is the code I am trying to do : <input type="image" id="contact_button" src="/location/contact_button.png">Here is the jquery code: $("input,#contact_button").draggable();I have selected all inputs and the contact button. Which is a input image. this
JQuery UI Tabs scrollable tabs
Hi, I am looking for tabs functionality similar to Extjs or dojo where we have functionality to scroll tabs when we have many tabs.i found functionality some thing closure to them in jquery at http://seyfertdesign.com/jquery/ui.tabs.paging.html. the problem with plugin is it works fine for Jquery ui 1.7 and jquery 1.3. when we are using the same plugin with 1.4 and ui 1.8.pagination doesnt work as seen in above link and if we try to close lat tab it is not closing.Any help here would be greatly
tabs disappear on second view
Hi, I'm working on a Struts 2 and using jQuery. In regards to this problem, I'm using jQuery UI tabs and loading the content via Ajax. On initial page view, the first tab is shown with the proper content displayed. Click the second tab, the proper content is displayed. Click back to the first tab, the proper content displays for a second then the page goes completely blank - completely blank. Here's the tab markup. <div id="tabs" > <ul> <li><s:a value="%{birDetailsUrl}" >BIR Edit</s:a></li>
2 Autocomplete problems
I have 2 problems getting an Autocomplete to work. First, the term is not passing to the php script to modify the query as the user types. Second, the ajax success response is not properly created so no dropdown appears for selection. I have modeled the ajax success on the JSONP example in the Autocomplete documentation section, but it doesn't work for me. According to Firebug, the php does execute a query (but not using 'term') and create JSON. Here's the code. Any help would be appreciated. jQuery:
visual studio 2010 jquery and ScriptManager causes an error
see on stackoverflow
Widgets internal events - separate treatment of handlers and callbacks.
I have a task of creating composite user controls - like an autocomplete bound together with two buttons (namely, "Update" and "Create"), which is bound to a bunch of service methods responsible for selecting, editing and creating entities. It is used for on-the-fly entities management. The problem is - to provide a consistent behaviour I have to use internals of the associated widgets, like triggering internal events (e.g. if we create a new entity, we should select it immediately in autocomplete,
Autocomplete question
Is there a way to know when autocomplete does not return any value ? For example, the user is looking for a none existing item in a shop and I want to inform him about this in a "popup" div
Strange JQUERY Date Picker not loading when stylesheet is loaded.
Hi guys, this is my first time posting on the fourm. I have a problem with my JQuery UI date picker. I have an input field with a date picker to be attached to it, like so. It has a class of jquerycalendar attached to it. <input type="text" name="txtFollowUpDate" id="txtFollowUpDate" class="jquerycalendar" tabindex="2" readonly="readonly" /> In my Javascript I have an event handler which will attached the input to a method called loadCalendar() $().ready(function() { //loads datepicker
Accordion doesn't work
Allò! I'm just desperated because I'm trying to implement the "easy" accordion widget on my web but It doesn't work. I've read a lot of about it and I can not understand why it doesn't work because the implementation it's very, very easy! I'm new at Jquery so I'm sorry if my mistake it's very fool. I attach my files so I'd appreciate any help. The problem is that the accordion is expanded even though I wrote $(document).ready(function($) { $('#accordion div').hide(); $('#accordion
arbitrary timed effects
Hi Folks, I have some elements that I wish to animate until an external event occurs, as far as I can tell the UI effects all run for a set time. I can set a callback that restarts the effect I suppose like this: $(thing).effect(effectname,options,effectTime,restarteffect); function restarteffect() { $(this).effect(effectname,options,effectTime,restarteffect); } But how would I later remove the callback so as to terminate the effect when it finishes a cycle? Cheers, Robin.
Using jQuery Autocomplete in modal dialog using ModalPopupExtender from AjaxControlToolkit
I built a modal dialog using the ModalPopupExtender from the AjaxControlToolkit. In that dialog, I'm trying to use the jQuery Autocomplete feature on a textbox. The values for the autocompletion are fetched from a webservice. I can see that the webservice is returning a result set, and I can see that being picked up in the Autocomplete code. However, the list is not displayed to the user to pick from. I thought this might be a z-Index issue, so I specified 'z-index: 9999 !important;' for the '.ui-autocomplete'
problem with ajax tabs in jquery-ui 1.8 and jquery 1.5
I try to use ajax tabs based on the example from the documentation as shown in http://jqueryui.com/demos/tabs/#ajax. I'm using jquery-ui 1.8 in combination with jquery 1.4.4 it works, but it's not working when using jquery 1.5 (which is included in debian wheezy). Is this a bug or has anything changed in the way to using ajax tabs ? My source code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css"
if a ui dialog with a form is opened again (no page refresh), the .live() elements do not respond
The first time a dialog is opened with a form, a button that changes a dropdown to a text field when "Other" is selected works fine. If the dialog is closed and then opened again, the .live('change',function()) script doesn't work properly. The script is activated, when I insert an alert() into the script at the right point (insert alert after line 9 below), the alert appears, but the script does not complete. The elements are there and correct. Very strange. $('#poOrderMethod').livequery('mouseup',
Is it possible to put a button inside autocomplete in jquery ui plugin?
My requirement: I have a 4 text input fields that I want to implement autocomplete functionality. If the input does not match the drop-down-list, I want to put a button that will open a jquery modal form, that the user can enter the desired data which will update the list. I am implementing this using simple jsp and tomcat My problem: I have put a button in the drop-down-list when the input does not match. When its clicked, nothing happens, and html code for the button gets populated in the input
Can't figure out why footer is cut off after using ui tabs...
Hi everyone, I am new to jquery. I was playing around with the ui tabs but can't seem to figure out why my custom footer gets cut off whenever I apply the <div> tags for the tabs. Below are the links to what I am referring to: http://www.photoboothnews.com/sample/before.php (This is when everything was working fine) http://www.photoboothnews.com/sample/after.php (This is after I apply the ui tabs, notice the footer on the bottom gets cut of on either side) I would greatly appreciate it if someone
Select in Dialog causes slowness in IE8
I have just run into a scenario where <select> elements in a jQuery UI dialog become slow to react or stop all together. This problem appears to have been reported as #6644 (http://bugs.jqueryui.com/ticket/6644). Problem: The setup is as follows: 1. <div id="myDialog"> contains a <select> element 2. jQuery.ready() initializes dialog on <div id="myDialog"> 3. A click event on an <a> triggers an AJAX call which retrieves data, populates the <select> and opens the dialog <div> I have tested this
How can i include some certain jquery ui library in my page?
Hello there, I want to include only some certain effects in my page. but when i put for example, the fallowing code in my head section, the drop and pulsate effects(for example), doesn't work... . <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery.effects.drop.min.js" type="text/javascript"></script> <script src="js/jquery.effects.pulsate.min.js" type="text/javascript"></script> but when i put <script src="js/jquery-ui-1.8.9.custom.js" type="text/javascript"></script>
Why are versions numbers hard coded in file names everywhere?
Hi guys One of our developers is using Jquery-ui in one of our web apps. A downloaded tree (not the most recent one but it is the same there) would look something like this: jquery-ui-1.8.5.custom js jquery-1.4.2.min.js jquery-ui-1.8.5.custom.min.js css ui-lightness jquery-ui-1.8.5.custom.css It is now very tedious and error prone to upgrade the library, because you would have to replace all links in any calling code (PHP, HTML etc). Is there any reason why the code
Autocomplete aliases
Hey I'm using the jQuery UI Autocomplete in my form and everything's working fine (thanks to the community). There's just one thing left to make it perfect... aliases. Example: The autocompleted field is for the user to enter his country. One autocomplete option is "United States of America". How can I do it such that if the user types in the acronym "USA", the autocompleter associates it with the "United States of America" value? In other words, is there a way to create an alias when I define the
How to change a slider size and center it in a div?
This is the code that generates my slider: div1.append('<div class="slider">\n'); div1.append('<label for="hour1">Hours:</label><input class="mimetic" type="text" id="hour1" maxlength="2"><br>\n'); div1.append('<div id="hour1slider"></div></div>\n'); $("#hour1slider").slider({max:24,step:hoursstep,slide:function( event, ui ){$("#hour1").val(ui.value );}}); The matter is, the slider fills all of the horizontal space it can. I found that I could resize it by setting a max width to the #hour1slider
Next Page