FTP Folder Error – Access Denied error message

image001

Today I have come across this issue which you will get this error message when you try to access a FTP folder “Windows cannot access this folder. Make sure you typed the file name correctly and that you have permission to access this folder.” I found this error happening only with the Internet explorer version 6.

There are two situation were you will encounter this problem:

1. When there is an FTP account which is saved by entering wrong Loging credentials

2. When you try to add one more FTP account and trying to access the account  you will get this error message. But in this case the first account credentials will be saved in that.

Let see how to fix this?

1. After getting this error click on OK.

2. Then Click on File menu and Click on Login as then enter the login information and if you require you can select the “Save password” option.

3. If you have second FTP account it is better you dont select the “Save password” option as it will throw this same error message if the login info is cached in the browser.

4. There is one more workaround which I found working and it is to upgrade the Internet explorer to version 7.

Note: I tried clearing the cache of IE 6 which didn’t help really but it worked in IE 7 after clearing the cache.

Advertisements
Đăng tải tại Thủ thuật | Thẻ , , , , , , , , , , , , , , , , , , , ,

One-pixel table border with CSS

Problem

I want to have a one-pixel one-color solid border around a table and its cells. Adding border="1" to the table tag isn’t suitable, because it looks horrific in most of the browsers.

Solution with HTML only

Back in the old days we used to use just HTML to create a one-pixel border. Some people even used 1×1 pixel transparent gifs, but let’s not go into that. The easiest way to achieve the border was to use nested tables: outer table that provides the border color and inner table that holds the content.

Here’s an example:

Cell 1 Cell 2
Cell 3 Cell 4

Looks pretty fine, doesn’t it? However, let’s look into the code:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td bgcolor="#660000">

    <table border="0" cellspacing="1" cellpadding="4">
    <tr>
        <td bgcolor="#FFFFCC">Cell 1</td>
        <td bgcolor="#FFFFCC">Cell 2</td>
    </tr>
    <tr>
        <td bgcolor="#FFFFCC">Cell 3</td>
        <td bgcolor="#FFFFCC">Cell 4</td>
    </tr>
    </table>

    </td>
</tr>
</table>

The outer table is very simple. Its bordercellspacing and cellpadding are all set to zero. It has only one cell whose background color is the one you want your border to have. The inner table has cellspacing of one pixel and thus the outer table’s background color is displayed around the inner table and between its cells.

The biggest downside of this approach is that we must have two HTML tables to display one table of data. Also, maintaining the code is difficult, as all the table cells must separately contain the background color attribute. Of course, with a little bit of CSS, you can move the background color setting to the style sheet.

The nifty solution with CSS

With the magic of CSS, we can clean up the code a lot. Here’s what we get:

Cell 1 Cell 2
Cell 3 Cell 4

Unless you’re using a browser that doesn’t support CSS or a browser that supports it badly, the chances are that the table looks exactly the same as the one before. Again, let’s look into the HTML code:

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
</table>

This is all we have. Really. Everything else is hidden in a style sheet. You can easily change the looks of your table without touching the HTML (at least that’s what they say, but anyway…).

Maybe the first thing that comes up to your mind when you start creating a style sheet for a table border is to add a one-pixel border to every table cell. However, that would cause the borders to “duplicate” between the cells. The trick is to let cells to have only the top and right borders and add the bottom and left borders to the table. This way it looks like every cell is surrounded with a border, even though technically this is not the case.

This is how we get there:

table
{
    border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}

td
{
    border-color: #600;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px;
    background-color: #FFC;
}

The table cell style sheet has margin set to zero, just for sure, and padding set to four pixels, like in our HTML example. The background-color is set to our beautiful light yellow.

Unfortunately we’re not there yet. In Internet Explorer, Opera and Safari there are weird-looking spaces between each cell. This is because we haven’t explicitly set the space between each cell to zero. In CSS2, there is an attribute for that called border-spacing, but currently it’s only supported by Safari. However, for IE/Win and Opera we can use the border-collapse attribute which “sets the border model of a table”. It has two alternative values, separate (which is the default) and collapse. We’ll go for collapse.

