Web Developer and Designer in Sri Lanka: November 2013

Wednesday, November 27, 2013

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>

Tuesday, November 26, 2013

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>

Thursday, November 21, 2013

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();
            }
        });

Wednesday, November 20, 2013

Wednesday, November 13, 2013

360 Rotate on hover

Code on element

   -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -ms-transition-property: -ms-transform;

Code on hover

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

Tuesday, November 12, 2013

Gray scale your images with CSS 3

How to gray scale your images with CSS 3, without using photoshop. You can use this code with CSS mouse over hover effect. or to grayscale the images direclty on your web page

.grayimg:hover
{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}

Monday, November 11, 2013

jquery animate div one after another

jquery animate div one after another

HTML code

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

div.test {width: 100px; height: 100px; background-color: red; display: none;}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

JQuery

(function($){
$.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
      $(this).delay(delay).fadeIn(1800);
      delay += 200;
    });
};
})(jQuery);

$(document).ready(function(){
$('div').showdelay();
});

Friday, November 8, 2013

jquery on hover change css another element

jquery on hover change or add css of another element and remove

JQuery on hover changing CSS of another element - div or class - and remove the CSS when mouse left the element - simple code

     <script>
            $(document).ready(function () {
                $('.manage').hover(function () {
                    $('.topdes1').css('top', '0px');
                }, function () {
                    $('.topdes1').css('top', '140px');
                });
            });
    </script>

Option 2 : Avoid the repeating of hover when you have more than one div tags in same name.

Smooth Scrolling on A Name tags in one page web site

JQuery Smooth Scrolling on A Name tags in one page web site. You can add the link to navigate between DIV sections in single page web site.

Link :

<li data-slide="4"><a href="index.html#slide4" >About</a></li>

Target ( on same page) :

<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
</div>

Code ( on header section ) :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
});
});
</script>

Thursday, November 7, 2013

CSS Transition code for All Properties

Here is the default CSS3 Transition properties to animate the div elements ot the images ( with cross browser prefix ) this will apply to all attributes ( Background, color, with, height, whatever...)

.effect {
  -moz-transition: all 0.2s ease; /* FF3.7+ */
  -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
  transition: all 0.2s ease;
}

Monday, November 4, 2013

How to add a CSS 3 Preloader to your Web site

How to add a CSS 3 Preloader to your Web site on 4 Steps - Copy and Paste code

1. Loading JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

2. Adding the function

<script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>

3. Writing the CSS

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999;
background: #ffcc00;
}

4. Adding the HTML (On the body of the page)

<div id="spinner"> What ever loader image </div>

Web Developer and Designer in Sri Lanka