Racking my brain about stateful DOM elements and jQuery's .data()
Hi, I am new to jQuery and am about to embark on an intrepid venture to bend jQuery to my whim. Before I do so, I thought I had better first ask the experts here for their considered opinion. Here goes my cunning plan (almost real code): function myStatefulObject( sthg ) { // Parent: var that= jQuery( sthg ); // "sthg" is any valid jQuery selector expression and "that" will // become a new object *derived* from that selector. // Private:
Problem in active item in my menu
Hi, I am new for JQuery. I get a jquery script and customized that. Customized script: http://www.banyanseed.com/menu I got from: http://roshanbh.com.np/examples/sleek-smooth-hover-menu/ [last one] After customized I face few problems 1. Text color of active item after hover the each item 2. I unable to mask to active menu item when startup. Note: please check it also set the menu background white by set background:#fff (instead of #000) in "ul.nav li" under "Style" tag. doubt: $('.active') will
problem with making <select> persists
Hello everyone ... You''ll see ... i'm trying to do something, which is to make that the selected option of a <select> persist on a page reload ... This is the code of index.php <style type="text/css"> form select{ font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 12px; } </style> <form name="form1" method="post" action="persistencia.php"> <p> <select name="combo1" id="combo1"> <option value="o1">option1</option> <option value="o2">option2</option>
Clone LI and clear cloned LI's input values
I've been searching this forum, Google Groups, and Stack Overflow this morning but I haven't been able to quite find a simple way to clone a LI element (that contains form inputs with data,) and erase the newly created/cloned LI's form inputs. The function I'm using at the moment looks like this: $("a#add_template_item").click(function(){ $('#cs_' + ($('#sortable li').size()-1)).clone().removeAttr("id").attr('id','cs_' + $('#sortable li').size()).appendTo('#sortable'); }); (All that is doing
$.ajax() calls success handler when network is down, v1.4.1.
Hello all, It seems in jQuery 1.4.1 (haven't tested in other versions), doing an AJAX call while the machine is not connected to the internet results in a call to the success handler rather than the error one. Example run on Chrome 4/Windows 7: $.ajax({ url: 'http://www.google.com/', type: 'GET', error: function() { console.log('Error!'); }, success: function(x) { console.log('Success. Response: "' + x + '"'); }, complete: function(xhr) { console.log(xhr.status);
Show Hide 'td' on click of a link
I have a table that contains information that is hidden within a 'td' element. Users can access this information if they wish by clicking on a link that is held in another 'td' element on the previous row (table structure below): <table> <tr> <td><a href="#" class="install_toggle">Show options</a></td> </tr> <tr> <td class="install">some option info</td> </tr> <tr> <td><a href="#" class="install_toggle">Show options</a></td> </tr> <tr> <td class="install">some option info</td> </tr> </table>
Loading Image Problems.
Hello, I am developing a new site and I have this jquery code to show a loading image: function Display_Load() { $("#loading").fadeIn(900,0); $("#loading").html("<img src='images/bigLoader.gif' />"); } //Hide Loading Image function Hide_Load() { $("#loading").fadeOut('slow'); }; Which is called by: $("#divarea").load("includes/get_data.php?page=1&cat=" + cat, Hide_Load());} It was taken from a jquery pagnation script I found and it works fine except that when you clear your cache for the
Dialog boxes and back button
I want to use the JQuery boxes instead of Javascript alerts. The problem is after the dialog box appears and the user navigates to another page, the dialog box appears again after the user returns to the page (with the JQuery dialog box) using the back button. Is there a way to make the dialog box appear only once like a Javascript alert?
a href not working in slidebar
When I click on an image or link in my horizontal slidebar, i slide through the bar in stead of goiing to the linked page. Only the left and richt butten should allow to slide through the bar. Check it out: http://www.renergyopen.be/nl/index.php Code: <div class="slider"> <ul id="screen"> <li><a id="left" href=""><img src="images/l_arrow.gif" alt="picture" width="24" height="21" border="0" /></a></li> <li id="view"> <ul id="images"> <li><a href="javascript:void(0)"><img
Need to auto select a select box on postback with user's selection
I have a ColdFusion page with a select drop down list. On submit, I'm storing the value in a cfparam and trying to use jQuery to auto select that particular option. Currently I'm using :contains but this is unacceptable because it selects the last item that contains the cfparam. $("option:contains('<cfoutput>#form.company_type#</cfoutput>')").attr('selected', 'selected'); Is there something like this: $("option").equals('<cfoutput>#form.company_type#</cfoutput>')").attr('selected', 'selected'); OR
blocking ctrl-p print
using jquery 1.3.2 I'm trying to capture ctrl-p keyboard event and stop it from launching the print dialog the following works in FF3, but not IE6 any help appreciated $(function(){ $(document).keydown(function(objEvent) { if (objEvent.ctrlKey) { if (objEvent.keyCode == 80) { objEvent.preventDefault(); objEvent.stopPropagation(); return false; } }
Chained click event in 1.4.1
Hi, this code works in 1.3.2 and stop working when I update to 1.4.1: $(this).parents().children("a[href='#']").prev().click(); I'm pretty sure that the problem is when I call click() function. Help, what is wrong?
firefox iframe length
I have multiple iframes on the page, when I issue alert( $('iframe').length ); it only gives a count of 2. The correct number should be 5 in my case. When I run the page with IE 8 it gives the correct count. What am I doing wrong here? Thanks
Help with noconflict
Hi - I'm working on some updates for a site that will be managed via the Ingeniux CMS. The issue is, I have all this new functionality that was written in jQuery, but the CMS requires prototype for some of it's form functions. I've tried using noConflict and replacing $ with $j, and what keeps happening is that the first time a function called it will work, but not again, or at least not consistently, for example, clicking one of the slideToggle items will toggle the div open, but clicking again
how is my jquery hero ul > li effects all ul
Hi guys, I'm going crazy! I can't figure out how to set up my menu correct. Yes it works correct on firefox etc etc. but as you can guess ( i love my mac) internet explorer had a fault. When you go over the ul.top all menu will go up, except the menu's after the ul.top in my html. i tried to number all ul.top like ul.top1 ul.top2 etc etc but it will still not work! I think i do something wrong at line 4 $this. www.uproductions.nl $(document).ready(function() { $(".top").hover(function()
quicksearch plug-in
Hi guys, Just thought I'd let you know that I've completely revamped my jQuery plug-in, quicksearch. There's some example pages up here: http://lomalogue.com/jquery/quicksearch/ http://lomalogue.com/jquery/quicksearch/super_table.html And there's more information on Github: http://github.com/riklomas/quicksearch/ Any comments would be greatly received! Rik
How do I handle this problem?
Hi! all! I wanna listen to the expert's advice. Can anyone solve this problem? I couldn't use Callback Function's value in another functions. Is this a Cross Domain problem? ---------------------------------------------------------------------------------------------------- Client Side ---------------------------------------------------------------------------------------------------- <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript"> var a; $.ajax({
Autogrow does not work in FormView Edit mode
I was having hard drive getting the autogrow to work then I realized that if the default mode of the FormView is set to ReadOnly and if the user wants to edit, he clicks the Edit button and the FormView changed its mode to Edit mode. Once this mode changed, autogrow no longer works. $(document).ready(function(){ $('.expanding').autogrow(); }); Any suggestion how to get around this so it works regardless what mode the FormView control is in?
Want to change the Mootools menu script to JQuery Script
I want to convert a menu script to JQuery from mootools. Anybody help me. The menu is in http://www.banyanseed.com. Thanks in advance.
problem getting a button on a modal message to open up another modal message.
hello, I am new to Jquery and am having trouble. I want a button on a modal form to open up another modal form but for some reason it isn't happening. The code below is basically the code from the jquery user interface demo, slightly modified. can anyone tell me what I am doing wrong? Oh make sure you change the src's where the JQuery files are. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Storing selector when using :selected
Hi, I store my selectors in variables or a config object. So I would do something like this for example: var $manufacturer = $('#manufacturer'); But say, $manufacturer is a select, and I want to use something like this: $('#manufacturer option:selected') Is there a way to use a stored selector with "option:selected"? Thanks!
Plug-in passing the jQuery wrapper object as "this"
In response to a recent thread , I created a quick plug-in. You can see it at http://jsbin.com/ocodi/21/edit. It has a strange feature, and I wonder if others would find it wrong-headed. This plug-in treats the jQuery wrapper object as a group, and passes the whole wrapper in as the context object (the "this") for the functions supplied. Generally, when functions are supplied as parameters, either the context is irrelevant, or each DOM element in the jQuery wrapper is passed. But I don't do that.
Animation - menu
Hi everyody. I have some problem with animation in menu. Take a look here: http://blog.wrocweb.com/ I wanted to leave highlighted menu element when I go to submenu, but when I move my mouse beyond the menu then it does not back on its place. Can somebody help me ? I'm posting here my jquery code: jQuery('ul.menu li a, ul.menu li.hover a').hover( function() { jQuery(this).animate({'padding-right':'100px'}); },
using left and rightclick, browser contextual menu
Hi all, I have an anchor I've bound a click event to. When you click it, it checks with "which" wether it was the left or the right mousebutton you clicked. That's all good but on a right click I also get the browsers contextual menu. Is there a way to disable that in the following code I'm using? I've tried return false which doesn't work... $('.user li a').live('click', function(e) { if(e.which===1) { alert("left"); } else if(e.which===3) { alert("right"); return false; // doesn't work :( } return
Cannot Add a checked=checked Attribute to Input tag
Very simply, I want this function to attach the attribute checked=checked to the input <input type='checkbox' id='ckbox4' name='please select4' value='1234' '/> The following code does not do this $("#ckbox4").attr('checked','checked'); or $("#ckbox4").attr('checked',true); or $("#ckbox4").checked='checked' / true Any help or ideas is greatly appreciated. Other ways of doing this would be great as well. I just want to add this upon form submission.
problem updating image content inside a dialog box (image refresh)
I am trying to allow my image to be refreshed inside a dialog box. It is refreshed fine outside of a dialog box. function edit_thumb() { $("#imageThumbBox").dialog('destroy'); $("#imageThumbBox").dialog({ autoOpen: false, closeOnEscape: true, resizable: true, height: 'auto', width: 'auto', buttons: { 'Edit Thumb': function() { $("#myThumbForm").submit(); }, Cancel: function() { $(this).dialog('close'); } }, close: function()
Strange behavior mixing HTML and XML
Hello, I'm seeing strange jQuery behavior when I mix HTML and XML within the same HTML document. I am aware of at least two workarounds which work: pull out the XML and use XHR to modify the DOM, and use E4X and embed XML into the JavaScript portion of the page. The former method is just inconvenient, in that I am doing prototyping, the resources are all small, and want to keep related resources together. The later method is rather ugly, and not terribly compatible with jQuery. (You can use jQuery
Which is faster? JSON or XML???
Hi, Just wondering.. on a local computer using JQuery, is faster to load JSON data or XML data??? With alot of data in a file. For JQuery which type of data is better? thanks
Animate Issue
Hey everyone. I'm new to jQuery and and I love it! However being a newbie it takes me some time to work through issues but it helps me learn. I wrote some simple code to have a div start on the right side of the page and move to the left upon clicking the div (#go). The transition of sliding from right to left works fine in Firefox but doesn't in IE, Chrome, or Safari. In those 3 browsers it goes from right to left instantly without sliding across. Any help? Code is below. Thanks! <head> <style>
When to use .attr() vs .data()?
I was just watching Yehuda's presentation on Evented Programming , and I noticed he was using the .attr() function to store entire DOM elements. This had never even occurred to me before! I've been using .attr() to store simple, text-only data, and using .data() to store DOM elements and more complex textual data. So now I have some questions (many of which I may have already answered for myself, but I'd appreciate confirmation): Am I understanding Yehuda's code correctly? (i.e., he really is
1.4.1 change from 1.3.2 .add()
"As of jQuery 1.4 the results from .add() will always be returned in document order (rather than a simple concatenation)." I don't know why but this stopped working: var popup = jQuery('<div id="HowToStartPopup"></div>'); var popupContent = jQuery('<div id="HowToStartPopupContent"></div>'); var popupCloseBtn = jQuery('<a href="#" id="HowToStartPopupCloseBtn" title="Close Popup">[x]</a>'); popupContent.add(popupCloseBtn).appendTo(popup); in 1.3.2 popupContent and popupCloseBtn are both children
Event handler getter: Is there such a thing?
Can I get the handler associated with an event? Something akin to... <div id="myDiv" onclick="myClickHandler();"></div> ..... var foo = $('#myDiv').returnEventHandler('click'); //...you get the idea... //now foo would contain the handler "myClickHandler()" ??? Or, is there a straight javascript thingy to do this? My searches went nowhere.
Is anyone using Comet (Reverse Ajax) with JQuery?
Hi, There seems to be very little discussion on these forums re Comet, and google searches point towards the DoJo Cometd implementation which now supports JQuery also. The 'native' JQuery Comet plugin does not appear to have had any activity since early 2008 and the documentation links seems to point to a more general blog. Does anyone have any robust Comet and JQuery examples they could provide a link to or is there a reason it is not being used? Alternatively, has anyone managed to get Cometd from
Traversing dom
Hi, I'm newcomer to jQuery and I have a question regarding this: somewhere in my html code <div class='popup-header'> <div><a .... class='remove'>remove this</a></div> <...other div encapsulated in this popup-header div... </div> other div with class popup-header when I launch : $('.popup-header').each(function(item) { var myCurrentRemove = $(this).children('.remove'); actions on myCurrentRemove ... }) then myCurrentRemove is empty... For sure I missed somthing about traversing node
Initialize after the document is ready
Hi everybody, my problem is that, if I initialize everything when the document is ready, for example: $(function() { $("#sortable").sortable(); .... } But then the user uploads files and are added to it as a <li> How can I add a "type" like draggable(), to this new elements that are created after the document is ready? Thanks for your time.
Getting the text of a link and insert it into an input element ?
Hi, I'm new here and in my freetime I just speak german ^^ , therefore you may excuse my english. My problem : I want to get the text from a link <a href="">text_I_want_to_get_from_here</a> and insert it after into an input element <input type="text" name="want_to_have_here" value=""> by using jQuery. I found something with $("#myid").html() to get this, but I am not sure how to use it, really tried but I am a freshman. Please help me guys.
tabs and hide prob
Hello. i'm using the following: <script type="text/javascript"> $(function() { // setup ul.tabs to work as tabs for each div directly under div.panes $("ul.tabs").tabs("div.panes > div") $('a.close').click(function(){ $('div.panes > div').hide('slow'); $('ul.tabs li a.current').removeClass('current') }) }); </script>at the following url http://drneely.net so when user clicks on tab div appears and if user clicks on a diff tab the content changes. also, when
Googlebot can implement jQuery...
Using a live-tracking system (which in turn uses ajax to retrieve and execute remote scripts using the jQuery library) I noticed today a visitor from Mountain View (unknown browser type). A quick check of the logs and it was, of course, the Googlebot, version 2.1, coming from 66.249.65.183. Maybe it's been noted before, but I was quite surprised to see it executing such complex scripts, especially since the ajax isn't even triggered until half a second after page load. Anyway, I thought it would
Background Fade?
I'm new to Jquery- I'm working on a site now that I wanted to create smooth transitions between pages- so that when someone clicks on a link to a new page it blends into it instead of the page page just loading. Example- Home page is a blue background, Contact page is red, when on the hame page they click on the contact menu button the pages ease into each other. Any idea on how I can do that? Again- new to this, I've been sticking to HTML and CSS alone for to long.
Fade non-:hover images by class
I have a grid of images. For the sake of my question, let's say there are different categories of images: cats, dogs and cars. All images belong to one of these categories, but all are different. When the page is loaded, all images have their opacity lowered to 0.7. So far I've got: $(document).ready(function(){ $("img").fadeTo("slow", 0.7); $("img").hover(function(){ $(this).fadeTo("fast", 1.0); },function(){ $(this).fadeTo("fast", 0.7); }); }); What I'd like to achieve is that when you hover
Next Page