The only culprit after this is IE/Mac which supports neither of these CSS attributes. If you want that your table is displayed correctly in IE/Mac, you must change the tabletag in your HTML code so that it has the parameter cellspacing="0". We have left it out of the final code.

To make the CSS code easier to maintain, we can first set the border color for both table and td and then set the differing part separately. If you later want to change the border color, you only need to change it in one place.

Here is our final code:

<style type="text/css">
/* <![CDATA[ */

table, td
{
    border-color: #600;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    background-color: #FFC;
}

/* ]]> */
</style>

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
</table>
Đăng tải tại Web-Design | Thẻ , , , , , , , , , , , , , , , , , ,

Cannot copy file : data error (cyclic redundancy check)?

CRC error is normally there’s a physical damage on the source, in this case is the external HDD. Scan your external HDD for error (right click the HDD -> Properties ->error checking). After finish try to copy again

Đăng tải tại Thủ thuật | Thẻ , , , , , , , , , , , , , , , , ,

tipsy – Facebook-style tooltip plugin for jQuery

Examples & Usage

Basic

By default, tooltips will appear centred underneath their anchor:

Hover over me

Basic example:
$('#example-1').tipsy();

Gravities

Using the gravity parameter, it’s possible to control the positioning of the tooltip relative to the pointee:

Northwest North Northeast
West East
Southwest South Southeast
Gravity example:
$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se

As of version 0.1.3, it’s possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied – $.fn.tipsy.autoNS and $.fn.tipsy.autoWE – which select north/south and west/east gravity, respectively, based on the element’s location in the viewport.

Here’s an example (scroll the page to see the effect):

Dynamic Gravity

Dynamic gravity example:
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});

Fading

For full Wob2.0 compliance, you must fade these badboys in:

Hover over me

Fade example:
$('#example-fade').tipsy({fade: true});

Bonus Feature

You can EVEN COMBINE FADE AND GRAVITY! (exercise for reader)

Slightly Advanced Usage

Tooltip text can be set based on any attribute, not just title:

Hover over me

Custom attribute example:
$('#example-custom-attribute').tipsy({title: 'id'});

If any attribute isn’t good enough, you may pass a callback function instead. It should return the tooltip text for thiselement:

Hover over me

Callback example:
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });

Finally, it is possible to specify a fallback tooltip for any element which does not have any tooltip text:

Hover over me

Fallback example:
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });

If your tooltip content contains HTML, set the html option to true (relies on invalid HTML, sorry):

Hover over me

HTML example:
$('#example-html').tipsy({html: true });

Show/Hide Delay

Delay example:
$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});

Hover and wait

Dynamically Updating Text

Tipsy tooltips are ‘live’ – if the source attribute’s value changes, the tooltip text will be updated the next time the tooltip is shown. There’s one caveat – if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead (this only applies if you’re using the title attribute).

Dynamic updating example:
Hover over me | New tooltip text:  

Using Tooltips on Form Inputs

Tooltips can be bound to form inputs’ focus/blur events using the option {trigger: 'focus'}:

Form input tooltips example:
       Mr       Mrs       Miss     

Form input tooltips code:
<script type='text/javascript'>
  $(function() {
    $('#focus-example [title]').tipsy({trigger: 'focus', gravity: 'w'});
  });
</script>

Manually Triggering a Tooltip

It’s possible to disable hover events and instead trigger tooltips manually:

Manual triggering example:
Code for manual triggering:
<p id='manual-example'>
  <a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a>
  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>
</p>

<script type='text/javascript'>
  $('#manual-example a[rel=tipsy]').tipsy({trigger: 'manual'});
</script>

Support for Live Events

Live events are supported using the option {live: true}. jQuery ≥ 1.4.1 is required and live tooltips do not support manual triggering.

Live events example:
Code for live events:
<script type='text/javascript'>
  $('a.live-tipsy').tipsy({live: true});
</script>

Summary of Configuration Options

Here is the default options declaration:

