UI Dialog for <a> tag
Hi I want that when I click on some link like <a href="some other url"> some other page with a form </a> it open up in a dialog. Is it possible with Jquery dialog, if yes then how? Most example I have seen have the dialog's html inside the parent page as a div.
Setting and getting Dialog UI options
I've been working with the Dialog UI (v 1.5.3 - I have to run the most stable) and can not set or get the options once the Dialog has been initialized. It doesn't throw an error; however, none of the options take effect. Initialization line: $("#nested").dialog({autoOpen: false, modal: true, overlay: {backgroundColor: '#000', opacity: 0.5}}); Setting an option after initialization: $('#nested').dialog("option","width", 600); The first line works perfectly and later on when the second line is executed
Jquery Draggable conflicting with another script? Possibly ui.tabs
Hi I have the ui.tabs jquery script on my site and I just added another plugin(jquery alertbox) that uses ui.draggable script and now my tabs are gone. I am not sure if there is a conflict between these 2 scripts or if some other conflict. If I remove the ui.draggable the tabs come back. if I leave both the ui.tabs and draggable I loose the tabs but the dragging still works. The only error I get is this: [code] $[namespace][name] is not a constructor http://localhost:4791/Planner/Javascripts/ui.core.js
How to make other frame's button disabling?
Dear Everyone I make 3 frames program, I want at frame "show_kaisou" to make frame "show_button"'s button name = "bango" disabling, who can tell me how can I do it? Thanks in advance. Wang Suya <FRAMESET COLS = "20%,80%"> <FRAMESET ROWS = "100,*"> <FRAME SRC="button.php" name="show_button"> <FRAME SRC="auto.php" name="show_kaisou"> </FRAMESET> <FRAME SRC="main.php" name = "main"> </FRAMESET> </head> <body> </body> </html> _EOD_;
Late Binding onSelect for DatePicker
Hi, Is it possible to "late bind" to the onSelect event on the date picker after the standard setup is called? If I use this code $("#date').datepicker({showOn: 'button', ... onSelect: function(dateText) { alert (dateText) } ... }); Then the event binds correctly and fires as expected. I only want to bind to this event in certain cirumstances so I created another function that I call independently. function handleSelect(id) { $("#" + id).datepicker( { onSelect: function(dateText) { alert(dateText);
problems with UI tabs
Hi people, i can´t make it work fine the UI tabs plugin. i downloaded the entery jquery UI, i added to my project, etc etc. The problem is that instead of getting the tabs, i get a list (it seems without css) and all the elements in one tab, but when i click the for example the second element on the list(second tab), it tookme to the elements that should be in the second tab... this is my code: <link rel="stylesheet" type="text/css" href="/...../css/tabs/ ui.tabs.css" /> <script type="text/javascript"
UI Tabs loading another page with validation or any jquery code
Hi there ----------------------------------------------- jquery - 1.3.1 and 1.3.2 jquery ui - 1.5.3 and 1.6rc6 ----------------------------------------------- i have a basic jquery ui tabs page, see below: <script type="text/javascript"> $(document).ready(function() { $("#tabs").tabs(); }); </script> <body> <table width="100%"> <tr> <td> <div id="tabs"> <ul> <li><a href="formvalidationEx/ example1.htm">Example 1</a></li> <li><a href="formvalidationEx/ example2.htm">Example 2</a></li> <li><a href="#tabs-3">Example
How to set maxWidth after init for resizable option.
Hi all, I am new to jquery ui plug in. Now i am working on the layout desgine using this plugin. I would like to set a maxWidth for layer, when the resizing the layer. Intially it is working fine. But, how can set maxWidth once i have done the resize. $(".topcls-row").resizable( { alsoResize:".topcls- row",autoHide:true,maxWidth:rWid,resize:function(ev,ui) { $("#tlrows").attr("value",ui.size.width); // Here i
resizable in v 1.6rc6 not working in firefox?
This is working ok in ie8 but not resizing in firefox: with jquery-1.2.6.js and jquery-ui-personalized-1.5.3.js both ok <!DOCTYPE html> <html> <head> <!-- works ok in ie8 but no resizing in firefox --> <link rel= stylesheet type="text/css" media="screen" href="n:\apps \JQuery\v1.6\theme\ui.all.css"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-ui- personalized-1.6rc6.min.js" ></script> <!-- online example uses src="http:// jqueryui.com/latest/ui/
Using Lightbox image resizing animation effect without the rest of Lightbox?
Wondering if there's a way of using Lightbox's image resizing animation effect without loading the rest of the functionality of the plugin? I'm using a very simple clean script (jqgalscroll) for a photo gallery but I'd love to add the resizing animation. Thanks!
loading the content of an accordian from json objects when page is loaded.
I would like to programatically load an accordian when a page is loaded from json objects (which I already have). I just can't fiqure out how to load the accordian when the page is loaded. I understand the $(document).ready(function(){ // Your code here }); part but after that I'm a bit confused. I've looked over the site and google it with no luck. The json is coming from a dojo.datastore. I'm using an example I downloaded and the accordian looks like this-> <div id="accordion" style="width:300px;
Dialog - how to pass variables
I'm using UI 1.7 and jquery 1.3.2. I have the dialog set up [code] $(document).ready(function(){ $("#review_update").dialog({ autoOpen: false, modal: true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: { 'Close This Review': function() { //pass id here //$("#printouts").load ("documents/mydocuments/setreview/"+id+"/"); }, Cancel:
dragging between [complex] sortable lists leads to lost items in .toArray()
I have a bit of complex problem, so I'll try to be precise in describing it. I have list, sortables-A, containing other sortables-B lists; all sortables-B lists are connected with other sortables-B lists - and all sortables-A lists are connected with other sortables-A lists. When I drag a sortable-A item to a connected sortable-A list, the update event fires .toArray ( I've also tested .serialize ) for AJAX communication with a database to remember the order. Intermittently, the 'serialized' receiving
Dialog has no scrollbars
Scrollbars refuse to appear on my dialog box. function LoadDialog (id) { $("body").append('<div id="dialog"></div>'); $("#dialog").dialog( { title: 'Dialog', autoOpen: false, resizable: false, width: '525px', height: '500px' } ); $("#dialog").dialog("open").load("/in/content.php"); } Calling this function creates a dialog box and loads "/in/content.php" into the dialog box, but scrollbars do not appear. The content in "content.php" is much longer than the 500px height of the dialog box. I've tried
Dialog with included form won't submit in IE
Hi there, I am trying to get a variable dialog fixed with some external loaded form, but somehow the form won't submit. In FF it all works, but IE won't submit. Even if I replace the submit button with a normal button with this.form.submit();. I even tried to use an ajax way to submit the form, but when I try to get the values of the form into a datastring, it says "name=undefined&id=undefined"... :S This is the ajax way i tried with a normal OK button: $("#dialog").dialog({ autoOpen: flase, buttons:
.tabs('select', index) problem
Hello, I have a search interface on my page and I want to show search results in a tab. When the search is performed for the first time, it works fine - new tab appears and gets active. However, when i try to search one more time, nothing happens, the tab with search results doesn't get activated (search results get updated however). here's a sample code: if (searchPerformed == 0) { $("#notebook").tabs("add", "/ajax/search?query=" + query, "search results", 1); } else { $("#notebook").tabs("url",
Issue: TypeError: $.widget is not a function
Hi, I'm quite new to jQuery and jQuery UI development (and even JavaScript for that matter) and I've been trying out the examples from this tutorial: <u><a href="http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/">http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/</a></u> and midway through the tutorial, I came across this error while trying out the examples: <span style="font-family: courier new,monospace;">TypeError: $.widget is not a
the jquery UI demo "slider side scroll" is not working in IE7
try the following in IE7 http://jqueryui.com/demos/slider/side-scroll.html in the code of the example var leftVal = parseInt(scrollContent.css('margin-left')); somehow the scrollContent.css is becoming string 'auto' so when you parseInt, it becomes NaN
Sortable and droppable list
Id like to create a list that is sortable and droppable. Is this possible. I am new to jquery so i apologize if this is a dumb question or if im asking this at the wrong place. I did google quickly for "selectable and droppable jquery" and nothing relevant came up. Thanks
Override ui-icon-closethick on the dialog?
Ok, I'm fairly familiar with CSS, but I'm no expert. Can someone please tell me how to create a custom button JUST for the dialog? I've been able to override other elements ok, but ui-icon-closethick just wont work. I simply want to replace that boring grey "X" with a nice red glossy button that matches the rest of my site. Is that even possible? I was hoping it would be something as simple as this: .ui-icon-closethick { height: 18px; width:24px; background-image: url(/platform/images/small_close_button.gif);
shadow dialog misplaced after opening with effect
I open a dialog with a "blind" effect. Problem is that the shadow does not refresh as the effect is being executed. It ends up staying at a higher position than the dialog window. It goes back where it belongs whenever the dialog is resized, but I don't know how to make the dialog believe that it was just resized after the dialog is opened. I saw a _shadowRefresh function in ui.dialog.js, but I don't know how to have access to it (assuming it does what is needed). Normally, I would just use fading,
Back button
Hi, When I use the slider plugin on my page, there are scenarios there I click on a link on the page, and then want to use the "back button" in the browser to get back to my page with the slider plugin, then my (document).ready function goes off and resets the slider to default value. Iam not sure how I can prevent this behavoiur? I just want the page in same state as it was when I leaved the page.. Best regards Claysson
.slider() locking onto mouse outside host element 2
Hi there, I am re-posting this issues as I have noticed another member is having this problem but no one seems to have answered it. I am using the JQuery UI Slider and I am having the annoying problem when a user drag the slider to the far left (using a horizontal orientation) past the boundaries of the element and releases the mouse button the slider sticks to the mouse pointer when re-entering the boundaries of the slider html element. See demo: http://www.youtube.com/watch?v=DB-xb8esbqw I have
UI effects - Class transitions and Chrome problem
I've been trying to use class transitions in the UI effects.core. (1.7 or 1.5.3 jq 1.3.2) The following jQuery('#myDiv').toggleClass('big','fast'); doesn't seem to work in Chrome (1.0.154.48) but is fine in FF, IE7 & 6 There is no callback documented for transitions but it does seem to work fine, at least in ff & ie. Is this a documentation problem or a feature that shouldn't be relied on?
Datepicker magic date
I just found out that Datepicker hates 31st of March date if configured to use it as a maxDate. It becomes unselectable and I couldn't find a workaround how to get rid of such behaviour. Code to reporoduce the bug: <script type="text/javascript"> var magicDate = new Date(2009,2,31); $(document).ready(function(){ $(".calendar").datepicker({maxDate:magicDate}) }); </script> <div class="calendar"></div> I'm using latest stable release (1.5.3 version). Switching to 1.6rc6 is not an option since a
possible to work with ui and prototype?
hi, is there a solution for this case? jQuery.noConflict(); makes an own script work with prototype, but what if i have an ui script? best regards m, cologne
tabs
Hey I am trying to use AJAX thought the whole of my site. A temporary version can be found at: http://www.cs.bris.ac.uk/home/ss6568/testing/sam.html My main questions are: 1. Does Tabs support history and bookmarking yet? (If not, is they any current way to do this?) 2. Can you make a link inside the open tab change the tabs location? Thanks! Samuel
Accordion: No Icons; Also, Collapsibox: single item Accordion
1.) I was trying to create an accordion widget with no icons. I first tried a few things in the "icons" options, then fished around the jquery-ui source. It seems there is no way to have an icon-less accordion. Is that correct? 2.) On a somewhat related note, in spite of the "NOTE" on Accordion's doc page, I am currently using Accordion for a single-item box. At the moment, I am applying $.accordion() to the element, then changing the click behavior for the header and content. Why would I do such
Change accordion behavior
The accordion documentation page says the following: NOTE: If you want multiple sections open at once, don't use an accordion An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this: jQuery(document).ready(function(){ $('.accordion .head').click(function()
having trouble with Accordion menu
I implemented the accordion menu from http://bassistance.de/jquery-plugins/jquery-plugin-accordion/. It works great in Firefox but in IE each individual accordion window rapidly opens the entire height of my screen when I roll over it. In the example files it seemed to work the same in IE and Firefox but I haven't been able to figure out what I messed up. Any ideas? Here is a link to the accordion menu that I am working on... http://www.girlscoutsaz.org/products/list/
Creating and storing key/value pairs on drop of draggable elements
In my interactions js file, I have set up draggables and droppables. $('.draggableRecipe').draggable({helper: 'clone'}); $('.dayDrop').droppable({ accept: '.draggableRecipe', drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } }); Here is an excerpt of my HTML as it currently stands. <div id="recipeTray"> <div id="sevenDaysBanner"><img
problem with Drag & Drop and Dialog
I am trying to drag a div, and drop it onto a div within a Dialog. It works fine when the div is not within the Dialog, but not when it's surrounded by the Dialog. I am brand new to jQuery, and have searched for a solution but can not find one. Here is my simple test code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="js/theme/ui.all.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
no dialog box after first click
Hello All, I have an interesting problem in which I'm using the .dialog() to load a dialog box. This is working perfectly the first time I click my button, but after closing the dialog and clicking the button again, I get nothing. No dialog, no nothing. Can't really figure out why it would work find the first time I click, but not after that point. Do I need to rebind an event to the button again? My code is below (used to delete a record from the DB): $('#delete_client').click(function(){ $('#delete_client_modal').dialog({
Document un clear for delete node from dropZone area!!!!
Hi all, I am new to jquery ui, Now i am working on drag and drop component. My code is working fine upto drag and drop. I am unable to do when ever i am trying to delete my droppable items from dropped items. Jquery ui document also un clear this. Please help to fix this problem. with Regards sure.
Style question for multiple sliders
I have a number of two-handled range sliders on a page. The left handle is fine; when I slide it all the way to the left it sits at the leftmost edge of the slider. The right handle, however, ends up with the left edge of the handle lined up with the right edge of the slider, which is less than ideal because, the way I have the handles styled, it looks like the handle is detached from the slider, with a slight gap. Is there any way to tell the plugin to align the middle of the handle with the edge
Two Resizable Divs
Hi, Apologies if this query has been sorted previously... I searched the group and gave up after looking at the 15th page of results! I have a div container (menu) with two child divs inside it. I want to make those two child divs resizable, but have it so that when one is expanded, the other one shrinks and vice versa. The width will remain the same, but the heights will change. So when DIV A is dragged down, DIV B is shrunk down proportionately... Any ideas? Thanks, Stephen
Whats the Best way to load another html page using UI tabs?
Hi there I want my main page to use UI tabs but then i want to open another page within a tab that also has some other jquery command in it. I have tried some very basic examples but when the jquery page loads within the tab the Jquery does not work unless you are using IE6/7. How would you go about this? I want to keep files seperate such as 1 for the tab menu and 1 for a form validation to appear in the tab menu. Peter thanks in advance
Newbie Q: preventing bounce effect
Hi all- I have a simple animation which is supposed to animate font size change with mouseover. Works ok, but when mouseout occurs sometimes there's an unwanted bounce effect, where the font size sort of pulses before settling back to the default. Can someone suggest how to prevent this bounce effect? Thanks! The code: <script type="text/javascript"> $(".some-ul li a").mouseover(function() { $(this).animate({fontSize:'15px'},400); }).mouseout(function() { $(this).animate({fontSize:'12px'},400);
Tabs with new live function
Hello, I upgraded to jquery 1.3.2 this weekend. I also upgraded to the ui interface 1.7 preview. Now I'm building a new site with ui.tabs. On one page I have 2 tab interfaces which are loaded through AJAX. I have this script: script type="text/javascript"> $(document).ready(function(){ $("#info1").tabs({ load: function(event, ui) { $('a', ui.panel).live("click", function(){ $("#info1").load(this.href); return false; }); } }); $("#info2").tabs({ load: function(event, ui) { $('a', ui.panel).live("click",
iframe
hi everybody plz, I want to read the content of iframe loaded dynamicly from other domaine exemple <iframe src="http://www.blabla.com/bla.php">I want this<iframe>
Next Page