Add icon to JQuery UI Tabs (float right)
I am currently using UI-Tabs with Redmound style theme. One page only has 3 tabs. I would like to add a icon<link> to the tab bar and float it in the top right corner. Is there any easy way accomplish this. I am not extremely experienced with the css behind the tabs. i would rather not just add another tab with this icon on it. Thank you, Eric
Jquery UI Tabs and Semantic HTML: adding headings inside the unordered list items
By default, the jQuery UI tabs widget uses an unordered list to present its tabs. When using tabs for a sites' main navigation, each tab represents a major section. However, my understanding of proper semantic HTML--including how search engines give meaning to data--dictates that headings be used to denote major sections. Is it possible and semantically valid to put headings within unordered list items? E.g., with this basic HTML: <h1 ><a href="homepage.htm">Website Title</a></h1> <div id="tabs">
Range slider with different images for the handles
I have a range slider that currently uses the default thumbs, which I want to replace with arrows. I have created two CSS classes (handle-left and handle-right) but have no idea where & how to add them (jquery newbie...). The information that I have found via google did not help, mostly because it is a bit advanced for me. Can someone please point me in the right direction or show me a simple example of how it works? Thanks
Reversing the drop effect
When a user opens one of the help modals from my strip of thumbnails, I have the thumbnails drop and fade away to hide until the modal is closed. This is the code: $("#thumbnails").hide("drop", { direction: "down" }, 500); This works great. The problem I'm having is reversing the animation. When the modal is closed, I need the thumbnails to rise up and fade in, reversing exactly the hide animation. The closest I have gotten is this: $("#thumbnails").show("drop", { direction: "up" }, 500); I also
tooltip shows up in the wrong location only for the first time a tooltip is invoked
problem: the tooltip shows up in the wrong location only for the first time a tooltip is invoked. Tooltips are expected to show to the side of the textbox. First time a tooltip is invoked in IE , the tooltip shows over the left margin. Subsequent mouseover events to show tooltips are correctly rendered. using: jqueryui 1.9.2 and jquery 1.9.1. IE8 quirks mode example. Simple html file that is displays links in tooltips .move mouse over textboxes to see tooltips. http://jsfiddle.net/pullo/eN6VW/1/
Jquery multi select checkbox from mysql db
i want to make sliding menus dropdown parent and child and add multiple checkbox from mysql db Thanks, Dhani
Uncaught TypeError: Object [object Object] has no method 'uniqueId' (jquery upgrade)
I have several screens which use jquery validity and jquery tabs and were working fine in 1.7 but now throw an error and the validation is not checked. Including <script src="./jquery/jquery.1.9.1/jquery_migrate1.1.1.js"> in the header I see the error Uncaught TypeError: Object [object Object] has no method 'uniqueId' I've been back and loaded the full development bundle, confirmed that jquery is only loading once and checked everything that I can think of but without success. :-( My guess is that jQuery.noConflict()
how to create pretty checkboxes with jquery ui
I have been trying for a while now just to create just the basic set of checkboxes that I've seen in jQuery UI. I've searched google and this forum and found little help. I have included jquery and jquery ui and the jquery ui css. The one thing I was unsure about was what to include in my custom download of jquery ui. From my research I think it is the "Button" module. Is this correct? Thank you Mike
missing custom theme in download
Hi I downloaded a custom theme that I created with the theme roller http://jqueryui.com/themeroller/#zThemeParams=5d000001001406000000000000003d8888d844329a8dfe02723de3e5701dc2cb2be0d98fe676bb46e85f3b85ff2d347a9c5170a6c17a4a3d926b08b9d199c4e573fcbf9cc1a2dd092a9d80b6fda5395ff84763f9e74d6cee21250c8f33243ef1589abab919cf7e8298f8769fec181781bf142e5e800e171d39cdf17e9a71fa3f781e8d76766b23c44b6d7f1e75c1abeef4410d820c31ef0620d79195b33d4cfc1e768094ce05fee304b2ad41db26904aed74c8c374ce1ff1c0a5c42f56dac08ad8961127638038b61b2703209b4091d7fb93a47a1d3e43a67c5a94b7e29c959f13c24559cb1a76b1bec1a71f1949db710f4557f3d1da2d39f90aff28f2b6ba8dd96ed5f5a0015166ef5567f70537d248d57b05c70e4fcc5845d9e1610b45d0d394c32ba0d5f992c00dca92aefe65863782767fcedea56a04e59e78457e74c5f1b23fdcd98c0b6bf4dbbe623d93fcb961477a3b6ff6f49245a0d75647ac7dcf1c860ed9882370de9a120924b3eaa4d72b858c41bd8bfbc944508a9fda3a42ff055dfa6e2ef96330dff48fe7a403db64306e0229493b498532edda2985338cbfd2dca06a59153f6300753623a533e25248b8dca8c2261083a9ebf73103a260168b2f957d138e17a4c80b5a901f1b748cff996db44f467265f09d1234456b9819fee221715dc98870f7e120db924d76acd66a3c270b2ee627140195c5c9e869d89c5acdf9330a84af5ae2c6c31792faa3aa55240bbecb844cb72dc1718194fff63506a7
How to open a modal window when clicked on link present in each row of a table
I am using jquery to opena modal window. To start up with I am using same code as present in jquery demo for form modal window. Button which triggers modal window is present in a column of a table and each row has this button. My problem is button present in first row only works and all other button in the table does not work. Here is related code: <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
dialog after upgrading
hi, I just upgraded a procedure to jquery ui 1.10.1 and i have a problem center the dialog in the middle of the windows and chrome 25 shows in the middle but moves the existing page up. Before the upgrade the dialog was show in the middle of the page how can I understand where is the problem?
hot sneaks theme is not renderd
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/hot-sneaks/jquery-ui.css" type="text/css"/> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script> </head> <body> <header > @Html.ActionLink("Home",
Accordion!
Hi guys! First of all I'm new at jquery! So go easy on me! :) I started to use the accordion, but i would like every section to be closed, so it can work like a menu! Can any one help me? Thank you!
Chess
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> <style> #header { width: 100%; text-align: center; } .area { position: relative; width: 336px; height: 336px; } .block { position: absolute;
Trigger("click") and menu select event problem
I am using a menu widget from jquery UI, so I have code like this : $( "#menu" ).menu( { select: function() { $("#test").trigger("click"); } }); and as you can see, when I select an item in menu, the function does several things and it alsotriggers a click event on some buttons. The problem is, that this trigger() causes that the select function is called once again and I can't find out why. Sadly I can't give you my code, because it's to complex and it need many other functions and elements to work.
Refresh table in base view after dialog box closes
Hi all , I am developing an application using MVC 4 . I have a base view with HTML table , it gets populated by MVC controller and displays a list . There is add button on page , on click of which a dialog box is opened. Dialog box is loaded in a div and a partial view is returned . Something like This is dialog box definition $("#IssueDialog").dialog({ autoOpen: false, width: 450, height: 300, modal: true, buttons: { "Save": function () {
Custom Theme Link Not Working
I created and downloaded a custom theme yesterday that was working, even when I copy and pasted the link into my browser. Today, I copied and pasted the same link into my browser and I'm getting something that resembles the smoothness theme. Is your site broken? Here is the link.
JQuery UI Panel does not close
Hi i have a problem with the JQuery Panel. When I open the panel it does not close when I click on the outside of the panel. my header and my navbar go back to their old position but the panel is still open? this problem only occures on Chrome. all works fine for Opera and the IE does not show anything. here is my code please help me fix the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"
Trying to change the a:link and a:active colours in JQuery UI tabs
Hello I am doing a website for the company I work for and have chosen to use JQuery UI Tabs which work great! Except I cannot work out how to change the a:link, a:active colours in the tabs. I have changed the colours for the rest of the site (using CSS) but the link text in the tabs stays untouched and still show as blue in the browser!? (see screenshot below:) I am assuming I should be looking at the "jquery.ui.theme.css" but no-where is the #blue colour - so I cant see what I should be changing!
Restoring saved position from MySQL with strange problems
Hi. I have 3 draggable DIVs. At the end of every Drag-Event, I write the new position to a MySQL-DB. When reloading the page, I load the last position for every DIV and restore this position on the page. That´s how I do this: //Javascript-Function $(function() { $( "#dash1" ).draggable({ stop: function(event, ui) { var Stoppos = $(this).position(); koolajax.load("content/dashboard/updatecoords.php?dash=dash1&x="+(Stoppos.left)+"&y="+(Stoppos.top),handle_ondone_dashboardAction);
jQuery UI Datepicker and Prototype.js
Hi, i have downloaded jQuery UI 1.8.6 and taken an existing datepicker demo (min-max.html), and updated it as follows: Included prototype.js (version 1.4.0) before the jquery script import Updated the inline javascript as follows - var $j = jQuery.noConflict(); $j(function() { $j( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); Running this in Firefox 3.6.3 causes an infinite number of javascript errors (invalid array length) at line 464 in prototype.js.
Getting XML into a jQueryUI dialog
I have an issue with web app. I need to be able to display xml in a popup dialog if selected. The jQueryUI dialog function appears to work fine up to a point. When I push the data, the only thing that is displayed is the content information of the xml. All of the tags, attribute, etc., information is missing. I need to be able to show the whole thing and 'pretty printed'. I haven't seen anything that allows me to specify the format of the xml. I would truly appreciate any help with this. Thank
Draggable element - How to save the position?
Hi, I'm new here :). I've found it: http://docs.jquery.com/UI/Draggable And I've a question: How I can save the position of an div (with the draggable plugin) to a my MySQL Database? {Sorry for my bad english :-\...} Thanks to all!! Mirko
effect for tab
Hi Dear I used UI for tab like this <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1" class="toggle"> <p>test1</p> </div> <div id="tabs-2" class="toggle"> <p>test2</p> </div> <div id="tabs-3"
Tabs
I have Tabs <div id="tabs"> <ul> <li><a href="#tabs-1">Tab1</a></li> <li><a href="#tabs-2">Tab2</a></li> <li><a href="#tabs-3">Tab3</a></li> </ul> <div id="tabs-1">1</div> <div id="tabs-2">2</div> <div id="tabs-3">3</div> </div> its working fine. Now i need to add one more div like <div id="tabs-1">4</div> next to div tab-3 with same id of tab1 <div id="tabs"> <ul> <li><a href="#tabs-1">Tab1</a></li> <li><a href="#tabs-2">Tab2</a></li> <li><a href="#tabs-3">Tab3</a></li>
Datepicker - Format User Entered Date
I am trying to format the date if the user manually types in the date instead of using the datepicker calendar to enter a date value. Is there a way this can be done with the .datepicker associated with the textbox? TIA!
Accordion navigation
This problem describe in other posts - but all they stay without any answers and commentary form developers. Question to jQueryUI developers: 1. Why You remove useful feature "navigation" from accordion ? It was really useful thing but now impossible to use it AND I can't see nothing to replace this function - no API for do it manually. Really, why ? 2. What solution for now for repeate "navigation" functional ? In theory we can find <A> tag: var current = $accordion.find("a").filter(navigationFilter).eq(0);
Datepicker not appearing only when a page is called within another page
Bit of an odd one here that I can't understand. I utilize DatePicker from the latest jquery on several ASP pages. I am streamlining our site to have less direct page submissions which means the content is being called to a div by AJAX now. If I open the pages directly datepicker is present and working, if I load the page into a div with AJAX Datepicker doesn't appear. Thoughts? I can include any code desired. Here are the basics: <!-- Setup Datepicker: this is included in my script.js and
Feature request: Large modal dialog inside a small modal dialog
If I open a small modal dialog and in this dialog I open another large modal dialog, then this second large modal dialog is displayed inside the first small dialog. It doesn't look very nice, as scroll bars appear. How to make second modal dialog to look "detached" from the first dialog? So that if it is higher or wider than a parent dialog, it still would be displayed full size, not inside parent dialog. Dialog has option appendTo, but if I attach second dialog to top.document, then it doesn't work
jQuery dragable & dropable
I am trying to implement drag & drop based on storing and loading to and from database. Data is saving and loading fine without any issue. But the problem is after loading I can't drag & drop. I am saving to database the id of the li accordingly loaded as per data. How to resolve full drag & drop functionality after loading from database. I am using the same code of UI droppable demo.
Chrome link status bar gets stuck using tabs
Hi all, We use the wonderful JQueryUI tabs on our webapp and found an issue which only appears in Chrome after we moved to a recent version of JQueryUI. I created a bug http://bugs.jqueryui.com/ticket/9148 but apparently what I'm seeing is expected behavior. Any suggestions on how to solve our problem? Essentially - Chrome's lower status bar shows after you click on a tab and move your mouse around the tab content. Other browsers show the link only when the mouse is hovering over the tab. Our webapp
jQ Modal and ASP Custom Validator not firing
I'm new to using jQueryUI (and most Dev work in general) I'm creating an intranet ASP forms site for work, and wanted to use jQuery modals for quite a few applications, most of which involve user input and therefore validation...but for the life of me I can't get my ASP Customer validator to work when the DIV is a modal. Everything works fine if I have the Modal div visible and use it in the page, but even with everything visible if I then use the below to create a modal using it whether I use the
Dynamic Context Menu
Hi everyone, i'm searching for a solution to extend jQuery menu widget. The menu entries has to updated and changed before open the menu depending on table cell. It opens on mouse click on the table cell. Have i create/ rebuild the menu every time? How i derive the menu class and implement a function for "beforeOpen"? Thank you very much. Best Regards, Tino
A typo in datepicker documentation
http://api.jqueryui.com/datepicker: an example for parseDate() says "shortYearCuroff" instead of "shortYearCutoff".
Not accepting a drag
<html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script> <style> #draggable1 {color:grey; font-family:HelveticaNeue; font-weight:900; font-size:40px; } #drop{ border-bottom:2px solid #ccc; width:330px; margin:240px 20px 0px 440px; float:left; } #text1
Conflict between two js files
Hi, I created web site with some js. Specifically autocomplet jquery using this manual http://jqueryui.com/autocomplete/ and map-highlite using this site http://davidlynch.org/projects/maphilight/docs/demo_features.html. I did not releaze problem until now. <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> When I commenting third
Problem using autocomplete with typing Korean letter
After Jquery-UI 1.8.1 version, If I typing Korean letter and When press down arrow, auto complete popup is hidden. so I can't choose using the keyboard, but there is no problem with using mouse. Selecting using keyboard more comfortable than using mouse selection. Please check this problem.
Dynamically updating chart based on user inputted data
I am trying to develop a mini application that allows users to update a chart (jqPlot) based on the values they select via the jquery UI sliders. What is the best way to do this?
Draggable and sprites
I've got a map that has countries which 'light up' on hover by using sprites. I'm dragging draggable items to the country each belongs to and droping them there. This all works, but my sprites don't work while dragging a draggable item over them. I'm not sure if this is because the draggable item is blocking the event, or because the mouse is in a 'down' state while dragging and item. I noticed that if I click the mouse and drag it across the sprites area without dragging an item, none of the sprites
Jquery UI tabs problem, how to reload the active pages with ajax when click on the current tab second time ?
My html structrue like below: <div class="mainTabs" id="mainTab"> <div class="tabNav"> <ul> <li><a href="#mainTabs_1">home</a></li> <li><a href="ajax/mPage1.asp">information</a></li> <li><a href="ajax/mPage2.asp">project</a></li> <li><a href="ajax/mPage3.asp">hr</a></li> <li><a href="ajax/mPage4.asp">other</a></li> <li><a href="ajax/mPage5.asp">control panel</a></li> </ul> </div> <div class="mainTabContent"> <div id="mainTabs_1"
Next Page