$.fn.tipsy.defaults = {
    delayIn: 0,      // delay before showing tooltip (ms)
    delayOut: 0,     // delay before hiding tooltip (ms)
    fade: false,     // fade tooltips in/out?
    fallback: '',    // fallback text to use when no tooltip text
    gravity: 'n',    // gravity
    html: false,     // is tooltip content HTML?
    live: false,     // use live event support?
    offset: 0,       // pixel offset of tooltip from element
    opacity: 0.8,    // opacity of tooltip
    title: 'title',  // attribute/callback containing tooltip text
    trigger: 'hover' // how tooltip is triggered - hover | focus | manual
};

Notes

Tipsy needs to erase any existing value for an element’s title attribute in order to suppress the browser’s native tooltips. It is stashed in the element’s original-title attribute in case you need to retrieve it later.

As of version 0.1.4, the tooltip text is recomputed on every hover event so updating the title attribute will have the expected effect.

Download

Package

Package downloads are available from the jQuery project page.

github

jason@donut ~ $ git clone git://github.com/jaz303/tipsy.git
Đăng tải tại jQuery | Thẻ , , , , , , , , , , , , , , , , , , , ,

jQuery Sticky Tooltip

Demo: http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

 

 

Sticky Tooltip – plugin của jQuery giúp website chúng ta có thêm nhiều thông tin hơn bằng cách sử dụng tooltip.

Tooltip sẽ được hiện lên khi chúng ta rê chuột vào bất cứ phần tử nào của trang web ( thẻ a , hình ảnh … ) và có thể được giữ lại trên màn hình bằng cách bấm phím ‘s’ hoặc click chuột phải. Nội dung của mỗi tooltip là các đoạn mã HTML vì thế rất dễ dàng cho chúng ta chỉnh sửa.

Cách sử dụng :

Trước tiên, bạn cần download jQuerystickytooltip.jsstickytooltip.css. Sau đó thêm vào trong thẻ <head> của trang web:

1 <script type="text/javascript" src="js/jquery.js">
2 <script type="text/javascript" src="js/stickytooltip.js">
3 <link rel="stylesheet" type="text/css" href="css/stickytooltip.css" />

Định vị trí cần hiện tooltip (data-tooltip=”sticky1″ là nơi ta sẽ lấy tooltip):

1 <p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>

Tạo nội dung tooltip:

1 <div id="mystickytooltip" class="stickytooltip">
2 <div id="sticky1" class="atip" style="width:200px"><imgsrc="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />Thailand boasts some of the most popular and luxurious resorts in Asia.</div>
3 </div>

Chú ý : Tất cả tooltip phải để trong thẻ DIV có class là “stickytooltip” và id là tên được định nghĩa trong stickytooltip.js

Chỉnh sửa các tham số:

Mở file stickytooltip.js bạn sẽ thấy các tham số ngay ở các dòng đầu tiên

1 tooltipoffsets: [20, -30], / /Vị trí xuất hiện của tooltips so với chỏ chuột
2 fadeinspeed: 200, // Thời gian hiệu ứng (milliseconds)
3 rightclickstick: true// Giữ tooltip không bị ẩn đi khi click phải chuột (hoặc ấn phím 's')
4 stickybordercolors: ["black""darkred"], // Màu viền của tooltip theo trạng thái (giữ - không giữ)
5 stickynotice1: ["Press \"s\"""or right click""to sticky this box"],   // Tùy biến thông điệp của tooltip
6 stickynotice2: "Click outside this box to hide it"//Tùy biến thông điệp của tooltip

Kéo xuống dưới cùng bạn sẽ thấy

1 infotooltip.init("*[data-tooltip]""mystickytooltip")

dòng in đậm chính là id của thẻ DIV mà ta đã đề cập ở trên.

Để có thể xem chi tiết hơn , bạn có thể vào trang chủ Dynamic Drive Website.

Đăng tải tại jQuery | Thẻ , , , , , , , , , , , , , , , , , , , ,

Visual Studio 2008 switch back to 2005

  1. Replace Version 10.0 in *.sln files with Version 9.00
  2. Replace 2008 with 2005 in *.sln
  3. Replace Version=”9.00″ with Version=”8.00″ in each *.vcproj / *.csproj / *.vbproj file
