l. Library | web.bendoi.vn | Học tập và chia sẻ kinh nghiệm thiết kế web

YTPlayer is a jQuery plugin that allows you to use a youtube video as the background of your web page using html5 data-* attributes and youtube API. You can also use this plugin as a normal video player for your web page.
Các thành phần cơ bản:
Basic Usage:

1. JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

2. CSS

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

3. Call the plugin

<script>
jQuery(function(){
jQuery(".player").mb_YTPlayer();
});
</script>

4. Initialize a YTPlayer as background

<a class="player" data-property="{videoURL:'BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">My video</a>

Trong đó:

opacity: 1 //(int) 0 → Set the opacity of the player;
mute: true //(boolean) mute the audio;
showControls: true // or false If you set the player as background you can show controls adding this parameter;
ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
quality: ‘default’ // or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
containment: (string) // the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element;
optimizeDisplay: true // (boolean) will fit the video size into the window size optimizing the view;
loop: true // (boolean) or false loops the movie once ended.
startAt: 20 // (int) Set the seconds the video should start at.
showYTLogo: true // (boolean) Show or hide the YT logo and the link to the original video URL.
showControls: true // (boolean) Show or hide the controls bar at the bottom of the page.

matteo@open-lab.com

http://jsbin.com/caxoj/1/
Video Background Plugin with HTML5 and Youtube API - YTPlayer

My video

Kỹ thuật sử dụng video trên Youtube làm hình nền chuyển động cho website.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="http://www.seanmccambridge.com/tubular/js/jquery.tubular.1.0.js"></script>
<script>
$().ready(function() {
$('#wrapper').tubular({
videoId: 'IoFepqbFN2o'
});
});
</script>
</head>

<body>
<div id="wrapper" class="clearfix">
<div id="main">
<p id="video-controls" class="black-65">Video controls:
<br /><a href="#" class="tubular-play">Play</a> | <a href="#" class="tubular-pause">Pause</a> | <a href="#" class="tubular-volume-up">Volume Up</a> | <a href="#" class="tubular-volume-down">Volume Down</a> | <a href="#" class="tubular-mute">Mute</a>
</p>
</div>
</div>
</body>

</html>

seanmccambridge

https://code.google.com/p/jquery-tubular/
Kỹ thuật sử dụng video trên Youtube làm hình nền chuyển động cho website.
YouTube Background Player jQuery

Tự động thay thế chuỗi ký tự trong bài viết

Đây là code bằng js đơn giản, dùng js tìm kiếm những thừ khóa được liệt kê, những từ khóa này sẽ bị thay thế bằng những chuỗi ký tự tùy ý. Chúng ta ứng dụng nó vào việc như: Tự động chèn link vào từ khóa, tự động tạo định dạng cho từ khóa, hoặc tạo hiệu ứng khi di chuột vào từ khóa sẽ xuất hiện box quảng cáo.

<script type='text/javascript'>
window.onload=function replaceText()
{
if(!document.getElementById){return;}
bodyText = document.getElementById("bodytext");
theText = bodyText.innerHTML;
theText = theText.replace(/bd/gi, "<a href=\'http://bendoi.vn\' target=\'_blank\'/>bên đời</a> ");
theText = theText.replace(/facebook/gi, "<b>facebook</b> ");
theText = theText.replace(/fb/gi, "<a href=\'https://www.facebook.com/groups/bendoibendoi/\' target=\'_blank\'>bendoibendoi</a>");
bodyText.innerHTML = theText;
}
replaceText();
</script>
<div id="bodytext">
bd có trang facebook là fb
</div>

kết quả:

bên đời có trang facebook là bendoibendoi

Thao Trịnh

Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.

CSS Hiệu ứng trượt lên xuống trái phải

Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.

<style>
#bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
.ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
display: table-cell;vertical-align: middle;
}
/*ngang*/
.ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
padding-top:35px}

.ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; padding-top:35px}

.ngang:hover .trai {margin-left: 120px;}
.ngang:hover .phai {margin-right: 120px;}
/*doc*/
.doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; top:10px}

.doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
bottom:10px;}

.doc:hover .tren {margin-top: 70px;}
.doc:hover .duoi {margin-bottom: 70px;}

</style>

<div id="bendoi">
<div class="ngang" style="width:150px; ">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

</div> gửi email đến tôi nếu bạn muốn có một thiết kế riêng thật đẹp mắt và không "đụng hàng"

