Vihan Company: Jquery

Hiển thị các bài đăng có nhãn Jquery. Hiển thị tất cả bài đăng

Thứ Tư, 15 tháng 1, 2014

Jquery book

Download: https://www.mediafire.com/folder/undefined/

Thứ Bảy, 14 tháng 12, 2013

jquery ajax + php

Lấy database với ajax

$(document).delegate("#json", "pageinit", function() {
    $(".manda").click(function(e) {
        $.ajax({
        url : "json1.php",
        dataType : "json",
        data : '{"opc":"sim"}',
        success : function(data){
            var html = "";

            for($i=0; $i < data.length; $i++){
                html += "<strong>Nome:</strong> "+data[$i].nome +" "+ data[$i].sobreNome;
                html += " <strong>Cidade:</strong> "+data[$i].cidade
                html += "<br />";
            }

            $("#mostra").html(html);
        }
        });
        return false;
    });
});

<?php
    if ($_POST['opc'] == "sim"){
        $var = Array(
        array(
            "nome"=>"João",
            "sobreNome"=>"Silva",
            "cidade"=>"Maringá"
        ),
        array(
            "nome"=>"Ana",
            "sobreNome"=>"Rocha",
            "cidade"=>"Londrina"
        ),
        array(
            "nome"=>"Véra",
            "sobreNome"=>"Valério",
            "cidade"=>"Cianorte"
        ));
        echo json_encode($var);
    }
?>

Upload file với ajax

<!DOCTYPE html>
<html>
    <head>
        <title>File Upload</title>
    </head>
    <body>
        <form id="form" method="post" action="post.php" enctype="multipart/form-data">
            <input type="file" name="img"/>
            <input type="submit" value="Upload" />
        </form>
        <script src="jquery.js"></script>
        <script src="upload.js"></script>
    </body>
</html>

<?php
if($_FILES['img']['error'] > 0) die('Error ' . $_FILES['file']['error']);
if(empty($_FILES['img']['name'])) die('No file sent.');

$tmp = $_FILES['img']['tmp_name'];

if(is_uploaded_file($tmp))
{
    if(!move_uploaded_file($tmp, 'img.png')) echo 'error !';
}
else echo 'Upload failed !';
?>

$(function() {
    $('#form').submit(function(e) {
        e.preventDefault();
        data = new FormData($('#form')[0]);
        console.log('Submitting');
        $.ajax({
            type: 'POST',
            url: 'post.php',
            data: data,
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data) {
            console.log(data);
        }).fail(function(jqXHR,status, errorThrown) {
            console.log(errorThrown);
            console.log(jqXHR.responseText);
            console.log(jqXHR.status);
        });
    });
});

Thứ Ba, 10 tháng 12, 2013

=========== HTML ===========

<div class="button_top"></div>

=========== CSS ===========

.button_top {
background: url("../images/top_png.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 70px;
height: 70px;
position: fixed;
right: 22px;
width: 70px;
display: none;
cursor: pointer;
}

=========== JS ===========
                    var offset = 220;
                    var duration = 500;
                    $(window).scroll(function() {
                        console.log($(window).width());
                        if($(window).width()<1190){

                            $(".button_top").remove();
                        }
                        if ($(this).scrollTop() > offset) {
                            $('.button_top').fadeIn(duration);
                        } else {
                            $('.button_top').fadeOut(duration);
                        }
                    });

                $(".button_top").click(function(event){
                    event.preventDefault();
                        $('html, body').animate({scrollTop: 0}, duration);
                        return false;
                });

Thứ Sáu, 6 tháng 12, 2013

Truyền chuỗi vào biến

$path_server="Nội dung biến";
$son="path_server";
echo ${$son};

// Output
Nội dung biến

Thứ Sáu, 15 tháng 11, 2013

Jquery - Lazy load images loader

Link homepage: http://jquery.eisbehr.de/lazy/
Link download: http://www.mediafire.com/?bsicj0brmx6ojbm

Thứ Tư, 31 tháng 7, 2013

Chuyển biến Jquery thành Json và save file + php

download
http://www.mediafire.com/?sptrqocto870cg8

Thứ Ba, 30 tháng 7, 2013

Jquery AJAX Save to file

$('a#exportPage').on('click',function(){
var contentMap = {};
$('[id^="appendHeading"]').each(function(){
    contentMap[this.id] = $(this).text();
});
for(id in contentMap)
    $("#PrintIds").append("ObjectID:" + id + "Content:" + contentMap[id]);

$.ajax({
  url: "post.php",
  type: "post",
  data: { 
      objectID: id,
      content: contentMap[id]
      },
      success: function(){
      alert("success");
  },
  error:function(){
      alert("failure");
  }   
 }); 
});

And this PHP:

<?php
if ($_POST['objectID'] || $_POST['content']) {
$myFile = "test.css";
$stringData = $_POST['objectID'] || $_POST['content'];
file_put_contents($myFile,$stringData);
}
?>

Thứ Ba, 25 tháng 6, 2013

TẠO POPUP 26_6_2013

CSS
===========================================================
<style>
.box_login_ajax {
position: absolute;
}
#mask {
background: black;
position: fixed;
}
           </style>