Đăng tải tại 4-Coding | Thẻ , , , , , , , , , , , , , , , , , , , ,

Kiến thức cần biết về QR Code

Nhận được thư mời có một ô vuông bên trong có nhiều ký tự lạ chồng chéo, đó là QR Code. Nó bắt đầu xuất hiện khắp nơi như nhãn bìa sản phẩm, và gần như là phương thức nhận diện chủ yếu cho ứng dụng di động. Vậy QR Code là gì? Một số thông tin cơ bản sau sẽ giúp bạn hiểu hơn về loại mã vạch mới này.

 
Khả năng của Mã QR kết nối mọi người đến người khác và đến nội dung đa truyền thông số sẽ rất hữu ích cho doanh nghiệp và người tiêu dùng – Ảnh minh họa: QRCode.com

 QR Code: mã vạch thế hệ mới

Tham khảo quá trình chuẩn hóa Mã QR tại đây.

 

QR Code, viết tắt của Quick response code (tạm dịch “Mã phản hồi nhanh”) hay còn gọi là mã vạch ma trận (matrix-barcode) là dạng mã vạch hai chiều (2D) có thể được đọc bởi một máy đọc mã vạch hay smartphone (điện thoại thông minh) có chức năng chụp ảnh (camera) với ứng dụng chuyên biệt để quét mã vạch.

Tìm trên kho ứng dụng iTunes hay Android Market từ khóa “QR scanner” để tải ứng dụng quét QR Code cho iPhone hay smartphone dùng Android. Có thể dùng i-nigma cho iPhone hoặc Barcode scanner cho Android. Nhiều dòng điện thoại di động Nokia và BlackBerry đã cài đặt sẵn ứng dụng đọc mã QR.

 

 qrcode
Mã QR dẫn đến trang http://leducminh.com khi bạn quét lên bằng smartphone

QR Code (mã QR) được tạo ra bởi Denso Wave (công ty con của Toyota) vào năm 1994, có hình dạng bao gồm các điểm đen và ô vuông nằm trong ô vuông mẫu trên nền trắng. QR Code có thể được đọc nhanh hơn, tiết kiệm thời gian và không gian so với các loại mã vạch truyền thống.

Một mã QR có thể chứa đựng thông tin một địa chỉ web (URL), thời gian diễn ra một sự kiện, thông tin liên hệ (như vCard), địa chỉ email, tin nhắn SMS, nội dung ký tự văn bản hay thậm chí là thông tin định vị vị trí địa lý. Tùy thuộc thiết bị đọc mã QR mà bạn dùng khi quét, nó sẽ dẫn bạn tới một trang web, gọi đến một số điện thoại, xem một tin nhắn…

Video clip giới thiệu về QR Code – Nguồn: YouTube

Mã QR khác mã vạch truyền thống ra sao?

Mã QR cũng tương tự mã vạch truyền thống bạn thường thấy trên các thùng hàng, các sản phẩm được người bán lẻ theo dõi quản lý kho hàng và giá sản phẩm trong kinh doanh. Điểm khác nhau giữa mã QR và mã vạch truyền thống là lượng dữ liệu chúng nắm giữ hay chia sẻ.

Các mã vạch truyền thống có các đường vạch thẳng dài một chiều và chỉ có thể lưu giữ 20 số chữ số, trong khi các mã QR hai chiều có thể lưu giữ thông tin hàng ngàn ký tự chữ số. Mã QR nắm giữ nhiều thông tin hơn và tính chất dễ dùng sẽ giúp ích rất nhiều cho doanh nghiệp nhỏ.

Dung lượng lưu trữ dữ liệu của Mã QR

Số

Tối đa 7.089 ký tự

Chữ số

Tối đa 4.296 ký tự

 
So sánh giữa lượng dữ liệu của mã vạch truyền thống chiếm nhiều không gian hơn mã QR – Nguồn: Denso Wave

 Tạo mã QR ra sao?