trai

phai

tren

duoi

tren

duoi

trai

phai

trai

phai

tren

duoi

trai

phai

tren

duoi

Thao Trinh

http://web.bendoi.vn/2013/09/css-hieu-ung-truot-len-xuong-trai-phai.html

Đếm lùi thời gian bằng đồng hồ countdown

Code đếm ngược thời gian và kích hoạt sự kiện bằng html + css + javascript (jquery). Trong đó js chiếm khá nhiều. Dung lượng tối thiểu cho tất cả code của hiệu ứng này là 33.4kb.
Đếm lùi thời gian bằng đồng hồ countdown

Đây là hiệu ứng hiện số theo phong cách chiếc đồng hồ kiểu công tơ mét ngày xưa. Thuật toán sử dụng 1 bức ảnh cực dài 53x4619 px. Trên đó lần lượt là các kiểu ảnh tương ứng với từng con số từ 0 đến 9, trong những trạng thái từ gần chớm đến quá hết. Chứ đây không phải là hiệu ứng đếm lùi theo kiểu số thông thường, do đó chúng ta sẽ có một đẹp mắt với nền đen.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.countdown-original.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'digits.png',
startTime: '01:12:12:00'
});
$('#counter_2').countdown({
image: 'digits.png',
startTime: '00:10',
timerEnd: function(){alert("http://bendoi.vn");},
format: 'mm:ss'
});
});
</script>
<style type="text/css">
br { clear: both; }
.cntSeparator { font-size: 54px; margin: 10px 7px; color: #000; }
.desc { margin: 7px 3px; }
.desc div { float: left; font-family: Arial; width: 70px; margin-right: 65px; font-size: 13px; font-weight: bold; color: #000;}
</style>
<div id="counter"></div>
<div class="desc">
<div>Days</div>
<div>Hours</div>
<div>Minutes</div>
<div>Seconds</div>
</div>
<br />
<br />
<br />
<div id="counter_2"></div>
<div class="desc">
<div>Minutes</div>
<div>seconds</div>
</div>

Nội dung file jquery.countdown-second.js

/*
* jquery-counter plugin
*
* Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>
* Dual licensed under the MIT and GPL licenses.
*
* http://docs.jquery.com/License
*
*/
(function($){
jQuery.fn.countdown = function(userOptions) {
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function(){},
image: "digits.png"
};
var digits = [], interval;
// Draw digits in given container
var createDigits = function(where) {
var c = 0;
var tempStartTime = options.startTime = options.startTime.split('');
var tempFormat = options.format = options.format.split('');
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < tempStartTime.length; i++) {
if (parseInt(tempStartTime[i], 10) >= 0) {
elem = jQuery('<div/>').css({
// height: options.digitHeight * options.digitImages * 10,
height: options.digitHeight,
float: 'left',
background: 'url(\'' + options.image + '\') 0 0 no-repeat',
width: options.digitWidth
}).addClass('cntDigit').attr('id', 'cnt_' + i);
digits.push(elem);
margin(c, -((parseInt(tempStartTime[i], 10) * options.digitHeight * options.digitImages)));
digits[c].__max = 9;
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (tempFormat[i]) {
case 'h':
digits[c].__max = (c % 2 == 0) ? 2: 9;
if (c % 2 == 0)
digits[c].__condmax = 4;
break;
case 'd':
digits[c].__max = 9;
break;
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5: 9;
}
++c;
} else {
elem = jQuery('<div class="cntSeparator"/>').css({
float: 'left'
}).text(tempStartTime[i]);
}
where.append(
elem.wrap(
jQuery('<div/>').addClass("cnt-itemWrapper")
)
);
}
};

// Set or get element margin
var margin = function(elem, val) {
if (val !== undefined) {
if(jQuery.browser.msie) {
return digits[elem].css({
// marginTop: val+ 'px'
'background-position-y': val + "px"
});
} else {
return digits[elem].css({
// marginTop: val+ 'px'
'backgroundPosition': "0px " + val + "px"
});
}
} else {
if (jQuery.browser.msie) {
var backgroundPos = digits[elem].css('background-position-y');
// alert(backgroundPos);
return parseInt(backgroundPos.replace('px', ''), 10);
} else {
var backgroundPos = digits[elem].css('backgroundPosition').split(' ');
return parseInt(backgroundPos[1].replace('px', ''), 10);
}
}
// return parseInt(digits[elem].css('marginTop').replace('px', ''), 10);
};
// Makes the movement. This is done by "digitImages" steps.
var moveStep = function(elem)
{
digits[elem]._digitInitial = - (digits[elem].__max * options.digitHeight * options.digitImages);
return function _move() {
mtop = margin(elem) + options.digitHeight;
if (mtop == options.digitHeight) {
margin(elem, digits[elem]._digitInitial);
if (elem > 0) {
moveStep(elem - 1)();
} else {
clearInterval(interval);
for (var i=0; i < digits.length; i++) {
margin(i, 0);
}
options.timerEnd();
return;
}
if ((elem > 0) && (digits[elem].__condmax !== undefined) && (digits[elem - 1]._digitInitial == margin(elem - 1))) {
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
}

return;
}
margin(elem, mtop);
if (margin(elem) / options.digitHeight % options.digitImages != 0) {
setTimeout(_move, options.stepTime);
}

if (mtop == 0) {
digits[elem].__ismax = true;
}
}
};
jQuery.extend(options, userOptions);
this.css({height: options.digitHeight, overflow: 'hidden'});
createDigits(this);
interval = setInterval(moveStep(digits.length - 1), 1000);
};

})(jQuery);

