Using Readmore JS correctly

<script src="js/readmore.min.js"></script>
<script>
  $('.manage2').readmore({
    maxHeight: 100
  });
 
  // Wait a tick before firing Readmore on the #info block to give Prettify time to finish painting.
  setTimeout(function() {
    $('.manage2').readmore({
      moreLink: '<a href="#" style="color:#4a89dc">Read More</a>',
lessLink: '<a href="#" class="managename" style="color:#4a89dc">Close</a>',
      maxHeight: 100,
      afterToggle: function(trigger, element, more) {
        if(! more) { // The "Close" link was clicked
          $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
        }
      }
    });
  }, 100);
</script>
<!---Read more codeEND-->

CSS3 transform code on hover

#logo:hover{
-moz-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-webkit-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-o-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
-ms-transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
transform: scale(1) rotate(4deg) translate(0px, 0px) skew(0deg, -4deg);
}

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>

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

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

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>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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();
});

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.

TAG : jquery outer div hover change css in inner div

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

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>

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

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>

CSS3 Transparency for IE 8

Transparent effect for Internet Explorer IE7, IE8 : Working

 



.css3opacity{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
 opacity: 0.5; 
}

Burgercart Free Opencart ecomerce Template

Burgercart - the Opencart template for online burgers store, you and buy burgers and order online . build on opencart version 1.5.5.1. Easy to install template. Please comment below for the support.

You can view download this template at Opencart Extentions web site : link

ecomerce psd template for opencart jewellery store

Open cart PSD Web template for online jewellery store

with white color theme with minimal design. easy implementing simple layout can be useful for magneto, prestashop, zen cart or opencart template. download link

jquery popup div onclick example

Jquery popup div onclick example for multiple div on one single page.

here is the source code to repeat one, two , three or any number of divs to pop up on click action to work in single page without repeating any java script or query code. This code is free to use. This code will also include the fading effect to the pop up dialog box - which can be a hidden div tag on your web page.

jQuery(function($) {
    var $input;
    $("[class^='topopup']").click(function() {
    console.log('foo');
     $input = jQuery(this).attr("class");
   
   
            loading();
            setTimeout(function(){
                loadPopup($input); 
            }, 500); // .5 second
    return false;
    });
   

    $("[class^='close']").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                      }
                );
   
   
    $("[class^='close']").click(function() {
   
   
        disablePopup(); 
    });

   
   
    $(this).keyup(function(event) {
        if (event.which == 27) {
            disablePopup(); 
        }     
    });
   
   
    $("div#backgroundPopup").click(function() {
        disablePopup(); 
    });
   
    function loading() {
        $("div.loader").show(); 
    }
    function closeloading() {
        $("div.loader").fadeOut('normal'); 
    }
   
    var popupStatus = 0;
   
    function loadPopup($name) {
    console.log($name);
   
        if(popupStatus == 0) {
            closeloading();
            $("#"+$name.substring(0,2)+"P"+$name.substr(3,$name.length-1)).fadeIn(0500);
            $("#backgroundPopup").css("opacity", "0.7");
            $("#backgroundPopup").fadeIn(0001);
            popupStatus = 1;
        }   
    }
       
    function disablePopup() {
   
        if(popupStatus == 1) {
            $("#"+$input.substring(0,2)+"P"+$input.substr(3,$input.length-1)).fadeOut("normal"); 
            $("#backgroundPopup").fadeOut("normal"); 
            popupStatus = 0; 
        }
    }
}); 

High quality PSD seals for next project

High quality PSD seals for next project

6 PSD Seal badges to display your special offers in six different color themes , deal or the discount in a special way in you next design with a nice font style, Photoshop layer styles have used to design these seals. And the file is is separate layer format so easy to use like drag and drop.

 

High quality PSD seals for next project

 Download Link

Freelance web design and development sri lanka

Freelance Web design and Development in Sri lanka

• Web Design and Development
• Online store
• Mobile web sites
• Search engine optimization
• Social media integration
• Online branding

Professional business web site Starter package 12500/= only with free promotion (no hidden charges)

Scalale Vector PSD Computer Icon Set

Fully Scalable Vector PSD Computer icon set for the next commercial project - Free

Fully scalable high resolution 300dpi free vector computer icon set you can freely use for your next commercial project without any attribution. File can be opened in both Photoshop and a vector software.Created with adobe illustrator.

Download Icon Set

Free Events Banner Vector - PSD - Cricket tournament

 

Download Free Events Banner Vector - PSD - Cricket

Freebie of the week - Colorful cricket tournament banner / Poster design - in both psd and vector formats created in Adobe Photoshop and Illustrator. Vector item are embedded to the Photoshop file and you may need to download the fonts used. You can rasterizer the vector elements as you need and drag back to a vector software end edit. This work is designed in high resolution 300px so can use this for both print and was a web graphic.

Calender Design

Four color Desk Calender print design for an engineering firm - this was designed in 2011 for their 2912 calender as an option. i have used free downloadable vectors and stock photos for this artwork and the size is half of a A4 paper with free color theme depending on the images used on the background.

Free Web Site Banner Design - Vector+PSD Download

Free colorful web site banner template design to publish name or contact details on your website or print design- in both vector and psd formats- free for commercial and personal use. You can replace the "your company name" with a company or a brand logo and name as use as a link or a button on the front of you web page also you can use this in a introduction presentation. The file you download is full editable and also you can drag back the vector layers to illustrator and edit the from the Photoshop.

Download free banner template - psd+vector

CURL not loading error in Apache Wamp Server

CURL extension not loading error in Apache Wamp Server windows 7 and windows 8 64 bit version

Download Curl for Apache Windows 64 bit

Solution for how to fix the curl not loading error ( curl extension failed to load ) most of the web designers get when installing CMS - (Open cart, joomla, Magento latest vertions) in wamp server or xamp with Microsoft Windows 7 with 64bit version. Please download the curl form the link below and search for the "php_curl.dll" file in your wamp www folder and extract and replace with the file you have downloaded.

Poster Design for Book fair -in Sri Lanka

Graphic Designing in Sri Lanka

Poster Design for Book fair

Poster Design (A3 size) and Banner 5x2 size for Book fair held in Colombo Sri Lanka. i designed two options and the first one got selected. I used Adobe illustrator to create the of these art works and i used vector resources for all free download and free vectors web sites. i went with a puzzle theme with water marked logo background. Client wanted to highlight and promote the 10% discount message with the venue details. this was printed in four color digital print as a poster and also a banner.

Poster Design 2 for Book fair

Graphic Design Services

• Web site design
• Business card design
• Logo Design
• Newspaper ads
• Posters
• Brichures and Flayers
• And much more web and print services

Invitation card design

Invitation card , Thank you card and two Welcome banners designed for a book launch event. Used an old paper theme from free stock photos and vectors.

Invitation Card

Thankyou Card

ecommerce website design

E Comerce web site design for a mobile phone shop - Color Theme is Light Blue. Screen resolution 980px - 3 Columns layout - Content management System used - Opencart

Serach engine optimization Sri lanka

Search engine optimization - SEO Services - Sri Lanka

We Provide high quality search engine optimization (SEO) and social media marketing (SMM) services using simple to complex white hat techniques for grow your business online.
We use on page tags and key words optimization and off page link building techniques without spamming.

We use well established web sites with a good page ranks, eg - forums, social media sites, web directories to targeting the correct audience and attract the visitors to the pages by creating great and unique content which visitores cannot refuse.