Waiting for content to be loaded before displaying animation
Hello everyone, i'm new to jQuery i have managed to make things work how i wanted quite quickly but to be honest jQuery is so easy that i'm not sure i completely understood what i was doing .. but it's working anyways ... well almost ... I have an empty div into which i load HTML content from another page. When i click a link on the page, the content from the other page should load and then the div should change background color and then be displayed with a fade animation. When i click on another
outerWidth & Mac Fonts
Hi guys, I've searched around for this question but not found so far. When I have an absolutely positioned div with some text in it, set to say 25px, Helvetica, font-weight:normal; div is width:162px; height:26px; text is "Sammy Brown" In FF and Safari on the Mac, 'Brown' is on a new line. On a pc, its on the same line. Fair enough right? no surprises here what with anti aliasing etc. When I then set: width:auto; height:auto; firebug reports the same dimensions as before but sammy brown is all one
JQuery Load Function Issue
Hello, I have developed one php application with jquery. I have call the small php page as custom part with the help of JQuery load function. It's working well. When i tried to call the another JQUERY function [Means Lightbox, thickbox etc.] within the small php page, the Lightbox effect not working.. It is redirect to show the image without popup. But this process work well outer the small php loded page. can anybody help me.. im newbie to jquery thanks in advance
not defined error help
I was combining two jquery script (a css navigation that produced a sub-Nav using jQuery) and a tutorial for a vertical dock I found on net.tutsplus.com They both worked fine seperatley, but when i put them in the a single html file and made sure all the files were linked properly. But then google developer tools told me there were two errors... i figured something was wrong because none of the jquery worked. I have included a screenshot of what google developer tools say the problem is and i can
load () function and Google Chrome
Hello! I hope you can help me, because I'm very frustrated!!! I'm using load() to get some data from the server, and it works just fine except for Chrome. All my pages (JSP) are charset iso-8859-1 (it's a very old system) so I think I've set all my pages, server configuration files, servlets, etc but for some reason when I make a request (POST) in Chrome, I get strange characters, something like an A and a code \00xxx (the system is in Spanish, so it needs special chars). It only happens when I send
How far could jQuery go to replace some Flash animations?
I was reading that HTML 5 may supplant Flash to some degree, except that Msoft and Apple are throwing in monkey wrenches, and it made me think about jQuery in that regard (supplanting, not monkey wrenches ) You can do an awful lot of fancy animation with jQuery, that used to need Flash. I often see simple Flash animations and realize they could also be done with jQuery, including the interaction of course, since jQuery is made for interaction. If a new version of javascript could do just a little
For Each Statement & JQuery .hover
I am a javascript newbie and trying to write a script to create hover-over popups for a product page... It works like a charm when I assign it a solo "div#id" and "a#id", however I need it to work on multiple objects. I can't use a class because then everything with the classname pops up at the same time. So each popup HAS TO have a unique ID. I am trying to write a for each statement, but it doesn't seem to be working... any ideas... or better ways to execute this... This is the one that works
UL LI Menu select parent branch
I got a UL LI menu and it's not working right. the problem is: when i want to open new branch the parent is closing. the code is in the attacment...
Button disable not working
Setting the button widget to disabled only sets the 'disabled' attribute on the element to true. This works fine with actual button and input elements but doesn't do anything for anchor elements that you want to use as buttons. I was thinking that it could remove all events and store them for when the button is re-enabled but this doesn't account for new event handlers attached after being disabled. One work around might be to inject an element into the anchor that covers the entire anchor and
Won't fade out?
I have created a javascript function to make a message fade out in my clients panel. Here is my function: function deletemsg(id) { $.ajax({ url: "ajax_deletemsg.php?id=" + id, context: document.body, success: function(){ $('#msg-' + id).fadeOut(1000, function() { // Animation complete. alert("faded"); $('#msg-' + id).remove(); }); }}); } It shows the 'faded' alert message but it doesn't fade the area? How can I fix this?
$.ajax and the same domain
Hello everybody, I have a little issue with the use of jQuery and a call with the method Ajax. The problem appears with IE7 when I call just after the page was loaded. If I wait 2/3secondes, I don't have this beautiful message : Access denied. My call ajax process to the same domain that the source page. I call the function when the DOM is loaded with the function $(document).ready(); That's my code : $(document).ready( function() { if($('#no_result').length){ }else { var timer; $("#tabCollab tbody
Custom jQuery toggle buttons that work in every browser but IE... why?
Here's the scenario: I've created some custom make-shift toggle buttons using super basic markup, a little CSS, and some jQuery for the animation. I have a separate script that ties into this one, and uses AJAX to query a DB and update some values, but that's outside the scope of the issue... The snafu is that these toggle buttons respond appropriately in every browser except (you guessed it), IE. Now I've commented the scripts like crazy, and isolated the problem, but can't for-the-life-of-me figure
Problems using $.getJSON global method for first time
So I'm trying out the function but its not working for some reason. I have an alert message in the function which is there just signify if the browser has gotten to that point, which it doesn't as the alert message never pops up. I've double checked file names and locations and that's not the issue. Can someone tell me what I'm doing wrong please? Thanks Below is the HTML, then Script, then contents of the JSON file: <body> <div id="wrapper"> <a href="index.html"><img src="logo.png" class="logo"
PHP and jQuery control panel
I'm not sure if this would be the correct place for asking this, but I figured someone on this forum must at least have an idea. On the control panel of my website I want to create a table with PHP for non-approved user-submitted terms, so that I can approve them depending on if they're not spam or something of the same sort. Only the approved terms will then be shown on the site. To add some nice effects i'm using jQuery. On click of the approved button, I also use its Ajax functions to parse the
Website faster on ie7 than on ie8
Hello ! I have a problem on my current project. Animations are very slow on IE8 but when I turn the compatibility mode on, it become very fast. FF, Safari and Chrome run it fast too. I don't understand how my site can be slower on IE8 than on IE7 O_o Any ideas ? Best regards.
I need to select the last children of parent elements
I need to select the last children of parent elements For example <ul> <li></li> <-This will have the background #1a <li></li> <-This will have the background #1a <li><ul> <li></li> <-This will have the background #1a <li></li> <-This will have the background #1a </ul> </li> <li></li> <-This will have the background #1a <li><ul> <li></li>
form submit handler doesnt trigger within a jquery UI popup dialog
I have the following form displaying in a popup dialog: <form method="post" id="forgot_password_form" action="/forgot"> <div> Please enter your email address and we'll send you a link to reset your password. </div> <p></p> <div> <input type="text" value="" size="40" name="email" id="email"> <input type="submit" value="Submit" name="commit" id="submit"> </div> </form> and if I remove the submit button in my js code and set up the dialog widget's buttons to do the submit, that works. But if I keep
Setting up a bunch of listeners with a looping structure
Hi everyone, I'm trying to come up with a better architecture for dealing with multiple listeners in a multi-page questionnaire. Here's the general structure I'm looking to implement: 1. Set up CSS for animation 2. Look for preconditions 3. Initialize listener 4. Execute animation Some issues to consider: 1. Some questions have dependencies that show or hide depending on what is selected in a parent question. 2. Needs to be IE 6 compatible. 3. It should be simple enough so that all you need to do
JSON and parsing
If I have a JSON object that passes parsing and eval tests, but still fails when I try to parse in jquery, what should I be looking for? I don't want to use eval(). Is there a jquery json parser I can use without invoking an AJAX call? Thanks, Eugene "Eggers"
xml parsing in IE 8
Hello, I wrote something like: var table=Array(); $.post("script.php", {arg1: a}, function(xml) { $(xml).find("tagname").each(function() { table[table.length]=$(this); }); }); The code works OK in Firefox and Google Chrome, but it fails in Konqueror (khtml) or IE 8.0: the resulting array is empty although the xml read by Ajax call is OK. I tried also with "$("tagname", xml).each()" - same result. What is wrong? Or what did I miss? Regards, Adam
anchor tag losses focus.
here my jquery $(document).ready(function(){ $("a.showHidePrograms").live('click', function(){ var $div= $(this).parent().next("div"); if($div.attr("class") == 'hide'){ $div.attr("class","show"); }else{ $div.attr("class","hide"); } $(this).focus(); }); }); this jquery just changes the class for the div element. The problem is everytime I click on this link the browser goes to the top. I mean If my page has vertical scroll bar ,and I pulled down the vertical scroll bar to see the bottom row of
help acessing element that's not loaded on the page - newbie
hello i have the following code <script type="text/javaScript"> $(document).ready(function(){ $("#dropPrd").change(function() { $('#imgAjaxLoading').ajaxStart(function(){ $('#imgAjaxLoading').show(); $('#imgAjaxLoading').attr("src","/images/loading.gif"); $("#FirstResult").hide(); }); $('#imgAjaxLoading').ajaxStop(function(){ $('#imgAjaxLoading').hide(); $("#FirstResult").show();
Change image in JCrop
Hi guys! Im working on a new feature in my site and I got stucked really bad. Im using JCrop obviously to crop an Image on my website. The new feature that I've been asked to Implement is to allow the user to change the colors of the Image being cropped. I have now 3 images , Color, GrayScale and Sepia. I can change the source of the image tag using javascript so the image gets changed without reload but I cannot do this once the JCrop has been enabled because it replaces the original Image for a
form elements added with load() are missing when submitted
Question from a new jquery user: I'm using load() to add new checkboxes to a long form. When the form is submitted, the new checkboxes are not present. Does this need the new live() ? If so how/where to add it exactly? Here's my script: <script type="text/javascript"> function loadContent(id) { var theid = id; Verify_Loaded_LI.check(function() { $('<div id="subs_'+id+' />').load('display/d_loadGCsubcats.cfm?cat_id='+id+' #subcats', function() { $(this).hide() .appendTo('#li_'+id) }); },theid); }
Working with JSON Data in an AJAX call
I'm a bit of a noob with JQuery and not a rocket scientist with JavaScript, so please forgive any ignorant questions. I stay on the server side mostly. So, I am getting JSON data back from a REST Web Service AJAX call and displaying the contents to the page in a DIV. No problem. But, I want to also allow edits on the data that comes back. Not sure how to approach this. In my "success" function of the AJAX call, I get and output the JSON data, but how do I persist this data so that it can be updated
IE and replaceWith not preserving radio button state
Hello, I've run into an issue regarding replaceWith not maintaining the state of a moved radio button input. I've prepared a simple example illustrating this issue. This works in FF and Chrome, but not IE. Is there a way around this? Thanks, Colin jsbin: http://jsbin.com/unola4/2 code: <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>IE replaceWith issue</title> <script type='text/javascript'> $(function(){ $('a').click(function(e)
Ajax success value to parent function
Hello, At the moment i got the following: var $test = false; $.ajax({ type : "POST", dataType: "json", url : "ajax.login.php", data : { action : "status" }, success : function(data) { alert(data.status); if(data.status == 0) { $test = true;
append() is working, remove() is not
I am making a user registration form, in which the user must make one or more category selections via checkbox inputs. There are a lot of categories to choose from (150 in fact), so rather than display them all on the form outright, I have a link that opens up a fancybox popup with all the checkboxes in it. Since all the checkboxes are in the fancybox popup, I want to make an <ol> on the form that gets appended with what the user selected, so they can see what they selected after they close the fancybox.
Coloring every third list element
Hi, I am a jquery beginner and I need help with coloring list items. I already know to traverse list elements based on the ID or CLASS. However this one is a tricky question. Here it is; On a web page I have 'n' number of lists (<ul><li>...</li><li>...</li><li>...</li></ul>) since they are generated dynamically. They neither have IDs nor have classes. How do I select the 5th list and color every third element with no ID/class being available? Please, someone help me with this. Many thanks, JB
help sending html form data to php file and getting returned results
hi guys, I have a html form which produces 3 post varaibles. I'd link to be able to call a php file when sumbitted that sends the data from my form and returns the results from my php file to a div on the oringal page. I know that you can use .load to call a page to be diaplayed within a div $('#container').load('url #div_on_page') but dont know how to send the from data. this is the code. <form method="post" id="new_user_form" > <input type="text" name="newuser" /> <br /><br /> <input
Animation crashes in IE
jQuery version: v1.4.2 I've built an animation using jQuery which works fine in FF and Safari. When I test in IE 7 or 8 I keep getting the following JS error when starting the animation: Message: Invalid argument. Line: 5613 Char: 8 Code: 0 URI: Desktop/espiritu/js/jquery.min.js I could swear that this was working just fine in IE7/8 at one point. I went back through my history and reverted some changes I made and I even tested an old copy of the file in its known working state, but I am still getting
Name Picker
Hello. I am very new at jquery. I am making a web application for one organization I work for. In the application I will add the new members information. Part of the information is putting which other member invited that person. What I want to do is to have a input box, that when I click on it, some type of dialog box will appear with a picture and the name of the other members, and that when I click in the picture or the name, the dialog box will close and the id of the member that I clicked will
animate not working in IE
Hey folks, I have a big problem, here is the sample of code: <ul> <li> <a href="#"> <img src="#" /> </a> <div class="info"> <div><a href="#"> <img src="#" /> </a></div> </div> </li> </ul> So, normaly the div.info element is with css: display:none; And there is displaying only "a" element. But i have a little code of jquery who makes the div.info element showup when the mouse over on the "li" element. And code is working as i expecting, but not in the IE. var pic = $('ul li'); pic.hover(function(){
Problem with toggle()!!
Hi, my second toggle() isn't work here the code: http://jsfiddle.net/MPSQC/1/ The first toggle() is work fine! Can anyone help me please!! Thanks for your time!
Submitting a Form without clicking on Submit
Hi, I would appreciate it if I can get some help with this issue: I have a form with about 10 fields, and the action is sent to a php file which processes the form. Now, I also like to use a Thickbox such that the user can preview the page before actually submitting it to the process.php. That means, I have one submit button and one href, which href links to an iFrame thickbox to preview the page. My problem is that I don't know how to obtain the input values in the iFrame, without user clicking
Finding Children
I'm having a little problem with changing some html with js. <div id="nav"> <ul> <li>node one</li> <li>node two <ul> <li>subnode one</li> <li>subnode one</li> <li>subnode one</li> </ul> </li> <li>node three <ul> <li>subnode one</li> <li>subnode one</li>
jQuery AJAX post return
I need some guidance, research direction in writing a page. The page is a “This day in history” page. I successfully retrieved a dataset from a MySQL database whose definition is: $varDump = array('date', 'description'); I returned the data to a jQuery AJAX post call with a PHP statement: print_r ($varDump); and when the data is returned it looks like below: Array ( [0] => date [1] => Rescription [2] =>Array ( [date] => 1715-05-03 [description] => Edmund Halley observes total eclipse phenomenon
window blur/focus events in Android browser
I am using jquery with jqtouch to develop a mobile web application. My app uses ajax to poll the server. Now, with the iPhone, if the browser window looses focus, JavaScript stops running (and hence polling as well), and restarts only when it regains focus. However, with the Android browser (I am testing with a Nexus One = Android 2.1), JavaScripts keeps on running, and so the polling continues as well. This is undesirable, especially as applications (ie the browser in this case) usually stay open
Data Table creates rows dynamically - buttons in those rows do not fire the onclick event
I have some JQuery that makes an Ajax call and then adds some rows to an existing table. function LoadDestinationTable() { $("#destinationTable tr:gt(0)").html(""); var primaryKey = $("#SelectPerson").val(); var postData = { PrimayKey: primaryKey }; $.ajax({ type: "POST", traditional: true, url: "/Admin/GetData", data: postData, dataType: "json", success:
Resizing: limit dimensions based on contents
Hello, I have been trying to find a way around this but I have had no luck: I have a div which is resizable, within that div are numerous draggable divs Is it possible to prevent the resizable div from being resized to a dimension that is smaller than the space required by the contained draggable divs? I am aware that I can use minWidth and minHeight, but as the divs inside the resizable div are draggable the minimum width and height is a variable amount. Thanks
Next Page