Tab id setting with 'ajax' tabs
When loading a tab using ajax by setting the URL in the configuration, the tab content gets loaded allright. However, I'ld like to fix the tab-id to the same value as the one I set when ajax loading is disabled for the tab(s). Using the same tab id is usefull for 'CSS' configuration. Unfortunately, it seems impossible to set the tab id when using ajax loading - it is set from the tab title or content. I have tried to append '#myid' to the ajax url, but that does not impact the name. Is there a
how to change size of datepicker calender
how to change size of datepicker calender
JQuery plugin Query
I am using Jquery UI 1.11.1 version in my project . Do i need to add referance below plugin too ? <script src="@Url.Content("~/Scripts/system/debug/jquery.ui.core.js")"type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.dialog.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.button.js")" type="text/javascript"></script> <script
Slider
Hi, I need your help. I have a slider so my participant can scroll the slider bar to answer some questions between 0 and 100 But, I want de number to be visible. What to I need to do? This is the part of the script if (($dscale[$a]==97) && ($slid==0)) { print" <style type='text/css'> .slider {font: 60% 'Trebuchet MS', sans-serif; margin-top: 25px; width:300px;} .slider_text {font-size:10px;font-weight:500;} .ui-widget-content { background: #bab0cc url($path/proq/images/images/ui-bg_inset-hard_100_bab0cc_1x100.png)
Slide Effect Question
Ive been looking at the slide effect in the UI demo. Is there a way to make the slide effect instead of left-right toggle, use a right-left toggle? Thank You
highlight effect...display none problem
I have made a dropdown menu and when the user makes a specific selection I want this to be highlighted with a background color. So what I do is to addClass(with a background color) to the specific element and from there use toggle('highlight'). Here is the code: $('#timesfrom').addClass('tslothighlight').toggle( "highlight" ); #timesfrom is the ID of the drop menu. The problem is that when highlighting ends,jquery adds display:none which means the menu simply disappears-something I do not want.
Droppable tolerance touch problem
I didn't know how to formulate the question, so suggestions about the name of the question is advised :D. So basically I have a grid(the main droppable container), consisting from elements 20x20px and in order to snap the draggable in the conrainer according to this 20x20 elements I need to use the SnapTolerance to correct their positioning inside the grid. for(var i=1; i<=15; i++){ $('#box-' + i).draggable({ revert: "invalid", stop: function(){ $(this).draggable('option',
backbone view inside a jquery ui dialog
I have a backbone view and in it I have a button click event. When the event fires, I want to launch another view inside a jquery ui dialog wher user can enter information which would be saved to the database. I have no issue launching a .html page inside the jquery ui dialog, however its launching a view inside a dialog i am having issues with
datepicker accessibility - want to trigger event when using arrow keys to move through dates
Hi all - first post to the forums. I've been tasked with finding the best option for an accessible datepicker. The key is to make a screen reader announce the new date as the user presses <ctrl> + arrow keys to move forward/backward through the dates in the datepicker. I'm testing with NVDA. I've created a test page following the information in this article: http://www.deque.com/blog/accessible-jquery-ui-datepicker/. One of the benefits of the jQuery datepicker, as stated by the author, is that
[SOLVED] Accordion
I want to put inside each section of my accordion one file html (one for each header). I set $( "#accordion" ).accordion({header: "h3", collapsible: true}); and the body of my html file is typically like the following: <BODY LANG="it-IT" TEXT="#000000" LINK="#0000ff" DIR="LTR"> <P CLASS="western" ALIGN=JUSTIFY STYLE="margin-bottom: 0cm; line-height: 115%"> <FONT FACE="Times New Roman, serif"> Bla Bla Bla Bla .... .... .... Bla Bla.</FONT></P> <P CLASS="western" ALIGN=JUSTIFY STYLE="margin-bottom:
Tabs
I'm using tabs . The problem is that one need to implement a next and previous option , so that the application reload the tab and change the url of it. I used a script , but only sometimes works for me and I have to click twice on link to perform the action below and above. Can someone help me ??? Here you have the piece of code I use. function myFunction(linkUrl) { var $tabs = $('#tabs').tabs(); var selected = $tabs.tabs('option', 'active'); $($tabs.data('uiTabs').tabs[selected]).find('.ui-tabs-anchor').attr('href',
Changing Views Based On Mode
I am developing a widget using jquery ui. This widget is a survey creator. On one side, admin will be using this widget to create survey and the other end the same widget will be used by the end user to take the survey. So it will have multiple questions and choices. Data will be in the form of JSON. With the Data, I am rendering a lot of html on the page (just like a dynamic form). My requirement is, I just need to change the view(html) of the widget based on a property called mode. ie., The JSON
Hide Div tag using jquery
We have requirement like below. <div class="content_block service_detail_block" style="display: none"> <h3></h3> <div class="servive_description"></div> <div class="service_requests"></div> <div class="service_articles"></div> <div class="mbutton"> <a class="button submit_service_request" href="make_request.do?">Report a problem with this Service ></a> </div> </div> we need to hide div class with mbutton when condition (temp == ' 1234') i have tried like $('.mbutton').hide(); but it didn't work
Make a draggable element snap to the vertices around it with a high snapTolerance
I just wanted to make a grid with a dragged element and make it snap to the vertices around the element I'm dragging but having a high snapTolerance to avoid too much movement of the dragged element. Let's say we got a 20x20 physical DOM grid. Then we got a 50x50 image (or any other not divisible by 20) Let's call the image vertices x1, x2, y1 and y2. Here's a detailed image: Where you can see the black and green lines representing the physical DOM grid... Now, taking into consideration that the
Vertical tab/text styling
Hello, Is there anyway I could make the vertical tabs to be styled to appear in a up/down type style instead of the horizontal look in the vertical tabs example? Where the text would also appear vertical to match? I should just have to override the width and length maybe? Thank You
Clicking a draggable object makes it to jump away from the cursor?
I'm very new to this and know literally nothing about code I'm just watching tutorial and trying to get this done for class. Anyway...I'm using the draggable droppable code and I only entered draggable in right now but when I click on the object, it'll drag but it first jumps like 2 inches away from the cursor. Why's it doing that and how can I fix it? Thank You!
Sortable: Adding and deleting items from a sortable ordered list causes problems in numbering the items
I have sortable ordered list with a few items. Each item in that list can be deleted and/or moved and I can dynamically add more new items. All works fine as long as I do not add a new item and delete one of the existing one. Example: I run the code and get a list 1. ABC 2. CDE 3. EFG 4. GHI 5. IJK I delete "3.", so item "4." moves up and is now "3." on that list, while "5." ist now no "4." So far so good. If I add a new item it will be added at the end of the list as no "6.", "7." and so on. But
Delete dynamically created tab and panel?
Hi folks, I have exhaustively searched this topic, and none of the proposed solutions seems to work. I'm dynamically creating ui ajax tabs, and I want users to be able to delete them. It's easy to create a function that deletes the currently selected tab, because it has a class of ".ui-tabs-active" by default. But the currently selected tab panel doesn't get a class to target. So how do I do this? Here's my code: $(function() { var $tabs = $('#nav-tabs').tabs(); $('.add-tab').click(function(e)
Drag from parent and drop into Iframe child
I want to drag elemets from the parent and then drop it into the iframe child using jquery-ui's draggable and droppable extensions. I used the following codes in parent for implementing that. $('.some-elements').draggable({ revert:true, iframeFix: true, drag:function(event){ //code }, }); $container = $('iframe#id').contents(); $container.find(".drop" ).droppable({ iframeFix: true, greedy: true, over:function( event, ui ){ //code },
jquery UI Sortable with inside table and tr width
I am facing one issue with Jquery Sortable. I n my current implementation I have table inside div which is sortable when I am dragging div it is breaking table layout. Any solutions?
Acordion and dynamic content
How can i use acordion (http://jqueryui.com/accordion/#collapsible) for dynamic content. cheers noople
Internationalization support for Jquery UIs
Hi, I am using Jquery for UIs in my application. We are now adding internationalization support in the application. When we are sending portuguese characters in the AJAX response, Browser is not able to show these characters. Below are the things which we have tried: 1) Updated value of dataType inside ajax function like html, text, xml etc. 2) Content type updation inside ajax function :-- Used Utf-8, ISO-8859-1 etc 3) Different encoding options inside ajax function :-- Tried
Slider missing after long poll update
Hi, after setting a value in the slider, the DIV-container, where the slider is in, gets a long poll update. This is the code before sliding: <div id="slider1" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div> <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span> </div> and this after sliding: <div id="slider2"></div>
Slider & CSS update issue
Hi! I have found a issue that seems to be present in all examples I looked at. When you call a CSS manipulating function, it is not updated by the slider when you move it the first time. The resulting CSS modification is always one step "behind". In this example you can't set the maximum size of the box by sliding to the maximum. You have to slide to the maximum and back to any other state to get it. http://jsfiddle.net/PD8wk/12/ Any idea how to solve this? It's really confusing. Thanks! Spiff
sortable and data() problem
hello need to become the teamid / userid and id from the <ul>. works only when i moved from <ul id=2 back to 1. HTML <ul id="1" class="connected"> <li id="send" data-teamid="1" data-userid="1">Name A</li> <li id="send" data-teamid="1" data-userid="2">Name B</li></ul> <ul id="2" class="connected"> <li id="send" data-teamid="1" data-userid="2">Name C</li> <li id="send" data-teamid="1" data-userid="3">Name D</li> </ul> CODE <script> $(function() { $('.connected').sortable({ stop: function(event, ui)
how to include field time jquery ui
Greetings friends, I've realized that there is jquery ui date field , I mejos known as datepicker . Now I wonder if there is something similar for the hour, that is, if for example I type 45 hours in the field and show me so : 45:00:00 click or 500 hours showing me so : 500: 00 : 00 something like the date picker as it was happening I better make a combobox with the hours deceo but first I would like to know if there is something.
Affecting dropdown menu with button click
Hi, I have the following code which causes the buttonclick "next" to affect the dropdown menu "page_num" and effectively loops to the next option in the dropdown on each button click. I can get it to work using the jquery ui $("#next").button(); however getting the jquery ui dropdown menu to work is proving more difficult. Can anyone offer some assistance in how to integrate the ("#page_num").selectmenu(); into this script please? I've tried various different arrangements and have had no luck so
Should I create theme for just one component?
Hi, I am a total newbie with jquery ui. I have to use a selectmenu component with a custom design. I was wondering if the best way would be to create a new theme for it or if I should just override the rendering functions and customize that way. Reason I ask is because right now I am overriding the rendering functions, but I have to include a theme along with it or else the component won't work. I guess the theme is setting some necessary styles, but at the same time the theme has styling code for
jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword
I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change
Div with overflow-y: scroll, jquery ui droppable and sortable
For several hours scratching their heads on the same problem: http://jsfiddle.net/6kLvLjqr/29/ If drag "sortable 2" "droppable 2", everything works fine. But if you drag the "sortable 12" to "droppable 2", using only the scroll wheel mouse , there are problems. After scrolling you need to move the cursor outside div.cont and only if the element "droppable 2" will take "sortable 12".
resizable with position: fixed
I'm trying to use resizable on a fixed-position element. When resizing, the element jumps across the screen. Here are the specific details: The element is resizable horizontally, and the position is specified by setting the 'right' css attribute. When the element is resized, the 'left' css attribute gets set to 0 and the element jumps across the screen. This occurs in both IE 11 and Chrome 37, but DOES NOT occur in Firefox 32. A similar problem occurs when the element is resizable vertically, and
Paging or Slider?
Hi All, Is there anything available for paging or slider as a widget? I have a requirement where the table rows need to be either expanded using paging or slider. Thanks, Pushkar
How to use JQuery within a Chrome App
As a simple test I am trying to run the default JQuery UI "index.html" inside of a Chrome App. I can't seem to get it to work properly. I put the following files (copied from Create Your First Chrome App ) into the same directory as the default "index.html". I am also including two screen shots showing opening the index.html on it's own and within the Chrome App. What am I am missing? Is it even possible to use JQuery within a Chrome App? manifest.json { "name": "JQuery Test", "description":
JQuery Tab Control Starting Issue in MVC Project
Hi, I am pretty new to JQuery and MVC. I just want to use a tab control in my MVC project using JQuery. I tried to use that example in the official site of JQuery. Just copied and pasted the content into my Index.cshtml page. But the tab control is not working. Any suggestions are welcome. Thanks, Sudeep
Datepicker problem
Hi, I'm having an issue with datepicker.. we're running symfony and I'm trying to use datepicker in one of the modules. It does render the calendar and I can pick a date and it will update the input field with the corresponding date. Once the date has been picked the actual URL is updated with a ' #' and clicking the calendar results in nothing. Any ideas? We're running jQuery core and datepicker 1.7 and my co- worker has a different module running fine using datepicker in the same enviroment. Any
How do I keep jquery-ui 'explode' effect from overriding my oncontext 'false' settings?
Howdy howdy, I'm new to jquery-ui so bear with me here. I'm working on a simple html5 game that uses both mouse buttons as part of gameplay. Because of that I have the main gameplay div set to oncontextmenu='return false', I would like to use the jquery-ui effect explode as the death effect for some of my game's enemies (which is often triggered by pressing right click on the bad guy) but it seems by using this effect It seems to override the 'oncontextmenu false' I have set and lets that pesky menu
Custom containment area for jqueryui draggable
Hi, I'm having stuck in using jqueryui draggable. I want to make an element draggable with custom containment area (a custom shape, not a square) Imaging: It's a square with a conner where donot allow to drag to. I've searched for using multiple containment but no work answers. Help me plz. Thanks you so much! More explain: - I have 2 div to containment: #container-1{ width:200px; height: 200px;} #container-2{width:100px; height:100px;} - and draggable element #draggable ------- The #container-2
need a search dialog that opens like datepicker
I am using jquery ui datepicker for selecting dates for multiple form fields by clicking on the relevant form field. I would like to use the same basic (look and feel) action for multiple userID fields, where clicking on the userID field will open a small dialog which has a field to put in a name search field, a search button driving a php/mysql search and a scrolling search result which is set up so when you select one of the search results it will populate a specified field on the opener with
Only one tooltip opened for a time
Hi. I found a "design" problem in my proyect. I have the jqueryui tooltip on a form. At start, I make "click" on a form element for put the focus over it, and the tooltip is displayed. For change to another form element I use the keyboard Tab. At this moment, the first tooltip (when the mouse is over) is opened, and the second (when the keyboard send me) is opened too. This is not so beautifull, and some text are up. I try to close all tooltips mapping the tab in the document, but the mouse tooltip
Cannot get the value of jQuery Spinner by $_POST in php
I am using jQuery Spinner in a form just like Select Option. $("#hourlywage").spinner({ min: 50, max: 1000, step: 10, start: 50, culture: "en-US", numberFormat: "C" }); After submitted the form, I can get value from Select Option by $_POST['select']. However, there is nothing in the value of Spinner get by $_POST['hourlywage']. Is there anything I have missed or the method is wrong?
Next Page