CodeKhel

How to show the child div but kipping it's parent div hide. Technically it's impossible, but by using Jquery we can make child div's or  element's clone and then  can put it outer from that parent div. 'Look how we done it by the Jquery clone method.' HTML==>  <div class="Div1"> </div>  <div class="container" style="display:none;">       <div class="ApImage">          <p>this is the test div</p>      </div> </div> JQuery==> <script>    $(document).ready(function(){    var fieldShow = JQuery(".ApImage").clone();    fieldShow.appendTo(".Div1"); }); </script>

somewhere in the project we have some images and not have anchor tag as parent. And now we want that on click of that image, image should open in new tab.Point out that image may be repeated twice or many more.  For more clearance just  understand the following code.==> CSS==> <style type="text/css">     .ApImage{float:left; width: 100%; border: 2px dotted #f00; margin-bottom: 10px;}     .apPic{display: inline-block; width: 100%; height: auto;} </style> HTML==>  <div class="container">       <div class="ApImage">           <img class="img-responsive apPic" alt="arch_image" src="https://images.adsttc.com/media/images/55f8/107f/9644/1e1f/b100/003e/large_jpg/dubai_board_i_flattened-psd.jpg?1442320488" />       </div>       <div class="ApImage">           <img class="img-responsive apPic" alt...

Sometimes we confused, which function should we use between prop(); and attr(); function. we can understand it by the following example==> HTML==> <div class="container">     <div id="div1"> </div>     <div id="div2"> </div>     <div id="div3"> </div>      <div id="div4"> </div>     </br>     <input type="text"  id="textId" name="input1" readonly="readonly"  autocomplete="autocomplete"  autofocus  />   </div> JQuery==> <script type="text/javascript">     $(document).ready(function(){       $("#div1").html($("#textId").attr("name")+'</br>');       $("#div2").html($("#textId").prop('readonly')+'</br>')          $("#div3").html($("#textId").attr('readonly')+...

Sometimes you have too much content in your page, so you need a button there which help you to move/ scroll / return to top/bottom of that page. Here we are implementing the bottom to top button with the help of Css and Jquery. HTML==> <a  id="return-to-top" data-toggle="tooltip" title="bottom to top"><span class="glyphicon glyphicon-chevron-up"></span></a> <div class="container-fluid" style="padding:0;">   <div class="well" style="=float:left; width:100%; height:1500px; background:orange; color:#fff;"> Scroll down to test the scroll.</div> JQuery==> <script>   /* scroll/return to top button  */   $(document).ready(function(){        $(window).scroll(function(){            if ($(this).scrollTop() > 200) {                $('#return-to-top').fadeIn();            ...

This post will help you to get value from p element and conditionally change the background color of that element if have value more than 20. HTML==> <p class="changebg">1234567891011</p> <p class="changebg">1</p> <p class="changebg">60</p> JQuery==> <script type="text/javascript">   $(document).ready(function(){     $(".changebg").each(function(){   var count =parseInt($(this).text().trim());   if(count>20){       $(this).css('background-color','#f00');     }     else{       $(this).css('background-color','#ff0');   } }) }); For complete code reference  and Demo, download file from the below link provided.

for download click here

<span class="Count">200</span> <span class="Count">55</span> $('.Count').each(function () {     $(this).prop('Counter',0).animate({         Counter: $(this).text()     }, {         duration: 1000,         easing: 'swing',         step: function (now) {             $(this).text(Math.ceil(now));         }     }); });