Change css width within nested elemetn ?
<div dir="ltr"><div>Hi everybody,</div> <div> </div> <div>This the code : </div> <div> </div> <div>var $.toPrepend = '<div><span></span><a href="#" class="class"></a></div><ul></ul>';</div> <div> </div> <div>I would like to know how can change css width of '<span>' element ? </div> <div>Its a new variable create on the fly.</div> <div> </div> <div>Thanks,</div> <div> </div> <div> </div></div>
[accordion] changing header size and back
hello, i want to modify my accordion header a little bit. if you click on "header" the header size should change from 80px to 40px in height. and if you click again on the selected header it should go back to 80px.. so i made and tested the code below, the code is working, but only once. i could open my accordion (the header size go to 40px) i could close my selected header (it goes back to 80px) but if i click again on my header it goes from 80px to 40px to 80px without a stop on 40px. ive tried
Robustness of Sortable
Hello mailing list, I'm in the process of converting/adding jQuery on several pages and wanted to employ the sortable plugin for a planned photo album, where you can set the order of the images. I recently updated from 1.5.1 to 1.5.2 and am happy that the slight jittering disappeard, that happend when I first clicked on an image :) What bothers me now is how easy it is to get the Sortables "out of sync". When I simulate a power user that moves items rapidly, blocks remain blank, images stop half-way
Tab in IE
hello guys, I try to play with jquery ui.tabs, and applied height and opacity effect, the content for each tab's content contains some <li> with height, width and float, so they are block element. in this case when applying effect in IE6 or IE7, those <li> element won't apply effects. code as follows: var mytabs = $("#products > ul").tabs(); mytabs.tabs({ 'fx': { height: 'toggle', opacity: 'toggle', duration: 600 } }); i do notice that inline element
a workarond to have selectable in sortables
<div dir="ltr">Hi, My app needs items of a sortable to be selected and dragged togher inside (other) sortable, but UI seems cannot handle this my approach: since height is different for each element I had to resize the first one to the lenght of the all selected, then I hide all selected but the first, then I can drag the visible one. Once dropped, i resize the visible one to it's original size, then move the invisibiles inside the dom just under the visible element, and finall show() again the invisibiles
sortable connected lists with overflow:auto -how to?
Hi, in a cms i have two lists, one shows the items selected and one those left. the lists are initialized as sortables and are connected with each other. for scalability reasons both lists have a fixed height and the css property overflow:auto. the problem is, that if you use overflow:auto on a list, a dragged item creates a scrollbar instead of just hovering over the lists border (this would be overflow:visible). http://www.gramberg-webdesign.de/stuff//sortable-lists-20080804-183837.png i tried
a workarond to have selectable sortables
Hi, My app needs items of a sortable to be selected and dragged togher, but UI seems cannot handle this since height is different for each element I had to resize the first one to the lenght of the all selected, then I hide all but the first, then I can drag the visible. Once dropped, i resize the visible one to it's original size, then move the invisibiles inside the dom just under the visible element, and finall show() again the invisibiles This is my firt non-trivial jQ app, so code style it's
question about show event on tab
Hi, all I would like to retrieve 'selected' option to know which tab is displayed currently. The following seems doesn't work: $('#working_tab > ul').tabs({ show: function(xevent,xui){ console.log($(this).data('selected')); } How do I know which tab is selected? Thank you in advance! jack
[accordion] changing height
Hi there, I'm pretty new with jQuery and I have problem with the accordion- function: on http://www.betschmann.ch/jQuery-Test/ you see a simple layout based on YAML and an accordion-container on the left col. On every change, the height of the div changes too - what's wrong? Simon
Bug in draggable snapping code
Hi, In the draggable snapping code, inside the drag function in lines 434-437 and 447-450 , "20" must be changed to "d": var ts = Math.abs(t - y2) <= 20; var bs = Math.abs(b - y1) <= 20; var ls = Math.abs(l - x2) <= 20; var rs = Math.abs(r - x1) <= 20; and var ts = Math.abs(t - y1) <= 20; var bs = Math.abs(b - y2) <= 20; var ls = Math.abs(l - x1) <= 20; var rs = Math.abs(r - x2) <= 20; Earlier in the drag function, "d" is set to: var d = ui.options.snapTolerance || 20; In other words, "d" is the
jQuery UI 1.5.2, position property bug
Bug in jQuery UI 1.5.2: In position property there are line-code with: position: function(pos) { var wnd = $(window), doc = $(document), pTop = doc.scrollTop(), pLeft = doc.scrollLeft(), minTop = pTop; ... } But it must be something like this to function properly: position: function(pos) { var wnd = $(window), doc = $(document), body = document.body, pTop = (doc && doc.scrollTop || body && body.scrollTop || 0), pLeft
Form with SUBMIT button stops panels from displaying.
Hi Everyone, I am having a "play" with the accrodion effect for the first time and have come across a problem that I cannot solve for myself. (the code is below) But basically, if I have a page that has 2 panels, and a form inside a panel, with a SUBMIT button, then only the first panel is displayed. If I remove the submit button the accordion displays correctly. If the form (and submit button) is on the second panel - and some help text is in the first, then the text is displayed, but not the 2nd
Invoke function on datepicker cell hover
Hi I'd like to be able to present information to users as they hover over individual dates. It looks like datepicker doesn't support this out of the box so I tried the following (with a few variations) var cellHover = function () { $(".ui-datepicker-days-cell").hover( function () { $("#log").append("foo in"); }, function () { $("#log").text("Debug: "); } ); } $(document).ready(addDatePicker); $(document).ready(cellHover); This doesn't appear to work though. If anyone has any suggestions for how I
Strategy for "slide-up tab"
Hi jQuery folks, I'm trying to figure out the best strategy for building a series of tabs that slide up and down when you click/mouseover/(whatever) the tabs themselves. To be more specific, these need to be fixed at a certain point in the page, and start from a lowered position and move up--the tab itself rising and falling (rather than the content under the tab dropping and raising back up, which seems to be easily possible with these: http://stilbuero.de/jquery/tabs_3/). Think of a tabbed card
HTTPS Security Alert in IE
There is a technique of using an IFRAME (under IE) to make Listboxes not shine through. If thise IFRAME does not possess a SRC attribute, a security alert is given for HTTPS servers under IE. I found it in jquery.autocomplete.js, but the comment there points to the calendar widget too. The following patch should do. var ifrm = document.createElement('iframe'); ifrm.setAttribute('src', 'javascript:void(0)'); $results.append(ifrm); P.S. Does anyone know about a, not autocomplete, but *quick-type* widget,
accordion - css requirements
i have just started with jQuery UI and i'm trying to implement the accordion on my web page. i have downloaded and included the standard jQuery library, ui.core.js and a personalized version including the accordion from http://ui.jquery.com/download_builder/, along with a themeroller css stylesheet, but when i preview my html page (having copy-pasted the source code from the accordion demo) it is displayed as plain text, and not as an accordion. what is it that i'm missing? what are the very basic
Existing slider code errors when using latest jquery UI 1.5.2
My slider code was written using an older version of jquery UI. When attempting to run with the new library I get the following error displayed in the firebug console: this.element.data is not a function this.element.data("mouse", this); I see from the docs that the requirements for slider are: ui.core.js ui.slider.js Apparently ui.mouse.js has been removed and its code moved to another source file. I think it may be 'ui.base.js' but can't be certain. Do I have all the requirements to create a slider
Does anyone have a style for vertical tabs?
I'm not that good in css and have no time of trying to find this out... I know i'm being lazy here but if someone has done this and can send me the css or post it i'm sure lots of people are looking for it too. mateo
jquery ui sortable 1.5.2 problem
I had this working in 1.5.0 but there is a bug up until 1.5.1 which make serialize not work the ay it should. I am trying 1.5.2 but cant seem to make this work. Any Ideas? Thanks! <script type="text/javascript"> $(document).ready(function(){ $("#homePage").sortable({ connectWith: ["#plan","#acquire","#build"], items: "li", opacity: 90, revert: true, placeholder: "sortHelper", activeclass: "sortActive", hoverclass: "sortHelper", handle: "h3", dropOnEmpty:true, cursorAt: { top: 15, left: 5 }, update:
Can't alter DatePicker font size
Hi all, I'm using the datePicker widget on a page, but having trouble with the font size of its contents. My site's core CSS file has a rule which sets body {font-size: 62.5%} This alters the width of div.ui-datepicker-inline appropriately, and the size of the prev/next items in the header, but doesn't change the font size of the month/year select elements in the header, or the individual day/date cells in the table. This means that the date cell rows are too wide for the datepicker div so overrun
UI Tabs with non-standard structure
Is it possible to use the UI Tabs without using the standard link structure? Below is the code I wish to implement, however I have been unable to get it working, I am assuming because it wasn't built for this, but can it be adapted to fit? <div id="mid"> <div id="actioncontrols"> <h2>Features</h2> <a href="#feyanix"></a> <a href="#feaquasupply"></a> <a href="#fecherub"></a> <a href="#fearchiclassics"></a> </div> <div id="actionbox"> <div id="feyanix"> </div> <div class="ui-tabs-hide" id="feaquasupply">
Activate Multiple Div Slide Effects with One Button
Hello all, I have been using the javascript and html below. In the html, there are 3 links. When a link is clicked, a div slides out from the bottom of the link. I have about 20 of these links on my page and I'd like to give the user an option to open all of the sliding divs at once by clicking on one link. Does anyone know how I could create one html link that would be able to open all of the sliding divs on the page? I'm new to jQuery and don't really know where to start. Appreciate any help, Andre
Problem with sortables
When I have 2 lists with some elements in both of them(same as in the example on the JQuery UI site) and if I drop all the list items from one list to another I can't move them backwards? For example my second list by default should be empty - and if it is empty I can't drop anything there. Is there a workaround this issue?
SSL + Sortables = Nonsecure Error Message
Hi all, I'm using jQuery and various plugins to build a new Employee Portal system for my company. I have a "Portal Gadgets" feature that gives employees the ability to choose to add/remove/move various small components to their home page. I'm using UI Sortables for the moving component. Unfortunately, the page has been giving a lot of "This page contains both secure and nonsecure items." errors in IE6. (The site as a whole is SSL encrypted.) By commenting out code and putting it back in a bit at
DatePicker and Screen Position??
Maybe I am doing something goofy here, but I am stuck... I have a form that I basically split in 2 using CSS. I have the top of my form "locked" into position using a div tag (height of 50) and then I have my "bottom" div tag as the remainder of my form. Using css, I turn off the overflow on the body tag and then active the overflow on the bottom div. Basically allows me to have a static action bar at the top of my form and a scrollable form below. My issue... I love the datepicker plugin and really
Validation plugin group problem
<div dir="ltr">Hello, I am using JQuery - 1.2.3 along with jquery.validate.js - 1.4pre. I am having a problem with group validation of fields. The error messages are being shown prematurely without giving the user an opportunity to submit the form. The page where I have this problem is : <a href="https://www.bankbazaar.com/personalloans/eligibility.html">https://www.bankbazaar.com/personalloans/eligibility.html</a>. In over there, I am validating the field group with label "When did you move to this
[JQuery-UI]Slider loading issue
<div dir="ltr">Hello, When the slider component loads, there is a time when the slider handle image is loaded and the javascript is yet to be executed. At this point, the slider handle hangs in the top corner of the page, essentially due to the css configuration of it. .... position : absolute top : 0px<br clear="all">.... This is quite a problem when the connection speed is lower than the usual. On firefox, setting the position as relative, solves the problem, but then IE6 and IE7 wouldnt accept
ui tabs problem in FF
I've been struggling to get both IE and FF working with jquery-1.2.6 and ui.tabs (latest version). My site is below: it used to work really well with FF and not at all with IE, now I can't get the tabs to work at all with FF, and I'm not getting any js errors. It seems to work ok in IE, though my tables all have double-borders around them - I'd like to fix that also, but after I fix the tabs problem. Can someone look and see if I've got something obvious wrong? I'm stumped right now, and other than
jquery colorpicker
I'm writing down a plugin to centralize functionality about colors. My intention is to write: - a colorScheme generatorbased on http://www.wellstyled.com/tools/colorscheme2/index-en.html (I'm going to post the first release in the weekend) with some functions like() - a contructor with some options (number of colors to generate, method [consecutive, opposite etc], startColor) - a next() function - a prev() function - a way to cycle if you ask more colors than the first declared - a colorManager for
UI slider - hide handle until clicked?
Is there an easy way to hide the handle on a slider until the user clicks? I want it to be visually obvious which sliders on a page the user has not touched.
question about dialog
Hi, all I found there is a horizotal bar on top of buttons on demo dialog UI. How do I have that? Thank you in advance! Jack
switchClass and background images
Hi all, I have two classes with different background images. I want to use the switchClass method with an interval to fade between them (basically I'm trying to do a highlight effect and want it to fade away). It doesn't seem to work with background images... it either shows one or the other. Is there some other function I can use to smoothly transition between background images on an element? Any help/advice greatly appreciated! Thanks much!
Applying a theme with jQuery UI
Hi, I'm working with jQuery for the first time. I downloaded the full js file as well as a theme from theme roller. I've put up an sample accordion and included the theme's CSS file put it doesn't apply to my accordion except for the dotted background in the title bar. My accordion has a class named ui-accordion-container What is it that I'm doing wrong? Firebug indicates a lot of those -moz-use-text-color in place of the colors defined in the theme but I don't see this in the theme roller file at
Ajax Tabs and Datepicker or Accordion
Hi Everyone, I am new to jQuery and am working through some of the examples, and trying to test some features for my application. Basically I would like to create a tab set, and then dynamically load the tab content. This content may contain HTML, or it may (most likely) will contain things like forms and accordions. I have tried this in a simplified way, but it has not worked successfully. Any help would be greatly appreciated. I am including the source code below. index.html <html> <head> <style
$.widget tutorial
I was trying to learn how to use $.widget to create my own components and found the official documentation at docs.jquery.com/UI/ Developer_Guide hard to understand, so I created a tutorial, mostly to help me get my thoughts in order, but others may find it helpful. It's at http://youngisrael-stl.org/wordpress/index.php/2008/08/03/jquery-ui-widgets/ I would welcome comments and criticisms. Danny
Implementing tabs into in existing HTML structure.
Hi guys, I'm trying to implement tabs into my web app but the <ul> and my <divs> are not direct children of my wrapper div. According to the documentation this is how I need to be structured: <div id="wrapper"> <ul> <li><a href="#1">1</a></li> <li><a href="#2">2</a></li> </ul> <div id="1">Bla</div> <div id="2">Bla</div> </div> Now, the html of my app (for each section) looks like this: <div class="section" id="tabs"> <div class="section-info"> <div class="section-title"> <h3>Smartphone</h3>
[newbie] Javascript in a tab on safari
I am trying to run some JQuery javascript (in this case a datepicker) in a loaded tab frame on safari. I have set the ajax option datatype to html, and according to the documentation that should run the javascript but it doesn't. If I run the exact same code in Firefox 3 on the mac it works perfectly. I did some searching on the google groups for UI and Core, and was unable to find anything relevant. Does anybody have any ideas? Thanks in advance for the help. -John
Dialog issue - safari for windows 3.1.1
Hi! I am having problem with UI Dialog with Safari 3.1.1 for Windows, don't sure it's the same for Safari on Mac. The problem is that dialog content div's width will increase every time when opening/resizing dialog. Also i've noticed that right margin will become negative value and decreased in correspondence with width. Here is the sample page which is reproducing problem: http://www.maqdev.com/ext-pages/jquery.ui.issue/issues.html In IE, Firefox everything is fine.
How do I change the maxHeight value of a resizable Div?
I'm using resizable Divs. When the user adds a new Div, I need to check and possibly change the maxHeight limit of any existing Divs to block them being resized over the new one. At page load I calculate all the maxHeight values and they are defined via the Ready() function. At that point all is fine. When a new one is added, the following happens for each Div (including the new one, hence the attempt to work out which has maxHeight defined). Unfortunately that check isn't working. Also is it possible
Tooltip widget
There are some plans to add a "tooltip" widget? I tried http://www.nickstakenburg.com/projects/prototip2/ and I would have this in jQ-UI :D
Next Page