Mã QR có thể được in ở bất kỳ máy in nào tương thích mã QR. Phần mềm chạy trên hệ điều hành Windows có thể được dùng để tạo mã QR rồi in ở bất kỳ máy in nào tương thích với PC dùng Windows.

Mọi người đều có thể tạo mã QR cho riêng mình hoàn toàn miễn phí. Chỉ cần gõ từ khóa “QR code generator” trên công cụ tìm kiếm bạn sẽ tìm được rất nhiều công cụ trực tuyến giúp tạo mã QR. Tuy nhiên, bạn có thể tham khảo công cụ đáng tin cậy Kaywa được tạo bởi Datamatrix, Qurify hay Delivr. Có thể sáng tạo hơn cho mã QR với màu sắc cùng các tùy chọn tại Kerem Erkan hoặc QRStuff.

Dịch vụ rút ngắn liên kết Goo.gl của Google (Google URL Shortener) cũng hỗ trợ tạo mã QR từ một liên kết web, nhấn vào nút Details để thấy ảnh mã QR.

Mã QR đi vào đời sống

Tuy còn xa lạ với mọi người nhưng Mã QR đã và đang đi vào đời sống hiện đại, hiện diện ở khắp nơi, từ những cao ốc lớn đến những namecard trao tay, từ những thiếp mời các sự kiện công nghệ, hội thảo hay chỉ đơn giản là để nhập thêm bạn trên BlackBerry Messenger (quét mã QR để nhận dạng số PIN).

Video clip áp dụng Mã QR lên namecard – Nguồn: YouTube

Mã QR đang rất được giới marketing và quảng cáo chuộng dùng cho các ý tưởng quảng cáo tạp chí, trên các băng ghế công viên, xe buýt, đóng gói sản phẩm hay bất kỳ sản phẩm vật lý nào mà người tiêu dùng muốn tìm hiểu thêm thông tin về nó. Ví dụ bạn có thể nối kết website của mình lên namecard, tờ rơi quảng cáo có thể nối kết một website như Google Maps để chỉ dẫn hướng đi. Tiện lợi hơn, khi tham dự một buổi hội thảo hay triển lãm, bạn có thể quét mã QR do ban tổ chức cung cấp để nó dẫn đến một tập tin video hay audio giới thiệu thêm thông tin chi tiết.

 
Hãng hàng không United Airlines đã áp dụng mã 2 chiều như là cách phiếu lên máy bay.

Tính khả thi và tiềm năng của Mã QR là vô hạn chứ không chỉ gói gọn trong một phạm vi hay lĩnh vực. Bạn sẽ sớm bắt gặp Mã QR hiện diện khắp mọi nơi và đây có thể là cách nhận dạng, truy xuất thông tin mới trong xã hội hiện đại.

Đăng tải tại Kiến thức - Công nghệ | Thẻ , , , , , , , , , , , , , , , , , , ,

Cool Yahoo! Messenger Status Image on your Website / Blog / Friendster / Myspace

– Bạn thường trao đổi thông tin khách hàng bằng Yahoo Chat, nhưng không biết phải làm sao để đưa nick Yahoo của mình vào Website, Forum, Blog,… thì copy đoạn mã này gián vào nơi bạn cần. Chúng sẽ luôn xuất hiện trên website của bạn, Mọi người khi đang truy cập sẽ biết bạn đang ở trạng thái Online hay Offline. Có rất nhiều kiểu để lựa chọn.

– Mỗi website nên có chức năng này, để hỗ trợ mọi người nhanh hơn, đồng thời tạo ra một kết nối liên tục tới khách hàng

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=1&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=2&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=3&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=4&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=5&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=6&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=7&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=8&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=9&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=10&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=11&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=12&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=13&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=14&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=15&1=us”></a&gt;

Highslide JS

<a href=”ymsgr:sendim?YAHOO_ID_HERE” border=”0″><img src=”http://opi.yahoo.com/online?u=YAHOO_ID_HERE&m=g&t=16&1=us”></a&gt;

Đăng tải tại Web-Design | Thẻ , , , , , , , , , , , , , , , , ,

