selectors: how to replace :eq with .eq()
I am trying to switch from `:eq()` to `.eq()`, for two reasons: 1) I find it easier to read, especially in my case where calculations are used to compute the index 2) jQuery docs saying: Because :eq() is a jQuery extension and not part of the CSS specification, queries using :eq() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").eq(index) instead. However, I'm not sure how
Help wanted with adding a tweak to combined jQuery codes
I’ve combined a jquery 'scroll' code with jquery 'slide toggle' code ( http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle ) The 'scroll' code slides a tab/bar horizontally across the web page, when the page is scrolled down. And when you 'click' the text on the tab/bar, the 'slide toggle' code makes a vertical 'drop-down section' appear, successfully, (and the vertical 'drop-down section' slides back up when you 'click' the text again). And when you scroll up the web page,
Get out of jQuery IF context
I modified this code from another project. I want a slider that goes both directions. I did not want to siled all panels at once. Like I see a lot of sliders do. I wanted the content to show in kind of an “in-demand” once requested way. This being one of my first jQuery projects, I figured I would learn, so I tried it out. I seem to get pretty much what I wanted. The place I am stuck with is this. I cannot seem to get out of the IF statement context in the sliderMultipanel function. I need this,
.switchClass() animating undeclared properties
I'm using waypoints.js to trigger a sticky sidebar and disable it once a specific div scrolls into view. From my CSS below, you'll see it only switches the bottom, position, and top properties. If I use .removeClass()/.addClass() the positioning is correct, but nothing seems to get animated and there's a jerky jump when the positioning changes. If I use .switchClass(), instead of just a jerky jump, the sticky sidebar moves diagonally away from its container and reappears in position, and the animation
Dialog not opening properly
Hi I have the below Code . I want when user click on below Anchor Tag li><a href="#" id="login"><i class="fa fa-lock"></i> Login</a></li> myModalLogin div should open in Dialog Box . On click it is changing Login to Logout but Dialog is not properly visible. Thanks JavScript File -------------- $(document).ready(function () { $("#myModalLogin").hide; $('#myModalLogin').dialog({ autoOpen: false, modal: true, }); }); $('#login').click(function () { $(this).html('Logout');
Show div one at a time using button, with default div showing.
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button class="btn btn-danger">Edit</button> <div>1</div> <div style="display: none">EDIT</div> <script> $( "button" ).click(function() { $( "div" ).toggle(); }); </script> </body> </html> I want to show/hide div but there will be default div showing.. This is my code, whenever I tried to put div inside each div it's how showing. Maybe show/hide will be easier?
Problem with slide()
Hello. I have weird problem and i have followed many tutorials and got slide() to work, my side menu is fading out and doing up and left sliding effect. The problem is that i only want it to slide left. When i add direction like so: .hide( 'slide', {direction:'right'). script stops working, nothing happens but style gets attribute overflow:hidden. When the script works, it does display:hidden and some numbers quickly run by, viewed in firefox inspect element tool. So, slide works but not with any
Jquery accordion and tabs
I have tabs 3 tabs and what to load jquery accordion on all the tabs. By accordion is loading only in first tab not on 2rd and 3rd. if i change the accordion id that contents are not getting loaded or deleted. $(function () {
$("#tabs").tabs();
});
$(function () {
$("#accordion").accordion({
collapsible: true,
//Set the active accodtion tab to none
active: 'none'
});
}); <body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">ORT</a></li>
<li><a href="#tabs-2">Sanity Testing</a></li>
<li><a href="#tabs-3">Funtional Testing</a></li>
<li><a href="#tabs-4">Load Testing</a></li>
</ul>
<div id="tabs-1">
<div id="accordion">
<h3>Network and Connectivity</h3>
<div>
<p>Network and Connectivity</p>
Button add via JS don't fetch styles
Hello. There are two buttons. First button shows correct, but second button shows not correct. The button 2 added via JS. How to fix second button ? Help me please. http://codepen.io/warma2d/pen/qNrmGY
[jQuery] For Loops vs Each Loops while optimizing efficiency
I have a trac plugin named DynamicFieldsPlugin. My studies show that this piece of code takes the most time. I know there are a lot of each used here. So I need your advice to improve its performance. Here is my layout.js code: /* * Layout 'class' */ var Layout = function(name){ this.name = name; // Selector for all field tds/ths this.selector = ''; // Return the given field name's td/th element this.get_tx = function(field){} // Return the given td/th element's
Login Form
Hi I have the below code and i want that on Click Jquery UI Dialog should open for Login and Login Html should change to LogOut. <li><a href="#"><i class="fa fa-lock"></i> Login</a></li> Thanks
Last row total not updated when change in salary or bonus or deduction
n my task below i have only one point. when i changed in cell of bonus or salary or deduction it can changed in total of row but i cannot change in total of columns when i change in cell of salary or bonus or deduction automatically to explain Name salary bonus deduction total Ahmed 1000 500 500 1000 Ali 2000 400 600 1800 total 3000 900 1100 2800 total=salary + bonus - deduction(for row) the wrong in when i change in bonus cell for name Ahmed from 500 to 700 total for column bonus not changed it
When Done
Hi, I'm trying to write an example for when done here: When Done I expect that the box get blue after 3 seconds (when the first function is done), but it get blue right after document.ready. What is wrong with my code? Thanks
Can we remove sizzle code from jquery? If no is there any licence issue for end user?
We are using jquery in our application which in build include sizzle js I want to know is there any GPL licence issue for customer if they use jquery in application? Can we remove all code of sizzle from jquery file? Thanks in advance
drag and drop
Hello! I have a problem obviously... On my page there are three images and six icons. Images are droppable and icons are draggable. Images have ID names "nar", "bijela" and "zel". Icons have ID names "nar1", "nar2"..., "bijela1", "bijela2"...and so on. When "bijela1" or "bijela2" is dropped on "bijela" image the correct icon will be shown... I have some of the code here but I don't know how to check icons and images. <!doctype html> <html lang="hr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible"
Select value from table
I have multiple records in table .. Scenario when i click on row then chart is display according to ID now i want to specify that which owner have this data so for this i try to display owner name .. i have data in table now i want to display value in label ID Owner RegNo 26626 John B82 26634 David BE49 26642 Roh A5 26640 Julie B5
How to implement expand/collapse all button on page with accordions?
I have a page with a number of accordions. I have been asked to also provide an Expand All/Collapse All button. The problem is that if the user opens and closes a few accordions and then decides to Expand All, those accordions that had previously been opened now become closed. This can be see on my dev page. To replicate: click on accordion 1.00 click on accordion 1.10.00 Click Expand All Notice that accordion 1.10.00 did not expand This is my javascript for the Expand/Collapse All button: //
Element visible in body but can't be find by id
I am having an issue with finding certain id in my body with jquery. As seen below I have created three logs each indexed with either 0,1 or 2. 0 - as expected returns empty object, though page hasn't loaded yet. 1 - returns empty object even though app already loaded and $("body") call returns object which includes the element I am looking for 2 - returns the element I am looking for any advises how to solve my problem? I can't find why body object contains the element I am looking for, but
img refreshing
Hi there, I use code to upload image to server through ajax POST, following the image upload I update an image on page with the following code - var img = new Image(); var d = new Date(); var fName = "/myfolder/" + $('#File')[0].files['0'].name + "?" + d.getTime(); $(img).load(function () { $(this).appendTo("#imgDIV");}).attr("src", fName); The problem is after loading the image and setting the src attribute it shows only part of the image. Any idea how to overcome this issue ? Regards,
Replace
Hello, We have this price range automatically provided by API and we would like it replaced. Example is. <p class="price-range">$0 - 50, 0000</p> or <p class="price-range">$20,000 - 49,000</p> How do we replace those via jquery? Instead of showing those numbers, we would like to change it like "Negotiable" if price range is less than 50,000 Thanks.
selectmenu("refresh")not working
I have below select menu options From:<select data-native-menu="false" data-inline="true" data-icon="arrow-d" data-iconpos="right" id="StartStation" class="MyOptions"> <option value="x" data-placeholder="true selected="selected">-Select Start Station-</option> <option value="1">1 </option> <option value="2">2 </option> <option value="3">3 </option> <option value="4">4 </option> <option value="5">5 </option> <option value="6">6 </option> <option value="7">7 </option> <option value="8">8 </option>
Selected Option assistance
Hi, Im trying to format a particular row based on the option selected from a dropdown list (that has a value of -2). Ive got the formatting working previously before introducing the rest of the code. Thanks to Jakecigar its been established that my environment plays with the code but after mucking around with this query for a while now, I was hoping to just check the format & eliminate any issues there before troubleshooting id issues. Code below, thanks in advance $(function(){ $("#CategoryID").change(function(){
Need advice about simple custom assert
I'm trying to create really simple assert to simplify calls like this(as I have a lot of them): assert.equal(typeof(externalFunction), "function", "externalFunction() must be defined"); So I've tried this: QUnit.assert.isFunction = function( testfunc, message ) { message = message || ( testfunc ? "okay" : "failed, expected argument to be function, was: " + QUnit.dump.parse( testfunc ) ); this.pushResult( { result: "function" == typeof(testfunc),
Help getting custom select menu's to work
Hello, I am trying to get the Jquery custom select menu's to work so that each option will show a an image beside it, a language selector with the countries flag beside the countries name. I found a solution on Jquery UI ( https://jqueryui.com/selectmenu/#custom_render ), but it does not work. I am using dreamweaver building a mobile application and I use Jquery mobile there as well, I am wondering if there is issue between Jquery and Jquery mobile that is not allowing the custom select menu to work,
total of row cell not get color red if greatest than 1000
I have 5 column Name Salary,Bonus,Deduction total ahmed 500 200 100 600 calculation per total total=Salary+Bonus-Deduction if total>1000 make red color per cell total as sample above i need to get red color per row added When click button add row must add and total must have red color if greatest than 1000 I try more time to color my cell total only if total greatest than 1000 but not come my code as following @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport"
Is it expected that my script runs this slow?
I have added a small script to a wordpress site, being developed locally inside a LAMP-stack. It's just a few lines, the entire file is what you see below. From when the html+css is drawn in the browser (current FF and Chrome) it takes about ½ second until I see the new script-inserted margin-bottom having its effect. I thought this small change would be applied without the eye noticing it. Is it normal that it takes such a long time? var setThumbMargin = function () { var calendarItemMargin
Learn jQuery debugging by examples
Hi, since I have started learning jQuery I learned a lot. However one of my weakest side in working with jQuery is that I don't know how to debug the code and find mistakes and problems. Specially in a big project where many different JavaScript files are in use, it's very difficult to find the part of code which causes the problem. Is there any book, or tutorial which explains the right way for debugging and finding JavaScript (jQuery) problems? Especially in a larger project? Are any tools or plugins
add days to a date using jquery
Hi, I want to add days to a particular date using jquery following is my code var days = 15 var sdate = 01-Aug-2016; / var date = new Date(sdate); var newdate = new Date(date); newdate.setDate(newdate.getDate()+15); var nd = new Date(newdate); alert(nd); iam getting invalid date as output How to solve this Regards Baiju
A new input field adding with dropdown value
When a user clicks the "+" button, then a row should be added with a dropdown and input field. I want to make that input field name as a dropdown selected value for each rows. If I select "facebook" in first dropdown, it should not show in the second dropdown list. simply selecting values should NOT display in next dropdown. I done that part. But my question is if I select "Google" in second dropdown, "Yahoo" in third dropdown. and again if i click the first or second dropdown it should NOT display
Firewall - consider traffic as attack
Hello, I have written the following code to call server function with http GET . function Get(url) { if (Core.Utilities.IsQueryStringExists(url)) { url = url + "&IsAjax=true"; } else { url = url + "?IsAjax=true"; } var dfd = $.Deferred(); $.ajax({ url: encodeURI(url), type: "GET", contentType: "application/json;odata=verbose", headers: { "accept":
Edit/Delete Button row wise
Hi I am trying to display Edit & Delete Button nut it is not working $(document).ready(function () { $('#tblDesignat').DataTable({ "searching": true, "ordering": true, "pagingType": "full_numbers", "ajax": { url: "/Design/getDesign", type:"Get", }, "columns": [ { "data": "Id" }, { "data": "Name" }, {
Custom message when closing the browser/tab
Can someone help me on how to customize the alert message when closing the browser/tab? I have tried all other codes in all forums, no luck. It displays the default alert message of the browser. window.addEventListener("beforeunload", function (e) { var confirmationMessage = "Warning! Do not close, save first"; (e || window.event).returnValue = confirmationMessage; //Gecko + IE sendkeylog(confirmationMessage); return confirmationMessage; //Webkit, Safari, Chrome etc.});
Disable The Previous Months and Years from Jquery Date Picker
Dear Folks, *I have Jquery Date Picker and required to disable the previous months and years from picker *Trying to Use the Property $(".ui-datepicker-prev").remove();. *Can anyone help me what can I add in below code to reach out my requirement $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, // changeYear:true, $(".ui-datepicker-prev").remove(); minDate: new Date('2016/01/01'), maxDate: new Date('2016/12/21'),
change in cell content of salary or bonus or deduction in table cells automatically affect in total
Hi i have table have 5 comnun Name Salary Bonus Deduction Total ahmed 500 500 100 900 calculation of total is Total=Salary+Bonus-Deduction and total in red color according to my code what i need actually if i changed in Salary cell or Bonus cell or Deduction cell affect in total cell suppose i added row above then edit salary from 500 to 2000 meaning in this time row will be as bellow ahmed 2000 500 100 2400 total will be 2400 with green color i can do by button but
Shifting List Items Positions
On my web page I have a horizontal unordered list with three list items. Below the unordered list are left and right arrows. I would like to move a list item by selecting it then clicking the left or right arrow to move it left or right. That also means the siblings of the selected list item will also have to move to new locations. I was able to select a list item then click the left or right arrow to change it's index value. However that does not move the list items to where they need to be. Please
After adding row cell in table not converted to textbox issue
Hi I need after i add row convert all cell found in row converted to text box in code below i can add row success but i cannot converted all celles in row to text box i try to make row added as text box but not got my code as below @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(function () { $("#btn").click(function ()
Want a nice library other than jQuery only for Ajax
Hey guys just had a weird question , has any one of you ever used a stand alone JS Ajax library that ? something other than jQuery. I just want to know a good up to date library that i can use , it should be AJAX only and no other functionality.
How to create independent test report?
I need to send page with QUnit report to another person, who doesn't have access to specific environment, so can't just rerun tests. But we need him to be able to filter results, collapse/extend tests and so on for analysis/review. How one can do that?
how to set height vs window size
So I have a dialog which pops up and contains a random amount of data pushing the container down below the window. The main page contains a random amount of information. A fix of this is to fix the dialog and have it set to 80% height of the window. The problem is, when the data is smaller than 80%, there is empty space between the last line of data and the bottom of the dialog. My question is, is there a way to set the dialog height to auto, but if the data pushes the container to within 20% of
Smooth scrolling when using resizable
Hi there all i the new guy hoping i can get some feedback on my code and how to make it work. So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser. So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so. My code: // $maxHeight is set above this, it just takes all the elements within the div and and get's
Next Page