Thứ Sáu, 25 tháng 5, 2012

Carousel slide

http://www.tripwiremagazine.com/2012/01/jquery-carousel.html

http://caroufredsel.frebsite.nl/

novislide

nivoZoom: http://nivozoom.dev7studios.com/

Zoom: http://www.pixelzdesign.com/blog_view.php?id=59
http://www.redfoxmagazine.com/28-jquery-zoom-plugins-feel-happy/
http://www.tripwiremagazine.com/2012/03/jquery-effects.html 

colorbox: http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

caption: http://www.wbotelhos.com/capty/
http://www.ferretarmy.com/files/jQuery/ImageOverlay/ImageOverlay.html 

Hieu menu:

ma js:
 
$(document).ready(function() { 

$(".h_nav li").hover(function(){ 

        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
        },function(){ 
        $(this).find('ul:first').css({visibility: "hidden"}); 

        }); 
});
ma CSS:

.main_nav{
width: 675px;
height: 45px;
}
.left_h_nav{
height: 45px;
width: 5px;
float: left;
}

.h_nav{
float: left;
background: transparent url("../images/back_nav_center.png") repeat;
}
.h_nav> li{
height: 45px;
float: left;
padding: 0px 25px;
border-right: 1px solid #a48111;
position: relative;
}
.h_nav> li:hover{
background: transparent url("../images/back_nav_center_active.png") repeat !important;
}
.h_nav li a{
display: block;
font-size: 13px;
font-weight: bold;
color: #fff;
float: left;
line-height: 45px;
}
.ico_sub_menu{
display: block;
width: 10px;
height: 6px;
background: transparent url("../images/icon_sub_menu.png") no-repeat !important;
float: left !important;
margin-top: 22px !important;
margin-left: 5px !important;
}
.h_nav ul {
    position: absolute;
    width: 220px;
    top: 45px;
    display: none;
background: transparent url("../images/back_submenu.jpg") repeat;
border: 1px solid #3b341b;
left: 0px;
-moz-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.h_nav ul li, .h_nav ul li ul li,.h_nav ul li ul li ul li{
width: 220px;
float: left;
position: relative;
border-bottom: 1px solid #676045;
}
.h_nav li ul a {
display: block !important;
width: 207px;
padding-left: 5px;
color: #faf8f8;
line-height: 30px;
float: left;
}
.h_nav li ul li span{
display: block;
width: 8px;
height: 13px;
float: right;
margin-top: 9px;
}
.h_nav li ul li:hover {
background: #574c28;
}
.h_nav ul ul, .h_nav ul ul ul{
    top: -1px;
}
.h_nav li ul ul, .h_nav li ul ul ul {
    left: 220px;
}
.h_nav li:hover ul ul,
.h_nav li:hover ul ul ul,
.h_nav li:hover ul ul ul ul {
    display: none;
}

.h_nav li:hover ul,
.h_nav li li:hover ul,
.h_nav li li li:hover ul,
.h_nav li li li li:hover ul {
    display: block;
}
.right_h_nav{
height: 45px;
width: 5px;
float: left;
}

javascript ()()()()()()()():

    $(document).ready(function(){
        $(".cont_help").hide();   
        $(".title_help").click(function(){
            $(".cont_help").slideToggle();   
        });       
        $('.title_help').click(function(){
            if($(".help_line div").hasClass('bg_tit2'))
            {
            $('.title_help').removeClass("bg_tit2");   
            }else
            {$('.title_help').addClass("bg_tit2");}
        });
           
    });

Thứ Năm, 24 tháng 5, 2012

Reset Css and Basic HTML

Reset file:

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label,
table, caption, tbody, tfoot, thead, tr, td {
margin: 0;
padding: 0;
border: none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
text-decoration: none;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
.clr{ clear:both !important;}
.bor_none{border: none !important;}
.borright_none{ border-right: 0 !important;}
.borleft_none { border-left: 0 !important;}
.back_none{background: none !important;}
.padd_none{ padding: 0 0 !important;}
.mar_none{ margin: 0 0 !important;}
.mar_left_none{ margin-left: 0 !important;}
.mar_right_none{ margin-right: 0 !important;}
.padd_left_none{padding-left: 0 !important;}
.padd_right_none{padding-right: 0 !important;}
/* end Public */

Basic Html:

XHTML 1.0

XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"<

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"<