Lỗi: Caution: This hard disk may be infected by virus

Do install boot manager vào hdd
Khắc phục: dùng đĩa hiren và chọn smart fdisk, tại đây chọn ổ đĩa cài win rồi vào menu boot manager->uninstall boot là xong

Đăng tải tại Thủ thuật | Thẻ , , , , , , , , , , , , , , , , ,

How to Restore SQL Server 2005 Suspect Database

Introduction

If your project’s database is in suspect mode, then no transaction will take place until and unless you repair your database. That causes a show stopper for your up and running application. Here, you will find a way to get out of this.

Background

Your Database is in Suspect Mode. I guess, you haven’t experienced this problem till now. But, if it comes to you and if the database is LIVE, then it’s time to read this article to get out of this tension.

Using the Code

If you find your database in Suspect mode, then please keep your nerve strong. Just proceed step by step what I am written below. I think you will get out of this trouble. SQL Server 2005 introduced a new DB Status called Emergency. This mode can change the DB from Suspect mode to Emergency mode, so that you can retrieve the data in read only mode. The steps are… After executing the script given below, you will get back your database in operational mode. Actually I have tried with two of my existing live systems and found no data loss.

Note: Obviously there are two more options available. Run REPAIR_ALLOW_DATA_LOSS to ensure the database is returned to a structurally and transitionally consistent state. Here are a few things to bear in mind about emergency mode repair: it’s a one-way operation. Anything it does cannot be rolled back or undone. If this worries you (if someone ever got into that state, then surely don’t have the healthy concern about data that they should have in the first place) then make a copy of the damaged database before you run emergency mode repair.
As it’s a one-way operation, you cannot wrap it in an explicit user-transaction.
It’s the only repair option available in emergency mode – if you try to use REPAIR_REBUILD, then it won’t work.

  1. EXEC sp_resetstatus ‘yourDBname’;
  2. ALTER DATABASE yourDBname SET EMERGENCY /*for 2005*/
  3. DBCC checkdb(‘yourDBname’)
  4. ALTER DATABASE yourDBname SET SINGLE_USER WITH ROLLBACK IMMEDIATE
  5. DBCC CheckDB (‘yourDBname’, REPAIR_ALLOW_DATA_LOSS)
  6. DBCC CHECKTABLE (‘tableName’, REPAIR_ALLOW_DATA_LOSS)
  7. ALTER DATABASE yourDBname SET MULTI_USER
Đăng tải tại SQL server | Thẻ , , , , , , , , , , , , , , , , , , , , , ,

Automatic Image Slider with CSS & jQuery

The Wireframe – HTML

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

Automatic Image Slider CSS jQuery

<divoutline-style: none; outline-width: initial; outline-color: initial; ">main_view">
    <divoutline-style: none; outline-width: initial; outline-color: initial; ">window">
        <divoutline-style: none; outline-width: initial; outline-color: initial; ">image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <divoutline-style: none; outline-width: initial; outline-color: initial; ">paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

Styling – CSS

Take a look at the comments below for an explanation of the styles.

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:286px;	width: 790px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Step 3. Setting up jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

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

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 4. Bringing it to Life – jQuery

The following script contains comments explaining which jQuery actions are being performed.

Setting up the Image Slider
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

Setting up the Slider Function and Timer
We first create the function for the slide event by itself (rotate). Then create another function (rotateSwitch) that will rotate and repeat that slide event (rotate).

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

Take a look at this tutorial for an explanation of how the timer (setInterval) works.

Hover and Click Events
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});

Automatic Image Slider CSS jQuery

Inspiration

Below are some sites that use similar techniques, check them out for inspiration!

Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery

Đăng tải tại jQuery | Thẻ , , , , , , , , , , , , , , , , , ,

Horizontal Subnav with CSS & jQuery

Wireframe – HTML

Nest a set of links wrapped within the <span> tag, this is how the sub navigation will be positioned.

<ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

Styling – CSS

Horizontal Subnavigation - CSS jQuery Tutorial
Unlike a regular drop down menu where the subnav appears directly underneath the hovered/clicked list item, in this case all the subnav sets will start at the same location (left aligned – underneath the navigation).

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 1.2em;
	background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

