JQuery 1.9 and above .size() is not function

Detail: jquery 1.9 above not allow element.size() funtion, instead use .length
Solution: replace .size() to .length
or : this is will return length not change code
$.fn.size = function() {
    return this.length;
}

 

 

jQuery window load e.indexOf is not a function - SOLVED

Detail:
$(window).load(function() {
alert('Load');
});
Error e.indexOf is not a function
Solution: change code below
$(window).on('load', function () {
    alert('On Load');
});

 

Img zoom magnifier glass

 

 <style>
    * {
        box-sizing: border-box;
    }

    .img-magnifier-container {
        position: relative;
    }

    .img-magnifier-glass {
        position: absolute;
        border: 3px solid #000;
        border-radius: 50%;
        cursor: none;
        /*Set the size of the magnifier glass:*/
        width: 250px;
        height: 250px;
    }
</style>
<script>
    function magnify(imgID, zoom) {
        var img, glass, w, h, bw;
        img = document.getElementById(imgID);
        /*create magnifier glass:*/
        glass = document.createElement("DIV");
        glass.setAttribute("class", "img-magnifier-glass");
        /*insert magnifier glass:*/
        img.parentElement.insertBefore(glass, img);
        /*set background properties for the magnifier glass:*/
        glass.style.backgroundImage = "url('" + img.src + "')";
        glass.style.backgroundRepeat = "no-repeat";
        glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
        bw = 3;
        w = glass.offsetWidth / 2;
        h = glass.offsetHeight / 2;
        /*execute a function when someone moves the magnifier glass over the image:*/
        glass.addEventListener("mousemove", moveMagnifier);
        img.addEventListener("mousemove", moveMagnifier);
        /*and also for touch screens:*/
        glass.addEventListener("touchmove", moveMagnifier);
        img.addEventListener("touchmove", moveMagnifier);

        function moveMagnifier(e) {
            var pos, x, y;
            /*prevent any other actions that may occur when moving over the image*/
            e.preventDefault();
            /*get the cursor's x and y positions:*/
            pos = getCursorPos(e);
            x = pos.x;
            y = pos.y;
            /*prevent the magnifier glass from being positioned outside the image:*/
            if (x > img.width - (w / zoom)) {
                x = img.width - (w / zoom);
            }
            if (x < w / zoom) {
                x = w / zoom;
            }
            if (y > img.height - (h / zoom)) {
                y = img.height - (h / zoom);
            }
            if (y < h / zoom) {
                y = h / zoom;
            }
            /*set the position of the magnifier glass:*/
            glass.style.left = (x - w) + "px";
            glass.style.top = (y - h) + "px";
            /*display what the magnifier glass "sees":*/
            glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
        }

        function getCursorPos(e) {
            var a, x = 0,
                y = 0;
            e = e || window.event;
            /*get the x and y positions of the image:*/
            a = img.getBoundingClientRect();
            /*calculate the cursor's x and y coordinates, relative to the image:*/
            x = e.pageX - a.left;
            y = e.pageY - a.top;
            /*consider any page scrolling:*/
            x = x - window.pageXOffset;
            y = y - window.pageYOffset;
            return {
                x: x,
                y: y
            };
        }
    }
</script>


<div class="img-magnifier-container">
    <img id="mapimage" src="images/Artwork/tour-map.jpg" alt="Map of Lake Havasu" width="1200" height="1000">
</div>


<script>
    /* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
    magnify("mapimage", 3);
</script>

Jquery array rename key - CLEAR

Có nhiều cách làm trên internet nhưng bị lỗi, khó hiểu
Cách làm đơn giản nhất là replace string json

myArray = {oldKey1: 'value1', oldKey2: 'value2', another: '1'}
Change oldKey1 = newKey1


/*Object to string*/
var jsonMap = JSON.stringify(myArray);
/*Key replace by newkey*/
var jsonMapReplace = jsonMap.replace(oldKey1,newKey1);
/*string to JSON again*/
myArray = JSON.parse(jsonMapReplace);