Nội dung file jquery.countdown-original.js

/*
* jquery-counter plugin
*
* Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*/
jQuery.fn.countdown = function(userOptions)
{
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function(){},
image: "digits.png"
};
var digits = [], interval;
// Draw digits in given container
var createDigits = function(where)
{
var c = 0;
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < options.startTime.length; i++)
{
if (parseInt(options.startTime[i]) >= 0)
{
elem = $('<div id="cnt_' + i + '" class="cntDigit" />').css({
height: options.digitHeight * options.digitImages * 10,
float: 'left', background: 'url(\'' + options.image + '\')',
width: options.digitWidth});
digits.push(elem);
margin(c, -((parseInt(options.startTime[i]) * options.digitHeight *
options.digitImages)));
digits[c].__max = 9;
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (options.format[i]) {
case 'h':
digits[c].__max = (c % 2 == 0) ? 2: 9;
if (c % 2 == 0)
digits[c].__condmax = 4;
break;
case 'd':
digits[c].__max = 9;
break;
case 'm':
case 's':
digits[c].__max = (c % 2 == 0) ? 5: 9;
}
++c;
}
else
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
where.append(elem)
}
};

// Set or get element margin
var margin = function(elem, val)
{
if (val !== undefined)
return digits[elem].css({'marginTop': val + 'px'});
return parseInt(digits[elem].css('marginTop').replace('px', ''));
};
// Makes the movement. This is done by "digitImages" steps.
var moveStep = function(elem)
{
digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
return function _move() {
mtop = margin(elem) + options.digitHeight;
if (mtop == options.digitHeight) {
margin(elem, digits[elem]._digitInitial);
if (elem > 0) moveStep(elem - 1)();
else
{
clearInterval(interval);
for (var i=0; i < digits.length; i++) margin(i, 0);
options.timerEnd();
return;
}
if ((elem > 0) && (digits[elem].__condmax !== undefined) &&
(digits[elem - 1]._digitInitial == margin(elem - 1)))
margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
return;
}
margin(elem, mtop);
if (margin(elem) / options.digitHeight % options.digitImages != 0)
setTimeout(_move, options.stepTime);
if (mtop == 0) digits[elem].__ismax = true;
}
};
$.extend(options, userOptions);
this.css({height: options.digitHeight, overflow: 'hidden'});
createDigits(this);
interval = setInterval(moveStep(digits.length - 1), 1000);
};

Hình ảnh

Tìm kiếm trên mạng với từ khóa "digits.png", cái nào kích thước 53 × 4619 là chính nó.
Tôi đã sưu tầm một số ảnh trên những host khác nhau, với chút phong cách khác nhau cho bạn, bạn save về dùng

compile

- Giới thiệu: Thao trinh
- Tác giả code: Không rõ ! (Original author unknown)

Đây là code hiển thị một popup lên màn hình khi bạn click vào một liên kết. Tôi tìm thấy code này tại một site blogger Ấn Độ. Tại Việt Nam, một số blogger nổi tiếng cũng đã giới thiệu lại thủ thuật này, tuy nhiên nội dung js bỏ vào link js, css lại rồi thêm nội dung khác vào popup. Do đó mọi người có thể khó xác định nguồn và sử dụng nó hơi thụ động nếu không quen code.

