animating natively inline elements, jQuery 1.3.2 vs 1.4
As far as I can tell, animating natively inline elements was changed slightly in jQuery 1.4 -- I've been using CSS to set display: block on all form label elements, & I hide specific form labels using a more specific selector (example CSS below). Then I use jQuery to .slideDown() the hidden form labels when needed. <style type="text/css"> form label { display: block; } form label#test1, form label#test2 { display: none; } </style> With jQuery 1.3.2, this method worked & the animated labels ended
"slidingUp" multiple similar divs
Hey everyone. I just love playing with jquery. What was I thinking to avoid it for past two years :D One problem though. I have large table like div as shown below: <div class="table_row"> blah blah </div> <div id="table_row_extended1" style="display: none"> </div> .... and loop of it for data from mysql. When I click any row it expands additional info about that row. Problem is say I have one row expanded and click another one. I need previous one to collapse. Since there are at least 100
Dialog - drop-down validation
I am trying to validate drop-down & text field where one of them has to have value but I can't get the drop-down validation to work. I am not getting any errors it just ignores validation for drop-down. Here us my code: function checkSelect(n,p) { if ( (selcategory.selectedIndex == 0) && (category.value == '')) { p.addClass('ui-state-error'); updateTips("You must either type in or select category"); return false; } else
dynamically positioning question
In css I have this defined: #button { position:absolute; right:0px; top:0px; z-index:2; width:70px; height:70px; background-image:url(button.png); background-repeat:no-repeat; } In the jQuery I have this: $("#button").css( { /* top: "60px", left: "60px" */ left: xs[0].toString(), top: ys[0].toString() } ); If I reposition #button with the commented-out 60px lines it works fine. However, I'd like to position it to some calculated
How to add elements to jquery object
Have a select box. Want to remove selected options, but save them. Can then put them back in later. That works fine in the code below. But any time they are saved, the previously saved ones are wiped out. Haven't been able to figure out how to add new elements to an existing jQuery object. Even when I try to use .add(), it still wipes out the old ones. ??? <html> <head> <script src="jquery.js" type="text/javascript"> </script> <script src="jquery.tinysort.js"
Make a List Item Clickable. How can I do this? Thank You
Hello, I have the following: <ul class="Albums"> <li> <h2><a href="/album/1">Interior | Indoor</a></h2> <a href="/album/1"></a> </li> <li> <h2><a href="/album/2">Exterior | Outdoor</a></h2> <a href="/album/2"></a> </li> </ul> I would like to make the List Items clickable. When a "li" is clicked the page is loaded. For the first "li" it would be "/album/1" ... For the second "li" it would be "/album/2" ... How can I do this? Thanks, Miguel
Delay() disables animate(), fade(), etc.
Hey guys, I'm attempting to use the delay method added in 1.4, but having some trouble. Not sure if this is a bug, or if there's something that needs to be done in order for this to work. This is the simple code being used. jQuery(function(){ jQuery('.test').hide().animate({opacity: 'show'}, 500).delay(5000).animate({opacity: 'hide'}, 500); jQuery('.click').click(function(){ jQuery('.test').animate({opacity: 'hide'}, 500); return false; }); });What I would expect to
Can I force $(htmlstring) to use createElement method instead of innerHTML for any complexity?
The problem has its roots in dealing with HTML5 and the .replaceWith method that uses .innerHTML somewhere in the core. I've posted the code and explanations yesterday on stackOverflow. Please have a look: http://stackoverflow.com/questions/2154196/is-there-a-way-to-transform-a-string-from-json-into-a-dom-structure Stefan
Starting with content closed and auto closing
I have a page on a site of FAQs. I have used jQuery and have got it so clicking the question closes and opens the questions. However I want to change it so that the questions are closed to begin with but also if I click one and open another, the first one automatically closes. Also is there any way I can make the transition smoother? This is the jQuery code... <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(setFaqs); function setFaqs() { $('#magic').click(
jQuery Tabs and Cookie
Hi, I've installed the jQuery UI Tabs plugin, on this page for example: http://onomadesign.com/wordpress/identity-design/access-energy-corporation/ Now, there are 3 tabs: by name, date and industry. When a user picks a project from the 'industry' tab, I want it to stay open when he gets on that page. So I thought, this calls for that Cookie plugin. I tried a lot of different things, but can't get it to work.. This is my code for the UI Tabs plugin: $(document).ready(function(){ $(function () {
$.data(), Session Variable, or Cookie?
I'm working on some code that allows a user to login to access certain portions of the site. I want to pass the UID to a function and then from the function make a call to a server side PHP script to retrieve data to populate Firstname, Lastname, and Password fields on a form. I already know how to do this. I know that I can store the UID in a cookie or a session variable and then retrieve the value from within my function. Cookies can be a problem. If I use a session variable then the app has to
cannot get text() in new function
Hi, I'm just starting to use jquery today. I'm using it to get new data from a php file (AJAX). When I don't use "$("#hyves").fadeOut(500,function(){but I use it without the function $("#hyves").fadeOut(500);I get the clicked text: $(this).text(), but using it the 2th function it doesn't give back a value. $(function() { $("#pages a").click(function(e){ e.preventDefault();// stop normal link click $("#hyves").fadeOut(500,(function(){ $("#hyves").fadeIn(500);
on change, cascading dropdown does not resize the table cell it resides in
Hello, I have jquery to support a cascading dropdown (choose a value in the parent dropdown, it gets the data for the child dropdown). The problem I am having is that when the data in the child dropdown exceeds the length of the table column it resides in, the table does not expand to fit the longer child dropdown. It just gets cutoff. Does anyone know of a way to fix this? Here is the code: $(document).ready( function() { $('[name="ParentId"]').change( function() { $('[name="ChildId"]').html("");
Hiding <li>'s in JQ slider menu
Hey there, I have some jquery running on a menu (here) but before jquery loads, the content (all of the <li>'s) appear, then disappear once jquery loads. Is there a way to stop the brief displaying of the <li>'s? The current jquery code is: function initMenus() { $('ul.menu ul').hide(); $.each($('ul.menu'), function(){ $('#' + this.id + '.expandfirst ul:first').show(); }); $('ul.menu li a').click( function() { var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if($('#'
AJAX Error: The data necessary to complete this operation is unavailable
AJAX Error: The data necessary to complete this operation is unavailable jquery 1.3.2 do not have this error, jquery 1.4 have this error, how to solve?
Read the output of console.log
Is it possible to read the output of console.log with jQuery? I need to check for some error, and handle them.
jquery 1.4 and xul wizard?
Hi, I'm trying to include jquery 1.4 in a xul wizard, and the xul wizard just breaks, with any error message in the error console. Any idea? Axel
.ajaxStart() question
Hi Folks, I'm doing some work for a quit huge website (that's maybe important for my question). There is alot ajax stuff going on in different div elements (jQuery mixed with standard javascript). I'm working within a new div element which does some ajax post requests to the server. My problem is, it seems like I can't register .ajaxStart() to any element. It looks like this ajax event is not fired at all. jQuery API reference snippet: Description: Register a handler to be called when the first Ajax
Moving an element
Hi everyone, I have the following HTML code, various times in a page: <img src="images/contenido/empresa_4.jpg" /> <h3>Aprecio y reconocimiento</h3> <p>La recompensa de un trabajo bien hecho. <span class="caps">CESUR</span> en sus años de existencia ha venido marcando una trayectoria ascendente, avalada por los resultados obtenidos.</p> Due to the CMS, I can't put the h3 BEFORE the image tag and it doesn't look right. So, I am trying to move the h3 element to go before the img tag, so it looks
anchor selector - multiple values
Hi, I would like to specify multiple values to check href attribute for anchor. The following works for one value, how can i specify multiple values.for eg..'ABC','XYZ' etc..for href attribute. $("a[href$='ABC']").each(function() { //SOME STATEMENTS } Thanks, Prasad
IE "label for input" event forward bug
I have an jquery element like this $(<td><input id="abc" type="radio"/><label for="abc" /></td>) I bind my click handler to <td> element. if I click the <label> element, it will propagate to <td> and then forward to <input> since the for="abc" is there. then <input> click is fired and propagate to <td>. My <td> click got fired twice. That's not the bug. The bug is if I use css visibility:hidden to hide my <input>. <label> click event will stop forwarding to my hidden <input> in IE7 (not tested in
Which jQuery selection is "efficient"?
Hello, there was a debate amongst my developer circle about which selection is more efficient. Given this markup: <div id="menu"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </div> Which of these is more efficient (faster), if at all? $("#menu li").hover(); $("#menu li").live(); $("#menu li").getJSON(); or var pointer = $("#menu"); pointer.find("li").hover(); pointer.find("li").live(); pointer.find("li").getJSON(); I was told that
Making a div get and set its own width
Hello, I don't know if this will work, but I'm trying to put a google map on my website and in IE, the div containing the map needs to have a width value in pixels in order for the API to center the map properly. I want a div with 100% width, which is inside another expanding column. This works everywhere but IE. My question is, Is there a way, using jQuery, to get the div to discover its inherent width and then apply that in pixels, as an inline style, to that tag? It would also have to redefine
Tabs cookie
Hi I'm using tabs on my website and i want on aan page refresh that the last selected tab is still active I read on the JqueryUI website that there is an "cookie" option, so i used that like this: $(function() { $("#tabs").tabs({ cookie: {expires: 30} }); }); But unfortunately it doens't work, the whole content of every tab is all over the webpage. Is there anything that i have to add to get the cookie thing working? Thanks in advance
jQuery Tabs + Cookie
Hi, I've installed the jQuery UI Tabs plugin, on this page for example: http://onomadesign.com/wordpress/identity-design/access-energy-corporation/ Now, there are 3 tabs: by name, date and industry. When a user picks a project from the 'industry' tab, I want it to stay open when he gets on that page. So I thought, this calls for that Cookie plugin. I tried a lot of different things, but can't get it to work.. This is my code for the UI Tabs plugin: $(document).ready(function(){ $(function () {
JQuery and ASPX Page
Greetings, I am new to JQuery and have a question regarding $.ajax. Do I need to create my application in ASP.Net or can I write HTML and link to a Web Service Application for my $.ajax calls? I have tried writing HTML page with Web Service and it keeps calling the "Error" function. If I write it in ASPX, the Web Service works fine. Can anyone confirm this? Thank you. Joshua
Firefox focus event madness
Hi, I have a Div that I want to make editable when clicking it or when tabbing into it if tabindex is set. Logially I place a focus event handler on the the div as well as a click event listner triggering the focus as the focus event is not triggered when clicking a control that doesnt have a tabindex. In the focus event handler I set editable='true' using attr(). Now when I click or by any other means (such as by code or tabbing) focus on the div, it becomes editable and I get a cursor in it. This
Hover not displaying?
I've never used jQuery before, but I am versed in a handful of programing languages. Yet, for some odd reason I cannot figure out this. I have an image, when you mouse over a submenu will appear, as long as you are hovering that submenu, the original image needs to remain in ":hover" state. So as best as I got this is how to do it, yet it doesn't work...here is all my code. I've been trying to figure this out for sometime now. I thought it was in the CSS, but that wouldn't make since. I want to do
Scope of selectors - want to keep things local
I'm a relative newbie at jQuery, trying to create a form that, when any given "Quantity" input field is updated, updates itself (calculates the total for the order). I am working with code taken directly (then modified) from this jquery.calculation.js exmple page , and had it working with a small set of fields (stumbled across the right combination of selectors) then stupidly made some undocumented edits, and find myself right back to where I started - confused. // bind the recalc function to the
How do I remove a <div> tag from an object?
Ive simplified this down a bit to make it easier to explain. If I have html of <div id="A360AFD9-AE96-44B8-8ED5-C9E5591F5A0D" class="control"> <div class="editableToolbar clearfix"> <a href="#" class="edit"></a><a href="#" class="delete"></a> </div> <div class="pdRequiredParagraphWrapper"> <p>Some Text 1</p> </div> </div> <div id="F0C1BA11-C058-4B21-989D-80A64DCBCFD3" class="control"> <div class="editableToolbar clearfix"> <a href="#" class="edit"></a><a href="#" class="delete"></a> </div> <div
contains: But I want exact, how?
I'm using $("span:contains('Some Value')") But i want to find only those spans that have the exact phrase, not a span that has "Some Value and other Stuff". Is there an easy way? Thanks in advance, Sam
jQuery IE and reverse proxy
Dear All, I have set up a reverse proxy for a wordpress blog that is using the theme mystique. When I use IE to connect directly to the blog the theme works fine and loads ie7.css When I connect through the reverse proxy to the blog the theme does not load the ie7.css From what I can work out it looks like the person who wrote it is using jquery to determine the browser type. Any ideas why jquery would fail when passed through a reverse proxy? All help very much appreciated. Yours sincerely
Jquery Asinchronous Execution context
Hello! My problem is about passing information inside of "callback on success" function; Small example: var myvar = 1; $.post('www.site.com',data,callbackfunction); var callbackfunction = function(data){ alert(myvar); }; and we got "undefined"; Id like to have something like this: $.post('www.site.com',data,callbackfunction.bind(document)); //so i can set the execution context Thank you for any ideas. I had this feature in prototype framework. Wondering how it is made in jQuery.
hosting jQuery 1.4.1 on Google's API hosting service
Is there any way to get Google to host jQuery 1.4.1? For a while, I have been using their copy of 1.4.0 at http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js. I tried http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js and it doesn't work. I get a 404 error. I tried running the command google.load("jquery", "1"); in their API loader to get the latest version, but I am getting 1.4.0. Do I just need to wait for them to get 1.4.1 or am I doing something wrong?
jQuery erratic behavior
Hello, Please visit http://osdatev26.nairvijay.com and see the block Newest Profile Pictures (second block) This block display all new profile pictures for the selected gender. The block is defined as follows THe outer div is the basic one with ID as <div id="newest_profpics" > {include file="newest_profpics_display.tpl"} </div> THis is the one which gets updated by ajax process as the full block. THe inner block is defined as <div style="height:100%;
Cookies
Hi all, I've created a survey and I need a way to prevent a single user from completing it multiple times.. my thought was to use a cookie, but I haven't find a good way to do that. I've seen several JavaScript ways but they're all inelegant and I'm not a terribly big fan. Does anyone have a suggestion for a more elegant (doesn't have to be jQuery) way of setting and retrieving a cookie? Thanks! -- T.J.
Accessing a div appended to a another div.
So im trying to create a simple file menu, so far I have : $(function() { //Rolling over menu items. $('#FileMenu a').hover(function(e) { //Highlight. $(this).css({'background-color' : '#0099FF'}); //Get index of the menu were on. var myMenuindex = $('#FileMenu a').index($(this)); //Now remove any children already there and add a new one. $('#NewMenu').remove(); $('#mnuItemRemoval').remove(); $('#FileMenu').append(CreateFileItems(myMenuindex)); }, function() { $(this).css({'background-color' : '#F3F2E7'});
Find what type of input is
I got this piece of code jQuery("#testInputAndOption").click(function() { var inputOption = jQuery("#firstInput, #secondInput, #firstOption"); }); where firstInput, #secondInput are input type text and firstOption is an option type. They are exclusive each other: is it possbile to call on the resultant inputOption the val() function if it is a input type or the text() function if it is an option type? Kind regards Massimo
Animate Opacity PNG problem in IE
Hi here is my URL, http://www.ximnet.com.my/jquery/jquery/test_opacity.aspx Basically when mouseover I animate the opacity. Works well in Firefox but in IE 8, the shadow appear on the text. Is there anything I miss out or is there any problem with my PNG file? Thanks.
how do i add 1 to a found css value
i've got a div and i'm setting its height to the height of an image like so: $('#gallery').css({height: $('#gallery a').find('img').css('height')}); how would i add 1px to this? lets say the image is 300px, how do i set the height of my gallery div to 301px? thanks
Next Page