jQuery Forum

Using JQM for the first time and attempting to build a web app which has the standard 'single column' view on smaller viewports but a double (or even treble) column view on larger viewports by using responsive web design CSS. Is this possible with JQM? I can either have all the JQM 'pages' in a single HTML page or AJAX'd in (if that makes any difference)? 

This page works as needed in IE8+, FF, Safari etc. Only IE7 exhibits the problems. Does anyone know why?

As you can see I am building a page which has an image cycle/carousel. On each of the images I would like to also have a zoomable loupe - I am using the jQzoom plugin to achieve this. Hover over the first image and you will see the zoom appear.

I have a form field that has a default value of '0.01' and I've added buttons so a user can increment up and down e.g. 0.01, 0.02, 0.03 etc. Here is the HTML:

I have a single page which uses tabs to segment the content. Alongside the tabs themselves is a button for 'Help'. I'd like this button to open a different DIV depending upon the tab that is currently being used.

For example, if I am on a tab for 'Ben', if I click the 'Help' button I want the 'helpBen' DIV to slideToggle. If I am on a tab for 'Paul', when I click the 'Help' button I want it to open the 'helpPaul' div.

Some extra needs:

1. switching to a different tab should close the currently open help div (e.g. helpBen or helpPaul)
2. There should only be one help div (e.g. helpBen or helpPaul) open at any one time.

I partly solved this with the following code but with erratic results and I'd like to know what I'm dong so wrong!

Here is the HTML for the help button:

1. <a class="helpTrigger" href="#">Help</a>
   

The help DIV's are like this:

1. <div class="helpBen">help relevant to Ben section</div>
2. <div class="helpPaul">help relevant to Paul section</div>

The CSS for .help is display: none; by default so none are shown from the outset.

And here is the jQuery

1. $(".helpTrigger").click(function(){   
       if (location.hash == '#Ben') {
       $(".helpBen").toggleClass("help");
       return false;
       }
       if (location.hash == '#Paul') {
       $(".helpPaul").toggleClass("help");
       return false;
       }
   });
2. // help button
       $(".helpTrigger").click(function(){
       $(this).toggleClass("hover");
       $(".help").slideToggle("slow");
       return false;
       });
   

In the words of Dr Evil, "throw me a frikkin' bone here..."

I have quite a few links or input buttons on my page which should toggle one of two folders: .negative and .postive

However, whilst the code below works, when I click a .posHide button it toggles ALL the .positive and .negative DIV's. I've tried using .closest() to get this to work but can't. Can any jQuery blackbelt explain to me how I change the code below so that each instance of .posHide only toggles the nearest .positive and .negative divs?

1. // toggle error messages
   $(function() {
    $('a.posHide,input.posHide').click(function() {
   $('.positive').slideToggle('slow');
   $('.negative').slideToggle('slow');
   return false;
   });
   });
   

Any help here much appreciated as I'm a bit of a jQuery novice...

