Function Declaration vs Function Expression

You guys several times will have seen the function in two syntax.

 

    1)Function Declaration

  1. function func_name(arg_1, arg_2,..., arg_n){
  2.     .............
  3.     ...........
  4. }

    2)Function Expression

  1. var func_name;
  2. func_name=function(){
  3.     ....................
  4.     .............
  5. };
  6.  

 

Here are the differences

  • Function expression can’t be called before its definition vs Function declaration can.

 

 

 

Posted in Function, JavaScript, JQuery, Programming by Leave a comment

Too Simple LightBox PopUp Window

Hey guys, girls,

Here I’m going to teach you too simple lightbox popup window to see it before.

Add these lines into your body tag whenever you want. If may be you can arrange it according to your requirement. But make sure to be having position:fixed; and z-index:100 or 100+;

  1. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;colr: #d9e3e8;z-index: 101;"></div>

And then add these JavaScript code to yor head tag

  1. function hidePopUp(){    
  2.     $('#divPopUp').html('');    
  3.     $('#divPopUp').hide();
  4. }
  5. $(document).ready(function(){    
  6.     $('#divPopUp').hide();
  7.     $('.small_image').click(function(){
  8.     $('#divPopUp').html('</p><div align="center">---------------Here Add Your Tag/Content whatever you want---------------<br/><span onclick="hidePopUp()" style="cursor: pointer">CLOSE</span></div>');     
  9.     $('#divPopUp').show();  
  10.     });
  11. });

Here is a complete example of code which I have used it for image gallery section:

  1. <html>
  2.     <head>
  3.         <script>
  4.             function hidePopUp(){
  5.                 $('#divPopUp').html('');
  6.                 $('#divPopUp').hide();
  7.             }
  8.             $(document).ready(function(){
  9.                 $('#divPopUp').hide();
  10.                 $('.small_image').click(function(){
  11.                     var largeImageSrc=$(this).attr('src');
  12.                     largeImageSrc=largeImageSrc.replace('small','big');
  13.                     $('#divPopUp').html('<div align="center"><img src="'+largeImageSrc+'"/><br/><span onclick="hidePopUp()" id="btnClose" style="cursor: pointer">CLOSE</span></div>');
  14.                     $('#divPopUp').show();
  15.                 });
  16.             });
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <?php
  21.         echo '<ul class="gallerylist">';
  22.         while($row=mysql_fetch_array($result))
  23.         {
  24.             echo '<li><div align="center" style="">'.$row['image_name'].'</div><img class="small_image" style="cursor:pointer;" src="admin/gallery_image/small/'.$row['image_id'].'.'.$row['image_ext'].'"/></li>';
  25.         }
  26.         echo '</ul>';
  27.         ?>
  28. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;color: #d9e3e8;z-index: 101;"></div>
  29.     </body>
  30. </html>

 

See the Pen Light Box by AHMAD ASJAD (@ahmadasjad) on CodePen.0

Happy coding!!!!!!!

Posted in Programming by Leave a comment