CSS transform scale blank space - SOLVED

Description: Responsive view zoom transform scale. This make blank space. Need fix view full
Explain code: Original is 980, <980 auto scale. When scale important: '.container' is  scale + absolute. Absolute is will make html>body auto height again.

Solution:
HTML
<body>
<div class="container">
CONTENT
</div>
</body>

SCRIPT
var jquery = jQuery.noConflict();
jquery(window).ready(function(){
/*ScallFullScreen*/
ZoomScale();
});
jquery( window ).resize(function() { 
/*ScallFullScreen*/
ZoomScale();
});
/*ScallFullScreen*/
function ZoomScale(){
var widthScreen = jquery(window).width();
var scale = 1;
var wrapper = jquery('.container');
if(widthScreen<980){
/*scale=1*/
scale = widthScreen/980;
jquery(wrapper).css('position','absolute');
jquery(wrapper).css('width','980px');
jquery(wrapper).css('overflow-x','hidden');

}else{
jquery(wrapper).css('position','relative');
jquery(wrapper).css('width','auto');
jquery(wrapper).css('overflow-x','auto');
}
jquery(wrapper).css('-webkit-transform', 'scale(' + scale + ')');
jquery(wrapper).css('transform', 'scale(' + scale + ')');
jquery(wrapper).css('transform-origin', 'left top');
}

JQUERY get image full path

Des: get full path image http,domain,subfolder,filename

JQUERY:

var imagefullpath=$('img')[0].src;
alert(imagefullpath);
result: http//domain.com/subfolder/image-name.jpg
-
var imgagepath=$('img').attr('src');
alert(imagepath);
result: subfolder/image-name.jpg

Stick menu - short code

Stick menu : demo http://jsfiddle.net/uFq2k/
Desription: Location menu: get offset. Check scroll > current location use new style.

Using JQuery
$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                }
        });
  });

Jquery replace tag by new tag HTML

Des: replace tag with new tag
Example: change all from h2 to h1 tag
Script:
$('h2').each(function () {
        $(this).replaceWith( "<h1>" + $(this).html() + "</h1>" );
});

Elevate Zoom - Jquery gallery

Mô tả:
Jquery image hover zoom popup ra bên bên ngoài(outer) hoặc zoom bên trong (inner)
Chi tiết:
Trong quá trình thực hiện dự án gặp phải vấn đề zoom kiểu này có thể là Cloud Zoo, Elevate zoom. Theo quá trình tìm hiểu đã download nhiều thư viện thì cái này theo cá nhân ghi nhận là tốt và rõ ràng về source. Dễ trong sử dụng và đưa vào các đoạn script
Link trực tiếp download source : http://www.elevateweb.co.uk/image-zoom/examples

IE place holder issue fixed by script

Mô tả:  placeholder dùng tốt trong firefox, chrome, safary. Đối với <IE8 ko hỗ trợ.
Cách xử lý:  Đối với IE7,IE8 cần dùng thư viện hỗ trợ.
Download file script:
https://drive.google.com/file/d/0B785Epf6q5XlV2FFdUdzbGRqaEk/edit?usp=sharing
Load thư viện script vào template ->index.php: trong tag HEAD
<!--[if IE]>
        <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/placeholders.jquery.min.js"></script>   
<![endif]-->

Jquery get parent item latest (the nearest parent)

<ul class="top_navigation">
<li>
       <div class="icon"><img src="images/icon5.png"/></div>
</li>
</ul>
Cách lấy parent item gần nhất bằng Jqueyry
               var parent=jquery1('.top_navigation img').parents('li');

Lưu ý: .parent và parents khác nhau.

10 jQuery CAPTCHA Plugins

Nguồn trích từ : http://www.jquery4u.com/security/10-jquery-captcha-plugins/
1. QapTcha: jQuery captcha system with jQuery & jQuery UI

