How can I run .slideUp() and .animate() in sync?
When I write: jQuery(".minimizeToTop").toggle( function () { jQuery("#frontpageflash").slideUp(500), jQuery("body").animate({backgroundPosition: "0 -370px "},{duration:500}); }, function () { $("#frontpageflash").slideDown(500), jQuery("body").animate({backgroundPosition: "0 0"},{duration:500}); } ); The element #frontpageflash slides up and after that body background image position moves but how can
Is there any DIV carousel?
i'm searching for a way to make a carousel out of differents div and not only images that could take the whole screen. that image could help my question : thx for your help
need help with show and hide
Hello, I hope someone can help me. I am in college and learning JS and jQuery. My teacher gave us an assignment to have a simple page that says I like fruit and a simple, underlined "Show More Info" line below it that, when the user presses, it slowly adds 4 fruits. The input, underlined line changes to "Hide More Info" as the 4 fruits come up. Then, when the user clicks the "Hide More Info" button, the 4 fruits slowly leave and the "Show More Info" comes up. This is probably VERY elementary to some
JQuery Sliding Panel with embedded MP3 Player
I'm trying to utilize the sliding panel capabilities (as seen here) in JQuery and I'm running into one issue. The idea is to house a Javascript/Flash based player within the panel. When expanded the user can select to play a song with the player. When collapsed, I want the music to continue playing until user chooses to stop it. I'm including the header script and the in body panel code as well. If need be I can attach the entire HTML/CSS/JS files, just let me know. HEADER SCRIPT <script type="text/javascript">
Smoother Loading Icon?
I am relatively new to jQuery, been using it for about two months and working fine with no previous JS experience. However, when performing many ajax routines I replace or fill a container with an animated loading gif. When the script runs though, at first just the alt text is shown and then the image finally replaces it. Is there anyway to preload just this specific image so it is shown immediatly rather than loading into view?
Debug $.post Question
I need help debugging $.post Here's my code. I've tried 2 different approaches for posting data to "process_customer_review.asp" $.post("process_customer_review.asp", $("#frmCustomerReview").serialize(),function(data){ alert(data); alert("POSTED"); }); $.post("process_customer_review.asp", { task: taskVal, partid: partidVal, rating: ratingVal, first_name: first_nameVal, last_name: last_nameVal, profession: professionVal, requesttype:
403 forbidden ajax call
hi i m new to jquery i have to call a web service http://tt.shine.com/AccountAPI/NewAccountWS.asmx/CheckExistingCompany?text=anyname $.ajax({ type: "POST", url: url, data: "{}", dataType: "html", success: function(msg) { // Replace the div's content with the page method's return. alert(msg); //$("#Result").text(msg.d); } }); this code is working fine in IE but in mozilla its giving 403 forbidden Please help me Thanx in advance
Multiple Pages on Form Submit
Hello, Here is what I want to do, any ideas on how I could do this or places I could begin to look at? All of this is on a single page. When I say taken to the next page I mean the next page is loaded or slides down or what ever is easiest. First page will have a radio button list, on selecting a radio button they are then taken to the next page (which is entirely different depending on the radio button they pressed) Next page will be the exact same thing with radio buttons and they will go to the
Modify href attribute for first level list only
I'm a noob in jQuery and have stuck at this. I have the following HTML code output from a PHP page: <ul class="cats"> <li><span><a href="cant_post_link_yet1">Lifestyle</a></span></li> <li><span><a href="cant_post_link_yet2">Entertainment</a></span></li> <li class="has_child"> <span><a href="cant_post_link_yet3">Technology</a></span> <ul class="subcats"> <li><span><a href="cant_post_link_yet4">Gadgets</a></span></li> <li><span><a href="cant_post_link_yet5">Hardware</a></span></li> </ul> </li> <li><span><a
Passing dynamic values to load() function
Hi all, As i m new to JQuery, I have a question. I m working in ATG framework. I need to pass the dynamic parameters to the load function. PFA the JSP file. $("#subCategory").click(function(){ var productURL = "products.jsp?subid="+subid; $("prod").load(productURL,function(){}); }); This subid i have to get from the <dsp> tags in my jsp.
unhide collapsable div from link on another page.
Here is my jquery code: <script type="text/javascript"> $(document).ready(function(){ $(".servicesexpand").hide(); $(".servicesheader").click(function(){ $(this).next(".servicesexpand").slideToggle(250); }); }); </script> From a separate page, how would i link to a collapsible div and make it expand from the link? It works great from the same page, but i just have no clue how to do it from a different page. Any help is appreciated!
upgrading jquery version
I have been using a plugin using jquery-1.2.1.min.js, I want to now use another plugin on my site that uses http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js I replaced the reference to the jquery file but the original plugin no longer works, it will only work with 1.2.1. Is jquery upgradable in this way or do plugins use specific features of a specific version? The plugin is the lightbox plugin http://leandrovieira.com/projects/jquery/lightbox/ (which uses 1.2.1) but I now also want
Find next select box.
Hi jQ and TGIF! Typical n00blet here, I have tried to answer this myself for the last two days and nothing I try works. I have a form that will have 'n' amount of related or chained select boxes. Meaning, as I view a main record there could be multiple sets of two dependent select boxes in the details window. (so the second select box is populated with children of select box #1) The data in the details drives the number I'll need. So on this record I could only need one set of select boxes (total
Hide div based on checkbox selected
Hi, I have a checkbox which if selected/unselected toggles a div, this works fine. When the form is submitted and returned if the checkbox was unchecked the div is now visible but i want it to remain closed. How can i achieve this with jquery. So when the page loads it see's that the checkbox is not checked and hides the div. JB
IE6 return false not working on html onclick
Ok, so im quite new to jquery but found this bizzar problem just now, If we ignore jquery for a second and consider this scenario, if i have two links like below both with an href and both with and onclick event. The first link will not follow the href because the onclick returns false, and the second link will because the onclick returns true. <a href="/page.html" onclick="return false;">Dont follow</a> <a href="/page.html" onclick="return false;">Follow</a> This works just hunky dory in every
Prevent submit for "ENTER" in particular text field
Hey. I was wondering whether there was a good way to prevent a form from being submitted when the User hits the "Enter" key within a particular text field. I am just not sure whether the code below will work on all browsers and system - maybe a system identifies the Enter key as 0x0a or whatnot. And I'd prefer to have it all in a single event handler. Right bow my code looks like this: // $("#searchField") is a text input element // and $("#f") is a form element around prior element var blockSubmit;
It works but not nicely
I am just working on my first live jQuery project and I could use a little advice. The project is displaying a table of products (cakes in this case) + an image and description of the current product. When the page loads the first product in the list is selected but when the user hovers over a different item in the product list the displayed details change. The jQuery code below works but it isn't very elegant and I would like to improve it. The code to highlight the product is largely duplicated
Jquery Cycle Question
Hi, I want to use the cycle plugin with fade. http://malsup.com/jquery/cycle/ I have the following pictures: picture_only_once.jpg picture1.jpg picture2.jpg picture3.jpg In the first run I want start with picture_only_once.jpg and then picture1.jpg, picture2.jpg. After picture3.jpg I want to continue with picture1.jpg. Any idea ?
Help with adding delay to rotating testimonials
I'm using this script to present a rotating testimonials page with fade-in and out effects. This could be very messy code, I'm not very sure what I'm doing but I've managed to get this working so far. I'd like it to delay before rotating to the next one but I'm struggling without breaking the rest of my code. Thanks for the help! You can see it in action here http://dvgmusic.com/ (document).ready(function(){ $('#testimonials .slide'); setInterval(function(){ $('#testimonials .slide').filter(':visible').fadeOut(3000,function(){
New to jQuery; slideToggle question
Hi, I'm pretty much new to the whole jQuery experience, I'm eager to learn. I've read up on some tutorials on the slideToggle and took it upon myself to try and create something from it. Everything has been going good, but I've hit a snag ;\ <!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>test</title>
Help debugging jqueryUI template with jstree
I am running an admin template that uses a ton of jquery ui and i am also using jstree. On the pages that the tree is not on the top menu works but since we added the tree to the page nothing in the header of the page is clickable. The template worked fine until we added the tree so it is surely a conflict happening with the tree and the page. I am seeking some help on this and am willing to pay for your time Thanks
Beginner jQuery Question about creating DOM elements
hi all, pretty new still to jQuery and trying to figure out where i can reduce typical JS in favour of jQuery syntax. Say i have an array of items in JS. These items would correspond to table rows and the items have array data in them like columns. Example item1Title,item1desc,item1date item2Title,item2desc,item2date .... item7Title,item7desc,item7date. now typically i would loop through the collection and create divs or table cells and rows based on traversing the data in a for each or
Reset position after animation?
I am using animate to switch between two images. I am using setTimeout to make it a continuous loop and am running into a problem with the 1st image. Since it is positioned relative and I am using left: '+=50' it will increment from it's last known position. What I want is for it to move the 50 pixels and then when it is hidden reset to it's previous position. I am having trouble finding if there is a way to set starting position. $('#Slogan').animate({ left: '+=50', opacity: 'toggle',
'Window' is undefined
While attemptinging to run jquery-1.4.2.min.js install I am getting the following error Line: 16 Char: 1 Error: 'window' is undefined code: 800A1391 Source: Microsoft JScript runtime error Any suggestions? Thanks!
Retrieving info using $.get
Is it possible to retrieve an array along with html using the $.get method? Something like so: $('#btn').live('click', function(){ var choices = []; $('input.choice:checked').each(function(i){ choices[i] = this.value; }); $.get('/process.php', { action: 'update', choices: choices }, function (html) { $('#content').html(html); // could I also collect an array here from the process.php file? }); }); I'm sending over an array and storing
Same click function for numerous links
I have links on my page that get their attributes via PHP from MySQL. <a href='#' class='link_click' id='<?php echo $myid; ?>' >My_Link_1</a><br> <a href='#' class='link_click' id='<?php echo $myid; ?>' >My_Link_2</a><br> <div id='my_container'> </div> The '$myid' php variable will be different every time. I then pass the id (via .load() POST) to another PHP script and load that page in my_container. Here is the jquery syntax: $(document).ready(function(){ $('.link_click').click(function(){
horizontal scroller
I have a simple left/right horizontal scroller. However it only works 1 time. How can I get it so it scrolls each time its clicked. Thanks for any help offered. <style type="text/css"> .slideHolder {border:1px solid #000; overflow:hidden; width:500px;} .slideHolderInner {height:200px; position:relative;} .box {background:#FC3;} .box, .box2 {height:200px; width:100%; position:absolute; float:left;} .box2 {background:#c00; margin-left:100%;} </style> <script type="text/javascript"> $(document).ready(function(){
css menu call a jquery function to call a php page
Hello, I have a jquery css menu. Now I want to call a function where I can fill a div with the php page. <script type="text/javascript"> $(document).ready(function(){ I want to call the next function $????????.(function(page){ query = "section=home"; $.get(page,query, function(data){ $("#div_content").html(data); }); And my menu: <li><a href="#" onclick="call_function(secretariaat.php)">Secretariaat</a></li>
CSS Menu Need Changes
Hi All, I need little help to make a css menu, I have a basic menu in CSS but its first tab is working fine and later ones are in simple text. Complete Menu (css + html + images) are in attached zip file. I have download it from a site because, i did not get any from my favorite site jquery.com Thanks, Regards, Rizwan
Hello all
I am new with jquery. I was woundering how to use Jquery to determine the selected rows from a Asp.net gridview when a user clicks a button.
Show/Hide the Div
I have a div which is initially hidden. When clicking a certain link; the div will be shown... The function to reverse the show/hide does not seem to be called. Here is the intialisation : <!-- initially hide div --> <script type="text/javascript"> $(document).ready(function(){ $('#checkbox_grouped_Options').show (); var showtheoptions = true; // set boolean to false }); </script> <script type="text/javascript">
Selecting a specific element by class amongst many others...
I have a list, in which each <li> there is an element, which I´d like to toggle an event when clicked on it. <ul> <li class="someclass"> <a href="#" class="foo">click here</a> <div class="bar"> show this on click </div> </li> <li class="someclass"> <a href="#" class="foo">click here</a> <div class="bar"> show this on click </div> </li> </ul> Using jquery I should be able to do something like this: $(document).ready(function()
Click event headache
Hello, I have an interactive grid table. Columns, that are using values from a list, are solved this way: Markup: <td id="..1"><div class="select">....</div></td> <td id="..2"><div class="select">....</div></td> <td id="..3"><div class="select">....</div></td>jQuery: $('div.select').click(function() { . var selDiv = this; $(selDiv).hide(); $('#selectbox').show().change(function() { ... $('#selectbox').hide(); $(selDiv).show();
Loading site leaves menu up for a few seconds
When I first access the homepage of my site the menu shows itself over the top of my main menu and stays for a second or so. Is there a way to synch up the page load with the way the menu is displaying. You can see an example of this on www.test-filmetrics.com. It is not as noticeable in Chrome, but in IE it is very noticeable.
Question about a Image carousal
I am creating a image carousal for a project, my client wants it to slide through animation and stop when it reaches the end of the line, I have then next button working but I am getting many errors with the previous button. Anyone have any ideas $(function(){ var maxView=$('ul#viewer').innerWidth(); var minView= maxView-$('#container').innerWidth(); var $myView=$("#viewer"); var size=$("li.photoHolder").innerWidth(); var current =maxView; $("#btnNext").attr("disabled", false);
the limits of AJAX?
I'm working on several new sites. I'd like to AJAXify as much as possible. I use PHP to generate JSON data from my MySQL tables and with jQuery's getJSON I then pass them to DIV's on the site. This is all very nice, but now I have a problem. The contents of the DIV's seem to be unaware of things like mouse clicks, hovers and the likes. So despite the fact that I defined the CSS ID's and wrote some jQuery code there's no response. I think it has something to do with document.ready (the content is
this.reset() doesn't support this method
Hi, I'm a newbee to JQuery and started with this Tutorial: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery I have a problem with the below function in the tutorial - it sais that the Object (this) doesn't support this property or method. Can anyone help me figuring out what to do instead? $(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); }); Kind
New user problem.
I have a little problem to get inputs value from <input> items. I have a form with some fields, name, email ... and when i want to check users input values, i get an empty string. here is my form code : <FIELDSET> <LEGEND align=top>Contactez Nous</LEGEND> <form id="formul"> <table cellpadding="0" cellspacing="5" width="100%"> <tr> <td>Nom : *</td> <td><input id="nom" name="nom"
Getting Started: Dreamweaver or jQuery
Background: hand coded a thousand (or so) web pages since the early 90's. Always avoided WYSIWYG packages (FrontPage left a bad taste in my mouth). But now, things are getting much more complicated, and I have been looking at Dreamweaver CS4. I am taking some on-line Dreamweaver CS4 tutorials. I just heard about jQuery this morning. My objective is for my websites to work in multiple platforms with the least number of CSS hacks that I usually don't understand -- and don't trust to survive future
Loading a modal dialog window URL with tabs instantiated
Hi and thanks for your time. After struggling to get a modal window dialog to both load a URL and theme correctly, I fixed it by realizing I'd scoped my theme. Quick find-and-replace of the parent style class in the theme sheet fixed it and now my modal dialog - which loads a separate page - looks themed out just fine. However, now - inexplicably - no tabs. I've tried stripping the loaded URL of its references to the scripts, of its tab instantiation javascript, etc. to no avail. I've tried instantiating
Next Page