Toggle image source with fade effect
Here is my code: http://codepen.io/vkhu/pen/Eammve I'm trying to create a cover swap effect for a book. Basically, I want the image source to change from img1.jpg to img2.jpg when I press the "back cover" line. If I press the "back cover" line again, the source changes back to img1.jpg. Also, when the covers are swapping, there will be a fade effect. I can only do the img1->img2, but not the other way. And I have no clue how to make a fade effect. Can anyone help my please?
Jquery Toggle
Hi All, I am using the following code to toggle. But somehow it does not work. The reason I found is it does not support special characters like : ~ in the Id reference. Is there any workaround to fix this issue. Note: I cannot change the Id name as it is system generated. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#d:dashboard~p:k1s87ca25ol4e0b7~s:kfld0kqbros586fm").toggle();
Download a file via AJAX
Hi, I am starting with ajax and got a problem with a download I would like to make via AJAX. $( document ).ready(function() { console.log("jQuery Version : " + $.fn.jquery) $('.documentIcon').click(function(){ var src = $(this).attr('src'); $.ajax( 'http://localhost/file-stream/response.php', { 'xhrFields' : { 'responseType' : 'blob' }, 'dataType' : 'binary' }) .complete(function ( xhr ) { console.log(xhr); var $a = $( '<a />' ), url = URL.createObjectURL( xhr.response
How to Get Scroll Position Every 200 Scroll?
I am trying to get the scroll down and up position at This Demo but as you can see it is updating the <p> element on every pixel by pixel scroll (Up or Down). But what I need to only update the <p> on every 200 scroll until reaching the end of the div (right now the p element is updating on every single scroll ). Here is the code I have: $(window).scroll(function () { var height = $(window).scrollTop(); if (height > 200) { $('p').html(height); } }); <p></p>
Can not submit modal form when have two modal on page
I have a view with two pop-up dialog form, example bellow, form 1 can not submit (click submit button of form 1 (name Print PDF), nothing happen) when form 2 exist, please help //Form 2 <div id="dialog-form-2" title="Form 2" style="display: none"> <form class="singlepopup"> //some stuff </form> </div> //Form 1 <div id="dialog-form-1" title="Form 1" style="display: none"> <form class="singlepopup" id='pdf_frm'> //some stuff </form> </div> //Script for form 1, with
help on arrays
can someone please help me getting this done, i need to reorder the buttons to get the sentence "i am a funny sentence" in the right orde, using drag and drop : <!DOCTYPE html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>shuffle2</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <ul> i <button draggable="true" class="shuffle">a</button> <button draggable="true" class="shuffle">am</button>
Animate Not Working on Scrool
Can you please take a look at this demo and let me know why the second part of targeting the scroll position is not working? what I want to do is targeting scrool postion between 450 to 600 and applying this animation $(".box-caption").animate({ "top": "600px" },1000); to the element $(function() { $( window ).scroll(function(e) { var y = $( window ).scrollTop(); if (y >200 && y< 400){ $(".box-caption").animate({ "top": "350px" },1000); } if (y >450 && y< 600){
Exclude certain words from Capitalization
I would like to know how can exclude certain words from Capitalization Exclude words and match the case: "and, or, TOM" input value : "Tom AND Jerry, Peter OR Tom"; result : "TOM and Jerry, Peter or TOM"; Your help will be appreciated. Thanks function toUpper(obj) { var mystring = obj.value; var sp = mystring.split(' '); var wl = 0; var f,
Combine two dropdownlist value
Hi all, I was wondering how i can combine two dropdownlist through a button and populate the third dropdownlist with the combined values. For example i have Dropdownlist A for equipment And dropdownlist B for Quantity And dropdownlist C for selectedValues So when i click on a button when both dropdownlist A & B have a selected value.. It will add combine the values into dropdownlist C, for example.. Baseballbat - 10 Chair - 20 Finally if it's not too hard, can you please guide me with how i can
What is the error?
Hi.. could anyone tell me why this is doesn't work? the problem is when I open the page that at the beginning the .flex-viewport is not in the right place as when I resize or I reload the page... I premise that I'm not good with jquery and I'm trying to learn! var halfWindowHeight = jQuery( window ).height()/2; var halfViewportHeight = jQuery('#content .flexslider .slides li').height()/2; function putOnTheMiddle(){ var halfWindowHeight = jQuery( window ).height()/2; var halfViewportHeight
Addding checkboxes dynamically when we click on checkbox of same row
I have to created program of html table with all fields contains checkboxes but when i check on checkbox then automatically display other checkbox list in same row in horizontal & again i check on dynamically created checkbox then another checkbox list should be displays horizontaly using jquery
"TypeError: oForm is undefined" in Firefox/Safari/Chrome
The following code only works in IE with no errors but throws a "TypeError: oForm is undefined" in Firefox and doesn't appear to work in Safari or Chrome either. Currently using jQuery and jQueryUI 1.11.1.min.js Snippet (on anything but IE it fails at line 4) function submitform(str1,str2,str3) { var formname = str1; var oForm = document.forms[formname]; var elLength = oForm.elements.length; The form is: <form name="memberphoneadd" id="memberphoneadd"> bunch of fields <a href="javascript:void(0);"
Error: jQuery.dataTables.min.js style is null or not an object
Hello again experts, Our app went LIVE today and suddenly, users were getting the follow error: jQuery.dataTables.min.js: Style is null or not an object It turns out that several users are still using IE8. Everything works fine in IE9, 10, 11. Here are the js/css files. <link type='text/css' rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <link href="css/boxformats.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Capitalized text when button clicked
Hi. Im trying to Capitalized text when a button is clicked <input name="name1" type="text" id="name1" /> <a id="button" data-role="button" >Change case</a> $(document).ready(function () { function toUpper(obj) { var mystring = obj.value; var sp = mystring.split(' '); var wl = 0; var f, r; var word = new Array();
Reading JSON in Jquery
Hi, I'm trying to read the following: http://nsdata.a78.org/m/json.php?text=*String* An example of what the url returns is: { "NAME":"Chisa", "TYPE":"Dictatorship", "FULLNAME":"The Dictatorship of Chisa", "MOTTO":"Ears for whales", "CATEGORY":"Iron Fist Consumerists", "UNSTATUS":"Non-member", "FREEDOM":{ "CIVILRIGHTS":"Outlawed", "ECONOMY":"Strong", "POLITICALFREEDOM":"Outlawed" }, "REGION":"Osiris", "POPULATION":"3799", "TAX":"48", "ANIMAL":"whale",
.remove is not fired up in the next loop
Hi, This actually a loop. but the .remove() is seems not working after the next loop. The code is : $( "#name1" ).remove(); $( "#afterthis" ).append('<div id="name1"></div>'); $( "#name1" ).after( '<div class="sched-left-col" style="color:#000; font-size:2em; font-family: "Orbitron", sans-serif; padding:0 0.3em;">'+ obj.sched_on1 +'</div><div class="sched-content"><div style="font-size:3em; padding-left:1em; color:#FFF; ">'+ obj.student1 +'</div></div><div class="clear"></div>' ); $(".sched-wrap").toggleClass('fadeIn
hover event stops working after a mouse click
I am encountering something so bizarre. The code defines a hover event on a div. When the mouse is clicked on the div, the hover event all of a sudden no longer works, and I can't figure out why. There is no code that removes the event handler. Can someone tell me if this is a bug? This problem occurs with any version of jQuery, version 1+ or 2+. Thanks. <!DOCTYPE html> <html> <head> <title>Using jQuery Event Helper Functions</title> <link rel="stylesheet" href="../style.css"/> <script
event delegation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $( "#container" ).on( "click", "input", function( event ) { var input = e.target; var arr = []; if ( input.is(':checked')=='1') { arr.push(input.val); console.log(input.length);
Accordion toggle collapse issue
Hi, I have a problem with an accordion which panels would not close on opening another one. But the strange thing is that this only happens within the slider. If i put the accordion anywhere else in the page it will work without any problem ... you can see the code at mobile.hostelsuites.com , I would appreciate if someone had any idea of what kind of conflict this could be ? Many thanks
jquery 1.1.2 inline editor conflicts (inop) with new jquery 1.11.2
Hi, i am trying to update my jquery from an old script that has the jquery.js file and inside that file it has /* * jQuery 1.1.2 - New Wave Javascript * * Copyright (c) 2007 John Resig (jquery.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * $Date: 2007-02-27 17:18:47 -0500 (Tue, 27 Feb 2007) $ * $Rev: 1460 $ */ I have an inline text editor that allows me to change text in a search string inline. For example this is for a language database.
Help greatly needed. jquery-1.6.4.min.js jquery.mobile-1.0.js and min.js. Mobile Slider doesn't slide.
<!--Slider--> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/flowslider.jquery.js"></script> <script> jQuery(document).ready(function($) { $("#slider").FlowSlider({ }); }); </script> <link rel="stylesheet" href="style/slider.css" /> <!--Slider--> This is the slider on my page. Do I tell it here to detect touch device? I kinda wantto write something like:
Disable Vertcal movement when a certain class is clicked.
Ok so first post, and its a fun one :D What I have is this: Container div Super wide div Bunch of inner divs side to side filling Super Wide Div, with ID's assigned. Links inside these inner divs, which jump to other inner divs Basic fiddle is here: http://jsfiddle.net/gkp17fap/16/ As you can see, when you click on a link the page jumps vertically. So, question is can I get the page to move ONLY horizontally (moving that Super Wide Div side to side) without the
Memory leak in IE? on fragmentDiv
Hi guys, I am using IE 11 with jQuery 1.11.2. Just by loading jQuery.js, I saw a warning of a possible memory leak of DocumentFragment on a variable called 'fragmentDiv'. I checked the source code and it's around line 5342. fragmentDiv = safeFragment.appendChild( document.createElement("div") ); This variable is never set to null and is only being used in clone() function. Am I the only one having this issue? Couldn't find anything on Google. Thanks, Brian
Adding counter for each movement in Hannoi Tower.. EMERGENCY..
Hello Guys I have problem with my hannoi tower. I want to add a counter to count each movenemt untill you finished the game. Additionally i hava problem with my game about yellow circule but i ignored it. just i need to add a counter. can you help mee?? !DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Geeky Towers of Hanoi</title> <link rel="stylesheet" href="css/style.css"></link> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"
Navigation Box - Based on specific headers
Hi all. Appreciate a lot of topics on this one, but having read up, nothing quite covers the specifics of what I need help with - fingers-crossed here! I have inherited a site with around 200 profile pages - each page doesn't have a consistent html structure for headings (i.e. no div ids attached to each section and so on). I'm looking for a jQuery solution that would create a navigation table of contents, but allow me to specify the 'jump to' points based on the exact text of certain headers. e.g
get sum of td 1 and td 2 and store in td 3 for selected row
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> </head> <body> <form id="form1" runat="server"> <div> <table class="table1"> <thead> <input id="b1" class="sum" type="Button" value="ClickMe" /> </thead> <tr> <td
Trying to target the closet selector to the click
Hello! I have this section that is dynamically added to a page in Wordpress with Advanced Custom Fields if needed as many times as the layout asks. I originally only had one of these sections on the page and it worked great but now I have the issue that when there are two or more of these sections added all the slideDown/slideUp act on click of any of the buttons. I have been looking for a way to utilize .next() or .closest() but not finding the solution so that the closest div class of .layer--content_slide_out
File upload functionality in jqgrid using Jqury or asp.net
Hi, Can someone please help me how to upload file from jqgrid using jquery or asp.net. Thanks, Sandeep
$.mobile.changePage gives error in Chrome(android) and not in Safari(iphone)
Hello, I have this problem: I can use $.mobile.changePage("scankaart.html) perfect in Safari. When i test this in Chrome, it give me an error. Does somebody know what i have to change to let it work?
Jquery Text Box autocomplete search Feature.
Hi, I need to implement Jquery Text Box autocomplete search Feature with the latest version of Jquery. For this I need to keep the code base as less as possible. What all files do I need to use to complete this task. For the search results, I need to hit the server. Currently, I am using the following files: 1. jquery-1.4.2.min.js 2. jquery.autocomplete.js 3. autocomplete.css Regards, -Sawan.Patwari
Caching jQuery
Hi, I was wondering is it possible to cache the api of jQuery because I am using the same api every time for multiple elements? For example. $("#id1").css("display","none"); $("#id2").css("display","none"); $("#id3").css("display","none"); $("#id4").css("display","none"); $("#id5").css("display","none"); I know that you can assign all the selectors to one api, however I have a script which checks the url for specific words, so I was wondering is it possible to cache the api to improve performance?
Overlay Problems From Newbie
Hello I really cannot get my first ever jQuery attempt to work. An overlay box is supposed to come up when you click the events tab. http://www.jameswinfield.co.uk/Emma.html Can anyone point me in the right direction? Thanks James
Multible FileUpload with Ajax (different sizes to the server)
I have been making a project and I need to upload an image. When the user selects images, 300x300 size images will be uploaded. When finished, 700x700 size of same images will be uploaded. Finally the original version of the images will be uploaded to the server. In short user will select images one time and I want to upload images that selected by user as the different sizes to the server. How can I make this project using .NET and AJAX?
jquery append - live checking email
I'm trying to check mail live. This is what I've tried: (full code at http://jsfiddle.net/badvz/263wj66d/ ) $('#container').append(row(jml));//function append form $(".no1" + jml).keyup(function () { //var msg = $("#msgbox"+jml).val(); var no1 = $(this).parents("#records").find("#no1").val(); //var cno = $(".no1"+jml).val(); //alert(no1); if (no1 < 3) { //$(this).parents("#records").find(".check_no").html(""); $("#msgbox").html("kosong"); } else { $.ajax({ type: "POST", url: "check_ajax.php", data:
Drop down with validation wont work in array of data
I have drop down select field where I can select whether the item is brand new or repo, If I select the repo my hidden account no field (textbox) will show (temporary hide), if I revert back to brand new it will hide again the account no field, the condition is when I select the repo the account no field (textbox) will show but there's a validation that the text-field should not be empty when user submit the form and account no is blank. What I have done so far.. is good for 1 row only, meaning
Saving cookie for menue item
I have this code that collapses and expands the menu items. First I installed the jQuery cookie plugin. Now I need to save the value in a cookie of the top level category that is clicked. (function($) { $(document).ready(function() { $(".wpsc_top_level_categories > li:has(li)").prepend("<span class=\"CatExpander\">+</span>"); $(".wpsc_top_level_categories").css( 'cursor', 'pointer' ); $(".CatExpander").toggle(function() {
Slider not working?
Hello i am using jquery with asp.net website but , in new website( i mean to say on creating new website) it is running but in the website which already exist it doesn't work? Please guide me asap.
copy value of textbox in html table column to all other textboxes in same column on button click
Hi, below is my jquery function , can any one help me in iterating through table rows and copying the textbox value in first row to all other rows.. below is my jquery code var _this = jQuery(this); var defaults = { method: "AVERAGE", factorOrDuplicate: "DUPLICATE" buttonSelector: ".ApplyFactorButton", textSelector: ".FactorTextBox", averageContainer: ".ExchangeDataItemAverageContainer", attachClick: true, decimalPlaces: 0 }; var options = jQuery.extend(defaults, options); var _thisIter = jQuery(this);
How can I set different code base on @media
I'm a novice with jquery. I wanted to have the main background image on my site fade in when users first come to the site. I was able to accomplish that with some code I found. $(document).ready(function() { $('#back').animate({opacity: 0}, 0).css({'background-image': 'url(http://bobpower.net/wp-content/uploads/2014/12/group-celebrate.jpg)'}).animate({opacity: 1}, 3500); }); I had it setup before hand to change the background image based on different screen sizes using @media and css but
shorten jquery code
Hi, I am trying to change this massive code to have just 1 popup ONLY of 'availability doesnt match do you want to continue' ok or cancel as the options. The code is part of a html code which just calls this code as part of a cakephp program. I cant remove the extra dialogs after this notification. Also the notification if the availability does match I want it to continue. I really want to shorten this code to a few lines only but i cant . How do I get 1 option only of this because when I did myself
Next Page