Fading in a div
Hey again, I have a problem and I just cannot figure out what is wrong. I want to show news on a page and to fade them in. I am using jQuery AJAX to pull out the news from a MySQL database. Here is the code (I will explain what the exact problem is in the code): showNews.php - the relevant part $row = mysql_fetch_assoc($result); while ($row = mysql_fetch_array($result)) { echo '<div class="news"><div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div
Need help in JQUERY
Hi, I have this js script which is working on mouse click, what is my requirment is that it do the same function wiht on mouse over: click: function(e) { var el = this; el.blur(); // if the image was not preloaded yet then wait if (el.zoomimageCfg.loading === true) { return false; } //zoom it in if not zoomed already if (el.zoomimageCfg.zoomed == false) {
Video object position attribs in IE??
I'm looking for information on getting and manipulating the position attributes of embedded video objects in IE and Opera. I've written a draggable solution for defined DIV objects and this works fine with embedded video objects in the DIVs in all browsers except IE and Opera. The DIV objects are absolutely- or fixed-positioned information windows that are displayed on top of the page. In all browsers except IE the embedded video objects drag smoothly together with the DIV containing them. In IE
Hiding Optgroups and Options
I'm trying to hide all optgroup's and their child option's with jQuery .hide(). //jquery <script type="text/javascript"> $(function() { $("#test").children("optgroup").hide(); }); </script> //html <select name="test" id="test" multiple="multiple"> <optgroup id="a1"> <option value="">11</option> <option value="">22</option> <option value="">33</option> </optgroup> <optgroup id="a2">
Filtering a list with jquery not working 100%
Hi Through a tutorial i have gotten this list to work with filtering, however it does not work 100%. When i have nothing written in input it counts twice the numbers of lines i'got. Also, it searches for everything within the <li> and i want it to only use the title element. Hope you can help... <div id="filtered-box" class="filtered"> <ul> <li> <div id="item-box"> <div id="star_{item_id}" class="rating"> </div> <a href="{path}">{item_title}</a><div style="float: right; right: 0px;">some data</div>
hidden table with colspans screwed when showed
Hi everybody! I'm opening this thread to ask your opinion about a problem I've noticed: if, in a table, I have some TR that have "display: none" and one or more TD inside these TR have a colspan > 1, then when I make them visible the table is screwed having lost all colspans. Usually this happens when the hidden TR contains a nested table.
Chrome issue with load()
Chrome used to be able to execute the load function without a problem. Now (with a newer version?) it does not work anymore. (The header of the called script will show with its developer tools but not the content! No error message or warning appears.). The load function works fine with FF and IE. When I manually call up the script (located on the server) Chrome only shows a blank page in opposite to FF and IE. I validated HTML and I checked my javascript with Jslint. Does anybody have a tip for me?
Dynamic TEXTAREA character limit on keyup
Hi I would like to restrict Character limit on TEXTAREA box.I am able to get char limit using Jquery if it it is one textArea. Can you please help me limit chars for Multiple TEXTAREA in same page using jQuery Code. <script type="text/javascript"> $(document).ready(function() { // ---- How can I do on keyup $('textarea').live('keyup', function() { --- }); }); </script> jQuery : <script type="text/javascript" src="./vms/vdpoams/js/jquery-1.4.2.js"></script> JSP : <tr> <td> <font size="1">(Maximum
Show Thumbnail: Flickr Feed
I guess my question is simple to solve. I want to show the photos of a specific album from my Flickr account. When I pull those photos, they come in medium format. I wish they came in the thumb format (75x75). I made this code, but the pictures keep coming in medium format. What am I doing wrong? <script type="text/javascript"> $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157624413458897&nsid=45864612@N08&lang=pt-br&format=json&jsoncallback=?", function(data){ $.each(data.items,
Script does not work for content async added to page
I have spent a lot of time googling about this but I'm not sure exactly what to search for. I use jquery ajax to send a request to the server and then new content for a specific div is returned that the script then places in that div. All links with the css class "link" triggers this request. The problem is that the returned content contains links with the css class "link" and they will not trigger the request. I'm guessing this has something to with that the script does not know about these new
SSL, IE < 8, remove, and background-image
If you're using SSL, and version of IE < 8 (includes IE 8 in compatibility mode) and you try to remove anything with a background image you get an SSL warning. This is a bug in IE that causes this warning for doing a number of different things, all other ways I've ran into are pretty trivial to work around. This particular one is more difficult since remove() is called in jquery all over the place internally. A straight javascript workaround is to do: this.outerHTML = ""; instead of: this.parentNode.removeChild(this);
jQuery help needed in NYC
Hey everyone, I wasn't sure where to post this, and if inappropriate please remove (or let me know and I'll take it down). Anyways our NYC-based creative agency (noisenewyork.com) is looking to hire a freelance jQuery developer to help with a new client project. Basically my current dev team is stuck on some issues related to jQuery in a build of their prototype, and it came up that we're really lack internal proficieny in it....so here I am. Ideally this would be in our NYC office, but we have one
Possible to use AJAX response data as it loads?
I have a page which loads the HTML for a table using $.post(). Sometimes, the table will be quite large (maybe 2000 rows). Is there a way to display the content as it arrives instead of waiting for the whole thing? It would probably be OK if this requires a synchronous request. The purpose of the page is to display the table, so it doesn't matter if nothing else can happen while it loads.
How to select an element in a frame (not iframe)?
I have a web page which has a frame which is inside an iframe? Everything is created dynamically using a third party control. All pages are in the same domain and server. How do I select an element which is in the frame? I like to use a syntax which doesn't use a target context because I couldn't find a way to get a context to the frame. I don't want to use $('elementid',context to frame) method but instead a full jQuery selector to the element in the frame starting from the top.
Need help with changing z-index with jquery in the case of a slide webspage..
I am desperate to solve an issue with z-index. If you look at one of my examples: http://outermotions.com/index-7.php I am trying to make a website where I have button (menu) and when clicked they slide out a page form the right. The site never changes the whole page it just slides in new content on nav click. This page works well in some aspects. each button slides out a page like I want. One problem is that I want the content to slide out from under part of the background picture and to see all
jQuery and Links
I'm new to jQuery, so forgive my noobness... I'm setting up my navigation on my personal site. I have just a basic little layout and a navigation. The navigation is super simple, just plain text links that when they are hovered I set a border-bottom property so I can have a nice thick line below them. However, I can't get a.selected working. When a user hovers, I want a border-bottom property to be displayed but I also want a border-bottom property on the selected link, or the link to the page they
Use .width() to decrease width of element
Hello, Is the next jQuery code the best way to decrease an elements width? $('#myelement').width( $('#myelement').width() - 20 ); I tried using the next code: $('#myelement').width( '-=20' );but that's not working, also not with '-20'. Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
trying to give transition to addClass not working...why???
I am simply trying to get an animated transition to the adding of a class. I have tried fading in using the fadeIn() function which didnt work and now simply adding time in the second argument...but ti's a no-go. Anyone have any ideas why? <script> $(document).ready(function() { $(".content-item").click(function(){ $(this).addClass("div-selected", 500); }); }); </script>
Collapsible menu not working correct in internet explore 8
I have writen(as you can see i am not a jQuery expert :P ) a small piece of code for a ul/li collapsible menu, all browsers do what i want but IE8 is not working propper. jQuery("a.cat_w_sub").toggle(function(){ if (jQuery(this).next("ul").is(":hidden")) { jQuery(this).next("ul").slideDown(100); jQuery(this).addClass("cat_open"); }else{ jQuery(this).next("ul").slideUp(100);
appending a selector from xml document to a html div
I am lost. I have tried appending ($('#div').append('selector) but all that does is just append the normal visual rendered text to my #div. What I need is the whole selector to be appended. I tried using .html to copy of the selector over to the DOM, but nothing shows up in that specified div when I look in firebug. I am using jqGrid to separate my nodes from the static xml file that it is working with. Here is the node that I need copied into a div in my DOM: <sequence> <a class="vlightbox"
Practical example where stopPropagation() is used
Could somebody please give me a practical example where stopPropagation() is used/needed? Best Regards
.show not cascading to child divs
I'm trying to display and hide whole chunks of my page via show/hide on various content divs. However, after hiding a div, when I try to call show on it again, it does not remove the display:none style on the child divs. Is this intended behavior and if so, how do I show ALL child elements of a div at once? My Javascript: $("#home_link").click(function() { $("#content div").hide('fast').delay(400); $("#home_content").show('fast'); }); $("#projects_link").click(function() { $("#content div").hide('fast').delay(400);
How to SHOW/HIDE dynamically created DIV on RadioButton Select
Hi, i have several programmatically generated DIV Sections in my WebApplication. And i have for each of these DIV Section a RadioButton Group. When the user now checks the RadioButton of the associated DIV-Section the Section should be Shown. And when he checks the other RadioButton the DIV Section should be hidden. How could a jQuery Function and a call look like, which does the above action? Here my sample: <form> <input type="radio" name="103845098431" value="yes" /> Yes<br /> <input type="radio"
How to stop a setInterval on hover
Hi, Here is my problem broken down: I have some animation inside a function like this: function doAnimation() { $('div.nav').animate({left: 15}, 200, 'swing') $('div.nav').animate({left: 10}, 200, 'swing') $('div.nav').animate({left: 15}, 170, 'swing') $('div.nav').animate({left: 10}, 200, 'swing') } and then I am setting an interval like this: $(document).ready(function(){ setInterval('doAnimation()', 5000); }); which is all fine, but I want to kill the animation and the interval as soon as you
e.preventDefault(); Not Working
Morning All, I'm having real trouble getting e.preventDefault(); to work. Here is my code $('#ListSnapshot a').live('click', function(e){ var url = $(this).attr('href') +' #WebPartWPQ2 .ms-listviewtable'; $('#ListSnapshot').load(url); e.preventDefault(); }); Could someone explain what I'm doing wrong, I can see the load function work but then the page redirects to the clicked link which I need to prevent. Thanks in advance! Gary
How to highlight Partial Urdu Characters
i write a code that search for a sub string and highlight it with html markup <b><b/> if(originalString.contains(searchString)){ searchString=originalString.replaceAll(ctxt, "<b>"+searchString+"</b>"); out.println(searchString); }it works well with English, but if i use URDU (similar to Arabic) it break there red one shows the break and green show how it should be. can jquery is able to solve it? Any suggestion or help would be greatly appreciated.
slideDown() - prob with condition 'if' it's down or up
Hi I'm using the following code to slide down a <div> that is display:none by default I can make it silde down no problem But I'd like to be able to "is()" to test if it is "down" or "up" so that I can either use "slideDown" or "slideUp" in the same function $("#desc-link").click(function(){ if ($("#desc-keys-div").is("down/up")) { $("#desc-keys-div").slideDown("slow"); } else { $("#desc-keys-div").slideUp("slow"); } }); what do I
Problem with jquery.click() after writing tags with $('ul li').html(Item);
Hello, i have a Problem with the following code after writing it with $('ul li').html(Item); $("#sideBar li").click(function() { alert($(this).html()); }When i write the li-tags in the ul#sideBar manual, it works fine. The following jQuery writes the li-Tags in the ul with the id "#sideBar": $.ajax({ type: 'post', url: "ajax/getSideBar.xml", dataType: 'xml', global: false, success: function(xml) { var Item = ''; $(xml).find('Marker').each(function()
how do i reset the position of a slideshow
I have made this basic slideshow using jQuery, basically it loops through well but! when it gets to the end of the animation it continues moving leaving a blank space. I have integrated the slideshow with a database so I don't know how many entries there will be. The jQuery code is beneath it... <div style="width:780px; height:60px; position:relative; overflow:hidden"> <div id="captions" style="position:absolute;"><!-- move this +- 780px on click next previous--> <?php $lastposts = get_posts('numberposts=100&category=17&order=ASC');?>
Problem with hide() and display: block
Hello :) I have three images: <img id="img1" src=".."><img src=".."><img src=".."> If I use $('#img1').hide(1000); this image will, while it is animated, get 'display: block' which makes the two next images be pressed on a new line- I don't want that! I want to know if it is possible to maintain display:inline using the hide() function?
jQuery and PHP Tools
Hi, Zend Technologies, the PHP Company, released yesterday a new tool for jQuery and PHP developers who need powerful tools such as source editing and debugging (for both jQuery and PHP). It will be great to get feedback from the community about the new tools. You can find more details here: http://forums.zend.com/viewforum.php?f=79 and see some (unprofessional ) screen-casts here: http://www.youtube.com/watch?v=bKGbdevOFP4 http://www.youtube.com/watch?v=CdHqJumt-hQ Disclaimer: Zend Studio is
Best approach to get hidden element dimension (width, height etc)?
Is there any reliable and efficient way?
translate object this.id into $(#elementID)
I have a set of working functions on a form that I inherited from a previous developer. The current iteration worked until I added a handful of check boxes to the form, then it stopped working correctly as follows. I have a step form with a save button that onclick calls: function submitMainForm() { $('#step1form, #step2form, #step3form').each( function(){ $('#save').append(getNamesAndValues($(this))); }); alert('Form Complete'); $('#save').submit(); // submit the created
.load() not working in Firefox & IE
I am having trouble loading external files in Firefox & IE [chrome & safari works fine] using .load() function in the a tag. ul start <li><a href="javascript:$('#content').load('txt/docs/open-src.html');">Open-Source</a></li> <li><a href="javascript:$('#content').load('txt/docs/pay-ware.html');">Pay-ware</a></li> ul end If u want to see the whole site it is @ thomas.cz.cc The a tag seems to be the only one having the problem, i am using the onload event of the body to preload my home
jQuery hover problem
Hey guys. Just discovered jQuery yesterday, and i've played a lot around with it, it's the best. :D even though, i've encountered an issue with my script. This script is simply supposed to animate the height of the div to 200 pixels. I have two divs, that has attacted the same jQuery script to them, even though, the hover function only works on the first div? Heres the code: <html> <head> <title>jQuery Example</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> body,th,td
Populate one field from contents of another as it's being entered
As the user types the "start year", I want to fill the "end year" with the same value, keystroke by keystroke. But simply using a keypress eventhandler doesn't do quite what I want, as $("#start_year").keypress(function(event) { $("#end_year").val($("#start_year").val()); }) fills in "end_year" with the value before the keypress has been added to "start_year". Again, I just want "end_year" to be the same as "start_year" as it's being typed.
Apply custom css, based on 'if' any children (subnav) present
Hi all, I am new to jQuery, in learning process.. described below is my dilemma: I have a 'main' navigation, that display a dropdown / sub navigation where necessary. I'm trying to achieve the following - 1) considering the parent tab has no associated page, I want to .. a) disable the 'click' through b) add custom css property 'cursor:default' to parent tab, containing a 'ul' element (which is in fact, the dropdown menu) Problem? With the code pasted below, i've successfully achieved the custom
Binding Events to Dynamically Created Elements that Do Don't Exist At All on Page Load
In the examples for live() and delegate(), the selectors match at least one element that already exists. Will either of these commands work on elements for which there is no match at all on page load? In my case, I want to bind a keyup event to the textareas that jeditable creates. I could probably create custom plug-in (to the plug-in :) to do the job, but I'd like to use live or delegate if they would work. Thanks! V
Using .delegate() method for table elements
Hello all, I've an HTML table that uses the jQuery-datatables plug-in. One of the columns in the table includes a button for adding a new row to the table immediately following the row where the button was clicked from. My HTML code is as follows : <table id="contactInfo"> <thead>...</thead> <tbody> <tr> <td>...</td> <td><button type="button" class="addRow">+</button></td> <td>...</td> </tr> </tbody> </table> And my jQuery code for firing the corresponding onclick event handler for the button is
Odd behavior with $.ajax() in jquery 1.4.2
I've got a page where the user can enter simple data: <strong>Description:</strong><br/> <textarea id="Desc" rows="5" cols="50"></textarea><br/> <strong>Quantity: </strong><br/> <input id="QTY" value="0" size="5" maxlength="8" type="text"><br/> <strong>Price: </strong><br/> <input id="Price" value="0" size="5" maxlength="8" type="text"><br/> <input id="AddItem" value="Add To Grouping" type="button">When they hit the AddItem button I use jQuery and AJAX load the data in to the database (MySQL 5.1.3):
Next Page