Now set the absolute positioning on the <span> tag 35px from the top. I added some rounded corners on the bottom for style (this will not work in IE).

ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

For those who are not very familiar with how positioning works, check out the following tutorials:

IE6 Fix – jQuery

Since IE6 does not understand li:hover (basically it only understands a hover event on a <a> tag), use jQuery to go around the issue.

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

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

The following script contains comments explaining which jQuery actions are being performed.

<script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : 'none'}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	});

});
</script>

Horizontal Subnavigation - CSS jQuery Tutorial

Đăng tải tại jQuery | Thẻ , , , , , , , , , , , ,

Mega Drop Down Menus with CSS & jQuery

Step 1. Foundation – HTML

Start by creating an unordered list. Since we will be using CSS Sprites for our navigation states, each link within the list item should have a unique class name to it.

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Sale</a></li>
    <li><a href="#">Community</a></li>
    <li><a href="#">Store Locator</a></li>
</ul>

Step 2. Styling Foundation – CSS

Since our drop down menu will be using absolute positioning, be sure to add a relative positioning to the list item. Shoot the text off of the page by specifying a text-indent of -9999px. We will then replace each navigation link with an image by specifying an image path to each link class name.

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative; /*--Important--*/
}
ul#topnav li a {
	float: left;
	text-indent: -9999px; /*--Push text off of page--*/
	height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/
ul#topnav a.home {
	background: url(nav_home.png) no-repeat;
	width: 78px;
}
ul#topnav a.products {
	background: url(nav_products.png) no-repeat;
	width: 117px;
}
ul#topnav a.sale {
	background: url(nav_sale.png) no-repeat;
	width: 124px;
}
ul#topnav a.community {
	background: url(nav_community.png) no-repeat;
	width: 124px;
}
ul#topnav a.store {
	background: url(nav_store.png) no-repeat;
	width: 141px;
}

Step 3. Creating the Mega Sub Navigation – HTML

Add a class of “sub” right after your main navigation link and nest unordered lists within. Each nested unordered list will act as the nav columns of your mega drop down.
Mega Drop Down Menu

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li>
    	<a href="#">Products</a>
        <div>
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Sale</a></li>
    <li><a href="#">Community</a></li>
    <li><a href="#">Store Locator</a></li>
</ul>

Step 4. Styling Mega Sub Navigation – CSS

To get the sub nav to stick to the bottom left corner of the parent hovered nav, be sure to set an absolute position to the .sub container with the coordinate of top 44px and left 0px. For style, I added rounded corners to those browsers that support it (Firefox/Chrome/Safari).

Keep in mind when having multiple levels of nested lists, you need to override its conflicting properties. Check out the comments below.

ul#topnav li .sub {
	position: absolute; /*--Important--*/
	top: 44px; left: 0;
	z-index: 99999;
	background: #344c00 url(sub_bg.png) repeat-x; /*--Background gradient--*/
	padding: 20px 20px 20px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--Hidden for those with js turned off--*/
}
ul#topnav li .row { /*--If needed to break out into rows--*/
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%; /*--Override parent list item--*/
	color: #fff;
}
ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/
	padding: 5px 0;
	background-image: none;
	color: #e8e000;
}
ul#topnav .sub ul li a {
	float: none;
	text-indent: 0; /*--Override text-indent from parent list item--*/
	height: auto; /*--Override height from parent list item--*/
	background: url(navlist_arrow.png) no-repeat 5px 12px;
	padding: 7px 5px 7px 15px;
	display: block;
	text-decoration: none;
	color: #fff;
}
ul#topnav .sub ul li a:hover {
	color: #ddd;
	background-position: 5px 12px ;/*--Override background position--*/
}

Step 5. Setting up jQuery & Hover Intent

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

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

After calling the jQuery file, visit and download the latest Hover Intent jQuery Plugin. Save the file to your current directory, and call the file.

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>

Step 6. Launching Code on Document Ready