This is an easy-to-use, simple and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.

Source
 


2. jQuery Fancy Draggable Captcha

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

Source


3. reCaptcha style Captcha with JQuery and PHP

This tutorial is about to creating a captcha same as recaptcha. Create your own recaptcha style captcha with PHP and jQuery.

Source



4. jQuery Advanced Ajax validation with CAPTCHA

jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. In this tutorial I’m going to teach you how to create a signup form with advanced AJAX validation and CAPTCHA.

Source



5. s3Capcha jQuery plugin

It is an advanced plugin script that asks for choosing the correct image instead of asking to recognize the difficult text.

Source



6. Ajax Stylish Captcha and Contact Form using JQuery and PH

This tutorial is about AJAX based contact form with jQuery validation and AJAX based captcha.

Source



7. Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

Source



8. jQuery Real Person

This plugin is designed to help overcome automated form submission by requiring a “real person” to identify text made up of dots. The entered value is compared on the server with the generated value to determine whether processing should continue.

Source



9. jQuery.buttonCaptcha

is a plugin, that protects your site from robots using jQuery. To unlock captcha you need to drag letters into baskets and get some simple word, or site name, which was typed in options.

Source



10. Sexy Captcha – Drag-and-Drop Ajax Captcha

Sexy Captcha is a truly ajaxified, sexy captcha module. It’s visually stimulating, functional and returns immediate feedback on whether the user’s answer was correct.

Source


AUTHOR: Sam Deering. Find out more about jQuery4u author on Google Plus.

LAYER SLIDER JQUERY

LAYER SLIDER JQUERY:
Đối với thời điểm 09 năm 2013 - slider jquery được đánh giá cao và được nhiều người sử dụng.
Với tính năng đặc biệt: mỗi slide có nhiều lớp gọi là layer giống photoshop. Mỗi lớp có thể hình ảnh, text. Và đặc biệt là tính năng trình diễn khá giống với Power Point.

Link demo: http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/full_screen_preview/1362246
Link download example: https://docs.google.com/file/d/0B785Epf6q5XlLVZRYWRBTlRyRUk/edit?usp=sharing

QapTcha : jQuery captcha giới thiệu

Giới thiệu:
Bình thường capchar thì rất quen thuộc dùng để chống spam tự động đối với các form.
Theo công nghệ các thiết bị cầm tay cảm ứng, thì capchar có thay đổi 1 chút để phù hợp. Thay vì gõ chữ đó là ... kéo rê để khởi động hoặc xác nhận là có người sử dụng - gọi là QAPTCHAR.
Yêu cầu hệ thống: PHP
Giao diện hiển thị:

Link trang chủ (demo, linkdownload): http://www.myjqueryplugins.com/jquery-plugin/qaptcha
Cách thực hiện: 
1. Load  css + script

<link rel="stylesheet" type="text/css" href="QapTcha.jquery.css" media="screen" />
 
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.ui.touch.js"></script>
<script type="text/javascript" src="QapTcha.jquery.js"></script> 

2. Run script

<script type="text/javascript">
  $(document).ready(function(){
    // Simple call
    $('.QapTcha').QapTcha();
    
    // More complex call
    $('.QapTcha').QapTcha({
      autoSubmit : true,
      autoRevert : true,
      PHPfile : 'path_to_my_php_file/Qaptcha.jquery.php'
    });
  });
</script>

3. Thêm đoạn html vào Form.

<form method="post" action="">
  <fieldset>
    <label>First Name</label> <input type="text" name="firstname" />
    <label>Last Name</label> <input type="text" name="lastname" />
    <div class="clr"></div>
 
    <!-- Add this line in your form -->
    <div class="QapTcha"></div>
 
    <input type="submit" name="submit" value="Submit form" />
  </fieldset>
</form>

Chú ý: cần giữ folder file Root/PHP