jQuery Forum

1. $('a#test').addClass('selected');

1. $('a#nav').click( function(e) {
2.     e.preventDefault();
3.     $('#test').animate(function() {
4.         $('#test').addClass('selected'); }, 600);
5. });  
   

1. $('a#nav').click( function(e) {
2.     e.preventDefault();
3.     $('#test').animate(function() {
4.         $(this).addClass('selected'); }, 600);
5. //      ^^^^^^
   
6. });   

1.   $('a#menu').click(function(e) {
       e.preventDefault();
       
       if (!$('#main_nav').is(':visible')) {
           $('#main_nav').fadeIn(1400);
           $(this).addClass('active');
           $('#wrapper').animate( { opacity:.4 }, 600);
           
       } else if ($('#main_nav').is(':visible')) {
       
       /*    following three lines the same as for
           $('#wrapper').click() below
           how do I do this w/o repeating this code?
       */
           $('#main_nav').fadeOut(1000);
           $(this).removeClass('active');
           $('#wrapper').animate( { opacity:1 }, 600);
       }
       
       /*
    (in case you were thinking of fn toggle(): (code below)
    I can't use this fn, b/c then, after I  close nav by clicking on the page(i.e., by activating $('#wrapper').click()), afterwards I have to hit the menu CTA twice to open the nav..  
     I have tested this again and again and can reproduce this behavior every time..)
       */
       
   });
   
       
   /*    if nav is open, click anywhere on pg to close it
   ****************************************************/
2. 
       $('#wrapper').click(function() {
           if ($('#main_nav').is(':visible')) {        
               $('#main_nav').fadeOut(1000);
               $('a#menu').removeClass('active');
               $('#wrapper').animate( { opacity:1 }, 600);
           }
       });
       
   
   

1.     $('a#menu').toggle(
2.         function(e) {
3.             e.preventDefault();  //  do I need this here?
4.             $('#main_nav').fadeIn(1400);
5.             $(this).addClass('active');
6.             $('#wrapper').animate( { opacity:.4 }, 600);
7.         },
8.         function(e) {
9.             e.preventDefault();
10.             $('#main_nav').fadeOut(1000);
11.             $(this).removeClass('active');
12.             $('#wrapper').animate( { opacity:1 }, 600);
13.         }
14.     );
15.    
16.     $('#wrapper').click(function() {
17.         mainNav_pos = $('#main_nav').css('left');
18.        
19.         if ($('#main_nav').is(':visible')) {   
20.             $('#main_nav').fadeOut(1000);
21.             $('a#menu').removeClass('active');
22.             $('#wrapper').animate( { opacity:1 }, 600);
23.         }
24.     });

1. queryStr = "?namePicked=" + names[0];
2.        
3. $.ajax({ url:"string.jsp" + queryStr,
4.     type:"POST",
5.     success:function(data){
6.         $("#outputString").html( data );
7.     },
8.     error: function() {
9.          $("#outputString").html("fail");
10.     }
11. });
12.        

1. $.ajax({ url:"string.jsp",
2.     type:"POST",
3.     data:{namePicked:names[0]},
4.     success:function(data){
5.         $("#outputString").html( data );
6.     },
7.     error: function() {
8.          $("#outputString").html("fail");
9.     }
10. });

1. if (names.length > 0 ) {
2.     $.ajax({ url:"array.jsp",
3.         type:"POST",
4.         data: {names:names},
5.         success:function(data){
6.             $("#outputArray").html( data );
7.         },
8.         error: function() {
9.              $("#outputArray").html("fail");
10.         }
11.     });
12. } else {
13.     $("#outputArray").html("done -- no more names in list");   
14. }

1. $('#photoImg').swipe({
2.   swipeLeft:function(e) {
3.     window.location = 'photos.php?pn=' + phNoNext;
4.   }
5. });

