alphabetize/sort an unordered list
Hi, I'm fairly new to JQuery but can generally feel my way around. Would it be possible to alphabetize an unordered list when a page loads? i know this is kind of 'contrary' to the definition of unordered but it would seem like something JQuery could do. For example, if I had the following list coded into a page, <ul id="fruits"> <li>banana</li> <li>pear</li> <li>apple</li> <li>grape</li> </ul> could JQuery reorder/alphabetize the list so that it renders as: <ul> <li>apple</li> <li>banana</li> <li>grape</li>
How to implement div resize left on size bar?
I want to use minimal JQuey CSS without calling for the large css file. On my page I wish to be able to resize the ride side bar of which I'm pretty sure the following should work; $('.Quick-Sidebar').resizable({ handle: 'w' }); I've recently removed this from my page as it was simply breaking my tab switcher on my sidebar causing problems... How can I make my sidebar resizeable please?
Ajax loading with php breaks everything
I have a php page with a listview in it, with a search bar. I can access different content by passing a parameter in the url, after the index.php, but the problem is when I have a link in my page to another option (so a link to index.php?action=other_action ) the Ajax loading breaks anything responsive in the page, the search, buttons... The previous content is not removed so the new content is displayed but nothing is dynamic. Of course if I disable ajax loading everything is fine, but it's so
Check if a multi select dropdown list was changed
Hi, I need to check if the values of a multi select dropdown list as been changed from there initial values. The following code works when it's a single select dropdown list: if ($input.is('select')) { changed = !$('option:selected', $input).prop('defaultSelected'); }In a multi select dropdown list if I have this initial values: option a and b then add option c, it does not change the state of 'changed' var, only if I remove both option a and b. Grateful for any help.
What should be simple tab select...
I'm feeling utterly stupid that I cannot resolve my simple tab switchers located to the right-hand side of my page. Ordering it into the correct order, somewhat working then not then again... I keep going round in circles and it should be simple. On click - Users OR Alerts Remove all active classes Set active class on clicked On click - More Set active class WITHOUT toggling any others. Show drop menu Select Option Remove all active classes Set active class on clicked & 'MORE' Click outside / Other
jQuery validate a group where field names contain brackets
I have an HTML form that contains two groups of checkboxes. One of the group contains checkboxes where one should be checked to pass jQuery validation. The other group is not mandatory to select. First group (at least one checkbox should be selected): <input type="checkbox" name="appSourceFirstoption[1]" value="Answer 1" id="appSourceFirstoption" /> <input type="checkbox" name="appSourceSecondoption[1]" value="Answer 2" id="appSourceSecondoption" /> <input type="checkbox" name="appSourceThirdoption[1]"
JQuery Validation Two Fields Required only First is working
I am using JQuery Validation to try to validate two input fields in my form. The problem that I am coming across is that it does not matter which one I have as the first one, the secondary one is never called with validation unless the field is dynamically filled in by a value entered in earlier in the form. Here are two sections that I am having a problem with: <div class="form-panel"> <div class="row collapse"> <div class="medium-3 columns">
jquery validator does the submission even it's invalid
I am writing a form with jquery.validate the roles work on keyup but don't work on onblur. and if the form fields were invalid and hit submit it works and submit $('#myform').validate({ rules: { name: { required: true, minlength: 2 }, code: { required: true, minlength: 2 }, description: { require: true
events on elements after classes have changed
I have a switcher system and I want to change the classes on the clicked elements in order to determine what function runs on the next click. The first click triggers an ajax call and inserts the content into a different element. The code for this is not shown and is provided by drupal. it relies on the starting use-ajax class. this also removes the use-ajax class and adds the hide class. This means the code in the first event (bellow) which runs when .use-ajax is clicked can only run once, the remaining
validate date format MM/YYYY
help please, i have this script and i want to validate the field <input type="text" id="expirationDate" placeholder="expiration"> the problem is in month value when i put an expired month it will be validated like (02/2016) :'(( any suggestion plz and thx in advance... function validateExp(expirationDate) { if(!$("#expirationDate").val().match(/(0[1-9]|1[012])[\/]((201)[6-9]|(202)[0-9])/) || $("#expirationDate").val()==null || $("#expirationDate").val()=="") { var div =$("#expirationDate").closest("div");
Need help making popup
Hello I have made a landing page on which i want a popup which stick on it for a while. Just like tech support landing oage has popups but i am not very good at programmimg so please help me out . looking for your valuable advices Thanks&Regards
Sortable UI
Hello I have successfully been able to get the default sortable list working, this works without any issues, however it doesn’t quite fit my needs. I need a similar list, however with 3 distinct columns (rows will contain linked data)... ideally, reordering by selecting and moving any item in any of the 3 columns. Can this be achieved ??...assuming so, I am looking for advise on how the default code could be modified Thank you
Can You Toggle Scale & Bounce Using JQuery?
I'm working on my administration panel which has a side bar attached to the top bar. The side bar can be minimized and upon doing so it will animate left and then bounce. Upon doing so, there is no longer the same space available for the logo of which I would like to also bounce, scaling from the top middle of the div. HTML <div class="PannelLogo"> <a href="Panel Home Link"></a> </div> CSS .PannelLogo { position:absolute; margin:5px; height: 137px; width: 210px; z-index:9999; } .PannelLogo
page logic work only from time to time
I have two cases. First, the city is selected by clicking one of two buttons. The value goes to localstorage. The second case, a button "repeat order" was clicked. Links with data from sqlite storage have the value "city". They go to localstorage too, the debugger shows correct values. The page logic works fine, price is according to city, but the displayed page is for the entire wrong city. If I go back and click the link again - the same link - a correct page appears. The logic sits in an pagebeforeshow
Spinning text box
Hey guys, Is there a way I can make a text box that will turn around by clicking on it using jquery? I'd like to insert a link/picture on one side and text on the other Please help me make this possible :) Thanks!
Having Issue on Targetting Dynamic Content with jQuery closest()
Can you please take a look at This Demo and let me know why I am not able to target closest popover using jQuery .closest() ? <div class="container"> <button id="poper" type="button" class="btn btn-success btn-xs" data-container="body" data-toggle="popover" data-placement="top" data-content="<p>In this title I have text</p> <p class='text-center'><button class='btn btn-default btn-sm q-close'>Close</button></p>" data-html="true"> <i class="fa fa-question"></i> </button> </div> <br> <div
Dynamic page not being created
I am attempting to display the data fetched from my database (via html form and javascript) on a new page instead of the same page as the form. I am receiving the alert(JSON.stringify(formElements)); which displays the column names as well the data. However, after this alert the new page is not opening. I am using Cordova and JQuery mobile. Can anyone see the issue here? JavaScript: function fetchEvent() { db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024); db.transaction(function(tx)
Bootstrap Remote Content Form Validation
I am trying to add form validation to bootstrap modal using remote loading. Without remote loading my code works fine https://jsfiddle.net/shammock112/w0jzp6sp/1/ but when the modal is loaded remotely it breaks. I can't find any demo's or information so I am stuck. Can anyone help?
TagEditor get initalTags from db through $.ajax
Hello, I'm using Pixabay Tag Editor https://goodies.pixabay.com/jquery/tag-editor/demo.html, How do I pass the result of my $.ajax request to initialTags ? success : function(myTags) { console.log(myTags); } I need to do something like that : $(this).tagEditor({ initialTags : [myTags] Thanks
Loading new jQuery version is disabling other jQuery versions on page
Hello, I am trying to load 2 more jQuery versions into one of my pages, like so: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> However, there is already some other jQuery currently running on the page. When I load in those tags listed above, my new code works, but the jQuery that was previously running on the page does not work anymore. I have read into the noConflict()
CSS and jQuery Animation
Hey guys, I`m working on this website https://storm-braces.herokuapp.com/ and I was wondering how can I make the logo after all the animation to move in the navigation menu (animated of course). If you need more details, let me know! Thank's! I got this in JS: setTimeout(function () { $("#logo").animate({ height: "toggle" }, 1500); $(".intro-page").animate({ opacity: "toggle" }, 2000); }, 5500); and this in CSS: .leftBraket, .rightBraket, .first-text, .second-text { animation-duration: 1s; } .leftBraket,
[Fix] Remove preview a image before it upload ?
Hello all, I want to preview an image before it upload and it can remove preview (similar cancel select image). I only want to up 1 image, preview it and can remove it . I have code in that link and I don't know why it don't preview image, I can't solve because my ability of programming is not good? Please help me fix it, link http://jsfiddle.net/ittvn/h145xey9/19/ Thank you very much. P/s: I see link example http://jsfiddle.net/ERZVC/2/ to make a reference (in this link, it up and preview a lot
autocomplete textbox with multiple values separated by full stop and Elements
<script> $(function() { var availableTags = [ "Electronics", "Motors", "Cloths" ]; var Electronics = [ "Laptops", "Mobiles", "Desktop" ]; var Motors = [ "Bike", "Car" ]; var Cloths = [ "Shirt", "Pants", "Jackets" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this
Auto completion using query data to start-with results not working fine
**Original Code i am using this way:** <input type="text" id="placeSelect"/> <script> $('#placeSelect').select2({ width: '100%', allowClear: true, multiple: true, maximumSelectionSize: 1, placeholder: "Click here and start typing to search.", query: function (query) { queryData{!randomJsIden}(query); }, matcher: function (term, text) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0){ return true; } return false; } }); function queryData{!randomJsIden}(query){ Visualforce.remoting.Manager.invokeAction(
Why doesn't jquery ui care about html fed in by ajax?
With more, and more stuff being pushed through $.ajax why doesn't jquery ui offer demonstration solutions for if you're working with $.ajax? I am doing a 2 hour speech ("PJAX driven architecture") that even includes the solutions for the bugs I found and solutions I've discovered for the problems on top of the other stuff (frontend to backend) you should know about when developing for PJAX that I can cover in 2 hours, so if necessary I can do some minor consulting on the improvements to the UI site.
Can I use QUnit browserless with Rhino?
I've found my self having to write a library of Javascript functions for a Embedded Web UI I'm not very experience with javascript and the modern Web development environment. The function I need to write are simple utility function. independent of the browser environment. QUnit looked like a good framework to use for a unit tests. However it appears to require a browser which does not work well for automating the tests with my build process. I did discover the work by Benjamin Lee (Qunit-cli) which
Validate Numbers and Retrieve it
Goal: When you press a button you should make a validation of the third "td" (start from left side) in every "tr". if the letter of the data (inside of the third "td") contains more than four letter, you should retrieve a popup message. In the end, you should retrieve all number in a list inside of a popup message. I need to copy the numbers. Problem: I do not know how to create it. I don't have a good start point. The sourcecode below is a sample from the production phase. The source code should
search engine problem
//php page zoeken.php contains: <?php //alle ingevuld gegevens worden opgehaald en bewaard $zoeken = $_GET["searchbox"]; print($zoeken); $terms = explode (" ", $zoeken) ; $query= "SELECT * FROM artikel WHERE " ; foreach($terms as $each){ $i++ ; if($i == 1) $query .= "Omschrijving LIKE '%$each%'" ; else $query .= "OR Omschrijving LIKE '%$each%' "; } //connect mysql_connect("localhost","meubels","wachtwoord") or die("Fout: Er is geen verbinding met de MySQL-server tot stand gebracht!"); mysql_select_db("meubels_co")
How to setup a left and right page section? Panels?
Hi I have an MVC project that uses a left panel thats fixed, it has buttons and info, it never moves. On the right, that area is variable and can have charts, images, paragraphs, more charts, and links to data. Well, the problem is when I use #Left and #Right in the div declaration, and modify the CSS, etc, there will be a left side thats good, right side is Okay until the size is reduced. Shrink it to the minimum? there is a Horiz scroll bar on the bottom of the right area. Move it? and the
replaceAfter()
is there a function which is like .insertAfter() except that every time it is called it replaces the code it previously inserted
Add a <li> in <ul>
Hi, I need you help to add, at the end of my list, a new <li> I've tryed n this way but not working: $("#barraCoordinatore ul li").last().html('<li><h6> Menu 5 </h6></li>'); Any idea? Thanks in advance Tegatti
Can't remove space in collapsible listview
Hi, I've been trying last 5 hours to remove space in a collapsible listview with no success. I have a listview, the content is loaded with ajax. The code loaded from the ajax call is the <li> element and the <ul> listview (with its <li> elements) inside the <li>. I use append() to add all this to the parent listview. Everything is inside a <span> and after loading the code from ajax I use .trigger("create") on the span to obtain the graphic elements. The first element of the list on top is fine
Change the draggable Function to work on click event.
I want to make the Jquery UI draggable to work on the click event. Like i want to click on the item it added to the canvas area. This is the code for a html builder i want to update the functionality of that builder Need help.
Having Issue on Re-Ordering Contents in a Div Using jQuery
Can you please take a look at This Demo and let me know why I am not able to reordering the buttons in .popover-content class. What I would like to do is different order of presenting the button on each click on #pop and as you can see I am using $("#pop").on("click", function(){ $('.popover-content > button').each(function() { $(this).prependTo(this.parentNode); }); }); but it is not reordering the buttons!
How to download a file from the special folder of a web app using jQuery?
I've had nothing but trouble trying to download a file using simple HTML5, as is evidenced here on StackOverflow It "sort of" works, but it seems unable or unwilling to identify the "App_Data" folder and its contents. So, as I wonder aloud in Update 10 on that mega-post: Maybe what I really need to do is, instead of the simple html, add some jQuery that will download the file. But the question is, can jQuery access the App_Data folder any better than raw/simple html can? Is jQuery capable of downloading
Reset Multiple div Positions on Button Click
I'm creating a card like game and have 28 divs (cards) which when the web page loads are all located within a parent div (#answerCardHolder) which acts as a holder for the 28 divs. The 28 divs currently use a float: left; to position them within the parent div (with relative positioning). Each of the 28 divs are draggable and droppable, the idea being the user drags and drops each card to the correct location as part of the game. Once the game is complete I want the user to be able to click a button
Drag an Object Out of a Scrollable Container
Is there any easy way to allow a draggable object to be dragged outside a scrollable container or would this have to be achieved by somehow duplicating the draggable object, so the duplicate isn't sitting inside the scrollable container at the same time as hiding the original? JSFiddle Many thanks
jQuery autocomplete will not loop through XML data
Hi, I'm struggling to connect my code to the xml file so it will loop through the data, here is my code so far; $(document).ready(function() { setTimeout(function() { $('#_Q0').autocomplete({ source: function(request, response) { $.ajax({ url: "brands.xml", dataType: "xml", type: "GET", success: function(xml) { var results = []; $(xml).find("brand").each(function() { if (results.indexOf(request.term.toUpperCase()) >= 0) { results.push(results); } }); response(results); } }); }, autoFocus: true,
Populating html elements from a json file
hi in an internship i am doing , i need to populate cards(materialize css) with data present in json format in form of an array. i have never used jquery before please help me fix this.
Enabling certain elements / buttons previously blocked by blockUI
Hello all, This is my first post, I am not only new here, but I am also new to everything that is JQUERY. My primary experience is with VBA, so a lot of JS and JQ looks pretty foreign to me. Anywho, I have been stumped on something for quite awhile now. I am working with a page that utilizes a JQUERY plugin called "blockUI", it restricts all interaction with the page unless mouse events are detected over buttons (only then can said button be clicked). The page also uses iframes. I have tried using
Next Page