jQuery API documentation in TiddlyWiki
I wrote a simple script to store jQuery's API documentation in TiddlyWiki for offline use: http://fnd.lewcid.org/tmp/jQueryAPI.html It's fairly primitive at the moment, and I'm aware of the (more exciting) alternatives* - but perhaps someone else can make use of this for some airborne hacking. More details here: http://groups.google.com/group/tiddlywikidev/t/4974fa9717f669ab -- F. * e.g. http://james.padolsey.com/jquery/ and http://visualjquery.com - plus http://api.jquery.com and the source code
SelectorSpeed benchmark
Hi! On this site I found nice js frameworks benchmark: SelectorSpeed benchmark I think it's worth a while.
multipage form and text resizing
Hi everyone, I have a project involving a multipage form with a text resizing function. I'd like to be able to keep the size the user selects as persistent throughout the multipage form (on other pages). I tried creating a hidden input form and passing the value through it, but for some reason, it didn't work (it's a proprietary templating tool they're using). Am I missing something, or is there some easier way of going about this? Just in case you're wondering, here's the code. It works beautifully,
Need help with my lightbox code
I'm doing a simple lightbox but I cannot get the lightbox to pop up when I click on the thumbnail. Any help would be appreciated. $(document).ready(function() { set_up_lightbox(); }); function set_up_lightbox() { $("body").append($("<div/>").attr("id","lightbox_overlay")); $("body").append($("<div/>").attr("id","lightbox_container")); $("#lightbox_overlay").hide(); $("#lightbox_container").hide(); $("#gallery").append( $("<img/>").attr("src",
Problem with refreshing the image with same name using attr('src',newimage)
Hi Guys, I am trying to refresh an image on the page but it is not happening. I have a page with images and I need to update those images as required. To update an image I upload the image on a lightbox and then close the lightbox. The image on the page should update itself. Now, I tried $('#imageid').attr('src', newimage). I want to make a special mention here that the name of both the old and new images are same. And I feel this is the problem. If I hard code any other image it does appear as soon
NOT place JQuery ready function in head section ?
can we NOT place JQuery ready function in head section ? is it possible ? We put it into html body, and then use some function to scan .. Thanks.
prepend doesnt work
Hi everybody, I am using $.post to add new group name to DB and show newly created group to the user. Here is the code: $('#new_group').click(function(){ var name = $("#group_name").val(); $.post("/async/addgroup",{ "name" : name }, function(response){ var id = response; var echo_str = $("<div id='group_"+id+"'><strong>Name:</strong> <div class='editgroup' id='"+id+"'>"+name+"</div><a href='#' class='clickeditgroup'>Edit</a> | <a href='#'
Dialog and datepicker questions
I created a dialog which has 3 text fields. I added a datepicker to one of them. On submit I'm trying to post the data in the fields to a web service. The first time you fire up the dialog, I'm running into two problems. One, the values I'm getting from the fields are all emtpy. Two, the datepicker doesn't actually populate the field it's attached to. The 2nd time, they all work fine. Any ideas? Thanks! This is part of the $(document).ready handler: $("#expDate").datepicker(); $(".ui-datepicker").css({
function call outside of jQuery
Hi Community, i write this function: $(function() { // Array erstellen $.get("hallen.xml",{},function(xml){ $('address',xml).each(function(i) { aHalle[$(this).find("nummer").text()] = new Array(); aHalle[$(this).find("nummer").text()]["Nummer"] = $(this).find("nummer").text(); aHalle[$(this).find("nummer").text()]["Halle"] = $(this).find("halle").text(); aHalle[$(this).find("nummer").text()]["Strasse"] = $(this).find("strasse").text();
Help with Check all uncheck all and invert checkboxes using jquery
With the help of google and a lot of searching forums I have managed to construct a dynamically created table with several collapsible sections and I am trying to use jQuery to enable the user to check the topic within each section and automatically select the subtopics within that particular section. I found the following code and the functionality of the checking and unchecking is working but I need to append an id to checkAll and cb-element so I could have checkAll1 and cb-element1 for the first
Image Opacity
How do I make my image start out transparent? $(document).ready(function(){ $("img.b").hover( function() { $(this).stop().animate({"opacity": "1"}, "slow"); }, function() { $(this).stop().animate({"opacity": "0"}, "slow"); }); });Thanks
Populating an array in the .ajax()
Alright - so I am quite new to Javascript, still thinking somewhat object oriented and most of what I do doesn't work. :-) I have a script which has an array defined "globally." Then with an .ajax request for an XML file, I use the success function to populate the array. My aim was to then "get" the array data out of the .ajax success function and use it. Unfortunately, all I get is some undefined stuff. What am I doing wrong? Here is the code (somewhat simplified): myArray = new Array(); $.ajax({ type:
problem with $.proxy scope
I'm trying to create a very simple object that represents an element; in that object, I bind to the 'click' method of some links so the element can handle that action on its own, without the roundabout way of going through global objects, singletons, or more jQuery contexts. I use $.proxy() to maintain the context of "this" object from the element, but it errors out with "not a function". Perhaps I'm making a simple mistake with scoping; I'm not sure. Can anyone help? Here's the (simplified) code:
Get height and width of ajax response
I have a script which sends an ajax request and the appends the data to a div which needs to change it's height and width depending on the content returned. So far I have $.ajax({ url: url, success: function(data) { target.html(data); var contentWidth = target.width(); var contentHeight = target.height(); alert(contentWidth + ', ' + contentHeight);
Multiple Submit Buttons
I have a form that has 3 buttons. One button is used for a search to retrieve information from the database. The other 2 buttons are used to either insert or delete information into my database. How can I use jquery for these buttons to process my php files?
add/remove form elements + event listener updates
Hi, I'm using the http://code.google.com/p/django-dynamic-formset/ plugin to have add/remove buttons after some forms. E.g. the buttons add a new row of product, quantity, price and discount fields. Then I have another javascript code that adds a new column with a Total value and updates that column when any of the previous fields changes. My problem is, that every time when I add a new row, then basically, the last row is copied. Thus if I overwrite something in the "new" row, then the total value
Updating a form based on checkbox selection
Hi, I'm working on a search filter trying to get a form to update itself depending on what options have been checked from a selection of checkboxes. i.e. selecting one checkbox can bring up other checkboxes. It's just posting the form to update_filter.php and putting the updated form into searchNavigation div. $(document).ready(function(e){ $("input[type='checkbox']").change(function(e){ e.preventDefault(); update_filter(); }); function update_filter(){
Problem with jQuery & IE & overflow:auto
Hi, I have included jquery in the HTML header of my page: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> So far I only included this but did not use jQuery in any way. My page also uses the "overflow: auto;" CSS-property for the body element to hide the scroll bar on the right side. With Firefox this works fine but with IE I often get a layout problem. When I see the layout problem, the background color extends to the border on the right hand side but the other elements are
XML - Get nth element from inside another element?
I had to restructure my XML data on my project and now my code does not work. Before the xml was structured like this: <project><copy></copy><image></image></project>Now it is: <company><project><copy></copy><image></image></project><project><copy></copy><image></image></project><project><copy></copy><image></image></project></company>This used to work to grab the image and copy, (this) being the 'project' element: text = $(this).find("copy").text(); photo = "imgs/work/" + $(this).find("image").text();Now,
remove element : doesn't work.
I try to remove element using JQuery, but it doesn't work. The javascript DOM version will work. JQuery doesn't support bracket and dot in id value ? Thanks. // doesn't work function removeCar(idx){ alert($('#carListDiv').html()); // see the innerHTML $('#carListDiv').remove('#car[0].headdiv'); } // works function removeElement(idx) { var olddiv = document.getElementById('car[0].headdiv'); olddiv.parentNode.removeChild(olddiv); } The
Problem Establishing A Callback
Below is the distillation of code with which I am having troubles. The code works, but I am sure that there must be a better way of doing things. This simple program displays two boxes. When the user mouses over either box, all boxes are returned to their original state, a zIndex of 2 is applied to it, then the box expands partially over the other box. This works fine. However, I am using setTimeout to coordinate the setting of the zIndex value, which is something that I would think would better
loading jQuery from local filesystem
I'm having an issue getting jQuery to load from a local file system. My head links are: <script type="text/javascript" src="js/jquery-1.3.2.min"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script> <script type="text/javascript" src="js/jquery.localscroll-min.js"></script> <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script> <script type="text/javascript" src="js/myscripts.js"></script>
[jQuery] CSS styles being lost in IE after Ajax Form Submission
Hi there, I am getting a strange behavior in IE 6 and 7 where not only do I lose my CSS styling in the replaced DIV but some of the jQuery swap classes code no longer works after an ajax form is submitted. I am using jQuery Forms to post the data and use the exact same approach on the same page with a different form with no trouble. Works fine in Safari, and FF, though I do see my styled Form submit button do a little hop in FF when the div is refreshed (this does not happen in my other successful
get the right selector
Hello Jquery I'm pretty new to JavaScript and have ran into a problem. I'm trying to make a simple fade effect where I can fade into diffrent divs and back to the central div (frontpage). My problem is that I have difficulties getting the right selector. Okay this is hard to tell so here is my code: $("span").click(function () { var value = $(this).attr('id'); switch(value) { case 'test1': var whoAmI = "#value1"; $("#value1").fadeIn("slow");
Help with selector
Hi Jquery forum! I have a problem regarding getting the right selector. I'm trying to make a webpage, who fades between diffrent divs, subpages and back to frontpage. So here is my code: $("span").click(function () { var value = $(this).attr('id'); switch(value) { case 'test1': var whoAmI = "#value1"; $("#value1").fadeIn("slow"); $("#fadeBack").hide(); break; case 'test2': var whoAmI = "#value2";
Remove element with parameter
var k = $(".class").index(this); i want to remove <li> element in the same way. I tried it with .get(k), but it didn't work. Most likely i didn't get the idea how to do it. <li>one</li> <li>two</li> <li>three</li> So how to remove a second <li> tag with a parameter? Thank you in advance.
How do I detect if an element has been centered using auto margins? (margin-left: auto; margin-right: auto;)
It seems that when an element is horizontally centered using auto margins, $(myElement).css('margin-left') will return the computed margin of 0px in most browsers (at least Firefox). Is there a way to tell that this is not the real computed margin? Actually, I don't even need the computed margin; it would be enough to just know that the margin was set to auto. E.g. <div style="width:300px;margin-left:auto;margin-right:auto;"> lorum ipsum lorum ipsum lorum ipsum lorum ipsum </div> Background: I
help with my web history
Hellow, may be someone could help me to enable the use of butttons back and forward of the browser in my example, I imagine there is some plugin for this, but I don't know it. Source code and the zip file with the complete example <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo</title>
Superfish problem
Hello, I have a problem with my Superfish menu. My menu structure is Cat1 |_Subcat11 |_Subcat12 Cat2 |_Subcat21 |_Subcat22 |_Subcat221 |_Subcat222 |_Subcat223 |_Subcat224 |_Subcat225 |_Subcat226 |_Subcat227 |_Subcat228 The problem I face is that only the first 5 items of the submenu are visible. can anyone help? thanks
Second animation doesn't work in IE
Hi there, The second animation doesn't seem to working in IE, here is the website: http://www.narekaramjan.com/ Both animations work fine in Firefox, Google Chrome & Safari. In IE however, the first animation is working, but the second isn't, witch is kinda weird, isn't it ? I hope someone can help me. I've put the source code below, if you need anything else, just ask or check the live source (for js files etc.) Any help is appreciated, thanks. Here is the html code and a link to animation.js:
Why this script doesn't work on jquery 1.4.2?
I've been using a simple script for a sliding menu that worked seamlessly with jQuery 1.3 and 1.2. When I upgraded to 1.4.2. the portion of code that moves the div off the screen doesn't work anymore. I'm not getting any error messages. Just this portion of code is ignored (or not triggered). The code is as follows : $("#container_menu").mouseout(function(){ $().mousemove( function(e) { if (e.pageY > 150) { if($("#pestan").css("display") == "none"){ $("#showmenu").animate({
Testing for presence of element on a page
I think I'm making a jQuery syntax error, have a look at the code below. if ($('#this-selector-is-on-the-page')){ // check for existence of selector // Want to do this stuff, and it is executing, so OK. } if ($('#this-selector-is-NOT-on-the-page'){ // check for existence of selector // Don't want to do this stuff on this page, but it is executing anyway. } What is my mistake?
jQuery Script works in FF and Chrome but on all IE pages
Hi all, been racking my brain with this one for a while and any help would be appreciated. I am using columnizer to automatically columnize certain DIVs on my page. if works perfectly in FF and Chrome and I got it to work on one page of my site by moving when the script loaded, but on the front page I'm not having any luck. IE will simply NOT display the div that is having the script attached to it. it just makes it disappear, but it is there when you view source. The script is below. Like I said,
Reasonably simple animation works elsewhere -- why not in IE6/7
In another thread (http://forum.jquery.com/topic/queueing-up-animations) there's a discussion about a fairly simply animation. It works fine in IE8, and in recent versions of Firefox, Opera, Safari, and Chrome. But it is pretty haywire in IE6 and IE7. I'm afraid I don't know nearly what I should about browser quirks. Can anyone suggest a reason, or even better, a fix? A sample of the animation is at http://jsbin.com/aguqe/24 (code http://jsbin.com/aguqe/24/edit ) Thanks, -- Scott
Deleting images that containing x.jpg
I'm trying to look for images that contain 'x.jpg' and remove its <img> container. I'm using the :contains and remove feature without success. What am I doing wrong? $("img:contains('x.jpg')").remove();
load() question
Hello, I'm new to jQuery and I have a question with (probably) an easy answer. Thanks a lot in advance :) So I have a fairly simple website which will have one main page and several links that each bring a jquery pop up with various bits of information and images on it. So for the links I use: <ul id='nav'> <li><a id='contactus' href='contactus.php'>Contact Us</a></li> <li><a id='aboutus' href='aboutus.php'>About Us</a></li> </ul> Then my javascript looks like: <script type='text/javascript'>
Ajax Tabcontainer and JQuery
Hi, I have a question for you. In my asp.net web site I have a masterpage. In that masterpage I have a menu that consists of a tab container (ajax control toolkit). This tab container is built in code behind dynamically in page init. The tab container consists of multiple tabs, each tab contains a BulletedList and each BulletedList have at least one List Item. Each List Item has a value that is a url that points to as aspx web form.This web form's MasterPageFile points to my master page. I have added
UL and jQuery for a menu sliding up and down
Hi, level 1 level 2 level 2 level 3 level 3 level 2 level 1 level 2 level 2 level 2 level 3when user click on an item all subitem should be sliding up (if they are already visible) or down (if they are hidden). this works well, however as it is under joomla, when user click on a level item, it load the page attached (into content div) by the level item link and the whole menu status/appearance is resetted :-( it means that if all level 3 were slided up before clicking,
.click() not working on .html() output
$(".nuotrauku_trynimas").click(function () { alert('hi'); }); ------------------------------------------------------- Here goes ajax script. url, data, type, On complete (here it is) onComplete: function(file, response){ kint = response.split(','); status.html(''); $('<li id="'+kint[2]+'" class="success"></li>').appendTo('#files').css('display', 'none').fadeIn('fast').html('<img src="../prekes/'+kint[0]+'" alt="'+kint[0]+'" /><div class="nuotrauku_trynimas" id="'+kint[2]+'" style="float:right; cursor:pointer;"><img
Slide animate list
Hello I have this a where I want to slide every li to the left when i click on #btn. Like it is done in http://sorgalla.com/projects/jcarousel/examples/static_simple.html . <ul id="thelist"> <li></li> <li></li> <li></li> <li></li> </ul> <a id="btn" href="#">btn</a> Do you know how to do that ?
Next Page