1. $('#photoImg').swipe({
2.   swipeRight:function(e) {
3.     window.location = 'photos.php?pn=' + phNoPrev;
4.   }
5. });

1. Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

1. //    default 'left' setting set at -200px in CSS... tried setting in JS for testing, doesn't work...   
2. //    $('#main_nav').css('left',-200);
3.     mainNav_pos = $('#main_nav').css('left');
4.     console.log('mainNav_pos -- ' + mainNav_pos + ' -- initial');
5.    
6.     $('a#bars').click(function(e) {
7.         e.preventDefault();
8.         console.log(mainNav_pos);
   
9.         if (mainNav_pos < -100) {
10.             console.log('hidden');
11.             $('#main_nav').animate( { left:1 });
12.         }
13.         if (mainNav_pos > 0) {
14.             console.log(mainNav_pos);
    
15.             $('#main_nav').animate( { left: -200 });
16.         }       
17.     });

1.     $('div').animate({width: 'toggle'});

1.         data = "namePicked=" + names[0];
2.        
3.      $.post( "info.jsp?", function( data ) {
4.         $( ".outputDiv" ).append( data );
5.         // window.location='info.jsp';
6.      });

info.jsp

1. <%
2. String nameChosen = "";
3. nameChosen = getParam("namePicked", request);
4. %>
5. <%  out.println(nameChosen);  %>

(I have a special fn to get params, that's why not using java conventional getParameter I use this everywhere.. it works fine... so that's not the issue....)

1. $('body').on('click', '#hideProds', function(e) {
2.     $(this).fadeOut();
3.     $('#prodsAll').hide();
4.     $('#showAll').fadeIn();
5. });

1.    $('a').attr('href','#');
2.   $('a').css('border','solid 1px green'); // testing
   

1.         if (typeof propVal2 === 'string') {
2.             console.log('string');
3.        
4.         }  else {
5.        
6.         //    if ( typeof propVal2 != 'string' && propVal2.length ) {   
7.             if ( $.isArray(propVal2) ) {// not being met..
8.                 console.log('array');
9.                                    
10.        } else if ( !$.isArray(propVal2) && (typeof propVal2 != 'string') ) {
11.                 console.log('obj');
12.             };
13.         }

1. { "products" : [
2.         { "camera":
3.             {"price": "$890.00",
4.              "brand": "Nikon",
5.              "model": "D700",
6.              "more info" : {
7.                 "from": "Japan",
8.                 "weight": "4 lbs",
9.                 "year": 2012,
10.                 "colors" : ["red","blue","green","black"]
11.              }
12.             }
13.         },
14.        
15.         { "laptop":
16.             {"price": "$980.00",
17.              "brand": "Toshiba",
18.              "model": "L989",
19.              "more info" : {
20.                 "from": "South Korea",
21.                 "weight": "5 lbs",
22.                 "year": 2011,
23.                 "colors" : ["red","blue","green","black"]
24.              }
25.             }
26.         }
27.     ]
28. }

1.     <li>camera
2.         <ul>
3.             <li>price: $890.00</li>
4.             <li>brand: Nikon</li>
5.             <li>model: D700</li>
6.         </ul>
7.     </li>
8.     <li>laptop
9.         <ul>
10.             <li>price: $980.00</li>
11.             <li>brand: Toshiba</li>
12.             <li>model: L989</li>
13.         </ul>
14.     </li>
15.    etc.....
    
16.    

1. $.each(data.products, function(index,prod) {   
2.   $.each(prod, function(propKey,propVal) {
3.     $('ul#prodsAll').append('<li>' + propKey + ':<ul></ul></li>');
4.            
5.         $.each(propVal, function(propKey2,propVal2) {
6.          // ****** THIS IS WHERE I GET IN TROUBLE....  ;-)
7.            $('#prodsAll ul ul').append('<li>' + propKey2 + ': ' + propVal2  + '</li>');
8.             });
9.         });
10.     });