Pages

Stop repeating Jquery animation SlideDown or SlideUp

How to stop repeating of Jquery animation SlideDown or SlideUp animation when you have repeating div classesor id with the same name in single web page. This code will work only for the next div tag with the similar name

<script>
$(document).ready(function() {
    $('.but1').on('click', function() {
        $(this).siblings('.carea').slideToggle(300);
    }); });
</script>

facebox pop up image on load with a a link

Step 1

Load facebox

  <link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="src/jquery.js" type="text/javascript"></script>
  <script src="src/facebox.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'src/loading.gif',
        closeImage   : 'src/closelabel.png'
      })
    })
  </script>


Step 2

Writing th efunction tp pop up an image with a link on page load

<script language="javascript">
$(document).ready(function() {
    $.facebox.settings.opacity = 0.9;
    $('a[rel*=facebox]').facebox();
    $.facebox('<a href="http://abc.lk" target="blank"><img src="src/offer.jpg"></a>');

});
</script>

Hide div on Scroll Down

Hide div on Scrolling on web page with JQuery and shows back when scroll top of the page

        $(window).scroll(function () {
            if ($(this).scrollTop() > 200) {
                $('.bread').fadeOut();
            } else {
                $('.bread').fadeIn();
            }
        });

Add a class on click to a link

Add a class on click to a link and remove the class when clicking another link with JQuery

    <script>   
//to add class on active
    $("a").click(function(){
   $("a.active").removeClass("active");
   $(this).addClass("active");
    });
    </script>

Best color themes for web

Most popular and the best color thems for web site design next year taken from Kuler


Search This Blog