Directly after the line where you called your jQuery and hover intent file, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 7. Set Hover Over & Hover Out Events – jQuery

Note: When using the hover intent plugin, it requires each hover over and hover out state to be in its own function.

The Logic

When a drop down parent link is hovered over:

  1. Find .sub and fade it in (By default, we will fade the opacity down to 0)
  2. Check if a .row exists (in case you want more than one row in the drop down)
  3. If .row does exists, find the widest row and set the width of the .sub container.
  4. If .row does not exist, set the width of the .sub container.

On hover out:

  1. Find .sub and fade it out (Opacity 0)
  2. Hide .sub (Display none – so it is completely out of the way)

The following script contains comments explaining which jQuery actions are being performed.

//On Hover Over
function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;	

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

Step 8. Set Custom Configurations & Trigger Function

Now that we declared the hover over and hover out function in the above step, its now time to set the custom configurations and call the hover intent function.

//Set custom configurations
var config = {
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
     interval: 100, // number = milliseconds for onMouseOver polling interval
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
     timeout: 500, // number = milliseconds delay before onMouseOut
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

For more detailed explanation of how hover intent works, check out their website.

Conclusion

Keep in mind that this script calculates the width of your .sub container (adding up all UL’s per row) and automatically adjusts it. If you would like to specify your own custom width, you can delete that portion of the code and specify a static width in your CSS. This all depends on what you are trying to add in your mega drop down, and each scenario may be different. I hope you grasped the basic concepts of this tutorial so you can make your own custom mega drop down for future projects. If you have any questions, concerns, or suggestions, please let me know!

Mega Drop Down Menu - CSS & jQuery

Đăng tải tại jQuery | Thẻ , , , , , , , , , , ,

Fancy Thumbnail Hover Effect with CSS & jQuery

Build the Foundation – XHTML

Our markup will be fairly simple, just an unordered three columned list.

<ul>
	<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
	<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dress it Up – CSS

Pay close attention to the positioning properties between the list item and the image. We have to make sure that the hovered image must be on top of the other images, so this part is key.

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}

*Note – For more information about this property: -ms-interpolation-mode: bicubic, refer to Chris Coyier’s Bicubic Scaling fix for IE. For those who are using PNG files as the background, refer to my previous article, “PNG Transparency Fix in IE6“.

Bring it to Life – jQuery

Basically all we are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment w/ css), and padding when we hover over. During this animation, we also switch the value of the z-index, so that the selected image stays on top of the rest.

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* Set new width */
			height: '174px', /* Set new height */
			padding: '20px'
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* Set width back to default */
			height: '100px', /* Set height back to default */
			padding: '5px'
		}, 400);
});

*Note – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at www.LearnjQuery.com

Fancy Thumbnail Hover Effect w/ jQuery

Conclusion

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.

Đăng tải tại jQuery | Thẻ , , , , , , , , , , , ,

Simple Tabs with CSS & jQuery

Step1. Wireframe – HTML & CSS

Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I used generic names like “tab1″ so its easier to understand. In reality, you should be using keywords so it can semantic and also benefit you in SEO.

HTML

<ul>
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div>
    <div id="tab1">
        <!--Content-->
    </div>
    <div id="tab2">
       <!--Content-->
    </div>
</div>

If you have tried to create tabs before with CSS, you probably have experienced some frustration with getting the borders on the tabs correctly aligned. Below is a common problem that most people will run into.

Easy Tabs Tutorial with CSS & jQuery

Here is a solution I came up with that took care of this annoying issue. Check out the image below and also take a look at the CSS and its supporting comments for a better understanding.

Easy Tabs Tutorial with CSS & jQuery

Tabs CSS

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

Tab Content CSS

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

Step 2. Activate the Tabs – jQuery

For those who are not familiar with jQuery, check out their site for a general overview.
The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

Easy Tabs Tutorial with CSS & jQuery

 

Đăng tải tại jQuery | Thẻ , , , , , , , , , , ,

Family Mart

Hình ảnh | Posted on by | Thẻ , , ,

Acecook

Hình ảnh | Posted on by | Thẻ , , ,