How to Dynamically Create Lists with jQuery?
I want to create a recipe site with similar functionality to a feature on coolspotters.com. I've only dabbled in jQuery so I'm not sure how complicated it would be to do this. Basically what I want to do is allow a user to add recipes to dynamically created lists. For example if a user searches for Italian food they should be able to create a list called "Italian" and add italian recipes to the list. Or if they do a search for Japanese dishes they will be able to create a list called "Japanese" and
Making successive "jQuery.load()"s in nested pages work
The main page ("parent.html") has a link that ajaxloads a page ("page1.html") into a div ("targetdiv") in the main page, like so: parent html: $("#targetdiv").html(loading).load('page1.html'); This works fine and "page1.html" is loaded into "targetdiv". The "page1.html" also has a link in it that is supposed to ajaxload another page ("page2.html") into "targetdiv" (onto itself), like so: page1.html: $("#targetdiv").html(loading).load('page2.html'); This does not work; "html(loading)" comes
Can you use selectors to download all .zip files in a page?
Hi, Just wondering if it's possible to use JQuery to create a 'download all' link? I have a number of .zip files linked to in a page and I want to offer a quick way to download all of them at once or specific sets based on the id of the link. That possible? Thanks, osu
I'm having a problem with my lightbox
I really can't see the problem with my code, but the image will not come up when I click on the thumbnail. Here is my current code. I was pretty much thrown into jQuery after a day of using it so I'm am not at all familiar with it. Any help would be greatly appreciated. $(document).ready(function() { set_up_lightbox(); }); /** * set_up_lightbox() * * This function should create the <div> elements necessary for displaying * our lightbox container and our lightbox overlay. */ function set_up_lightbox()
Uploading images from a form via ajax with other types of fields
Hi everyone, I am new to Ajax and fairly strong with PHP but have never worked with images before. I have a form that adds employee details to a MySQL database via Ajax and I need to upload a photograph, resize it to keep the presentation uniform, and then be able to enter its path (or filename) into a table field. I have Googled this to death and can't seem to find a solution. My form uses jQuery's .ajax() to submit the form and I only need to attach one image. I have found several plug-ins and
Simple image resize...
Using Galleria, I have a gallery with various sized images: <div class="gallery-container"> <div id="gallery-image"></div> <ul class="gallery-unstyled"> <li class="active"><img src="images/50x50.jpg" title="tine pic" alt="tiny pic" /></li> <li><img src="images/500x200.jpg" title="Big picture" alt="big picture" /></li> <li><img src="images/200x500.jpg" title="Another big picture" alt="another big picture" /></li> <li><img src="images/200x200.jpg" title="Medium
Using addClass with IE pngfix
Hi all, I use the UniPngFix script on my site in order to make IE6 render transparent PNGs. It uses a classic alphaImageLoader MS filter (and is definitly the best IMO). This script requires an additionnal class on targeted elements. Problem is I don't want to spoil my code by hard coding these classes. So I try to use $("div").addClass("unitPng"); in an conditional comment within the script but it does not work. In or outside the comment, whatever the position on the page. I'm a newbie in javacript,
IE6 problems with custom built accordion
Hi guys I have a problem with a nested accordion in IE6, tabs are overlapping each other etc. Problem can be seen here: http://tinyurl.com/ya8h5dy Would be awesome if someone can give me a pointer here. I am not getting any javascript errors and cannot figure this one out yet.... Thanks. Pieter.
AJAX issue
Hi I am making an AJAX call which serves XML in response and on call back success I am handling that. Following is the code for that ===== $.ajax ( { url: 'http://localhost:3591/ASPX site/Default.aspx?q=S', type: 'GET', dataType: 'xml', timeout: 1000, error:
Highlighting row and column in a table
Hi, I'm trying to make a php/jquery-based puzzle game where I have a standard html table (#puzzlegrid) generated by php, and I want to highlight certain parts of it when the mouse is hovering over it. I have one table where there are four different parts (split in the middle vertically and horizontally), separated by id's. The left and topmost cells has id="empty", all the rows beneath these has id="row-clues", the columns next to "empty" has id="column-clues" and finally the bottom-right cells has
How can I change hidden to show?
I am creating a slide show and have placed a <div> with an id of bg and a <ul> inside it. Each <li> has a class of bg-image as well as an <input type="hidden" value="./page/backgrounds/bg1.jpg">. There are 8 images. I have placed my HTML my CSS and local JS. Thank you so much. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="" ><!--
AJAX Event Not Working
I am new to jQuery and I am trying to do an AJAX call. The only call I could get to work was getJSON (which is fine because my responses are always JSON). Firebug lets me know that the request goes out and the response that is returned is what expected, but the success function is never called. Based on the code below, I should get an alert with the response, but I don't. If the problem is a JSON parsing error, how do I find that out? If something else is the problem, what could it be? $.getJSON
Adding text to input with ajax then selecting that text
I am trying to select the text in an input type = text after a get ajax call inserts data into that field using the on focus event. The ajax part works fine but the text isn't selected. If I tab out and back into the field the text gets selected then. Any idea how to make this work. Here is the code... $("#name").focus( function() { CallSign = $("input[name=CallSign]").val(); $.get("CallSignTable.php", {f: "name", CallSign: CallSign}, function(data){ $("#name").val(data);
Autocomplete - remote data, race condition
I've started working with the jQuery UI 1.8 Autcomplete recently with remote data. I was pleased with the ease of initial implementation, but before long I ran into a classic race condition. As I type, the search query gets more specific, so it takes less time for the server respond. As a consequence, it is possible for the old response to arrive after the most recent one. Obviously, this is producing undesirable effects. I'm a little frustrated that the plugin doesn't have a way to manage this.
<input> tag and text inside to be dropShadowed...
Hi. I use plugin:dropShadow and want to have text inside the <input> tag "dropShadowed". By using code below i can only select <input> object, so all the input is with the effect of dropShadow. I tried to change $(this) for $(this).text().dropShadow or so, but no result acomplished. Any idea? 10x in advance:) $('input, textarea').focus(function() { $(this).css('border','2px solid red'); $(this).fadeTo(400,1); var value = $(this).val(); $(this).dropShadow({top:4,left:0,blur:1,color:"red"});
ajax call returns null in my facebook iframe !!!
Hi, I am using jquery to send an ajax request from my facebook app which is in iframe to my server. The ajax request works fine when the web app is running stand alone and out of facebook platform, but within facebook, the result that I get from my ajax request is blank !!! Here is the code I use: $.ajax({ url: 'http://mydomain.com/search', data: params, cache: false, dataType: 'json', success: function(posts) { //
ajaxSend not updating parameters before ajax request is made
I cannot get ajaxSend (http://api.jquery.com/ajaxSend/) to properly modify the parameters to include a random timestamp and, for IE's sake, a _method=value pair. I have: $(document).ajaxSend(function(event, request, settings) { settings.data = $.deparam(settings.data); settings.data['random'] = new Date().getTime(); settings.data['_method'] = settings.type; settings.data = $.param(settings.data) $.log(settings); }); $(document).ready(function() { //...snip... $.ajaxSetup({
.animate() question
When jquery finishes an animation, does it rerender what it was animating???? I'm using .animate() on a div containing a flash video, and once the animation is finished the video starts from the beginning again!
Retrieving HTML input maxlength
Hi. I would like to pass the maxlength of an HTML input field as a variable with the $.getJSON function. Here is my current code: $.getJSON('SVRPGM',{size: '4'}, function(j){ ... } I would like to replace '4' with something like $(this).maxLength(). Is this possible?
dynamically building an array from DOM elements
There's no way this should be as hard as I am finding it. I want to dynamically build an array like this: var myPlayList = [ {name:"Title1",mp3:"path/to/title1.mp3"}, {name:"Title2",mp3:"path/to/title2.mp3"}, {name:"Title3",mp3:"path/to/title2.mp3"}, ];but I want to be able to pull the data from an unordered list in the DOM that looks like this: <ul id="tracklisting"> <li><a href="path/to/title1.mp3">Title1</a></li> <li><a href="path/to/title2.mp3">Title2</a></li>
Mouseout Not
I have a div which drops down a menu below it on mouseover. I want to kill the menu when I mouse out of that div but not when I'm over the menu below it. <div id="menu_parent"></div> Something like this maybe: menu_parent.not("#menu").mouseout(function() { killmenu()}); Any ideas? Thanks.
Detecting keyPress in an IFRAME
Hey all, I'm pretty sure I know the answer to this one already (NO), but I thought I'd throw it out there to see if someone knew any workarounds for something similar. I'm using Disqus for commenting on my website. When a user clicks the 'reply' button, a new DIV is created which contains an <iframe> that has the textarea box for the reply comment inside of it. I was wondering if it was possible to determine a keyPress inside of this <textarea> textbox that is within the iframe? (For completeness:
Using jquery with another JS lib: How to target element added via other JS lib?
Hi, Long story short, I am using GreaseMonkey to load jQuery 1.3.2 (there is a bug with the latest version of jquery and GM) and jQuery UI 1.8.0. I am using jQuery via GM to manipulate the GUI of a content management system. This CMS uses its own JS library to dynamically add stuff to the dom. Question: How can I target a dom element that was added to the dom via this other JS lib? In other words, the CMS will add a div to the dom, and I am not sure how to tell jquery to wait for these elements to
Making this jQuery more efficient and smooth...
Well, this is my first adventure into jQuery. I wanted to make a sliding tab website layout. When I started with this I had around 300 lines of code. It worked, but it wasn't very fast. Today I improved it a little bit, dropping off a decent amount of code. Here's the site, currently working (Just a bit slow): http://portfolio.joshmoyers.com Here's the code: http://portfolio.joshmoyers.com/js/slider.js I've tried to comment it the best I could. The 'tabs' that need different positions within the
Activating J Query tab from Seperate Image Link
Hi, I'm new to Jquery programming and I was hoping somebody could help. What I'm looking to do is to have a user click on an image towards the top of my website and then have the browser scroll down and activate the tab. This is my script in the <head> tags of my document: <script type="text/javascript"> $(function() { $('#container-1 ul').tabs(); }); </script> Further down I have a tabs system set up like this: <a name="description"> <div id="container-1">
Reduce server load, real-time data
I am using Jquery, JSON, & ASP to pull realtime from a database every 3 seconds via setInterval. This is working great, however, I will soon have 50 users viewing the same website looking at their individual real-time statistics... so instead of 20 requests/minute (3 per second) I'm fearing that the number of requests would increase exponentially (50 users * 20 requests/minute = 1,000 requests/minute) if the intervals are determined by clients browser launch. Does anyone know of a way that I could
ajax call returns null in my facebook iframe !!!
Hi, I am using jquery to send an ajax request from my facebook app which is in iframe to my server. The ajax request works fine when the web app is running stand alone and out of facebook platform, but within facebook, the result that I get from my ajax request is blank !!! Here is the code I use: $.ajax({ url: 'http://mydomain.com/search', data: params, cache: false, dataType: 'json', success: function(posts) {
[SOLVED] (.) period in value field
Hi all, Im using a jQuery script to show/hide a div based based on the selection made via a dropdown. <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.box').hide(); $('#dropdown').change(function() { $('.box').hide(); $('#div' + $(this).val()).show(); }); }); </script> <form> <select id="dropdown" name="dropdown"> <option value="0">Choose</option> <option value="area1">10.00</option> <option value="area2">20.00</option>
Tooltip hover text
Hi, where I can find a tooltip like the one in the homepage? As you can see the tooltoip shows hover the text. Thank you!
Another jQuery API Documentation
Here's another interesting jQuery API browser , built with jQuery... (Works on all modern browsers, except Firefox 3.6.) See here for documentation... Your comments?
Calling javascript ().load() Issue
Hello I'm new to the forums here and jquery actually, I have a question pertaining to the use of ().load() function. I am loading new content into a div on my main index.php page but when I load the content none of the javascript functions work within it. When I use the script tag and include my common.js with in the separate php page that I am loading into the index.php div contetnt it reloads my common.js file again and again multiplying my normal javascript requests as I click on different
Using slideToggle() with dynamic content?
Hello everyone! Im relatively new in the jquery world. I hope you can explain how to get this problem done? Im loading some dynamic content for a news, and onClick at the a-tag "test" theres a slideToggle for news_text. My Problem is, that im loading some content, and got more newsEntrys...how can i go throug alle the news with the same function? Thanks in advance! <!--Hier beginnt ein Newseintrag--> <c:forEach var="n" items="${news}" varStatus="MyStatus"> <c:if test="${MyStatus.count<'4'}">
Jquery append auto closes my div
Hi all, $('.example').append("<div>Hello"); returns: <div>Hello</div> How do I turn the auto complete off. Cheers!
$.event.special.trigger
hello! I'm trying to create my own submit event. How can I execute my ajax function after all callbacks was executed? I was trying to do this like that: function ajax(){ alert('ajax'); } ajax.last = true; if(window.console) alert = console.log; $.event.special.submit = { add: function ( evt, b ) { var evts = $(this).data().events.submit, i = evts.length; while(i--) { if( evts[i].last === true ) { evts.push(evts.splice(i,1))
Advanced menu with drop down depending on URL...
Hey, I am currently making a menu for a school but i have got slightly stuck :-S I have created it from scratch which was simple but now i think i've hit a tricky bit as i couldnt find the answer anywhere on the web :'( The menu drops like its suppose to but the client wants the menu to now stay open when they are within the drop menu and click on one of the sub-links for example if you click on 'School Information' then Headteacher's Headlines' the menu closes again, he doesn't want that. The domain
JQUERY Autocomplete help
Hi Guys I have a autocomplete working but needs a few tweaks, im not a js man so go easy. Here is the autocomplete - http://www.idream-design.co.uk/autocomplete The problem im having is I dont want the horz scroll bar on dropdown and when I type it doesnt narrow down the search in the dropdown. CODE: <!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 runat="server"> <title></title>
Resetting to top of page - return false; not working
First of all, I know my code is extremely cluttered. I had very specific functionality in mind, and used my elementary knowledge of Jquery to make it happen. Everything is finally working as I'd like, except that whenever the function is called, the page resets to the top. I tried using the return false as is standard, but that doesn't seem to resolve the issue. Here is my code: $(document).ready(function(){ $("#textblock1").hide(); $("#textblock2").hide(); $("#textblock3").hide(); $("#homebutton1").click(function(){
JQuery UI Tabs documentation (my slider, Google Map, sIFR etc. not work when placed in a hidden tab)
Hi everybody Is there a special place, where to discuss the documentation of JQuery? Because I had recently an issue with the JQuery UI Tabs. I needed to hide the inactive tabs without "display:none". But when I used the resolution here: http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F Then I got some issues with white space of the page. So I would suggest this solution: .ui-tabs .ui-tabs-hide { position: absolute;
universal deletegroup click function
Hi Everybody, I am pretty new and I am trying to create universal deletegroup function. This is what I have: $('#DeleteGroup').click(function(){ $('#group_1').remove(); var data = 'group_id=id'; $.ajax({ url: '/async/deletegroup', type: 'POST', .... But instead of having $('#group_1').remove(); to delete group with ID 1, I would like to have some kind of id paramater and end up with something like this: $('#group_id').remove(); I am wondering if there is a way
1.4.2 breaks selection
Hi, I have the following that works in jquery 1.3.2, but is not working in 1.4.2. $(document).ready(function() { $("#selectAll").click(function() { if($("#selectAll").is(":checked")) { $("#checkboxColumn :checkbox:enabled").attr("checked",true); } else { $("#checkboxColumn :checkbox:enabled").attr("checked",false); } }); The html page is like the following: <table> <tr><td><span id="checkboxColumn"><input
Next Page