Bài này tôi giới thiệu code cơ bản để các bạn nhanh hiểu, dễ tùy biến, tường minh về các phong cách. Cùng một thủ thuật này, có 2 kiểu hiệu ứng.
1. Để tắt khối popup thì phải click close.
2. Để tắt khối popup thì chỉ cần click vào màn hình hoặc click close cũng được

Hiệu ứng jquery hiện popup và tắt khi click vào nút close (cần nút tắt)

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>

Hiệu ứng jquery hiện popup và tắt popup bằng cách click lên vị trí bất kỳ bên ngoài (có thể không cần nút close)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
$(".background_overlay").fadeIn(500);
positionPopup();
});
//close popup
$("#close, .background_overlay").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid #8DC748;
padding: 10px;
background: white;
width: 270px;
height: 190px;
z-index: 200;
}
.background_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; background:black; opacity: 0.5;}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div class="background_overlay" style="display:none"></div>
<div id="overlay_form" style="display:none">
Nội dung ...
<a href="#" id="close" >Close</a>
</div>

Ở hai kiểu hiệu ứng trên, để hiện popup đều phải click lên một siêu liên kết. Nếu bạn muốn nó tự động xuất hiện popup khi load xong trang thì sửa lại phần js ở trên như sau:
jquery popup

Tức là loại bỏ dòng số 9 và dòng thứ 12 như hình trên
Ta có thể áp dụng cho 2 hiệu ứng trên. Tức là chúng ta sẽ có thêm 2 hiệu ứng nữa là:
3. Tự động hiện pupup, tắt popup bằng cách click vào nút close.
4. Tự động hiện popup, tắt popup bằng cách click bất kỳ bên ngoài popup (ko cần nút close)

Tham khảo

www.theonlytutorials.com/demo/typewriter/

Đây là hiệu ứng nhã từng chữ lên màn hình, giống như kiểu người ta đang đánh máy với thời gian thực. Code này Tôi sưu tầm từ một site ấn độ. Theo tôi để có hiệu ứng đánh máy như thế này, bạn phải thêm thư viện jquery vào site thì có vẻ hơi "tốn đất". Bạn nên áp dụng thủ thuật này khi mà site đã có file jquery đang áp dụng cho tính năng khác. Như vậy để tận dụng jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.typewrite{ font-size: 20px;}
.typing-cursor{ position: relative; display: inline-block; width: 8px; text-indent: -999em; background: #ccc;}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {
//dynamic delay to get the typewriting feel
var typingSpeed = Math.round(Math.random() * 120) + 60;
setTimeout(function() {
char++;
var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
typeFunc();
}, typingSpeed);
}());
});
</script>
<div class="typewrite">
Những dòng chữ viết theo kiểu đánh máy! <br/>
Những dòng chữ viết theo kiểu đánh máy! <br/>
Những dòng chữ viết theo kiểu đánh máy! <br/>
Những dòng chữ viết theo kiểu đánh máy! <br/>
</div>

Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!

Tham khảo!

http://www.theonlytutorials.com/demo/typewriter/

Đôi khi lướt web bạn sẽ thấy một số website sử dụng một vùng góc dưới nàm hình bên trái hoặc phải làm quảng cáo.
Code này ngắn gọn và nhẹ nhàng hơn một số code cùng loại, có nút bật/tắt tạm thời. Ứng dụng thủ thuật này vào các việc như ẩn hiện nội dung bài viết, menu click, bật tắt quảng cáo, ...

