jQuery Forum

1. $("#slideshow > div:gt(0)").hide();
   
   
   $("#next").on("click", function(){
         $('#slideshow > div:first')
       .fadeOut(1000)
       .next()
       .fadeIn(1000)
       .end()
       .appendTo('#slideshow');
   });
   
   $("#prev").on("click", function(){
         $('#slideshow > div:prev')
       .fadeOut(1000)
       .next()
       .fadeIn(1000)
       .end()
       .appendTo('#slideshow');
   });

  <button id="next"> next</button>

 <button id="prev"> prev</button>
<div id="slideshow">

   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

Using bootstrap 3 I am trying to add a new HTML element into a dynamic popover like

$(document).on('click', '#send-app', function(){
  console.log("Clicked!");
   $("#result").html('<p>New HTML Element</p>');
});

but it is not working! Can you please let me know how to fix this? Thanks

$("[data-toggle=popover]").popover({
    html: true, 
	content: function() {
          return $('#popover-content').html();
        }
});

 $(document).on('click', '#send-app', function(){
   console.log("Clicked!");
   $("#result").html('<p>New HTML Element</p>');
  });

 .popover {
    max-width: 300px;
}

<div class="container">
<div id="wrap">
	<a data-placement="bottom" data-toggle="popover" data-container="body" role="button" data-html="true" href="#" id="login" class="btn btn-default">Send</a>
	<div id="popover-content" class="hide">
		<div class="well well-sm" style="margin-top:16px;  padding-top:14px; padding-bottom:0px;">
			<div class="row">
				<div class="col-md-12">
					<div class="form-group">
						<div class="input-group">
						<input id="email" name="email" class="form-control" placeholder="Email" type="text">
						<span class="btn input-group-addon" id="send-app">Send</span>
						</div>
						<p class="help-block animated"></p>
					</div>
				<div id="result"></div>
			</div>
		</div>
	</div>
</div>
</div>
</div>

1. var data = {
2.   "action": [{
3.       "id": "1001",
4.       "name": "Matrix"
5.     },
6.     {
7.       "id": "1002",
8.       "name": "IP Man"
9.     },
10.     {
11.       "id": "1003",
12.       "name": "Revenge"
13.     }
14.   ],
15.   "comedy": [{
16.       "id": "2001",
17.       "name": "Iceman"
18.     },
19.     {
20.       "id": "2002",
21.       "name": "Pat & Mat"
22.     },
23.     {
24.       "id": "2003",
25.       "name": "Sugar"
26.     }
27.   ],
28.   "animation": [{
29.       "id": "3001",
30.       "name": "Frozen"
31.     },
32.     {
33.       "id": "3002",
34.       "name": "Tangled"
35.     },
36.     {
37.       "id": "3003",
38.       "name": "Croods"
39.     }
40.   ]
41. };
42. 
    
43. for (var i in data) {
44.   $('.nav-tabs').append('<li role="presentation" class=""><a href="#' + i + '" aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>');
45. 
    
46. }
47.   for (var j = 0; j < data[i].length; j++) {
48.     var obj = data[i][j];
49.     $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + obj.name + '">' + obj.name + '</div>');
50.  }

1. <div class="container">
2.   <ul class="nav nav-tabs" role="tablist"></ul>
3.   <div class="tab-content"></div>
4. </div>

(function($) {
        $.fn.app = function(elem) {
          var elem = $.trim(elem.attr('id'));
          elem = "#" + elem;
          var elemTop = $(elem).offset().top;
    
          function underone() {
    
          }
    
          function undertwo() {
    
          }
    
        }(jQuery));
    
      $("#mapper").app({
        underone: function() {
           $("#result").html('Box is Under 1000 ');
        },
        undertwo: function() {
          $("#result").html('Box is Under 2000 ');
        }
      });

2. $(document).ready(function () {
3.     $('#tags').on('change', function () {
4.         $('#tagsname').html('You selected: ' + this.value);
5.         $('html,body').animate({
6.                scrollTop: $("#"+ this.value).offset().top
7.          });
8.     }).change();
9.     $('#tags').on('autocompleteselect', function (e, ui) {
10.         $('#tagsname').html('You selected: ' + ui.item.value);
11.     });
12. });

Uncaught TypeError: Cannot read property 'top' of undefined

1.     var sec = 20;
2.     var timer = setInterval(function() { 
3.        $('#box').text(sec--);
4.        if (sec == -1) {
5.           $('#box').css('color','blue');
6.           clearInterval(timer);
7.        } 
8.     }, 1000);

1.     <div id="box">20</div>

<input type="text" id="newName" />

$(document).ready(function (e) {

var newName = $("#newName").val();
    $('#imageUploadForm').on('submit',(function(e) {      
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

Can you please let me know how to do it?

Thanks

1.     var theArray = [
2.         ["A", "B", "C"],
3.         ["D", "E"],
4.         ["F", "G", "H", "I"],
5.         ["J"],
6.         ["K", "L", "M"]
7.     ];
8.     var res = theArray.toString();
9. 
   
10.     $('#textarea').text(res);
11. 
    
12.     $("input[name='m1']").change(function () {
13.         if ($(this).is(':checked')) {
14.             var id=$(this).attr('id');
15.             var selected = $(this).val();        
16.             theArray[1][id] = selected;
17.             
18.         } else {
19.             var itemtoRemove = $(this).val();
20.         theArray[1].splice($.inArray(itemtoRemove, theArray[1]),1);
21. 
    
22.         }
23.         var res = theArray.toString();
24.     $('#textarea').text(res);
25.         
26.     });
27. 
    
28. 
    
29. <!-- language: lang-html -->
30. 
    
31.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
32.     <br />
33.     <textarea id="textarea" rows="2" cols="100"></textarea>
34.     <br />
35.     <br />
36.     <fieldset>
37.         <legend>Items</legend>
38.         <input type="checkbox" id="1" name="m1" value="mItem1" />mItem 1
39.         <br />
40.         <input type="checkbox" id="2" name="m1" value="mItem2" />mItem 2
41.         <br />
42.         <input type="checkbox" id="3" name="m1" value="mItem3" />mItem 3
43.         <br />
44.         <br />
45.     </fieldset>

2. var item = $(".thumbnail").width();
3. var paddT = $(".thumbnail").css('margin-left');
4. item = item + 20;
5. $(".leftslide").on("click", function () {
6.     $(".list-inline").animate({
7.         left: '-=' + item + 'px'
8.     }, 300);
9. });
10. $(".rightslide").on("click", function () {
11.     $(".list-inline").animate({
12.         left: '+=' + item + 'px'
13.     }, 300);
14. }); 

Can you please let me know where can I find jquery plugin like this?

Thanks

1. $(document).ready(function()
   {
      var comp = new Array("AAPL","MSFT","XRTX&");
      var t = setInterval(function(){getPrice();},2000);
   
       function getPrice()
       {
               for (var i=0;i<comp.length;i++){
                     $.getJSON('https://finance.google.com/finance/info?client=ig&q='+comp[i]+'&callback=?', function(response){
                           var stockInfo = response[0];
                           var stockString = '<div class="stockprice">';
                           stockString += 'Price is $'+''+stockInfo.l+'';
                           stockString += '</div>';
                                      $('body').append(stockString);  
                           $('.stockprice').replaceWith(stockString);
                    
   $(".stockprice:contains('-')").addClass('red');                      $(".stockprice:contains('+')").addClass('green');
                     });
               }
       }
   });