UI Accordion icons not showing up
I can't figure out why icons are not showing up. I have searched for the last week but have not found a solution. Please help. <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" }); $("#accordion").accordion("option", "icons", { 'header': 'ui-icon-triangle-1-e', 'activeHeader': 'ui-icon-triangle-1-s' }); }); </script> __________________ <tr> <td><div id="accordion"> <h3 class="ui-accordion-header">Prevent Unemployment
jQuery UI - drag an item from drop area and drop it back to same drop area - drop event doesn't fired
I have number of drop areas $('.drophere') and a storage of draggables $('.dragme'). Each drop area can contain just one dropped item. You can drop new item over dropped one (replace). You can drag an item from one drop area to other. You can drop the dragged item outside of drop area - and "forget" it - no need to revert. If you start drag an item from drop area and decided drop it back to same area - drop event is not fired, thus the dragged item is lost. Is it some kind of restriction in jQuery
[SOLVED] Adding Widgets to a Header in an Accordion
What I would like to do is have my accordion headers include a progress bar and maybe another label. So the idea would be like this: Header 1 =====----- Label 1 Header 2 ==-------- Label 2 I've seen techniques to add images to headers like this: <div data-role="header"> <div id="header1_progress" ></div> <h3>Header 1</h3> </div> <div>Header 1 Content</div> Is this the correct way to approach this problem? It feels a little hacky because the documentation mentions that the content div
problem with drag
HTML <!DOCTYPE html> <html> <head> <title>Problem</title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> <head> <body> <div id="menu"> <div class="intro"> <div class:"numbers" > <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div>
Dialog open issue
Hi, My code opens a dialog and assign title attribute, using the open event, to html input tag within the dialog. After closing the dialog (dialog("close")) and re-open it the open event handler/function occur but does not set the attr... How can I make the open function re-assign the title attr the second time the dialog opens ? Code follows - $(function () {
$('#testButton1').click(function () {
var d = $("<div />")
.css({ width: 200, height: 200 })
.html("Testing dialog <input type='text' id='idd' >").dialog({
modal: true,
width: 200,
height: 100,
autoOpen: false,
buttons: {
"Ok": function () {
With bootstrap panels, the placeholder of jQuery UI sortable is always at the left side
I'm trying to implement sortable bootstrap panels with jQuery UI. But the placeholders keep stay at the left side when dragging the bootstrap panels. Please see my code in http://codepen.io/anon/pen/oXrVVq Thanks. [Edit:] I think the placeholde is to indicate the new position of the moving element. Please see below demo.
Change image extension
Hi, How do you replace an extension of an image on page load? I need to change the gif to png. var domainName = "http://www.domain.com/";
if ((window.location.protocol + "//" + window.location.hostname + "/") == (domainName))
{
//what to do here?
}
Thanks!
11.4 Download Builder not working.
Hello, Currently if I select 1.11.4 (Stable, for jQuery1.6+), have everything ticked with their default values, don't enter anything into the CSS scope. When loading the index.html in firefox it does not load the CSS correctly, and it seems 2/3 of the files are missing. All I get is: The old one: With the legacy one, the theme is picked up straight away. Additionally the themes folder and demos folder is there as well. Could someone tell me why these are not being provided with the new version?
Help with 'heightStyle' in Accordion
Hi, Found the demo below useful for what I want to achieve with an accordion: http://codepen.io/anon/pen/kLbeD However, I'm not getting the expected results from the heightStyle of the content div. My Fork: http://codepen.io/anon/pen/GJbKjW In my version I've just added differing amounts of text to the content divs. I expected 'heightStyle: 'content' to set the height of each div to the height of the content, but it doesn't. Instead, it seems to ignore this and behave as if it were 'heightStyle:
Simple panel slider
Hi all I have been looking for an extremely simple panel slider plugin for jQuery (to simulate the view sliding you see in smart phone apps), but haven't been able to find one that suits my needs. I therefore have created my own. Concretely, it's a jQuery UI widget, and I would just like to post it here, if anyone has been missing the same simple functionality. Test it out here: https://github.com/alexandrainst/jQuery_panelSlider Comments are very welcome, and I would be happy to tweak it! Regards
DatePicker - View months or years
Hello friends, Lily entire Datepicker documentation and could not get what I need, maybe not correctly interpret the documentation. I need to be shown the calendar, instead of showing the days for selection, I could display only months or years, so instead of days. You can do this magic? I thank you for your help.
datepicker - showButtonPanel - Today option does not select today!
We use the datepicker UI on our website and have just turned on the buttons at the bottom of the calendar: showButtonPanel:true I don't understand why when you push the "Today" button that it doesn't populate the text box with today's date and close the widget. All this today button does is take you back to the current month so you can select the date yourself. I know it is quite simple to find today's date that is highlighted but I think we all understand the mind of users.... maybe the solution
Date Picker ShowButtonPanel `Today`
Currently the attribute, showButtonPanel displays two extra buttons on the datepicker popup. `Close` and `Today`. Clicking `Today` though does not do what users expect, in that it should put the current date into the textfield and close the date picker. Is this possible to override the `Today` button behavior?
Autocomplete with Dynamic Search on Classic ASP Page
Hi there: I am trying to use Jquery Autocomplete on Classic ASP populating from a SQL Database. I am using this page as the Autocomplete Page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet"
Autocomplete problem
Hello. I'm trying to create autocomplete using jquery ui with php but it's not working. I don't know what I'm doing wrong. index.php <p><label>Team host:</label><input type='text' name='team_host' value="" class='auto'></p> ajax.js $(function() { //autocomplete $(".auto").autocomplete({ source: "search.php", minLength: 1 }); }); search.php <?php require_once 'dao/TeamHostDAO.php'; require_once 'includes/Connection.php'; $teamhostdao = new TeamHostDAO();
Issue on Setting UI Slider For Opacity Amount
Can you please take a look at This Fiddle and let me know how I can use the slider to get values from `0` to `1` like `0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1` Here is what I have $(function() { $( "#slider" ).slider({ value:1, min: 0, max: 1, step: 10, slide: function( event, ui ) { $( "#opacity" ).val( ui.value ); } }); $( "#opacity" ).val( $( "#slider" ).slider( "value" ) ); }); <p> <label for="amount">Opacity:</label> <input type="text" id="opacity" readonly style="border:0; color:#f6931f;
UI drag and drop for multiple elements
Can anyone help me how to drag and drag multiple elements in a single drop zone. Once dropped it should not allow another one to drop. After deleted this selected one another one can be able to drop. Please help me out.
How past parameters with ajaxStetings (ajaxOption depreciated)
Hi, Excuse my bad english. ajaxOption depreciated, how can I pass parameters to recover in php Javascript : <script type="text/javascript"> $(function() { $("#tabs").tabs( { beforeLoad: function(event, ui) { ui.ajaxSettings.type = 'POST'; ui.ajaxSettings.username = 'foo'; ui.jqXHR.fail(function() { ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } ); } }); }); </script> PHP file
How to keep my radio still running while click some href
How can i keep my radio streaming not reload while click some href ( Puspargam, Linatasan ) the other page is landpage, i'm trying to solved this using angular js ( https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating ) but hard to me tu customize use angular , how can i load that radio in every page in php by using jquery so the radio not reload after click some href ( Puspargam, Linatasan ) here is my site http://suarakasih.com/ and here is my script calling radio
Accordion Widget Keyboard Tabbing
Hello, I am new to JS/jQuery and I've implemented the Accordion to my SP2013 site on a Custom FAQ list. However, I need to be able to Tab through the Accordion with my keyboard. I need to make some other CSS look and feel changes too can anyone direct me how to do this? Greatly appreciate any direction. V/R Lori
Folder List through JQuery Ajax Call
I want to generate a list of folders on a page (through an ajax call) and then on click of any of this folders a sub list to be generated. Please help me with below code : HTML <div id="targetPath"></div> <div id="treeview-container"> <div id="tree"></div> </div> JQuery generateTreefn('/'); function generateTreefn(path){ $.ajax({ type: 'GET', dataType: 'json', url: '/bin/getFilepaths', data: { path: path }, success: function(jsonArray) { var htmlValue="<ul>"; jQuery.each(jsonArray, function(data,item)
CSS Issue in DatePicker.
The datepicker code doesn't work properly in IE11. Pls see the below picture we have highlighted the issue. Thanks.
Custom autocomplete result
Hello Experts, Our requirement to build custom autocomplete result. Basically the output should be shown in two section of DIV, one side would autocomplete result and other side would be detailed view along with some suggested value. Attaching mock design Thanks in advanced Thanks & Regards, Nikhil
Help to change bar color of Easy Pie Chart with click event
I'm using Easy Pie Chart and this is working well with the following code: $('.chart').easyPieChart({ size: '150', easing: 'easeOutBounce', barColor : $(".cbg").css("backgroundColor"), onStep: function(from, to, percent){ $(this.el).find('.percent').text(Math.round(percent)); } }); I've a color switcher that switches the color of my theme. Now I want to switch the color of the bar with the color of the theme. So I write the following code. But it is not working.
Jquery Ui Tab for displaying view as content in each tab
I am trying to Jquery UI tabs How do I go about loading different views as a content for each of the tabs. Currently I am not doing it the right way but the code snippet is posted below: Code in the _layout.cshtml is <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title - CSTES Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <script
Jquery UI still alive?
Hi I just downloaded the UI and when I opened the index page in Chrome and IE, some controls were not properly displayed, just like the plugin was never finished. Are there any issues with the plugin? The plugin has several JavaScript files. Same thing with CSS files. Which one should I insert in my ASP.NET web site? The docs shows only 3 references but I see many. Please provide examples as I am a newbie with JQuery. regards, Acheo
new tab clicked and page render finished
Hello... When I click a new tab, I need to be notified after the new tab has become active and rendering is complete because I need to get newly clicked tab id and dimensions for elements on the page (position x, position y, width and height) for each. Is there an event I can capture when this is complete. I am doing this on the creation of the widget using following jQuery deferred: $.when($("#tabs").tabs()).then(function () { // read position x, position
Jquery dialog popup issue.
Hi Guys, I am experiencing an issue with Jquery dialog popup . Whenever I scroll down the content and close the dialog, the focus is not getting automatically returned to the element that had focus when the dialog was opened. After the occurrence whenever I open a pop up, I have to manually scroll to view the pop up. I am seeing this issue only in chrome. Can you help me out in solving.
how to modify the css for jquery slider
hi everyone i am trying to adapt the jquery slider to my website. jquery slider i have got it working-however i seem to have missed the css setting. the slider bar covers the entire page. the slider on the site is very small and slim, yet the slider on my site is huge. can someone please tell me how to change its setting. i tried to run the code on jfiddle but i could not get it to work ; j fiddle i guess what i am really asking for is an example from somone of how they have modified the slider .
Using jquery 2.0
If we are using jquery 2.0 then which version of jquery ui needs to use. As tabs function is not working with jquery 2.0.
Custom Download jQuery UI force downloading of UI Core
Hi, Thank you so much for taking your time in this. I have been using jQuery UI in a lot of projects. The same issue i have is that whenever i want to download one element of jQuery UI, at custom download, it always forces to download jQuery UI Core together. Example, I downloaded Selectmenu and later i want to have datepicker. Most of the time i have to delete the UI Core in datepicker custom download .js because i already had it in Selectmenu. Is there any option i can avoid this without fixing
Horizontal scroll made draggable
Hi there, I'm building a portfolio site and to do something a little bit different with it (for me) I thought I'd do a horizontal scrolling website. The difference being, there'd be no scrollbars and you can click+drag on the content area to scroll it. I've gave it a crack but I've hit a brick wall and would really appreciate some help. Here is a rough wireframe of my goal, which might help explain what I'm wanting to achieve: As you can see the content (gallery) is aligned to the left edge of the
I want to load jquery-ui from my local machine
In one of my machine on the network (not connected to internet) I have a node.js server running. The index.html file contains the following <link rel ="stylesheet" href = "jquery-ui,css"/> <script type src="jquery-1.8.3.js"></script> <script type src="jquery-ui.js"></script> I had kept the jquery-ui,css, jquery-1.8.3.js,jquery-ui.js in the same folder as the index.html But these files are not being loaded even when I access it from localhost or from any other computer in the network. My OS is raspberry
Jquery Slider - getting value into php
hi all. I'm a php guy who uses jquery ui, but not very good with javascript. What i have is a working jquery ui slider, that works no problem. I have it on a database update form. I have successfully made it so that on loading the form, it sets the value of the slider to that of a particular database field. all that works. BUT... when the user presses the "save" button on my form, the php does all the mySQL saving of the data using a standard UPDATE statement. What i am unsure how to do though,
bug with function() and $.AJAX() plugins
There seems to be a bug with $.ajax, when you put a "plug-in" function inside the function() where the plugin only gets called once. I'm not sure if it's with all the functions, or just some of them. I know it's with the accordion for sure, but not sure if anything else behaves that way, or not. There should be a built in ajax listener for the function(). I'm assuming that no one else has ever encountered this issue, but it wasn't solved by a discussion, so now it is a bug in the core. the temporary
dialog size as percent
Perhaps I'm missing it, but is there a way to set the dialog size as a percentage instead of as a fixed pixel dimension? Thanks for any help!
Dialog error when loading page twice
I have a master page that open a page with links in it to open a dialog . It works fine when the page is loaded the first time, but when I reload the page - it gives me this error: Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'. This seems simple but I'm stumped, it seems even though I reload the page that the dialog may be stored in DOM of the parent page???? this is all there is: $(document).ready(function(){ $(function() { $( "#dialogMgrTERM"
Draggable div inside a rotated parend div !!!
Hey, i want to drag items around inside a div that is rotatable, but it doesnt work correctly anyone knows how to fix that? Here is the code https://jsfiddle.net/27ey90xw/
how to validate autocomplete validations while submitting the form.
how to validate autocomplete validations while submitting the form in webapplication.
form input values in jquery dialog box are not sending onsubmit
please I need help. I have a form with file input type on jquery dialog box which I want to send all the file data while I click on the submit button to a php file using formData, but the form data are not sending while I click on the submit button
Next Page