I want the Tooltip (the one I'm using is the jQuery Tools tooltip) to fire each time the mouse goes over the entire table row. At present it only fires when the mouse goes over the final <td>.

Here is the table markup:

1. <table width="310px" class="dataTable" border="0" cellspacing="0" cellpadding="0">
      
     <tr class="data">
       <td>24 hours</td>
       <td>1.73</td>
       <td>14.55</td>
       <td><a class="dImage" href="#">+</a>
       <div class="tooltip"><img src="images/diagram1.png" alt="diagram1" width="159" height="231" style="margin-left:65px;"/></div></td>
     </tr>
    
   </table>
   

The only slight complication is that I currently have some jQuery adding a zebra effect to the table rows. So if I could keep the Zebra striping along with the Tooltip activation that would be awesomesauce.

Here is the jQuery for the Zebra stripping:

1. //Zebra Striping       
   $('tbody tr:odd').addClass('zebra');
   $('tbody tr.data').mouseover(function(){
       $(this).addClass('zebraHover');
     });
     $('tbody tr.data').mouseout(function(){
       $(this).removeClass('zebraHover');
     });
   

And here is the relevant jQuery for the Tooltip firing:

1. $(".dImage").tooltip({
   offset: [10, 2],
   relative: 'true',
   effect: 'slide'
   // add dynamic plugin with optional configuration for bottom edge
       }).dynamic({ bottom: { direction: 'down', bounce: true } });
   

I've tried simply adding the class="dImage" to the <td> tag e.g. <td class="dImage"> but although the tooltip kind of fires it doesn't include the image, it loads the next bit of text.

Anyone have requisite Ninja skills to make this work?


I'm building up a site with quite a bit of jQuery. Everything works fine except for the footer of the page which uses a toggle to show/hide some extra links.

It opens and closes fine but in Firefox 3.6 (PC only - works fine on the Mac) if you expand the links and then click 'Click for less links' and immediately move your mouse away, the screen sort of flashes and reloads. It works fine on every other browser except this - anyone know why?

EDIT: Turns out it's a known firefox issue - removing the toggle speed helps (but looks ugly) - other than that the only solution is to not have an expanding DIV near the bottom of the page if you don't want Firefox to display the issue.

I'm creating a list of items which visually look like checkboxes. They will work similar to the ones used on eBay that allow you to select only new/used items. Mine are a little simpler though. Here is the markup:

1. <li>
                       <a href="#" class="catHeader trigger">Designers</a>
                      
                           <ul class="nav-ul toggle_comtainer">
                          
                               <li><a href="index.html" id="d1" class="select">Stills</a></li>

And I've written a little jQuery to add a class of 'selected' to the item when they are clicked:

1. $(document).ready(function(){
       //Switch the state of the list by adding 'selected' class
       $(".select").click(function(){
           $(this).toggleClass("selected");
          
           });
   
   });
   
   

The CSS simply moves a background sprite that shows a checkbox either ticked or not depending on the 'selected' class.

However, my question is, I'd like the class of the item to STAY selected if the <a> tag is clicked. However, as it is loading another page (it will eventually call some products from a DB but linked to same page for now to test) it is currently 'resetting' to its un-selected state (e.g. the extra 'selected' class is no longer applied.

How can I retain the 'selected' class on the element when it's parent <a> tag is clicked?

I have about 13 ul li a items in a list and some have nested lists within them e.g. ul li ul li a and some don't. I want to prevent the default action on only a elements that have nested lists within them but not prevent default action for ones that don't. Here's an example of the markup...

1. <ul id="mainmenu-nav">
2. <li class="li-nav">
3.     <a href="#">Section with subs</a> <!--don't want these to follow-->
4.                 <ul class="ul-nav">
5.                   <li class="li-nav">
6.                               <a href="#">Sub1</a>
7.                   </li>
8.                   <li class="li-nav">
9.                           <a href="#">Sub2</a>
10.                   </li>
11.         </ul>
12. </li>
13. <li class="li-nav">
14.  <a href="#">Section without subs</a> <!--DO want this link to follow-->
15. </li>
16. </ul>

As a workaround I have re-ordered the 'parent' ul li items so those with nested ul li a elements are at the bottom and used the following jQuery to prevent the default behaviour on the first 9 items:

1. $('ul#mainmenu-nav > li > a').filter(':not(:first,:gt(8))').click(function(e) { e.preventDefault();
2. });

However, instead, is there a way to tell jQuery to only apply this preventDefault to ul li a elements that have ul li a descendants/children (not sure of correct terminology here) so I can have the list items in any order?

I'm thinking there must be something to do with child selectors or something??

I have an accordion effect setup on a a nested list. The effect is working great however, I want to retain the menu state (e.g. which section is open) when a user clicks a particular link and the site loads a new page.

How do I do this with jQuery?

Here is the jQuery I have currently:

1. $(document).ready(function(){
2.   $('.boxCategories ul > li ul')
3.     .click(function(e){
4.       e.stopPropagation();
5.     })
6.     .filter(':not(:first)')
7.     .hide();
8.    
9.   $('ul#mainmenu-nav > li > a').click(function(e) { e.preventDefault();
10. });
11.    
12.   $('.boxCategories ul > li, .boxCategories ul > li > ul > li').click(function(){
13.     var selfClick = $(this).find('ul:first').is(':visible');
14.     if(!selfClick) {
15.       jQuery(this)
16.         .parent()
17.         .find('> li ul:visible')
18.         .slideToggle();
19.     }
20.    
21.     $(this)
22.       .find('ul:first')
23.       .stop(true, true)
24.       .slideToggle();
25.   });
26. });

And here is an example of the markup:

1. <ul id="mainmenu-nav">
2.         <li class="li-nav">
3.             <a href="http://www.link.co.uk/cat_3.html">Section 1</a>
4.             <ul class="ul-nav">
5.                     <li class="li-nav">
6.                          <a href="http://www.link.co.uk/cat_12.html">Product</a>
7.                      </li>

I'm very much a beginner so feel free to explain it like you would to a five year old ;)

I am using the following jquery plugin:

http://plugins.jquery.com/project/autocompletex

Besides the link to the relevant JS I have this piece of code in my page <head> </head> section:

<script type="text/javascript">
$().ready(function() {

   function findValueCallback(event, data, formatted) {
      $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
   }
   
   function formatItem(row) {
      return row[0] + " (<strong>id: " + row[1] + "</strong>)";
   }
   function formatResult(row) {
      return row[0].replace(/(<.+?>)/gi, '');
   }
   
   $("#state2").autocomplete(topics);


});

</script>

However, because there is an <li> in there - the page won't validate at http://validator.w3.org/

Anyone know how to fix this?

I have a chunk of jquery that is working in all browsers except IE.

I know it's possible to target a piece of code AT a specific browser but is there any way to EXCLUDE it from a certain browser?

I'd be happy for IE to just not see this chunk of code...?

I'm a jquery novice. In fact even more novice than that - just can't think of a suitable description!

I'm sure this is a simple fix for an experienced jquery user...

I'm building my first jquery heavy site. Only problem I haven't been able to sort is with a jquery plugin called SimpleFilter. It produces an error in Internet Explorer (all versions from 6 up).

Page works fine in Firefox and Safari but I get a script error in IE.

Here is the piece of code in that HTML page:

<script type="text/javascript" defer="defer"> $('#state2').simpleFilter({
  data: states,
  useQuicksilver: false,
  maxListEntries: 10,
  position: $.simpleFilterData.POSITION_ABOVE,
  waitTime: 1000
})
.bind('input.simpleFilter',
  function(jQEvent, text) {
    if (typeof(text) != 'underfined') {
      console.debug('selection:', text);
    }
  }
);</script>

I hope someone can point me in the right direction! Thanks in advance for any pointers...