HTML
===========================================================
                <div id="mask"></div>


                <a id='dangnhap_a' href="http://localhost/retot/modules.php?name=Your_Account&newlang=vietnamese">ѡng nh?p</a>
                <div class="box_login_ajax">
                    <h4>ѡng nhap</h4>
                </div>

JQUERY
===========================================================
                $("#dangnhap_a").click(function(){
                    var maskHeight = $(document).height();
                    var maskWidth = $(window).width();
                    $('#mask').css({'width':maskWidth,'height':maskHeight});
                    $('#mask').fadeIn(500);
                    $('#mask').fadeTo("slow",0.5);
                    $(".box_login_ajax").show();
                    $(".box_login_ajax").css({"zIndex":9001});
                    $(".box_login_ajax").css('top', maskHeight/15);
                    $(".box_login_ajax").css('left', maskWidth/2-$(".box_login_ajax").width()/2);
                    return false;
                });
                $(".btn.close_box").click(function () {
                    $('#mask').hide();
                    $(".box_login_ajax").hide();
                    $('.window').hide();
                });
                $('#mask').click(function () {
                    $(this).hide();
                    $(".box_login_ajax").hide();
                    $('.window').hide();
                });

Thứ Bảy, 22 tháng 6, 2013

Cuộn thanh quảng cáo khi scroll chuột với jQuery

Thi thoảng các bạn vào một số trang web thường thấy có banner quảng cáo ở 2 bên, khi ta cuộn chuột thì banner này trượt theo nội dung của trang. Bài viết này tôi sẽ hướng dẫn các bạn cách để tạo hiệu ứng cuộn theo như vậy.

HTML
*****

<body>

    <div class="main">

        <div class="adv">

        </div><!--banner quảng cáo bên trái-->

        <div class="content">

        </div><!--phần nội dung trang-->

        <div class="adv">

        </div><!--banner quảng cáo bên phải-->

    </div>

</body>

CSS
*****

.main{

    width:1200px;

    margin:auto;

}

.adv{

    float:left;

    width:150px;

    height:250px;

    background-color:#e1e1e1;

    margin-top:20px;

}

.content{

    float:left;

    width:860px;

    margin-left:20px;

    margin-right:20px;

    height:3000px;

    background-color:#e1e1e1;

}

Mã Jquery
********

$(window).scroll(function(){

    t = parseInt($(window).scrollTop()) + 20;

    $('.adv').stop().animate({marginTop:t},400);

})

Thứ Năm, 20 tháng 6, 2013

Jquery Elevatezoom

Download: http://www.mediafire.com/?kb2ms6eg6mhosi2

Thứ Tư, 24 tháng 4, 2013

Bkosborne jQuery Waterwheel Carousel

Download: http://www.mediafire.com/?21q3urd9r2wupot

Thứ Năm, 11 tháng 4, 2013

15 Useful jQuery Image Zoom Plugins

1. Featured Image Zoomer

Featured Image Zoomer

This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.

Đọc thêm »

Thứ Bảy, 23 tháng 3, 2013

Jquery tooltip

http://www.mediafire.com/?lcp0c1o1f9b6hok

Thứ Năm, 21 tháng 3, 2013

Thành công ngày 21/3/2013

Thứ Tư, 20 tháng 2, 2013

Jquery - Cách sử dụng hàm index để lấy vị trí của selector

Vihan Company

menu