Image Crossfade Not Working with Div Load
Hello All- I hope you can help me out here. I have a page where I am using image crossfades when the mouse rolls over the images in a navigation bar. I use the main navigation bar to dynamically load a sub-navigation bar in a different div when the user clicks. On page load, all of the rollovers work fine, however when I click a main nav item and load the appropriate sub-nav loads, the crossfade on the new sub-nav does not work. I have to believe that this is a timing issue as far as when the scripts
Need help adding a preloader
Hello, I'm looking to add a preloader image when content is loading into a <div> and then hide the image when it has loaded. Any ideas on how i could do this? Here is my code so far: <script type="text/javascript"><!-- $(document).ready(function(){ $("#feeds").load("Untitled-1.html"); }); //--></script> <div id="feeds" class="loading"></div> </body>
Using jQuery for unit conversions (m to feet) "on the f
Hi all, I run a yacht sales website. In our database we list boats by "meters", however many people want to see "feet" measurements. To save us having to make a "feet" field and enter the feet for every boat, I thought we could simply include a script in our "boat detail" template page that grabs the meters value (by id I guess...thanks to JQuery) and writes the feet equivalent next to it in the html. It's one of those things that I am sure is "easy" to do if you know how! It would be a great learning
[jQuery] making the accordion remain open
Hi, I've ran into a problem using the accordion from http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ Currently to keep the accordion open while navigating a site i add p=1 (or whatever number it may need) to the url, which works, but as soon as I need to pass other variables through the url it breaks down and won't remain open. So while http://domain.com/details.aspx?p=2 will work fine, http://domain.com/details.aspx?p=2&id=4 doesn't work. Now I'm wondering there must be another way
jQuery addClass() task, or how to use index instead of ID
Hi everyone, i have this code: $(document).ready(function() { var element = $(".mainSubNav ul li a"); element.mouseover(function() { idLi = $(this).attr("id"); $(".mainSubNav ul li a#" + (parseInt(idLi) - 1)).addClass("bgNone2"); }).mouseout(function() { $(".mainSubNav ul li a#" + (parseInt(idLi) - 1)).removeClass("bgNone2"); }); }); how can I change it that it will be catching index of LI A elements, instead of ID's ?? because I don't want to use ID's for A elements if I can use index "[0,1,3,...,i]"
IE Developer TOolbar
I'm confused about this ... i already tried to install it on 2-3 systems, but never see any change. Even if there is shown an error - it display the same lame unusable JS informations. sourcecode view doesnt changed too. i am too stupid for it ? If i take a look at "Addons", IE Developer Toolbar & IE Developer Toolbar BHO are activated. I'm using IE 7, but i remember to try it at IE 6 too Thanks for help
[jQuery] Fading out the CONTENTS of a form field (ie: the value)
Hiya guys, I've put together a basic handler for clicking on a field. It simply empties the field for you when selected, and if you don't enter anything it puts the default text back in: $("#field_154038").focus(function () { if ( $(this).val() == "Please enter your postcode" ) { $(this).val(""); } }); $("#field_154038").blur(function () { if ( $(this).val() == "" ) { $(this).val("Please enter your postcode"); } }); This works fine, but an additional nicety I tried
selector after an innerhtml
Hi All, I'm sure this is a simple one but it's doing my head in! Simply put, I need a jquery selector to work on content that has been added via innerhtml or append from an ajax query. A cut down version is below. Click to add the imported data and then hopefully the selector for the imported data should also work but it doesn't. I'm assuming it's something along the lines of the content not being in the original dom so jquery isn't aware of it. Any help gratefully accepted! <html> <script type="text/javascript"
[jQuery] Vallidation Problem
Hai, I am using Jquery for checking textboxes is entered or not.If the text entered is correct then i want to show a message success using jquery.How is it possible. I will attach the code below: <table class="style8" id="myTable"> <tr> <td class="style11"> <dxe:ASPxTextBox ID="tbCustomerName" CssClass="large required email" runat="server" Width="170px"> </ dxe:ASPxTextBox> </td> <td> <asp:RequiredFieldValidator ID="rfvCustomerName" runat="server" Display="Dynamic" ControlToValidate="tbCustomerName"
Help needed with showing image while iframe is loading?
Hi, I have an <iframe> with src="". When a user clicks on a link with the class "chart" the <iframe> src will change to a URL and the URL will display in the <iframe>. However this takes a few seconds as the page being loaded is quite big. Is there any way if displaying a simple loading image while the page is being loaded into the <iframe> I'm really stuck on this one and can't find away around it. Here is my code so far: $(document).ready(function(){ var alreadyloaded;
Help selecting elements for accordian
I'm working on an accordion script that is applied to some html created from a Wordpress plug-in. Unfortunately, the markup the plug-in gives me is less than ideal for accordians: <h3 class="tab active">October</h3> <div class="tour-month"> </div> <h3 class="tab">December</h3> <div class="tour-month"> </div> <h3 class="tab">April</h3> <div class="tour-month"> </div> <div class="tour-month"> </div> <div class="tour-month"> </div> My problem is that I have a few lines of jQuery I'm using for an accordion
trying to add fade effect
Hi I use a jcarousel in my page as a thumbnail panel, part of a photo gallery. When I click on each carousel items, there's an image appearing next to carousel. The code is based on changing one image's src. <div id="photo"><img id="photograph" src="images/gallery/img1.jpg" /></div> this is the carousel: <ul id="mycarousel" class="jcarousel jcarousel-skin-tango"> <li><div class="thumbnail"><img src="thumbnail.php?filename=images/gallery/img1.jpg" onclick="document.getElementById('photograph').src
JQuery tabs dont work in Firefox
Hello guys. I have JQuery tabs from this example(http://docs.jquery.com/Tabs) on my page. I have those green once. They work perfect in IE7 but in firefox all i see are the ul><li> links. Here is the small javasctipt code i use for tabs: <script src="js\jquery-latest.js"></script> <link rel="stylesheet" href="js\css\flora.all.css" type="text/css" media="screen" title="Flora (Default)"> <script type="text/javascript" src="js/ui.core.js"></script> <script type="text/javascript" src="js/ui.tabs.js"></script>
[jQuery] accordion box query
I'm using the Accordion #1 example found on: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ Rather than stick with p tags in the accordion, I want to have a form in one of them. I added $(".accordion form:not(:first)").hide(); in the hope it would hide the contents until expanded - this didn't work sadly. Any thoughts on how to fix? Thanks, S
[jQuery] Ajax Request - Success and Failure Events
Hi All, I was reading the jQuery help docs (in the Ajax Events section), and I came across this statement: "you can never have both an error and a success callback with a request" Does anyone know why you can't do this? I can think of a number of situations where you would need to cater for both events.
[jQuery] Equal height containers with expand abilities
Hello, I am trying to find a way to do the following. I have included some code (link below) of the basic layout for the question at hand showing two examples of content amount possible. The Goal: When someone lands on the page there are 3 containers in a row. All three containers are of equal height regardless of the amount of content in them. If there is more content then can fit in the given height of a container, a “…more…” link is added. When the “…more…” link is clicked on, the container expands
call a php function with onclick
Hi, I would like to know how it is possibile to call a php function inside an onclick=function (....), I try to explain me better I have 2 php functions : 1. add_friend($me,$friend) and 2. remove_friend($me, $firend) I would like to have 2 links in this way: <a href="#" id="add-friend" onclick="add_friend($me,$friend)>Add Friend</a> <a href="#" id="add-friend" onclick="remove_friend($me,$friend)>Remove Friend</a> when I click on the first link I call the add function when I click on the other the
[jQuery] Selecting multiple table rows with jQuery and Tablesorter
I've been looking around, but have yet to find the right jquery solution for selecting table rows using jQuery and the Tablesorter plugin. I've created a widget to toggle css classes and highlight each selected row, but I'm looking for more functionality than that. I've also seen other plugins like Ingrid and Grid, but they don't have the control I need. Specifically, I'm looking to use 'click' to select a row, 'ctrl+click' to select multiple rows, keyboard shortcuts to select all rows ('ctrl+a')
[jQuery] jquery newbie help please!
Hi, I'm new to jquery and am having a couple issues on a site I've designed. I am using 2 jquery techniques: dd accordian and a animated image load i sorta hacked together. Both have slight glitches that I can's seem to figure out. Can someone please offer some guidance on either of the following issues on http://www.elizabethkosichnewyork.com/: 1. DDAccordian: It seems to be mainly an IE6.0 issue, though I've run into it on Safari as well, but there is some overlapping that occurs between the hidden
Jquery, PHP, AJAX, paginated form submission tutorial?
Hello all, I am hoping that someone may be able to point me in the direction of a tutorial that goes from beginning to end and covers the topic of Jquery, PHP, AJAX and a form that updates a specific DIV/AREA with new data pulled from a mysql database on submit. *That last one is the kicker. Basically, I have a comment form that I am trying to make more dynamic. I want the form to update a specific area of my page when I submit it. The other tricky part is that the form will have to do this while
[jQuery] Protecting against multiple loads of jquery.js et.al.
I'm working on a highly asynchronous and compartmentalized component system where components each manage their own list of assets including js and css files. I've recently started using jQuery to implement popup dialogs that use an Ajax callback to populate the dialog with one of my components. This component needs to work in both a full page context and within a div based dialog. I don't want the component itself to have to know whether it's being used in one context or the other. As it turns out,
[jQuery] Hover bug with scrollbars
On elements with overflow:auto; set so they have a vertical scrollbar, the on-hover event fires when the mouse hovers over the element. When the mouse leaves the element by passing over the scrollbar, the off- hover event does not fire. I've tested this on Firefox 3, and it seems to be reproducible. Is this a jQuery bug?
[jQuery] Treeview - close/hide list item when list item/submenu item is clicked
Hi, I really enjoy this plugin, great job to all the folks who have made it possible. I'm using treeview to have as an FAQ page. Right now, to close out a submenu, the user has to reclick the parent menu. I would like to add a feature where the viewer can click the an li item/submenu (in this case, an answer) it would close out that answer /list/submenu. this should paint a better image of what im talking about: <ul> <li> question 1 ---- the viewers click the question to show/hide an answer but only
[jQuery] Only Fire Mouseover If Not Already Active
Hey, I have a row of icons that each have a mouseover function. I'm using the "drop" animation to produce a popup below each icon on mouseover of the icon. The problem is that the "drop" animation makes the popup flow down over top of the icon and then it stops below the icon. That being said, while the "drop" animation is happening, the popup covers the icon which in turn makes the page think the user has just "mouseout" and then when the popup stops below the icon, it thinks the user has "mouseover"
[jQuery] ANNOUNCE: Context Menu Plugin v1.0 - new plugin with themes, highly extensible
I've just released version 1.0 of my Context Menu plugin: http://plugins.jquery.com/project/cmenu ( plugin home: http://www.javascripttoolbox.com/lib/contextmenu/ ) Here is the description from the plugin page: This plugin enables you to display a custom context menu on right click in browsers that support it. This is commonly used in web applications that are simulating desktop behavior or wish to add advanced functionality for their users. There are other context menu plugins - so why did I write
[jQuery] ui.tabs + cycle + WebKit = not working
Hello, I am running into a problem on my website when the jQuery cycle plugin is used with ui.tabs. When a portfolio item has multiple images, the Cycle plugin is used for pagination. I chose this plugin since it's easy to add a description / file links / web address and, I didn't want image thumbnails so pagination is the best option. http://www.petersurrena.com/ For example, this works but with multiple projects you end up with multiple pager divs which overlap. Not good. It seems pointless to
[jQuery] Good MVC tutorial?
Hi all - I'm looking for a good tutorial on the MVC pattern in the context of jQuery AJAX apps. (I'm using a PHP back-end, if that matters.) I understand basic design patterns such as the singleton, the strategy pattern, etc., but I've never really grokked MVC. From what I know of it, it seems like it's especially appropriate for complex AJAX apps (please correct me if I'm wrong). I've Googled, but haven't found much. Is there anything out there that (1) provides a good explanation of MVC, and (2)
[jQuery] Web page navigation question....
Hello, I am new to Javascript and Jquery and I have a question on a web page I am building. I have an interactive form where I have two columns, one column holds the form the second holds the results. When the user comes to the page, the form and the result window are blank. The form allows the user to query a database and retrieve information and the information is displayed in the results window. So here is my problem. After the the form is filled out and submited, a cgi script runs and submits
[jQuery] JQuery Cycle + lazyload
I have a photo gallery using cycle and it works well. I am running into an issue with slow connections because I have a gallery with 60+ large images in it. I figured I could use lazyload to remedy the problem and have the images only load when they are called(or next to be called). I can't seem to get lazyload and cycle to work together though... any ideas? Thanks, TR Development is here: http://www.megperotti.com/weddings/index_weddings.php
[jQuery] [tooltip] fixing the tooltip position relative to tooltipped element's position, not mouse position on event firing
Hi, So far, tooltip is working great. Only one problem - currently the tooltip's position is offset from the mouse position when the mouseover event fires. I'd like to fix the tooltip's position as always relative to tooltipped element's position (currently an image - I'd like the tooltip to always overlap the various images at the same relative spot, no matter where the mouse approaches the image from). Is there a way for me to do this? I've tried changing the following lines in update(): left
[jQuery] addClass / removeClass Multiple Divs
Hi all, First off, I am a bit new to jQuery so please excuse any newbie-ness. Thank you all for the great group. It is extremely informative and I hope to be able to give back soon. I have been working with multiple jQuery scripts at http://dev.betweenbrain.com/telos_systems/Support/supportRev3.5.html. Everything seems to work as desired, except I am adding / removing a class on .click to the links within the lower-left (FAQ) accordion menu. The class is added fine, removed from siblings within the
[jQuery] Plugins website in IE7
Is it just me or is the plugins page (plugins.jquery.com) a little broke in IE7? The footer appears to ride up the page and makes all category links unclickable. Looks fine in firefox 3. I think a little float clearing at the bottom of the category list should fix it, but I'm no expert. Maybe they're still working out kinks, and if already reported, apologies for duplication. Adam
[jQuery] pngFix and display:none
I am seeing an issue in that POS browser IE6 that goes like this... pngFix() works only on images that are displayed. I have some hidden divs (display:none) that contain png files that are reveled when needed. But they are missing when I show() them. Any ideas what is happening to them?
[jQuery] How to address JSON data once returned with getJSON ?
Hello, I'm retrieving JSON data from my own domain but don't understand how to access the data which is returned, I can see it from firebug. In the example below I want to create a list of dates My code is : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html><head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $.getJSON("readings.json",function(reply){ alert("Got it back"); $("#readings").append("<ul/>");
[jQuery] [validate] Validation max number of checkboxes
Hi, I'm trying to create a validation that would ensure that users select between 1-5 options out of a list of checkboxes with the same name. For example: Pick your favorite color (required, maximum of 5 selections). Is there any way to do this with the validate plugin? Thanks!
[jQuery] How To Create Array(s) in jQuery?
It seems that the default format for creating Arrays in JavaScript is not compatible with jQuery. Please post the proper method to create Array(s) in jQuery. enjoy :)
[jQuery] jcarousellite vertical issues
If I leave the jcarousel with default settings with four images it works fine. Shows three thumbnails that I can cycle through to see all four. Now if I change it to be vertical: $(".vertical .gholder").jCarouselLite({ btnNext: ".vertical .next", btnPrev: ".vertical .prev", vertical: true }); Then it displays vertical, but it shows all four thumbnails, instead of three, and the next and prev links don't cycle the images anymore. I tried even adding a vertical class to the appropriate div and
[jQuery] Disabling jQuery on printing?
<script type="text/javascript" src="jquery-1.2.6.min.js" media="screen, projection"></script> I wanted disable jQuery on printing, but added the media tag didn't work for me. Is there a proper way to do it? I also tried disabling a function at printing, which also doesn't work: <script type="text/javascript" media="screen, projection">$(function() { $('.map').maphilight(); });</script>
[jQuery] Disabling Textarea, Select
Hi, I've hit a bit of a snag in some code I've repurposed for a form I'm creating: $(document).ready(function() { var termsagree = $("#termsagree"); var inital = termsagree.is(":checked"); var terms = $("#contractualreqs")[inital ? "removeClass" : "addClass"]("gray"); var termsInputs = terms.find("input").attr("disabled", !inital); //$("#contractualreqs").hide(); termsagree.click(function() { //$("#contractualreqs").show(); terms[this.checked ? "removeClass" : "addClass"]("gray"); termsInputs.attr("disabled",
[jQuery] Table Sorter - Freeze Panes (like Excel)
Hi. I know there are solutions that work for freezing the TH or first row of a table. However I can't seem to find one that also has been tested with table sorter. Suggestions? Thanks, D.
Next Page