<script type="text/javascript">
function ad_button_show_hide() { var content = document.getElementById('ad_content'); var hide = document.getElementById('ad_button_show_hide'); if (content.style.display == "none") { content.style.display = "block"; hide.innerHTML = '<a href="javascript:ad_button_show_hide()"> Close</a>'; } else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:ad_button_show_hide()">VIEW</a>'; } }
</script>
<style>
.ad-main-float { position: fixed; bottom: 0px; z-index: 999;left: 0pt;}
* html .ad-main-float{position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;} /* IE6 position fixed Bottom */
#ad_button_show_hide a { background: #A6CAF6; padding: 3px; color: #5788D7;float:right;}
#ad_content {display: block;background:#E8E8FF;}
</style>

<div class="ad-main-float">
<div id="ad_button_show_hide"><a href="javascript:ad_button_show_hide()"> X </a></div>
<div id="ad_content">
<a href="http://bendoi.vn/" target="_blank">
<img src="https://lh3.googleusercontent.com/-zBf8h3gRvXk/UE8ahwocplI/AAAAAAAABAo/I63kMzDT2js/s246/logo-web3.png"/></a>
</div>
</div>

X

thaotrinh lần 1

http://web.bendoi.vn/2013/08/code-bat-tat-div-co-inh-o-goc-duoi-man.html

Đây là bài kết hợp 2 thủ thuật hiển thị thông báo 1 lần dựa vào cookie và bài tự động căn đối tượng giữa màn hình.

<script src="http://code.jquery.com/jquery-1.7.1.js" type='text/javascript'></script>
<script type='text/javascript'>function resizePopup() {$("#popuplayer1").css({height:$(window).height(),width:$(window).width() });}$(function() { resizePopup(); });$(window).resize(function() { resizePopup(); }); </script>
<style>
a{text-decoration:none;}
#edit-with-js-bin{display:none}
#popuplayer0{position: fixed;left:0px;top:0px;}
#popuplayer1 {display: table-cell;vertical-align: middle;text-align:center;background:#ccc;opacity:0.8;}
#popupcontent {width:455px;padding: 10px;display:inline-block;box-shadow: 0px 0px 50px 5px;background:#A6CDA4;}
</style>
<div id="popup">
<script type='text/javascript'>
//<![CDATA[
var content = '<a href="#"> Tôi đã học tương đối xong HTML CSS Javascript trên W3C!</a><br/><a href="#"> Tôi chưa, không học tại W3C!</a>';
if (document.cookie.indexOf("cookie-notex") == -1 )
{
var ducumentwrite = '';
ducumentwrite += '<div id="popuplayer0"><div id="popuplayer1"><div id="popupcontent">' + content + '</div></div></div>';
document.getElementById('popup').innerHTML = ducumentwrite;
document.cookie = "cookie-note"
};
//]] >
</script>
</div>

Chú ý khi bạn dùng chính thức thì sửa cookie-notex thành cookie-note, ở trên mình cố tình để lệch cookie như thế để thử demo luôn hiển thị.

bendoi.vn

Đây là code có sử dụng jquery có tác dụng căn một đối tượng ra giữa màn hình với bất kỳ màn hình nào, nó không phụ thuộc vào độ rộng dài của trang web mà phụ thuộc vào cỡ màn hình để lựa chọn vị trí giữa.

<script src="http://code.jquery.com/jquery-1.7.1.js" type='text/javascript'></script>
<script type='text/javascript'>function resizePopup() {$("#popuplayer1").css({height:$(window).height(),width:$(window).width() });}$(function() { resizePopup(); });$(window).resize(function() { resizePopup(); }); </script>
<style>
#popuplayer0{position: fixed;left:0px;top:0px;}
#popuplayer1 {display: table-cell;vertical-align: middle;text-align:center;background:#ccc;opacity:0.8;}
#popupcontent {width:255px;padding: 10px;display:inline-block;box-shadow: 0px 0px 50px 5px;background:#A6CDA4;}
</style>
<div id='popuplayer0'>
<div id='popuplayer1'>
<div id='popupcontent'>
Nội dung HTML <br/> <b>blog.bendoi.vn</b>
</div>
</div>
</div>

sưu tầm có sửa chữa và chắp vá code

http://web.bendoi.vn/2013/07/jquery-tu-dong-co-dinh-doi-tuong-tai-trung-tam.html

Chào bạn

Xem nhiều trong tuần

Bài viết cơ bản

Video Background Plugin with HTML5 and Youtube API - YTPlayer

YouTube Background Player jQuery

[js] Tự động thay thế chuỗi ký tự trong bài viết

CSS - Hiệu ứng trượt lên xuống trái phải

Đếm lùi thời gian bằng đồng hồ countdown

jquery - 4 kiểu Hiển thị một popup

Hiệu ứng jquery hiện popup và tắt khi click vào nút close (cần nút tắt)

Hiệu ứng jquery hiện popup và tắt popup bằng cách click lên vị trí bất kỳ bên ngoài (có thể không cần nút close)

jquery kiểu chữ đánh máy

Code bật tắt DIV cố định ở góc dưới màn hình

jquery- Hiển thị hộp thoại 1 lần tự động căn giữa màn hình

jquery- Tự động cố định đối tượng tại trung tâm màn hình