jQuery fader for two contents - but how ?
Hi, I want to fade two contents the same time on one page by clicking a teaser: e.g. click on #teaser2 the contents in #backstage2 and #content2 are fading in the same time. look at my html: <!-- backstage content is in a separate div --> <div id="backstage"> <div id="bigpicture1"> <img src="img1.jpg" width="800" height="600" /> </div> <div id="bigpicture2"> <img src="img2.jpg" width="800" height="600" /> </div> <div id="bigpicture3"> <img src="img3.jpg"
jquery image rotator..
Hello, I am new with Jquery. I am learning how to make jquery image rotator. I found many on through google search but i need to ask some more question to help me understand better. 1. I have different images with different resolution some images got 500x500 some got 600x400. Now one way is to change all the images resolution to same. But i need to find out a way if it is possible in coding using div structure to change the width and height of images. 2. If i am using array the i can array_shuffule
submit event: more buttons?
Hi, if I have more submit buttons in the form, is it possible to choose defaut button for $(form).submit() event? thanks for advice, Tomas
Problem with my own slider function...
Hello, I am fairly new to jQuery and am loving it. I recently wrote this slider function which automatically detects margin-top CSS values, then offsets the desired div, then simultaneously slides and fades the div in using jQuery's animate() function. It seems to work well with only one div. However if I set it up to slide multiple divs, I am having an issue I cannot figure out. First, here's the example... http://www.aurorafxstudios.com/_new/index3.htm You will have to few the example in Safari
Dutch shop site nice idea, discuss: possible with HTML5+JQuery?
There is a shop called the HEMA. this is their website: http://producten.hema.nl/ Open the site, DO NOTHING and wait for a couple of seconds and enjoy the show. Is this possible using JQuery, CSS3 animations, and maybe some Gifs? The audio could be played using audio tags and the audio api in javascript.
jQuery + jQuery.Template: getting the result out as text
I posted originally on the Using Plugins forum but haven't had a response; since the template plugin is 'pseudo-core', I thought I'd try here instead. See the original topic for more background, but here are some targeted questions: How do I convert the result of $.tmpl() into a string representation of the HTML it represents? How do I handle templates which have multiple root elements with the above? How do I handle templates which include DOCTYPEs or other non-element content? How do I prevent
[jQuery] Detecting Javascript error in IE and then displaying a more helpful message to the user
We're noticing that some users of Windows Vista are getting Javascript errors and are not able to use our site. Is it possible to use jQuery to detect when there's a Javascript error and then display our own customized alert statement to help them fix it?
How can jQuery be used to upload files asynchronously ?
Hi, Can you please tell me how can i call a web method asynchronously to upload a file in database ? In my web page i have to implement multiple attachments and all attachments should to uploaded asynchronously to database on click of a Button. Note that clicking button should not post the form to server, rather that should only upload the files .. How can i achieve this ? Thanks
How to move an element from one container to another with animation ?
My question explains everything, I have a div inside a parent div. I need to move it inside another div and on the UI show the animation of it moving. The only way I can think of is, select the element, copy the html(), copy the offset() position and remove element from original container. then add a copy of previously removed element to page/document set the position to the copied offset and animate() after animation is complete, remove it from the page and add it to the secondary container. Is
JQUERY/PHP search and display employee data
I wanted to do a search addressbook and display the results without refreshing the page. I am told that it can be made using jQuery. I have a fairly good understanding of php and my data is stored in mysql. Its woking should me some what: User enters an employee id. As he leaves the textbox, details of the employee are to be filled in the relevant text boxes. how to create a jQuery ajax request and how to receive and display the data into different form fields>
.Delay() Issue after ClearQueue();
I'm making an animation with jQuery, and the animation works great -- it loops and everything... When I click on an object, though, an animation is supposed to play and then return to the loop. Right now, to stop the current animation (which is done with a series of .delay().animate(); etc) I call a different function which starts by 'clearQueue();' and then runs the different animation. All is great to this point. Now, when I run the function again -- to have it start the original looping animation,
How to get group of Elements?
Hi, i have a list of elements like the following sample. Now i've want to group these elements by there nearest elements of same type. But the elements not grouped by parent element. <body> <!-- Need to build a group of these two teasers--> <div class="teaser"> <h2>Headline</h2> <p>Lorem ipsum dolor...</p> </div> <div class="teaser"> <h2>Headline</h2> <p>Lorem ipsum dolor...</p> </div> <!-- ignoring this one --> <div class="not-interesting-content"> ... </div> <!-- building another group
JQuery CSS Background-position FireFox / Opera Bug
I have used JQuery to change CSS styles for my Navigation Bar elements: var imagepos = (parseInt($(this).css('background-position-y'))-30)+'px'; $(this).css({ 'background-position-y': imagepos }); Ok so after a bit of research I discovered that " background-position-y " and " background-position-x " are not supported by the Mozilla Firefox / Opera browsers... Anyone know of an alternate method of getting the background-y / x positions? -------------------------------------------------------------------------------------------------------------------------------------------------------------------
backwards incompatible releases
Hi guys, I know backwards incompatibility can not always be avoided, but where can we have a list of the changes that are backwards incompatible? I'm still wondering whether the use of "text json" rather than "json" in an ajax call is a change which does indeed require my attention, or whether we can wait for a fix there... It would be nice if there was a list of changes that are required due to a new release, or am I missing the location of these changes? I'm sorry if I sound disrespectful - not
I use .load, but it prevents me from setting css color on what is loaded.
I have code that lets the user click on a link. When he does that, it calls the .Load function. This loads some HTML (a div and some contents) into a tag. Then it tries to color the left border of the DIV that it loaded. Now the interesting thing is that it does succeed to color that border very briefly - but immediately the color is covered up with black, which is the original color. When it sets the color, it uses the statement: $("DIV.ContainerPanel > DIV.wrapContent").css('border-left-color',
Why does setting css to "float:left" make the div shrink to a narrow width?
I am having a problem with .css('float' , 'left'); Let me give you some background:I looked at the coda-slider plugin, which slides panels across the screen. I thought a nice effect would be to slide the entire screen, not just a panel in the screen. So I looked at the HTML for the coda-slider, and it demands several nested DIVs. The innermost Div is of class ".panel". I saw that these DIVs all had widths set to something in the css, so I got rid of all those widths (given that I want the entire
Callback Parameters
Hi I want to understand the callback syntax and pass the id of the html element as any parameter here is my requirement In my callback, I am passing the load(url..) I want the URL to be dynamic, based on the URL = BaseURL #callingID , where #callingID is the ID of the calling HTML element. This way I have to write just one callback function and can reuse this to load multiple sections based on where it is coming from. Thanks Rajesh $('#callback').bind('pageAnimationEnd', function(e,
function context/scope issue
In my widget I have an instance of UI dialog with button OK which triggers "onOk" event in my widget. Before triggering my event I set a flag "inProgess" to prevent multiple callbacks. And there lies my problem. When i try to call "succededFunction" argument in function attached to onOk event: function InfoOk(ev, args) { args.succededFunction(); //setTimeout(args.succededFunction, 1); } It provides (a copy of?) my widget in context but without attached flag and original
Adding draggable elements not working with XMLHttpRequest()
Heya all, I am adding some new div's elements threw XMLHttpRequest(). My div's are draggable in my HTML document using jquery and the draggable option is assigned to the class. All the new div's generated with my XMLHttpRequest() are not. I know that the links are good with the new div's since they are taking all the CSS assigned to the class. Is there any reasons why? Thanks in advance!
Using the .load() in IE 7
I have a web page in which I'm trying to create a tool-tip that pops up when you roll over a glossary term. The tool-tip then populates from the external 'glossary.html' page. Works great in IE8 and FF. But IE 7 continues to be the thorn in my side. On the main web page I use an 'a' tag for the term. This is the one that a tool-tip appears over: <a class="gloss" anchor="lorem_ipsum">Lorem ipsum</a>Then another web pages has a table that holds the glossary. This is a full web page with the html head
jQuery conflict,,
Hello guys! I need help.. i think the 2 .JS file is conflicting each other.. Everytime i go to the gallery of our community site (http://www.tapoutguild.com/) there's a pop up windows saying Error.. and the Sooka chat refreshes like constantly. Here's the .JS code on the Sookachat http://cdn.sookachat.com/public/js/loader.pack.js var sk_Loader=function(){var f=document,e=null,a=[],c;function b(){if(c){return}var g=navigator.userAgent,d;c={gecko:0,ie:0,webkit:0};d=g.match(/AppleWebKit\/(\S*)/);if(d&&d[1]){c.webkit=parseFloat(d[1])}else{d=g.match(/MSIE\s([^;]*)/);if(d&&d[1]){c.ie=parseFloat(d[1])}else{if((/Gecko\/(\S*)/).test(g)){c.gecko=1;d=g.match(/rv:([^\s\)]*)/);if(d&&d[1]){c.gecko=parseFloat(d[1])}}}}}return{load:function(l,m,k,j){var
jQuery XML find first node Attribute by nodename
Hi I have an XML feed which has duplicate media:thumbnail child nodes for item <item> <title>Taylor's trial 'neo-colonialist'</title> <description>The lawyer for Liberia's ex-President Charles Taylor says the prosecution has turned the war crimes trial into a "21st Century form of neo-colonialism".</description> <link>http://www.bbc.co.uk/go/rss/int/news/-/news/world-africa-12685938</link> <guid isPermaLink="false">http://www.bbc.co.uk/news/world-africa-12685938</guid> <pubDate>Wed, 09 Mar 2011 13:12:32
Can't make addClass work
I have html code: <div id="dropdown" class="rMenu"> <ul id="middlemenu" class="rMenu-hor rMenu"> <li><a href="page.html">Page</a></li> <li><a href="page1.html">Page1</a></li> <li><a href="page2.html">Page 2</a> <ul class="rMenu-ver "> <li><a href="page3.html">Page 3</a></li> </ul> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){
pass dimensions to jQuery mouse functions instead of HTML Element
I'm developing an image slider. I'd like to be able to trigger functions when the mouse leaves an area, sort of like $('#someDiv').mouseout or $('#someDiv').mouseleave except instead of passing the div to the function I have a dimension I'd like to pass to it. I have box like so: --------------- 400 px ------------ ______________________ 3 | | 0 | | 0 | | p |
Adding Form Icons
I have a four panel registration form with four text boxes each and I have created the PHP authentication class which I can call with ajax and it works great. But I can't seem to get a handle on the validation icons. Here's the jFiddle: http://jsfiddle.net/uR4Jv/ When you focus on a text box it changes all four icons, how do I only change the icon on that row? I tried using next() and that didn't work, and since this is part of a four panel registration form I don't want to use #id and have repetitive
load function works once only
I've gotten this code to work the first time that the user changes the select option: $('select.third, select.fourth').change(function(event){ var id = $(this).siblings('.hidden').text(), token = $('#token').val(); param = $(this).hasClass('third') ? 'isSold' : 'isActive'; value = $(this).val(); $('div#allSheepDisplay').contents().remove().end().load( 'db-interaction/animals.php', { action: 'update', id: id, token: token, param: param, value: value }, function() { $('select.third').filter(function(){return
displaying json data
i am a newbie and am stuck at retrieving json data. following is my index.php : <script type="text/javascript" src="jquery-1.3.2.min_2.js"> $("document").ready(function() { $.getJSON("data.php",function(jsondata){ $("#content").html(jsondata[0].content); }); }); </script> </head> <body> <div id="content"></div> <div class="lg"></div> </body> in my data.php i am using the standard way of encoding and sending the data: echo json_encode($jsondata);
Remove ajaxComplete handler
Hi, I am setting a $("body").ajaxComplete(...) handler to monitor all ajax calls. I haven't figured out how to remove the event as the handler can possibly stopped and restarted a few times, and I don't want to have multiple handlers in the background for performance reasons. I've tried saving the handler in a variable var x=$("body").ajaxComplete(...) ... x.remove() but no success. Is there any way? Thanks and best regards Eike
Autocomplete Dropping 'at' @ Sign in Email Addresses
My applicaiton uses jQuery autocomplete and I noticed that when I type an email address (e.g. someone@somewhere.com) the autocomplete feature works up until I type in the "at" sign. As soon as I enter the @, the autocomplete stops working and the autocomplete suggestion box disappears. When I looked into the issue further, I realized that the string from my input field that is passed along to my autocomplete look-up script is being cut off at the @ sign. In other words, I can type in someone@so
jQuery select/dropdown and button position issue
Hi all, I have following page: <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>GetDropdownData</title> <script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script> </head> <body> <div> <select id="drDropdown" name="drDropdown"> <option>aaa</option> <option>bbb bbbb</option> </select> <input type="submit" value="Next" /> <br /><br /><br /> <input id="btn" type="button" value="Load Dropdown" /> </div>
Selector speed - class only vs tag with class
I'm trying to figure out which selector is faster (assuming that the class 'foo' only appears on input tags)... $('.foo'); or $('input.foo'); From what I've seen online, it seems that people recommend $('input.foo'), but in some limited testing it appears that $('.foo') is much faster in both FF and Chrome. In IE, both methods seem to produce similar results. Here is a fiddle with a simple example... http://jsfiddle.net/962sN/1/ Have browsers started implementing native ways to find all elements
Any way to know if $.getJSON() failed?
Hi, I'm writing an app which gets some JSON from a web server. Everything is fine but I'd like to know if the request failed for any reason. Actually, $.getJSON has a callback to call when the request succeeds, but nothing to call if anything went wrong, it simply silently fails. I tried using $.ajax() instead using the 'jsonp' datatype but again, when the request fails, the 'error' callback is not called. Anyone knows what I might be doing wrong? Cheers!
Column height() problems in Safari and Chrome
Hi - Trying to compare the height of 2 elements, if col2 > col1 then set height of col1 equal to col2. Here's the code: function adjustColHeight(col1, col2) { if (col1.height() < col2.height()) { col1.height(col2.height()); } } $(document).ready(function() { $('.hiddendiv').hide(); //After document loads, hide all divs that are suppose to be hidden adjustColHeight($('#leftsidebar'), $('#maincontent')); }Although Safari and Chrome does extend col1, they never completely
Prevent browser from loading new page until fade is finished.
Hi, just started using jQuery today. I have a site where the header, footer, menu and Google map remain present on most pages, but the copy in the main paragraph changes depending on which menu option is selected. The above is achieved using PHP includes and query strings. I'm using jQuery to 'fade in' the main body text when a page loads, and 'fade out' the text when a menu link is clicked on. It just looks nice, because all the stuff that is always present stays in place (I guess the browser caches
Problem while submitting # with ajax
There is a problem with submitting # from the form. Some content get truncated and some variables disappear after submitting. Take a look at the following code and try to fill both fields with: TEST#TEST#TEST <div id="POSTINI_FRAME"></div> <table> <tr> <td class="row_B1_2">Subject</td> <td class="row_B1_1x left"> <input type="text" name="cas14" class="long postini" />
Export SQLite result set into variable / string for email body
Hi Everyone, I am developing on the iPhone using a combination of jquery, html and sqlite. I have ran into a slight problem and am hoping you may be able to help me out. I want to carry out the following sql query db.transaction(function(transaction){ transaction.executeSql("SELECT * FROM real ORDER BY id DESC;", [], function(transaction, result){ for (var i = 0; i < result.rows.length; i++) { var row = result.rows.item(i); The table "real" will have multiple rows & 8 columns "a" "b" "c"......
simple replacement?
<form action="/contact-me/" method="get" name="contactform"> <input type="text" name="name" id="name" value="Name" /> <input type="text" name="email" id="email" value="Email" /> <input type="text" name="telephone" id="telephone" value="Phone Number" /> <input style="padding-top: 10px; padding-left:40px;" type="image" src="/media/images/base/contact_button.jpg"
jquery syntax highlighter
I am using a syntax highlighter for my bbeditor. It basically adds a span arounds words within the <pre><code> tags to color them. The problem is that i am using a preview box which updates when you type something in to the text area. This looks for the bb tag [code] and replaces it with <pre><code></code></pre>. Since it does this everytime it updates the spans that were generated by the syntax highlighter get removed. Is there any way to prevent this? the regex part: /(?:%lb%|s)*[code(?:=?)(?:.*?)](?:%lb%|s)*(.*?)(?:%lb%|s)*[/code](?:%lb%|s)*/gigets
Detect change of hidden input
Hello First, sorry for my poor level english I have a the next code: jQuery("#cambio").change(function () { SacarDatos(); }).change(); Where <input type="hidden" name="cambio" id="cambio"> In the code i chage the 'cambio' value with the next code (for example): jQuery("#cambio").val(2); But never execute SacarDatos().... the event 'chage' is only for select? i think no. How can i do it? Thanks
Unable to load cross domain page
Hi, I'm trying to load google.com from a test html page using jQuery-1.5.1 but unable to do it. I've tried all the 3 methods listed but to no success. Below is the code snippet for the same & the output that I'm getting. CODE: <html> <head> <title>Load site page</title> <script type="text/javascript" language="javascript" src="jquery-1.5.1.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { alert('doc ready function');
Next Page