Transform Board Game Pieces
Hello everyone, I'm trying to create a board game much like Monopoly using jquery ui drag drop. In my game a user can roll the dice and he can move his piece X number of spots from where he was. If his piece lands on any special spot which are squares with images of different items like jewels and gold coins as the background, his piece will have a different shape and color than it did when it starts out. At the moment I'm able to drag the pieces which are basically icons, from their starting positions
Droppable must have one element to drop on, otherwise I cannot drop
Hi, I am using draggable and droppable in my application. Now I am using an UL for draggable and droppable. I have set some min height and min-width to both of them. Now in my droppable I have added a single line "Drop your records here" Now when I drag and drop an element I have to drop it exactly on the already written text. If i drop in the blank area below that the element does not gets added. How to do this? Please let me know if you did not get my question. Regards, Girish
Manipulating Dropped Elements
Hi all, on one of my pages I have two divs, I'll call one of them toolbars and the other designSurface. The toolbar div contains four thumb nails which can be dragged and dropped into the DesignSurface div. I was able to drag and drop the thumbnail image of a grid which represents an HTML table from the toolbar div into the designSurface div. Upon dropping the image, my javascript function was able to create an HTML markup for my table and give it a background color, a uniqe Id, and dimensions.
Issue with draggable on Ajax populated listview
Hi, I am new to jquery. I have two listviews Populated by some hardcoded values. Now I can use drag and drop from one listview to another properly. Now I have the issue when I populate my draggable listview through ajax call. i give an ajax call to my controller and get the data and populate the draggable. Now the items are not more draggable. I am not able to drag then. Not sure whyt. Please help me in this case. Below is my code <ul id="drag" style="text-align:left;"> <li id="list_4">List item
Multiple range sliders?
Forgive me here if this is a basic question but I had a look at both multiple sliders and slider range and can't figure out how to combine them so I can have more than one range slider on the page. I currently have this code: $(function() { $( ".slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
api to get and set element position in asortable elements stack
I use the sortable functionality and it works fine. I need some api to get and set element position in a sortable elements stack. I need is to locate programmatically an element in a certain position in the stack Are there these functions available? If yes, please give any link to en example. Regards I. Lesher
Make dom object not selectable inside <tbody>
< tbody id = "selectable" > @ for ( int i = 1 ; i <= rowN; i ++ ) { < tr > < th > @ i . ToString() </ th > @ for ( int k = 1 ; k <= columnN; k ++ ) { if (k % 2 == 0 ) { < td class = "book success" data-id = @ index > @ index . ToString() </ td > } else { < td class = "book active" data-id = @ index > @ index . ToString() </ td > } index ++ ; } </ tr > } I am using selectable via JQuery UI. I want everything to be selectable except the row header (please see the red that is highlighted). In other
Sistema em abas
Bom dia gostaria de saber se existe algum exemplo, senão alguma idéia de como fazer com que as páginas abram em abas conforme imagem em anexo ou parecido no caso abaixo tem duas páginas abertas (Portal de Vendas e parceiros) desde já agradeço.
jquery popup
hi dude... I have doubt in jquery popup. please clear to me.. My doubt is when i close the popup the popup alone reset How it is possible.... My code detail.... 1.my popup is autoopen. 2.press escape popup will be close 3.my website have two button sign in and signup.... when i click sign up or sign in didnot open properly $ ("#login").dialog( { width : 500, height: 650, show: 'clip', hide: 'clip', modal:true, autoOpen : true, resizable: false, closeOnEscape:false, open: function(){
Overlay Using Slider(s)
Hi, I'd like to create a set of sliders that appear as an overlay on top of my page (and dim out the background). I thought of trying to put them in a modal and make the modal transparent. But is there a better solution so that the sliders are an independent overlay? Thanks Jon
JQuery UI slider and Bootstrap modal.js
Hi, I am trying to place a bunch of jqueryui siders in a modal dialog in bootstrap.js. The sliders do not appear in the proper place in the dialog and in some cases extend out beyond the dialog borders, etc. Does anyone know how to use JQueryUI slider inside of a modal.js dialog properly? My relevant code is the following: HTML: <div class="modal fade" id="tuning_modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button"
heightStyle "fill" option works incorrect if accordion container height set in %
In my case height is 100%. It's beacause a web application layout... Test example with original markup and CSS
Datepicker years drop-down
I am posting in relation to the years drop down in the jQuery date picker, as I understand it will soon be going through a rewrite. I have gotten some grief from my users that it is non intuitive to pick the first date in the drop down to reload the years list with a prior range of years. I have looked over the following post: http://forum.jquery.com/topic/jquery-datepicker-does-not-show-all-the-years Frankly, I do not find that setting a large range to be a very good solution for every situation.
Make responsive UI using draggable widget
I have used the draggable widget to make some divs movable inside a parent container. The problem i am facing is that when i resize my browser window then the divs which i moved do not adjust positions on the window and sometimes they do not appear within the scrollable area. The divs which i did not move get adjusted as per the window size. Can anyone provide me a solution for this.
jQuery UI download single component without Core
Hi All, I hope someone can help me or point me in the right direction. I am working with a huge web application and we are planning to add tooltip support using jQuery. However there are some limitations in terms of making changes. We are already using jQuery UI 1.10.4 and we are not able to make a change to the JS file. This is in part because we are not completely sure what components are already included. So rebuilding proper set of components does not sound promising. I could build another download
when the page is end .menu() open to top
Actually how can I explain this issue as English. But I try to show it with picture. I want when the page is end .menu() open to top
Prob with jqeury-ui with Json format datetime
Hi, i develop web app mvc4 .net with jquery-ui for datepicker but i remark some field ( date time) have a wrong date when i click on the icon for datepicker or field input. With visual studio i follow on debugger mode in the librairy jquery-ui ( jQuery UI - v1.11.4 - 2015-03-15 ) and i see always the same error that is throw at the line 9223 value = 2015-04-02T00:00:00 9220 if (iValue < value.length){ 9221 extra = value.substr(iValue); 9222 if (!/^\s+/.test(extra))
DatePicker calendar width issue
Please look at my image below to see my issue.The calendar is breaking out of the div / container? I've put the thick solid red border around it to help show what's really going on (see image below). I'm loading these in the header: jquery.js jquery-ui.min.js jquery-ui.theme.min.css jquery-ui.min.css I also added to my CSS... but this CSS isn't solving the issue below. .ui-datepicker { width: 216px; height: auto; font: 9pt Arial, sans-serif; border: thick solid red; } There is an 'outer
Issue With Using Toggle
Hello everyone. I'm not sure why this toggle function isn't working. I have a basic arrow with CSS styles that is initially pointing to the right and I want to point it downward on a click event. <script type="text/javascript"> $("#arrow-right").click(function() { $(this).toggleClass("arrow-down", 1000); }); </script> <style type="text/css"> #arrow-right { border-bottom: 12px solid transparent; border-left: 12px solid #4a3571; border-top: 12px solid transparent;
How to use multiple jQuery UI themes on one page
Hello jQuery Community, I'm running a content management system (CMS) called DotNetNuke (DNN) that uses JQ UI Dialog Widgets to control the site's content and admin features. I've built some interactive HTML that uses JQ UI's Dialog Widgets as well. I don't want the themes between these assets to conflict so I used the CSS Scope feature on the jQuery UI Download Builder . Which files from the Download Builder package do link to the page so that my assets use the package's theme? No matter what files
UI Tabs scroll to bottom instead of staying at the top of the page
Hello, I have a rather odd situation with Jquery tabs that only happens in Firefox and only when navigating to certain tabs: instead of opening right under the tabs where the content is, the tab opens on the bottom of the page. The setup is to have tabs within tabs, one level deep. For instance, when I navigate from: http://www.telcogreen.com.au/voice#section-3 to http://www.telcogreen.com.au/data#section-3. It used to happen in Chrome as well and consistently across all tabs, but I fixed it by
ThemeRoller
Hi, I'm trying to make some new Theme but the site is not working. Theres un error message at the end of the page. Could Someone help me? Thanks
Datatable doesn't get initialized
I'm currently building a MVC application with C#. I've used a Datatable in my user overview before, but when I want to use it in the detail page, in a partial view, it often doesn't load. Below I've copied the most important part of my DetailsGroup.cshtml file. While coding, I've basically copy/pasted from my working Overview page, but somehow it doesn't work. @{ Layout = "~/Views/Shared/_LayoutWithoutNavBar.cshtml"; } <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"
appendTo makes HTML code not to work correctly
Hi, I'm trying to add some HTML code inside a div using appendTo. The HTML code is added and I can see it in the screen, the problem is that I can't "close" the div using the link... but I can "close" the div when the HTML code is loaded in the page (when the HTML is in the website). This is my code: jQuery(function(){ jQuery('.showWindow').click(function(){ var id = $(this).attr('target'); $( "<div id='"+id+"' class='window'><div class='window-bar'><div class='window-title'>"+id+"</div><div class='window-tabber'><span
Problem in using JQuery UI with telerik controls.
I am trying to open aspx page using jquery UI dialog,which is having telerik controls inside it.But it is not working,Please give me a solution for this.
jQueryUI upgrade from 1.10.4 to 1.11.4
I am upgrading jQueryUI from 1.10.4 to 1.11.4. In 1.10.4 there is "base" theme folder. But I am unable to locate similar theme in jQueryUI- 1.11.4. What is the equivalent on "Base" theme of jquery-ui-1.10.4 in jquery-ui-1.11.4 ?
resizable stops working iin a div if a value is assigned to it
I have several divs that I want to position over an image - so I am using draggable and resizable to do this. Everything works fine until I assign a value to the div. Here are my three functions - the first one assigns a value to Div0. As soon as a value is assigned to it the resizable doesn't work for Div0 - the other divs (1,2,3) work fine. (The drag still works for Div0 though). So how do you assign a value to a div without blowing up the resizable functionality? function loadVals (){ document.getElementbyId("Div0"),innerHTML
Need help with customizing ui slider
Hello guys. Im new to jQ and jQ UI but I have managed to get pretty far by myself. I have really struggle the last 4-5 hours. Searching for all kinds of solutions, but I CAN'T really style the slider button at all! I have tried all sorts of .ui-slider-handler class but It wont style at all.. So I really need your help with this! I have only managed to find 1 way to style the inner slider with a different color. I would also like to know where I can find all the css classes for styling. So far I have
Getting event object in droppable.accept
As it stands, the `droppable.accept` callback only receives the object to be dropped. What should I do if I want to check the state of, say, shift key (aside from monitoring its state with a global handler; or modifying the jQUI library to pass the object along)?
Slidebar Issue
Hello Guys i need some help i have one scroll bar in UI for displaying value and user can also change the value but issue is that scroll bar work perfectly in Chrome bt in mozilla firefox when user change the value and click on submit it goes to 0 nd in URL ScrollTop= 0 (in Mozilla) but in chrome it calculates dynamic value need some help thank you
Tabs Widget not working when HREF refers to an HTML file
Hello, I have a minimal sample of code with just 2 tabs. When I set the HREF of one of the tabs to be an HTML file, no content is loaded in that tab. The other tab is just fine. Any ideas? Thanks David <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link href="css/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="scripts/jquery-1.11.2.js"></script> <script type="text/javascript" src="scripts/jquery-ui.js"></script> <script type="text/javascript">
Using the Autocomplete widgets in the right and optimized way
Hi, I have read some books and tutorials about using jQuery UI, including Autocomplete widgets... So , I decided to make some simple application where I have JSON file named auto.json in which is data for the Autocomplete widget. This is my code: var arr = []; $("#automobil").focus(function() { $.getJSON("auto.json", function(data) { $.each(data, function(key, value) { if ($.inArray(value.name, arr) === -1) { arr.push(value.name) } })
Can we use window.open instead of window.showmodaldialog?
Can we use window.open instead of window.showmodaldialog?
Is there any way to open Jquery dialog without having element id
i have window.showmodaldialog(somepage.aspx,someparam),i want to replace this with jquery dialog.how to do this? is it necessary to have div or some HTML element to open jquery dialog $("#someId").dialog();
End user stretchable dragable textbock
The JQuery stretchable control may be the start of this: I'm trying to find a control that the end user can type text into and then use dragable text block handles to resize the text. It has to be draggable by the end user too. Does anyone know if such a control is available or can anyonebuild it?
Jquery UI autocomplete accessing !
Im using following code for autocomplete from remote database $( "#name" ).autocomplete({ source: function( request, respond ) { $.post( "/Web_Service/AutoSuggestion.php", function( data ) { respond( ["you wanted: " + data] ); },'json'); }, minLength: 3 });I'm getting data from server as {DSName: "sampel"} DSName : "sampel" How to display the received data as autocomplete to the input field..! when im entering 3 characters "sam" in input field the autocomplete
UI Dialog with option to hide Close Button
I have modified jquery-ui Dialog source code to add an option that allows to hide the close Button. Very handy for various cases. I use jQuery UI Dialog 1.11.2 Here is the code: /* FIRST - Add the option in jquery-ui source code */ options: { hideCloseButton: false, ..... /* THEN - Add the condition */ // support: IE // Use type="button" to prevent enter keypresses in textboxes from closing the // dialog in IE (#9312) if( this.options.hideCloseButton ) { this.uiDialogTitlebarClose = $(
How can I remember the RGB values of the color slider?
I'm using jQuery's color slider for a project. Basically I'm setting the initial RGB values outside the function. When the function is first loaded, the code below works as it should. I play with the color slides, and everything works great. But then, when I need to reload the color function within my project, how can I make it remember the RGB values where I left off? Right now, the color slider always goes back to 50, 50, 50 (RGB) when the function is reloaded. Thanks in advance. Here's my code
Jquery UI Sortable, move two tables together
I want to change order of some tables between them (tables, not rows). My code is more complex than I'll show you here, but as an example I will try to give you a short example. <table class="table-A"> <td><div>Move button</div></td> </table> <table class="table-A-next"> ..... </table> <table class="table-B"> <td><div>Move button</div></td> </table> <table class="table-B-next"> ..... </table> I want to move table-A and table-A-next (in the same time - together), with the button from
Cannot ascertain if cell values in table are empty
Hi, I have a table where some of the inputs are text and some are date picker. When I enter all values and press submit, the validate function returns that some of the cells are empty. I check that none of the cells in the submitted table are empty. Regards, Arjun Script file: function sendval(){ var tosubmit = validateForm(); if(tosubmit){ showprog(); var myTableArray = convertarr(); google.script.run.withSuccessHandler(onsuccess).processLeaveForm(myTableArray); } if(!tosubmit){ alert("Please
Next Page