JQuery Mobile Toggle-Switch in Listview
I'm trying to build a mobile Webinterface with Jquery Mobile. I've got three questions: How can I set css tags for #List li a h2 and #List li a .ui-li-aside? How can I center the toggle switch on the right size? How can I call a different Function by Click on the Toggle Switch, than by a Click on the Listview-Element? Since I'm new in Web Developing, it would be nice if someone of you can answer my questions. This is my Source Code: <!DOCTYPE html> <html> <head> <meta name='viewport' charset='utf-8'
own (string) function via $.fn
I'm a C#.NET developer and in JS/jQuery I missing the... "String".Replace("old","new"); ...to replace all "old" substrings with a "new" substring inside a string. jQuery code: $(document).ready(function(){ alert(('Hello [WORLD]. How are you, [WORLD]?').strReplace('[WORLD]','Michael')); $.fn.strReplace = function(find,replace) { return this.split(find).join(replace); } } console output: [jquery-3.3.1.min.js:2] Uncaught TypeError: "hallo".strReplace is not a function
validation plugin - two languages
I am sorry, but i cannot find any solution, how to have a multiple language error messages. When I use localisation javascript file messages_cs.js, the english is not working anymore, when I validate form from browser which has english in default settings and . The documentation of jquery validator plugin tells nothing about this problem. . When I ask google search for°"jquery validation multiple language error messages" - there is a lot of results, but nothing works... My website is in english
dialog relativity
Hi, I have aspx page that contain another aspx within <IFRAME > tag. When I use jQuery dialog it shows relative to the iframe document, what I want is the dialog to show relative to the parent aspx (the browser viewport). How can I make it happen ?
question about improper function ?
trying to make a dropdown menu clickable on and off... but also be able to turn it off with clicking outside of it. This works great (this is just for the turning it off part, getting the menu to drop down is working fine): $(document) .mouseup(function (e){ var ch = "#dropdownmenu"; if (!$(ch).is(e.target) // if the target of the click isn't the container... && $(ch).has(e.target).length === 0) // ... nor a descendant of the container { $(ch).hide(200);
Copy all form field values to Clipboard
I am developing a form, that once complete, will have a button that copies ALL form field values to the clipboard, to be pasted in an offline document I have figured out how to do this for one field, but get nowhere when trying to add multiple values. I have read about getElementsByClassName, and document.querySelector, but also, can get neither to work, Below is my working code for only one field: *********************************** <input type="text" value="" id="Field1"> <button onclick="myFunction()">Copy
HIde button if all fields are blank
Hello. I have a form that runs a script when the button is clicked. I would like to add a feature that hides the button if the fields values are blank, and show it once all the fields contain a value. I have this working script below, which fires an Alert on this condition, but don't know how to change it over to hide the button. <script> function formcheck() { var fields = $(".myForm") .find("select, textarea, input").serializeArray(); $.each(fields, function(i, field) { if (!field.value)
Adding jQuery to Blogger
I have posted a HTML code File in Blogger.com In that I have included jQuery codes. That jQuery file was in my PC now as I have posted it in the website the code is not working due to missing of jQuery file I added this tag in the <head> <script src='http://ajax.googleapis.com/…/jquery…/1.8.23/jquery-ui.min.js' type='text/javascript'></script> But still not working . ASAP help needed Plz......
Enable draggable object after taphold
Hello jQuery-Community, I am using the jQuery UI Draggable Widget for objects inside a div with overflow. For enabling touch gestures I also included the jQuery UI Touch Punch hack. Instead of using the handle-option for enabling the Draggable Widget for a specific element, I want to be able to enable it for the whole object after an taphold event. So I could be able to either scroll the div by swiping up and down or drag the objects by a taphold. Is this possible? I know I can disable and enable
Creating a mouse wheel navigation option for horizontal carousel of images
I have made a horizontal carousel of images (and captions) using Twitter Bootstrap 4 and the perfect-scrollbar plugin. I want users to be able to navigate by using the mouse wheel. The plugin dos have a handlers option that I did use. Here is a jsFiddle with what I did so far. But it does not work the expected way. Like THIS, for instance. Questions: Am I using it wrong, or does the plugin not have such an option? What alternatives do I have?
Undefined type error for variable - need help
I'm getting a type error: lastSelectedRow is undefined. What I'm trying to do is allow the user to select multiple rows of a table using Shift+Click. I was searching for an example and came across this article: https://stackoverflow.com/questions/17964108/select-multiple-html-table-rows-with-ctrlclick-and-shiftclick I implemented one of the examples with jquery. Here is the code I'm trying: j$ = jQuery.noConflict(); j$(document).ready(function() { if(j$) { //alert('Jquery loaded successfully...');
How to do “only one TABLE column” responsible for drag and drop? ( touch-punch )
How do I GET ONLY ONE COLUMN to be responsible for drag and drop? <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> <script> $(document).ready(function () { $("#sortable").sortable(); $("#sortable").disableSelection(); }); </script> <table class="table table-hover
Jquery,ajax not working for me in chrome
in Using jQuery • 6 years ago Hi! Iäve up till now tested my site in explorer and it worked fine but when i tested it in google chrome it didn't work and i have no idea what the problem is. Please help me :( Chrome console Code Uncaught TypeError: Illegal invocation at i (jquery.min.js:2) at jt (jquery.min.js:2) at Function.w.param (jquery.min.js:2) at Function.ajax (jquery.min.js:2) at login (system-v2.js:7) at saveLocalStorage (system-v2.js:2) function saveLocalStorage(e)
Retrieving the Response from $.getJSON
Hi everyone, How do I get the response coming back from my $.getJSON function? I can see it here: Thank you, Neil
Set innerHTML using Json
Issue: first name is undefined. Json output from User.php [{"firstname":"John","lastname":"Doe","user_email":"john.doe@email.com","access_id":"1","role_id":"2","status":"enabled","company_name":"ABC Inc","mailing_address":"Earth","shipping_address":"Earth","email_address":"","phone":"(555) 555-0000","fax":"(555) 555-1111"}] User.js $(document).ready(function () { /* call the php that has the php array which is json_encoded */ $.getJSON('user.php', function (user) { document.getElementById("firstname").innerHTML
Cycle through different sized images on scroll
Hi all, I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like: - to be able to have images of different heights and widths, not all the same size (as it is now). - vertically/horizontally centered. Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/ Thanks! HTML: <div id="contentwrapper"> <div class="centreme"> <img src="https://picsum.photos/200/200?image=1" id="animation"
adding class only if scrolled down
Hi! I have my lightgallery opened and want before closing it my class only to be added when the main page is scrolled down a bit. $("#LGbest").on({ 'onBeforeOpen.lg': function(event) { $("body").removeClass("scrolled-down-top").addClass("scrolled-down-home"); console.log(event.name,event); }, 'onBeforeClose.lg': function(event) { $("body").removeClass("scrolled-down-home");//add class if scrolled down .addClass("scrolled-down-top");
I used ajax to load the content of a page from my database, but it can't just display on mobile phone
Please someone should help me out, i used ajax to load the content of a page from database, but am having an issue right now, its displaying fine on my laptop and infinix ZERO3 but cannot display any content on some mobile phones (like iphone4s), what can i do to solve this?
how to use bigint of sqlserver in javascript/jquery var.
hi, I am getting some data using ajax [json], but in javascript it does not support bigint data, becasue it is big. so please tel me some solution at javascript level. yours sincerely
how can toggle the active class on sidebar menu when it's clicked and page reloads
i am trying the add and remove active class on sidebar menu, in such a way that when user select a particular link it should be active until another one selected HTML <ul class="sidebar-menu"> <li class="header">MAIN MENU</li> <li class="treeview"> <a href="../AdUserATTENDANCE/Welcome.aspx"> <i class="fa fa-dashboard"></i><span>MY DASHBOARD</span> <i class="fa fa-angle-left pull-right"></i> </a> </li> <li class="treeview">
Select2 Multiple Dropdown
How to get the newest selected value of select2 multiple dropdown
Cropping image
Can I save the cropped image at client side. If possible Plz suggest me what to do. Thankyou
Click element within list and change bg color on that element, and all the previous once
So I have a list <ul> with small tables inside <li>html code table...</li>. I need to click the table and change the backgound which would be pretty simple: $('.table-inside-li').on('click', function () { $(this).toggleClass('background-selected'); }); But the thing is that I also need to change the background of all tables that are within previous <li> as well. They are all lined up horizontally (well I guess it doesn't matter if it's vertical or horizontally as far as the solution
Access table rows without column header row
I'm new to jquery and trying to learn how to traverse the DOM. I'm trying to access the rows of a table, but not the table row with the column headers. I have the following code: j$ = jQuery.noConflict(); j$(document).ready(function() { if(j$) { //alert('Jquery loaded successfully...'); } console.log(j$('input[id$=btnSearch]')); j$('input[id$=btnSearch]').click(function(){ console.log(j$('[id$=searchTable]')); }); }); I'm first checking for the search button on the page. Then I am adding
embedded jQuery Code of ajax load page?
I have an html file oldStudent.html That has the following jquery code : <script> $(document).ready(function () { $("div").each(function (index) { var idDiv = $(this).attr('id'); if (idDiv) { $("#" + idDiv).load(idDiv + "_v1.html"); } }); }); </script> Now in another page Student.html i am loading the oldStudent.html
Linkify (plain url to link) based on windowSize
Hi all, this is what i would like to do 1. when window size is < 1000, change any plain text url to a clickable one 2. when window size is > 1000, change any plain text url to a clickable one, replaced by the word "Link". I had a go but it seems to be failing somewhere! Anyone can shed some light? Thanks <html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script>$(document).ready(function() { function checkWidth() { var windowSize = $(window).width();
link only on visible image
The 4 images are stacked and the appearing is controlled by css changing opacity. I try to get a link on only the last one of the images. Only if the one is shown, it should be clickable. A simple link to index.html... <div class="fixed-top container d-block w-50 nachvorn" data-pg-name="Augen" id="LGschliessen"> <div class="augenlogo"> <a href="#" > <img class="augen" src="images/navbar/augen.png" alt=""> <img
Add border to objekt while draging/reorder
I need to add a border while draging and reorder a table within a list: $(function () { $("#sortable").sortable({ start: function () { $(".my-table").css("border", "1 px solid #202020"); }, stop: function () { $(".my-table").css("border", "none"); } }).disableSelection(); }); This approach doesn't work. So how could this be done?
Compare two separate files for similar elements?
Hi friends, I have two files. oldCourses.html and newCourses.html. oldCourses.html has elements <div id="courses-details"> <div> <div colspan="4"><b>2017 School Courses</b></div> </div> <div> <span>1.</span> <span>History</span> <span data-content-type="history" data-key="1" teacher-value="John"> John</span> </div> <div> <span>2.</span> <span>Sciences</span> <span i data-content-type="sciences"
Need to force focus if there is an error
Hi, Can someone help me edit this code that instead of hiding the submit button ($("#submit_button").css("display" , "none");) when there is an error, rather to just show the error message ($('#tfa_4929-D').append("<div class='error' style='color:red;'>Invalid number. One can only submit this form if this field is blank or it contains a valid number.</div>");) and force focus to the correct field that has the error? Here is the snippet that I need edited. jQuery(document).ready(function($) {
hi guys, i have a question about animate function
Tết Này một mực Phải mua Ngay Bộ Đồ Lót Nữ Đón Năm Mới Bạn thiếu tự tin giả dụ không tô son? đặc biệt, ở đây với những hàng ghế trắng xếp san sát nhau, trông rất bụi bặm và đậm chất phương Tây. Phun môi pha lê 3D là cách giải quyết tình trạng môi thâm, môi ko đều màu, môi quá dày hay quá mỏng, môi khô, đem lại cho bạn một vài môi căng mọng, đầy sức sống sở hữu màu môi trẻ trung, lóng lánh đầy quyến rũ như ánh pha lê trên bề mặt môi. Ở Trung Quốc, đề cập đến cặp đôi LGBT nổi bật, người ta sẽ thủ thỉ”
rails and jquery mobile: serious issues
I would like to create a mobile version of my rails 5.0.0.1 application. Once downloaded and installed jquery mobile 1.4.5, however I encountered serious issues: css rules are not respected, redirects fails, javascripts do not work, colours are blurred, buttons do not work... I tried both the full versions and the minimal versions of the css an js files with the same bad result. I am using jquery-rails version 4.1.1 and I am wondering how can I get jquery mobile to work, whether would you advice
Parsing JSON table: hiding a row, changing color of word.
Hi all, I am using jquery to convert a google spreadsheet to JSON that produces a HTML table. I would like to: - hide one of the rows that has the phrase "E9" in it. - change the color of the phrase "C12" to red. I have tried many scripts, but to no avail! Here is the code I currently have. Thank you very much! <html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script> //google spreadsheet var spData=null;function doData(a){spData=a.feed.entry}function
How to fix var when jsFiddle says var already defined
Here is my fiddle https://jsfiddle.net/juggernautsei/w8yn2ehk/ $(function() { $("input[name$='notify_type']").click(function() { var test = $(this).val(); var selected = $("input[type='radio'][id='notify_type3']:checked").val(); $("div.referral").hide(); $("#ref" + test).show(); if(selected == "4") var opts = [ {name: "Please Select", val:""}, {name:"WMOX", val:"WMOX"}, {name:"WVKL", val:"WVKL"},
Auto response ui : Send additional Paramter
Dear sir/Madam refer http://prajaktasoftware.com/egram/testuseradd.php?id=36 The autocomplete working file. However I want to filter the result I have 2 filters Pls refer following form We have 2 filters 1. Filter 1 2. Filter 2 I want to send parameters selected in filter 1 and filter 2 for auto-search Code $(function() { $("#gp").autocomplete({ source: "gpautofill.php", minLength: 2, select: function(event, ui) { $('#gpid').val(ui.item.recid); }, //html: true, open: function(event, ui)
Loading a file to cache only
I find the opposite question a lot, but I haven't found the answer to this one yet! :-) I'm trying to load a file in to the user's cache, but not actually use it on that page. The logic is, on the first page load I would use PHP's include() to load the CSS inline, then at the bottom of the page I would load the external CSS file to cache it and set a cookie to signify that it has been cached. Then on the second page load I would test for the cookie, and if present I could link to the CSS like normal.
jQuery application: trying to make the “wheel” event listener discontinuous fails
I am working on a small "Picture browser" application in Bootstrap 4 and JavaScript. As can be seen in THIS jsFiddle, there is a "Prev" and a "Next" button that help navigate through the pictures. I have bean trying to find a reliable method to make mouse well scrolling function the same as these buttons. Scrolling down would be the equivalent of clicking the "Next" button. Scrolling up would be the equivalent of clicking the "Prev" button. Firing the showSlide() function on mouse wheel does work,
Defining CSS based on whether user is at top or scrolled down
I'm having a sticky navigation issue that's causing anchor links to scroll too far or not far enough, depending upon whether the page has been scrolled down in the slightest. As soon as the user starts to scroll down, the header section is reduced in height with only the navigation remaining. Is there a way to define CSS for an anchor based on whether the click on the nav link occurred while scrolled to top or not scrolled to top? Here's what I have so far, but the .anchor changes to the non-top
on click and automatic image cyclers crossfade consistentcy
Hello guys! I'm new to this forum and jQuery and would like to ask for your help.:) I have this code for an automatic image cycler and I really like the smoothness of the crossfade, it also works independently with identical .wrappers containing children divs: $(".wrapper").on("click", function() { var $content = $(this).children(); if ($content.length > 1) { var $curr = $content.filter(":visible"); var $next = $curr.is($content.last()) ? $content.first() : $curr.next(); $next.fadeIn(2000) $curr.fadeOut(2000)
Reading from a separate config file
I wish to know what is the right way to use a 'configuration' file for my jQuery plugin. I'm using an editor that accepts configuration options. Right now I've a format that looks similar to - `editor.js` ``` let config = { opt1: 'someVal', opt2: 'someOtherVal' } $(".editor").awesomeEditor(config); ``` I was thinking I should maintain a separate config file instead where I define `config` options. But then, what is the right way to include this new config file so that my plugin
Next Page