Validate HTML5 form on making form fields mandatory dynamically
I've a bootstrap form which has a few fields. By default, the 1st and the 2nd fields are mandatory. Now, if the 3rd field is filled out, the 4th one becomes mandatory. Similarily, if the 4th field is filled out, the 3rd one becomes mandatory. However, if both 3rd & 4th fields are not filled out, they're not mandatory. I'm also using the HTML5 form validation here. So, here if you see, the fields Name & Date of Registration are mandatory by default. However, I'm trying to make Website mandatory when
help : "Uncaught TypeError: $(...).swipe is not a function"
<!-- below is my script for side bar --> <script type="text/javascript"> $(document).ready(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); }); /* mistake in swipe area */ $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar");
Volume Control Handle
Hi all, HTML <input id="volume" type="range" min="0" max="10" value="5"> Using jQuery for play audio, pause audio, stop audio, next song, prev song and volume control. Unable to reset volume control handle back to default value (center) after selecting next song from the playlist. Have not supplied the jquery code in case it took up too much space. Happy to supply it. Any assistance is much appreciated. Regards Tony
Unclear mousedown event behavior
Hi, I'm new to jQuery, so I apologise if this sounds silly. I'm referring to the the mousedown API documentation: https://api.jquery.com/mousedown/ Using the example at the bottom of the page, I was expecting the mousedown event to get fired as soon as the mouse is pressed. Instead, when using my finger on my chrome mobile browser, both mousedown AND mouseup events get fired together when I lift the finger off the element. Why is that? Thanks in advance, Nir
Reposition draggable element to initial position
I have 2 issues which are as follows: I have prepared js fiddle for my issue: I'm having left and top position assigned to each draggable item. Now, when draggable item is dropped outside of droppable area then draggable item doesn't position itself to initial position. As per my reading, I have also tried to set top and left to 0 but it didn't work. After dropping element in droppable area, what changes are required so that draggable item covers entire droppable area? Can anyone help me with this
JQuery UI inline DatePicker loses selected date after ASP.NET postback, How to keep it?
Hello to All I have a jquiry datepicker and the code is as below: <div id="test"></div> <asp:TextBox ID="txtRDate" runat="server" Width="120px" ClientIDMode="Static" AutoPostBack="True" OnTextChanged="txtRDate_Te xtChanged"> </asp:TextBox> Javascript code is: <script type="text/javascript"> $('#test').datepicker({ dateFormat: 'yy/mm/dd', minDate: new Date(2017, 1, 1), defaultDate: new Date(), onSelect: function(date, obj){ $('#txtRDate').val(date); //Updates value of date $('#txtRDate').trigger('ch
Save the dynamically created DOM and create a JSON
I need help for creating the JSON of the dynamicallly created dom objects which has exactly the same format, which was while receiving the JSON to create the dynamic element. To simplify thing, I've create a dummy application, which is available in the JSFiddle link provided below. Now, if you see, in the table I'm getting the data through JSON. The checkbox values in the table are JSON objects. When I select any of the checkboxes and click on Save, the corresponding div is generated and displayed.
MP3-jPlayer: skip to minutes by clinking the timeline
On this page I have the MP3-jPlayer WordPress plugin with the Text Skin, slightly modified. I have deleted the volume bar from the plugin’s html/php structure. I have also added a “seekbar”: <div class="seekbar-wrapper"> <div class="seekbar-container"> <div class="seekbar" value="0" max="1"></div> </div> </div> I have modified the plugin’s mp3-jplayer-2.7.js file in order to show, for every track (mp3 files), the timeline. After line 403 (jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint
Calculate Total
Hi I have below code and i want when user changes Quantity row total & grand Total should also change. Quantity should not be -ve <div class="container"> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1"> <table class="table table-hover"> <thead> <tr> <th>Product</th> <th>Quantity</th> <th class="text-center">Price</th> <th
JQM - multi page, changing pages is auto selecting a text input
I have a very basic jQuery Mobile site in early stages, built off the multi-page template from the jQuery mobile documentation. My first page is a basic login form, with a registration link going to a second page. When I navigate to that second page, my <input type="password" placeholder="password" > is being autofocussed on page load. I have absolutely no idea what I'm doing wrong. Any assistance or advice would be greatly appreciated! Thanks :-)
Does an object "derive" attributes and behaviours from a Class ? : An exam question doubtful
Plz help me . It was a board exam and I wrote " objects are instances of classes and derive properties attributes from a class" Need experts reviewal whether that statement was right or wrong.
Datepicker altFormat issue
The documentation seems to indicate, altFormat:"MM dd, yy" would return April 07, 2017 for today, but it actually returns "04/07/2017", what's going on? Did I misread its doc? Thanks.
How to add some static data to Datepicker date?
For a jQuery UI's datepicker field and I'd like to add a static timestamp to a selected date value upon date selection. I've looked at all the attributes for datepicker, however, none seems appropriate for this need. And I attempted to trigger onblur and onMouseout respectively to call up a function to append the static timestamp, however, it quickly shows up and then disappear. So, what to do this? And I wonder if there's a special event, which essentially kicks off after all other events are
JSON to Table
Hi, I want to ask how can I populate this json into HTML <Table> with two columns Currency and Rate when populating through ajax success? http://www.apilayer.net/api/live?access_key=6942e4bd7fcd69b95d0ed7f77951697c&format=1 Thanks, Jassim
Help from a datepicker master please! Trouble setting the date correctly.
Hi there, could really use some pointers from an experienced datepicker user. I have a gridview in an ASP.net webform. One column of the grid is composed of both an <asp:label/> and an <input type="hidden"/> control. I have managed to get a datepicker to appear in every row of this column and for the date of each datepicker to be set by the value of the <input type:hidden> control (a list of dates). The label shows the same data as text. When I click on an icon in the row the datepicker appears
Webpage's Scroll should be visible When Overlay is Active
Goal: When you open the overlay, the webpage's scroll (not overlay's scroll) should be visible but not active to use. Problem: It is irritated to see that the page moves to the right side when you invisible the scroll and when you visible the scroll the page moves to the right side in relation to overlay. Is there a way to do it? Thanks! http://jsbin.com/lacajijuce/edit?html,css,js,output
Datepicker same width as the input in a bootstrap grid layout
I have an input field that has a bootstrap class of "col-xs-6". This input has a datepicker associated and I need it to be the same size. I used the beforeShow event to calculate the width of the input and place it on the datepicker. However this works only if the user does not change the month. Can this be achived? I saw that you can change the size using css but as you know the grid layout is dynamic so I can not use the css change since it will make the datepicker with fixed size.
running function based on elements id
Hi, I am trying to put together a small function to change the class of a form's input field. I know that I can do this for a specific if but I would like the function to run for multiple fields using the appropriate id. My Javascript experience is limited and so is my jQuery. I am already using jQuery on the page for a dropdown/hamburger menu so would like to use jQuery for this. I would also want to use onChange rather than something like onKeyUp to trigger it as someone might paste with a mouse
Facing Issue on Loading JSON to Bootstrap Tab
Can you please take a look at this demo and let me know why I am not able to load the second layers of data in the JSON to bootstrap tab `tab-content`? var data = { "action": [{ "id": "1001", "name": "Matrix" }, { "id": "1002", "name": "IP Man" }, { "id": "1003", "name": "Revenge" } ], "comedy": [{ "id": "2001", "name": "Iceman" }, { "id": "2002", "name": "Pat & Mat" }, { "id": "2003",
function that returns a element on passing X Y [on hold]
Is there any function that returns a element on passing X Y, if there the location is over a element. We can not use mouse over. Thanks in advance
Autocomplete Caching and using _renderMenu correctly
I am trying to make the following autocomplete code work but cannot identify the errors in the code. A very basic autocomplete works but I’d like to add caching and the ability to change the list that pops up, but I could not do so following the jquery instructions. Here is the code first: <style> .odd { background: blue !important; font-size: large; } </style> And here is my jquery, at the bottom of the page: <script> $(document).ready(function() { $.ajaxSetup({type:
Create and append dynamic div if the div with same value doesn't exists
I'm working on some application wherin the data will be displayed based on some selection. The data will be selected from the table as shown in the screenshot. It gets populated in the table through some JSON. Now, lets say, for example, Select A & C from the table shown in the screenshot and click on 'Save'. A & C get appended to "div.box" with ids "parent-0" and "parent-1" respectively. Now, select A & B from the table. Current situation: Nothing is added, and alert is shown as "Data already exists!"
Two errors: scroll is not a function & Cannot read property 'top'
Hi everybody! I am trying to solve some errors of an online printing company website and I´m stuck in a couple of them. I do not find solution. Both are jQuery errors that can be seen by going to https://www.imprentaonline24.es and you pressing examine and you going to the console tab. Error 1: Uncaught TypeError: $(...).scroll is not a function at www.imprentaonline24.es/:216 Error 2: Uncaught TypeError: Cannot read property 'top' of undefined at HTMLDocument.<anonymous> (www.imprentaonline24.es/:184)
HTML5 form validation in a bootstrap modal
I'm relatively new to jquery and javascript. The form opens up on clicking the button "Open Modal" in the modal. Next, when I click on 'Save' in the modal, it should validate the HTML5 form and on successful validation should call another function "addDetails()". How do I achieve this using existing jquery form validation plugin or any other method? What CDNs I need to refer to while using? <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Get all href attributes of dynamic links inside dynamic div stored in array
I've a few dynamic elements being generated on click of a button. On click of this button, I get dynamic divs generated which also contain link. I get only the first href attribute value("link0.com") in the array "linkArr". How do I get all of the href attributes stored inside this array? Here's my code. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Create a dynamic div and display if it doesn't exists already in the display list
I'm working on an application wherein the data will be displayed here based on some selection. Please note that, the data in the table actually comes in through some JSON. However, here I've hard coded all the data here in the table. Unfortunately, I don't have the JSON to share. <!doctype html> <html> <head> <style> table, th, td { border: 1px solid #ddd; border-collapse: collapse; padding: 10px; } .parent { height: 25%;
Set value of the textbox equal to the first activated date in datepicker
Help please, my code is working, and it is activating only the day of week that i want, but by default the textbox has no value, i want the value of the textbox to be equal to the first date activated in my datepicker, My code is: <input type=text name='dtpick' id='datepicker'> <script> var j = 3; $(function() { $('#datepicker').datepicker({ minDate: 0, beforeShowDay: function(date) { var weekDay = parseInt(j, 10); if (weekDay === date.getDay()) { return [true, '', '']; } return [false, '', ''];
you can choose as many checkboxes as the number written in the textbox.
hello, I want to simplify this code How does it work;you can choose as many checkboxes as the number written in the textbox. as you choose that number, the number will decrease by the selected amount. for example, the number 2 is written in the textbox; when you choose 2 checkboxes, the number in the textbox will decrease by the selected number. It continues in the form of a loop. https://jsfiddle.net/gonejko/9gemw193/2/
array datepicker
hello i want show datepicker in my array. here my code. i can click on 1st box & show the date. but when i click on 2nd box nothing happen. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="../apps/css/jquery-ui.css"> <script src="../apps/js/jquery-1.12.4.js"></script> <script src="../apps/js/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> </head> <body> <form
jquery.mobile source video
<video width="350" controls> <source src="../videos/t.mp4" type="video/mp4"> </video> </div> how do i convert this to a link so i can upload videos to hosting site reduce space only use link i am trying to create an app with phonegap but it say app is too large.
ui-focus issue on popups with fiddle example
Hey all, If I create a popup that is long enough to require scrolling, and have a checkbox or radio buttons towards the bottom of the page (low enough that it requires scrolling down to get to), then selecting the checkbox/radio button forces the dialog box to scroll to the top, but doesn't select the checkbox/radio button. It also sets focus on the first element on the page (which I think is what is causing it to scroll back to the top). In fact, even if the checkbox/radio button is near the top
Need to make one button orange but theme overrides all attempts!
I'm using the classic JQM theme which is contained in mytheme.css. <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" href="mytheme.css" /> <script src="jquery.mobile/jquery-2.1.4.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script> The relevant HTML looks like this: <div id="homePage" data-role="page" data-content-theme="b" data-theme="b"> <div
MP3-jPlayer: show the track timeline
On this page I have the MP3-jPlayer plugin with the Text Skin, slightly modified. I need to show, for every track (mp3 files), the timeline instead of the volume bar. How do I do that?
Jquery 1.12.4 selector for href
I was using with jquery version 1.8.2 var hasContainerTab = $("#tabs").find("a[href='#container'").length == 1; I upgraded jquery to 1.12.4 Now that statement is failing saying unrecognized expression: a[href='#container' I referred lot of blogs ( https://github.com/jquery/jquery/issues/2829 ) around this, but I could not find a fix. Can any one tell me how to re-write the statement as per the new version?
trim the length of url text
I have a table that contains links and i want to reduce the visible text for a url if it is over 35 chars. I have managed to do this. However, my script is replacing the link as a string, so users can't click on a link because of my script. I want to keep the url but change the text displayed, how do i keep it all together? here is my fiddle https://jsfiddle.net/wqwyx0tn/1/
JQuery UI - Draggable Viewport (overflow:hidden)
Hello I have jQuery content slider ( http://bxslider.com/ ) and I would like to drag (copy) images from this slider to another container (droppable) on the page using JQuery UI. I managed to make the images draggable, but since the slider has a "viewport" (overflow:hidden), the images are getting invisible, as soon as they move outside the bxslider viewport. How can i solve this? Is there an example for this situation? I would like to copy the images onto the droppable. The original image should
trigger a bootstrap modal show event
I'm gonna pass some params to a bootstrap modal "show" event handler while showing the modal, so gonna use $("#mymodal").trigger("show.bs.modal",[param1,param2]) i nstead of using default $("#mymodal").modal("show"), the handler is triggered, but the modal does not displayed finally. what's the trick?
How do I invoke a JS script once a datepicker date has been selected by a user?
$( "#datepicker3" ).datepicker({ changeMonth: true, changeYear: true, onChange: ??? });
Hiding Contact Details From Bots Using JavaScript / jquery plugin
Hi, I am creating a simple online business card. To begin with I had everything on one side of the card and I was hiding the email address / contact details from bots by defining them as javascript variables in the html header then printing these variables back out onto the page in the required places using javascript. However, the new design for the business card uses some jquery to give a flip effect animation so I can put the contact details on the back ; http://2.24.161.98/test/test.htm My problem
Uncaught RangeError: Maximum call stack size exceeded
Uncaught RangeError: Maximum call stack size exceeded at Function.ga [as find] (jquery-3.1.1.min.js:2) at r.fn.init.find (jquery-3.1.1.min.js:2) at Array.<anonymous> (commondie.jsp:113) at i (jquery-3.1.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2) at Object.<anonymous> (jquery-3.1.1.min.js:2) at i (jquery-3.1.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2) at A (jquery-3.1.1.min.js:4) at XMLHttpRequest.<anonymous>
Next Page