<div id="tabs" class="col-sm-9 social-tab-control">
<div class="col-sm-12">
<ul class="social-tab">
<li class="facebook">
<a href="#facebook-tab"><i class="fa fa-facebook"></i> Facebook</a>
</li>
<li class="twitter">
<a href="#twitter-tab"><i class="fa fa-twitter"></i> Twitter</a>
</li>
</ul>
</div>
<div class="col-sm-12">
<div id="facebook-tab">
<div class="social-item-wrap">
<?php for ($i = 0; $i < 0; $i++): ?>
<div class="social-item">
<h5>5 ЦАГИЙН ӨМНӨ</h5>
<a href="#" class="social-link">@suisfacebooklink</a>
<span>СУИС-ийн “Оюутан” театрын тайзнаа тоглох энэ удаагийн “Учиртай гурван толгой” дуурийн Ерөнхий найруулагчаар МУАЖ А.Долгор, удирдаачаар ....</span>
</div>
<?php endfor; ?>
</div>
</div>
<div id="twitter-tab">
<div class="social-item-wrap">
<a class="twitter-timeline" data-chrome="nofooter noborders" data-dnt="true" href="https://twitter.com/MSUAC" data-widget-id="637864063012311041">Tweets by @MSUAC</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
</div>
</div>
</div>
</div>
Showing posts with label HTML and CSS. Show all posts
Showing posts with label HTML and CSS. Show all posts
Thursday, October 18, 2018
Tuesday, March 27, 2018
html css make angle corner nozzle using border, box-sizing: border-box
<!DOCTYPE html> <html> <body> <style> body { background: black; margin: 0; padding: 0; } .dor { display: block; width: 50px; height: 50px; background: red; border: 20px solid green; position: absolute; left: 100px; top: 100px; box-sizing: border-box; border-bottom-color: blue; } </style> <div class="dor"></div> </body> </html>
Thursday, August 3, 2017
DOM and javascript photo slider simple
css
.slideshow-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
.slides {
display: block;
//position: absolute;
margin: 0 auto;
width: 1600px;
height: 500px;
visibility: hidden;
opacity: 0;
img {
display: block;
width: 1600px;
height: 500px;
}
/* Fading animation */
&.fadein {
visibility: visible;
opacity: 1;
@include animation(slider-links-fadein 1s ease-out);
}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
}
/* Caption text */
.text {
padding: 15px;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
color: #f2f2f2;
font-size: 19px;
width: 400px;
height: 100%;
margin-left: 60%;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
&.active, &:hover {
background-color: #717171;
}
}
script
<script>
var slideIndex = 0;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].className = "anim9s slides";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = "anim9s slides fadein";
dots[slideIndex - 1].className += " active";
}
var autoSlides = function () {
var i;
var slides = document.getElementsByClassName("slides");
for (i = 0; i < slides.length; i++) {
slides[i].className = "anim9s slides";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].className = "anim9s slides fadein";
setTimeout(autoSlides, 5000); // Change image every 2 seconds
};
autoSlides();
</script>
.slideshow-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
.slides {
display: block;
//position: absolute;
margin: 0 auto;
width: 1600px;
height: 500px;
visibility: hidden;
opacity: 0;
img {
display: block;
width: 1600px;
height: 500px;
}
/* Fading animation */
&.fadein {
visibility: visible;
opacity: 1;
@include animation(slider-links-fadein 1s ease-out);
}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
}
/* Caption text */
.text {
padding: 15px;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
color: #f2f2f2;
font-size: 19px;
width: 400px;
height: 100%;
margin-left: 60%;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
&.active, &:hover {
background-color: #717171;
}
}
script
<script>
var slideIndex = 0;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].className = "anim9s slides";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = "anim9s slides fadein";
dots[slideIndex - 1].className += " active";
}
var autoSlides = function () {
var i;
var slides = document.getElementsByClassName("slides");
for (i = 0; i < slides.length; i++) {
slides[i].className = "anim9s slides";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].className = "anim9s slides fadein";
setTimeout(autoSlides, 5000); // Change image every 2 seconds
};
autoSlides();
</script>
Thursday, June 2, 2016
ajax page for crawler using history.pushState and window.onpopstate
<!DOCTYPE html>
<!-- saved from url=(0045)http://html5doctor.com/demos/history/whiskers -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test!</title>
<style>
html { background-color:#ddd; }
body { margin:1em auto; max-width:600px; background-color:#fff; border:solid 1px #aaa; padding:15px; font-family:Georgia,serif; }
h1 { font-family:Helvetica,Arial,sans-serif; float:left; width:30%; margin:0; }
nav { display:block; float:right; width:45%;}
ul { list-style:none; padding:0; margin:0; }
li { display:inline-block; padding:0; border-right:solid 1px #aaa; margin:.5em 0 0; }
li:last-child { border-right:0; }
a { color:rgb(0,144,210); padding:.2em 0.5em; }
a:hover { text-decoration:none; }
#content { clear:left; float:left; width:45%; margin-right:10%; line-height:1.4em; }
#photo { float:right; width:45%; margin-top:1em; }
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
</style>
</head>
<body class="cf">
<h1>test!</h1>
<nav>
<ul class="cf">
<li><a href="/fluffy">Fluffy</a></li>
<li><a href="/socks">Socks</a></li>
<li><a href="/whiskers">Whiskers</a></li>
<li><a href="/bob">Bob</a></li>
</ul>
</nav>
<p id="content">content!</p>
<img src="" alt="A heartbreakingly cute kitten!" id="photo">
<script>
// Not the most elegant code but fit enough for this example. Enjoy the kitten goodness!
var contentEl = document.getElementById('content'),
photoEl = document.getElementById('photo'),
linkEls = document.getElementsByTagName('a'),
cats = {
fluffy: {
content: 'Fluffy!',
photo: 'http://placekitten.com/200/200'
},
socks: {
content: 'Socks!',
photo: 'http://placekitten.com/280/280'
},
whiskers: {
content: 'Whiskers!',
photo: 'http://placekitten.com/350/350'
},
bob: {
content: 'Just Bob.',
photo: 'http://placekitten.com/320/270'
}
};
// Switcheroo!
function updateContent(data) {
if (data == null)
return;
contentEl.textContent = data.content;
photoEl.src = data.photo;
}
// Attach event listeners
for (var i = 0, l = linkEls.length; i < l; i++) {
linkEls[i].addEventListener('click', function (event) {
var cat = event.target.getAttribute('href').split('/').pop();
var data = cats[cat] || null; // In reality this could be an AJAX request
updateContent(data);
// Add an item to the history log
document.title = event.target.textContent;
history.pushState(data, event.target.textContent, event.target.href);
return false;
});
}
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
updateContent(event.state);
});
// Store the initial content so we can revisit it later
history.replaceState({
content: contentEl.textContent,
photo: photoEl.src
}, document.title, document.location.href);
</script>
</body></html>
<!-- saved from url=(0045)http://html5doctor.com/demos/history/whiskers -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test!</title>
<style>
html { background-color:#ddd; }
body { margin:1em auto; max-width:600px; background-color:#fff; border:solid 1px #aaa; padding:15px; font-family:Georgia,serif; }
h1 { font-family:Helvetica,Arial,sans-serif; float:left; width:30%; margin:0; }
nav { display:block; float:right; width:45%;}
ul { list-style:none; padding:0; margin:0; }
li { display:inline-block; padding:0; border-right:solid 1px #aaa; margin:.5em 0 0; }
li:last-child { border-right:0; }
a { color:rgb(0,144,210); padding:.2em 0.5em; }
a:hover { text-decoration:none; }
#content { clear:left; float:left; width:45%; margin-right:10%; line-height:1.4em; }
#photo { float:right; width:45%; margin-top:1em; }
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
</style>
</head>
<body class="cf">
<h1>test!</h1>
<nav>
<ul class="cf">
<li><a href="/fluffy">Fluffy</a></li>
<li><a href="/socks">Socks</a></li>
<li><a href="/whiskers">Whiskers</a></li>
<li><a href="/bob">Bob</a></li>
</ul>
</nav>
<p id="content">content!</p>
<img src="" alt="A heartbreakingly cute kitten!" id="photo">
<script>
// Not the most elegant code but fit enough for this example. Enjoy the kitten goodness!
var contentEl = document.getElementById('content'),
photoEl = document.getElementById('photo'),
linkEls = document.getElementsByTagName('a'),
cats = {
fluffy: {
content: 'Fluffy!',
photo: 'http://placekitten.com/200/200'
},
socks: {
content: 'Socks!',
photo: 'http://placekitten.com/280/280'
},
whiskers: {
content: 'Whiskers!',
photo: 'http://placekitten.com/350/350'
},
bob: {
content: 'Just Bob.',
photo: 'http://placekitten.com/320/270'
}
};
// Switcheroo!
function updateContent(data) {
if (data == null)
return;
contentEl.textContent = data.content;
photoEl.src = data.photo;
}
// Attach event listeners
for (var i = 0, l = linkEls.length; i < l; i++) {
linkEls[i].addEventListener('click', function (event) {
var cat = event.target.getAttribute('href').split('/').pop();
var data = cats[cat] || null; // In reality this could be an AJAX request
updateContent(data);
// Add an item to the history log
document.title = event.target.textContent;
history.pushState(data, event.target.textContent, event.target.href);
return false;
});
}
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
updateContent(event.state);
});
// Store the initial content so we can revisit it later
history.replaceState({
content: contentEl.textContent,
photo: photoEl.src
}, document.title, document.location.href);
</script>
</body></html>
Thursday, November 19, 2015
modern css3 linear-gradient, border-radius, box-shadow
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
Saturday, September 26, 2015
vertical align middle a tag in several li tag with float:left attribute
.cd-tabs-navigation {
margin: 0;
padding: 0;
display: block;
}
.cd-tabs-navigation:after {
content: "";
display: table;
clear: both;
}
.cd-tabs-navigation li {
float: left;
display: table-cell;
width: 20%;
height: 50px;
line-height: 50px;
background: #fff;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
overflow: hidden;
vertical-align: middle;
}
.cd-tabs-navigation a {
display: inline-table;
text-transform: uppercase;
text-align: center;
font-size: 11px;
color: #4e4d4d;
width: 100%;
line-height: 1;
padding: 0 15px;
margin: auto 0;
vertical-align: middle;
}
.cd-tabs-navigation a:hover {
color: #b42d32;
}
.cd-tabs-navigation li.selected {
background-color: #b42d32 !important;
color: #FFF;
}
.cd-tabs-navigation li.selected a, .cd-tabs-navigation li.selected a:hover {
color: #FFF;
}
margin: 0;
padding: 0;
display: block;
}
.cd-tabs-navigation:after {
content: "";
display: table;
clear: both;
}
.cd-tabs-navigation li {
float: left;
display: table-cell;
width: 20%;
height: 50px;
line-height: 50px;
background: #fff;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
overflow: hidden;
vertical-align: middle;
}
.cd-tabs-navigation a {
display: inline-table;
text-transform: uppercase;
text-align: center;
font-size: 11px;
color: #4e4d4d;
width: 100%;
line-height: 1;
padding: 0 15px;
margin: auto 0;
vertical-align: middle;
}
.cd-tabs-navigation a:hover {
color: #b42d32;
}
.cd-tabs-navigation li.selected {
background-color: #b42d32 !important;
color: #FFF;
}
.cd-tabs-navigation li.selected a, .cd-tabs-navigation li.selected a:hover {
color: #FFF;
}
Sunday, August 16, 2015
first svg tag on html
<svg version="1.1" style="position: absolute; width: 680px; height: 232px;">
<desc></desc>
<g>
<g transform="translate(48,40)" visibility="visible">
<image x="0" y="0" width="19" height="19" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://content.ikon.mn/chart/3142/images/lens.png"></image>
<text y="0" fill="#000000" font-family="Verdana" font-size="11" opacity="1">
<tspan y="0" x="0" style="font-size: 13px;">Бүгдийг харах</tspan>
</text>
</g>
</g>
</svg>
<desc></desc>
<g>
<g transform="translate(48,40)" visibility="visible">
<image x="0" y="0" width="19" height="19" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://content.ikon.mn/chart/3142/images/lens.png"></image>
<text y="0" fill="#000000" font-family="Verdana" font-size="11" opacity="1">
<tspan y="0" x="0" style="font-size: 13px;">Бүгдийг харах</tspan>
</text>
</g>
</g>
</svg>
Thursday, June 18, 2015
div rotate using CSS3 transform Property
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(75deg);
}
</style>
</head>
<body>
<div>Hello</div>
<br>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>
</body>
</html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(75deg);
}
</style>
</head>
<body>
<div>Hello</div>
<br>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>
</body>
</html>
Tuesday, March 31, 2015
animate.css example, tutorials
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="animate.min.css">
<style>
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: 1;
}
</style>
</head>
<body>
<h1 id="yourElement" class="animated bounce">Example</h1>
<button id="foo">click me</button>
<script>
$(document).ready(function() {
$( "#foo" ).on( "click", function( event ) {
alert( "This will be displayed only once." );
$( this ).off( event );
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="animate.min.css">
<style>
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: 1;
}
</style>
</head>
<body>
<h1 id="yourElement" class="animated bounce">Example</h1>
<button id="foo">click me</button>
<script>
$(document).ready(function() {
$( "#foo" ).on( "click", function( event ) {
alert( "This will be displayed only once." );
$( this ).off( event );
});
});
</script>
</body>
</html>
Sunday, March 29, 2015
CSS3 normalize for standard
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
Tuesday, March 24, 2015
how working on @media queries using modernizr , respond
in css file.
@media (min-width: 768px) and (max-width: 1024px) {
#boroo >section> article {
padding: 10px;
background: red;
}
}
@media only screen and (max-width: 768px) {
#boroo section {
display: block;
padding: 10px;
background: green;
}
}
in html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="modernizr.custom.70750.js"></script>
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="boroo">
<section>
<article>
hello, world!
</article>
</section>
</div>
</body>
</html>
@media (min-width: 768px) and (max-width: 1024px) {
#boroo >section> article {
padding: 10px;
background: red;
}
}
@media only screen and (max-width: 768px) {
#boroo section {
display: block;
padding: 10px;
background: green;
}
}
in html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="modernizr.custom.70750.js"></script>
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="boroo">
<section>
<article>
hello, world!
</article>
</section>
</div>
</body>
</html>
Sunday, March 22, 2015
Monday, September 29, 2014
How to create Fixed Menu When Scrolling Page with CSS and jQuery
HTML
<div class="nav-container">
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SEO</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Wordpress</a></li>
<li><a href="">Services</a></li>
</ul>
<div class="clear"></div> /*clear floating div*/
</div>
</div>
CSS
.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
JQUERY
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
Saturday, August 30, 2014
a simple search with AngularJS and PHP
searchForm.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Search form with AngualrJS</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="search.js"></script>
</head>
<body>
<div ng-controller="SearchCtrl">
<form class="well form-search">
<label>Search:</label>
<input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
<button type="submit" class="btn" ng-click="search()">Search</button>
<p class="help-block">Try for example: "php" or "angularjs" or "asdfg"</p>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
</body>
</html> The AngularJS script (search.js)
function SearchCtrl($scope, $http) {
$scope.url = 'search.php'; // The url of our search
// The function that will be executed on button click (ng-click="search()")
$scope.search = function() {
// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
$scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}
The server-side script (search.php)
<?php
// The request is a JSON request.
// We must read the input.
// $_POST or $_GET will not work!
$data = file_get_contents("php://input");
$objData = json_decode($data);
// perform query or whatever you wish, sample:
/*
$query = 'SELECT * FROM
tbl_content
WHERE
title="'. $objData->data .'"';
*/
// Static array for this demo
$values = array('php', 'web', 'angularjs', 'js');
// Check if the keywords are in our array
if(in_array($objData->data, $values)) {
echo 'I have found what you\'re looking for!';
}
else {
echo 'Sorry, no match!';
}
Wednesday, August 27, 2014
web chat example on 8080 port using node.js
chat server app.js
//npm install socket.io --msvs_version=2012
var io = require('socket.io')(8080);
io.sockets.on('connection', function (socket) {
console.log('Client connected...');
//socket.emit('accepted', { hello: 'client!' });
socket.on('join', function (data) {
socket.nickname = data.name;
console.log('nickname is ' + data.name);
});
socket.on('messages', function (data) {
console.log(data);
socket.broadcast.emit('messages', data);
});
});
chat client index.html
<html>
<head>
<title>boroo</title>
<style>
#chat_body{display:block;height:300px;background:#efefef;}
.chat-form{display:block;height:50px;border:1px solid #ccc;}
</style>
</head>
<body>
<div id='chat_body'>
</div>
<hr>
<div class='chat-form'>
<script src="jquery-1.11.1.min.js"></script>
<script src="socket.io-1.0.6.js"></script>
<form id='chat_form'>
<input type='text' id='chat_input' size="50">
<input type='submit' value='Send'>
</form>
<script>
var nickname = '';
var socket = io.connect('http://localhost:8080');
socket.on('connect', function (data) {
if (typeof socket.nickname == 'undefined') {
socket.nickname = prompt("What is your nickname!");
socket.emit('join', { name: socket.nickname });
}
});
socket.on('messages', function (data) {
var line = "<b>" + data.name + ": " + data.message + "</b>";
var div = $('<div>').html(line);
$("#chat_body").append(div);
});
$('#chat_form').submit(function(e) {
var msg = $('#chat_input').val();
var line = socket.nickname + ": " + msg;
var div = $('<div>').html(line);
$("#chat_body").append(div);
$('#chat_input').val('');
socket.emit('messages', { name: socket.nickname, message: msg });
return false;
});
</script>
</div>
</body>
</html>
//npm install socket.io --msvs_version=2012
var io = require('socket.io')(8080);
io.sockets.on('connection', function (socket) {
console.log('Client connected...');
//socket.emit('accepted', { hello: 'client!' });
socket.on('join', function (data) {
socket.nickname = data.name;
console.log('nickname is ' + data.name);
});
socket.on('messages', function (data) {
console.log(data);
socket.broadcast.emit('messages', data);
});
});
chat client index.html
<html>
<head>
<title>boroo</title>
<style>
#chat_body{display:block;height:300px;background:#efefef;}
.chat-form{display:block;height:50px;border:1px solid #ccc;}
</style>
</head>
<body>
<div id='chat_body'>
</div>
<hr>
<div class='chat-form'>
<script src="jquery-1.11.1.min.js"></script>
<script src="socket.io-1.0.6.js"></script>
<form id='chat_form'>
<input type='text' id='chat_input' size="50">
<input type='submit' value='Send'>
</form>
<script>
var nickname = '';
var socket = io.connect('http://localhost:8080');
socket.on('connect', function (data) {
if (typeof socket.nickname == 'undefined') {
socket.nickname = prompt("What is your nickname!");
socket.emit('join', { name: socket.nickname });
}
});
socket.on('messages', function (data) {
var line = "<b>" + data.name + ": " + data.message + "</b>";
var div = $('<div>').html(line);
$("#chat_body").append(div);
});
$('#chat_form').submit(function(e) {
var msg = $('#chat_input').val();
var line = socket.nickname + ": " + msg;
var div = $('<div>').html(line);
$("#chat_body").append(div);
$('#chat_input').val('');
socket.emit('messages', { name: socket.nickname, message: msg });
return false;
});
</script>
</div>
</body>
</html>
Tuesday, August 26, 2014
web server make with post, get request and multipart/form-data using Node.js
http_server.js
//npm install -g formidable
var formidable = require('formidable'),
sys = require('sys'),
http = require('http'),
util = require('util'),
url = require('url'),
qs = require('querystring');
http.createServer(function(request, response){
if (request.url == '/upload' && request.method.toLowerCase() == 'post') {
var body = '';
request.on('data', function(data){
body += data;
});
request.on('end', function(){
//var jobj = json.parse(body);
//console.log(jobj.title);
//var post = qs.parse(body);
});
// Instantiate a new formidable form for processing.
var form = new formidable.IncomingForm();
// form.parse analyzes the incoming stream data, picking apart the different fields and files for you.
form.parse(request, function(err, fields, files) {
if (err) {
// Check for and handle any errors here.
console.error(err.message);
return;
}
response.writeHead(200, {'content-type': 'text/plain'});
response.write('Received Upload:\n\n');
// This last line responds to the form submission with a list of the parsed data and files.
response.end(util.inspect({fields: fields, files: files}));
});
return;
}
else if(request.method == 'GET') {
var url_parts = url.parse(request.url, true);
console.log(url_parts.query);
}
// If this is a regular request, and not a form submission, then send the form.
response.writeHead(200, {'content-type': 'text/html'});
response.end(
'<form action="/upload" enctype="multipart/form-data" method="post">'+
'<label>title:</label><input type="text" name="title"><br>'+
'<label>file:</label><input type="file" name="files" multiple="multiple"><br>'+
'<input type="submit" value="Upload">'+
'</form>'
);
}).listen(8080);
//server is response.write();
result
//npm install -g formidable
var formidable = require('formidable'),
sys = require('sys'),
http = require('http'),
util = require('util'),
url = require('url'),
qs = require('querystring');
http.createServer(function(request, response){
if (request.url == '/upload' && request.method.toLowerCase() == 'post') {
var body = '';
request.on('data', function(data){
body += data;
});
request.on('end', function(){
//var jobj = json.parse(body);
//console.log(jobj.title);
//var post = qs.parse(body);
});
// Instantiate a new formidable form for processing.
var form = new formidable.IncomingForm();
// form.parse analyzes the incoming stream data, picking apart the different fields and files for you.
form.parse(request, function(err, fields, files) {
if (err) {
// Check for and handle any errors here.
console.error(err.message);
return;
}
response.writeHead(200, {'content-type': 'text/plain'});
response.write('Received Upload:\n\n');
// This last line responds to the form submission with a list of the parsed data and files.
response.end(util.inspect({fields: fields, files: files}));
});
return;
}
else if(request.method == 'GET') {
var url_parts = url.parse(request.url, true);
console.log(url_parts.query);
}
// If this is a regular request, and not a form submission, then send the form.
response.writeHead(200, {'content-type': 'text/html'});
response.end(
'<form action="/upload" enctype="multipart/form-data" method="post">'+
'<label>title:</label><input type="text" name="title"><br>'+
'<label>file:</label><input type="file" name="files" multiple="multiple"><br>'+
'<input type="submit" value="Upload">'+
'</form>'
);
}).listen(8080);
//server is response.write();
result
Saturday, May 24, 2014
jquery using image slide show with opacity animate
css
#topCarousel .slideshow {
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
#topCarousel .slideshow li {
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
}
#topCarousel .slideshow li.ishow {
position: relative;
z-index:500;
}
#topCarousel .slideshow li img {
display: block;
line-height: 1;
width: 100%;
}
html
<div id="topCarousel">
<ul class="slideshow">
<?php
$count_for = 0;
foreach ($static_top_banners as $static_top_banner):
$originalurl = $this->thumbmanager->thumb_url($static_top_banner);
?>
<li class="<?php echo $count_for === 0 ? 'ishow' : ''; ?>">
<img src="<?php echo $originalurl; ?>" alt=""/>
</li>
<?php
$count_for++;
endforeach;
?>
</ul>
<div class="clear: both;"></div>
</div><!-- /.carousel -->
<script type="text/javascript">
$(function() {
h2o.imgsViewer($('#topCarousel .slideshow'));
});
</script>
js
imgsViewer: function(obj) {
var fadeDuration = 2000, slideDuration = 4000, currentIndex = 1, nextIndex = 1,
nextSlide = function() {
nextIndex = currentIndex + 1;
if (nextIndex > $(obj).children().size()) {
nextIndex = 1;
}
var next = $(obj).find('li:nth-child(' + nextIndex + ')');
var curr = $(obj).find('li:nth-child(' + currentIndex + ')');
next.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
curr.removeClass('ishow').animate({opacity: 0.0}, fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, slideDuration);
};
$(obj).find('li').css({opacity: 0.0});
$(obj).find('li:nth-child(' + nextIndex + ')')
.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
setTimeout(nextSlide, slideDuration);
return this;
}
#topCarousel .slideshow {
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
#topCarousel .slideshow li {
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
}
#topCarousel .slideshow li.ishow {
position: relative;
z-index:500;
}
#topCarousel .slideshow li img {
display: block;
line-height: 1;
width: 100%;
}
html
<div id="topCarousel">
<ul class="slideshow">
<?php
$count_for = 0;
foreach ($static_top_banners as $static_top_banner):
$originalurl = $this->thumbmanager->thumb_url($static_top_banner);
?>
<li class="<?php echo $count_for === 0 ? 'ishow' : ''; ?>">
<img src="<?php echo $originalurl; ?>" alt=""/>
</li>
<?php
$count_for++;
endforeach;
?>
</ul>
<div class="clear: both;"></div>
</div><!-- /.carousel -->
<script type="text/javascript">
$(function() {
h2o.imgsViewer($('#topCarousel .slideshow'));
});
</script>
js
imgsViewer: function(obj) {
var fadeDuration = 2000, slideDuration = 4000, currentIndex = 1, nextIndex = 1,
nextSlide = function() {
nextIndex = currentIndex + 1;
if (nextIndex > $(obj).children().size()) {
nextIndex = 1;
}
var next = $(obj).find('li:nth-child(' + nextIndex + ')');
var curr = $(obj).find('li:nth-child(' + currentIndex + ')');
next.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
curr.removeClass('ishow').animate({opacity: 0.0}, fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, slideDuration);
};
$(obj).find('li').css({opacity: 0.0});
$(obj).find('li:nth-child(' + nextIndex + ')')
.addClass('ishow').animate({opacity: 1.0}, fadeDuration);
setTimeout(nextSlide, slideDuration);
return this;
}
Friday, February 21, 2014
web silver button style 1
<html>
<head>
<style>
.sc-button {
float: left;
text-indent: 18px;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: #FCFCFC;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(235, 235, 235, 0.3) 60%, rgba(225, 225, 225, 0.6));
border: 1px solid #E5E5E5;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.7) inset, -1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(255, 255, 255, 0.5) inset, 1px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
font-size: 14px;
font-weight: 100;
height: 26px;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 2px 10px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
vertical-align: baseline;
white-space: nowrap;
min-width: 51px;
}
.sc-button:before {
background-position: center center;
background-repeat: no-repeat;
content: "";
display: block;
height: 20px;
left: 4px;
position: absolute;
top: 3px;
width: 20px;
}
.sc-button:hover, .sc-button:focus, .sc-button-focus {
background-color: #F9F9F9;
border-color: #E5E5E5 #CCCCCC #CCCCCC;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 #FFFFFF inset, -1px 0 0 #F8F8F8 inset, 0 -1px 0 rgba(248, 248, 248, 0.5) inset, 1px 0 0 #F8F8F8 inset;
color: #333333;
outline: 0 none;
text-shadow: -1px -1px 0 #FCFCFC, 1px -1px 0 #FCFCFC, -1px 1px 0 #FCFCFC, 1px 1px 0 #FFFFFF;
}
.sc-button-like:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAiklEQVQoz2NgGFLAOMH4PxDeNzYAsg2ANIiXgKlMASwBhKafjB2AGMozVkBT6DkBLoUCPSegKSw/gF1h0nk0hWsXYFe4Yzuawv8OM7Eom/n/vwOGd/43NKApa/j/vwFrAP2f34CqbD7OsPw/vxeqrBefMrDS/k1AZZv+/+8nGEP/E/7//5/AMJwBACVhhWwJehwSAAAAAElFTkSuQmCC");
}
</style>
</head>
<body>
<a class="sc-button sc-button-like" href="#">Download</a>
</body>
</html>
<head>
<style>
.sc-button {
float: left;
text-indent: 18px;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: #FCFCFC;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(235, 235, 235, 0.3) 60%, rgba(225, 225, 225, 0.6));
border: 1px solid #E5E5E5;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.7) inset, -1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(255, 255, 255, 0.5) inset, 1px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
font-size: 14px;
font-weight: 100;
height: 26px;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 2px 10px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
vertical-align: baseline;
white-space: nowrap;
min-width: 51px;
}
.sc-button:before {
background-position: center center;
background-repeat: no-repeat;
content: "";
display: block;
height: 20px;
left: 4px;
position: absolute;
top: 3px;
width: 20px;
}
.sc-button:hover, .sc-button:focus, .sc-button-focus {
background-color: #F9F9F9;
border-color: #E5E5E5 #CCCCCC #CCCCCC;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 #FFFFFF inset, -1px 0 0 #F8F8F8 inset, 0 -1px 0 rgba(248, 248, 248, 0.5) inset, 1px 0 0 #F8F8F8 inset;
color: #333333;
outline: 0 none;
text-shadow: -1px -1px 0 #FCFCFC, 1px -1px 0 #FCFCFC, -1px 1px 0 #FCFCFC, 1px 1px 0 #FFFFFF;
}
.sc-button-like:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAiklEQVQoz2NgGFLAOMH4PxDeNzYAsg2ANIiXgKlMASwBhKafjB2AGMozVkBT6DkBLoUCPSegKSw/gF1h0nk0hWsXYFe4Yzuawv8OM7Eom/n/vwOGd/43NKApa/j/vwFrAP2f34CqbD7OsPw/vxeqrBefMrDS/k1AZZv+/+8nGEP/E/7//5/AMJwBACVhhWwJehwSAAAAAElFTkSuQmCC");
}
</style>
</head>
<body>
<a class="sc-button sc-button-like" href="#">Download</a>
</body>
</html>
Thursday, October 31, 2013
jquery html css dropdown menu part not use any extern package
//author: boroo_c@yahoo.com
<header id="desktopHeader">
<section id="desktopNav" class="desktopNav">
<div id="nav-panel">
<ul class="topnav">
<li><a class="navlink" href="<?php echo admin_url(); ?>"><?php echo 'H<sub>2</sub>O ( ' . $this->web->host() . ' )'; ?></a></li>
<li class="parnav">
<a href="#">Бүтэц<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('menu'); ?>">Цэс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('category/create'); ?>">Хэсэг үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('category'); ?>">Хэсгүүд ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Бүрэлдэхүүн<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('article'); ?>">Агуулга ...</a></li>
<li><a class="navlink" href="<?php echo admin_url('article/create'); ?>">Агуулга Үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('articletype'); ?>">Агуулгын Төрлүүд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('media'); ?>">Медиа ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('tag'); ?>">Түлхүүр үгс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('extendfield'); ?>">Нэмэлт мэдээлэл ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Тохиргоо<span></span></a>
<ul class="subul">
<li class="subnav">
<a href="#">Лавлах мэдээлэл<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('country'); ?>">- Улс -</a></li>
<li><a class="navlink" href="<?php echo admin_url('language'); ?>">- Хэл -</a></li>
<li><a class="navlink" href="<?php echo admin_url('currency'); ?>">- Валют -</a></li>
</ul>
</li>
<li><a class="navlink" href="<?php echo admin_url('setting'); ?>">Тохируулгууд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('user'); ?>">Хэрэглэгч ба эрх ...</a></li>
</ul>
</li>
<li><a href="#">Тусламж</a></li>
</ul>
<ul class="rightnav">
<li>
<div>Хэрэглэгч : <?php echo $this->context->user(); ?> (<?php echo $this->context->role(); ?>)</div>
</li>
<li><div><a href="<?php echo site_url(); ?>" target="_blank">Веб</a></div></li>
<li><div><a href="<?php echo admin_url('auth/logout'); ?>">Гарах</a></div></li>
<li>
<div class="time">
<?php echo '<i>MGL: '.local_datetime().'</i>'; ?>
<?php echo '<i>UTC: '.utc_datetime().'</i>'; ?>
<!-- <a href="<?php echo admin_url(); ?>">
<img src="<?php echo theme_url('images/world_flags/flag_mn.gif'); ?>" alt="en">
</a>-->
</div>
</li>
<li>
<div id="test0">
...
</div>
</li>
</ul>
</div>
</section>
</header>
<script>
$(function() {
$('#nav-panel ul.topnav li > a').hover(function() {
var a = $(this).addClass('hover');
var li = $(a).parent();
var ul = $(a).next().show();
if ($(li).hasClass('subnav')) {
$(ul).css('top', '0').css('left', $(li).width());
}
$(li).hover(function() {
}, function() {
$(a).removeClass('hover');
$(ul).hide();
//When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
<header id="desktopHeader">
<section id="desktopNav" class="desktopNav">
<div id="nav-panel">
<ul class="topnav">
<li><a class="navlink" href="<?php echo admin_url(); ?>"><?php echo 'H<sub>2</sub>O ( ' . $this->web->host() . ' )'; ?></a></li>
<li class="parnav">
<a href="#">Бүтэц<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('menu'); ?>">Цэс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('category/create'); ?>">Хэсэг үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('category'); ?>">Хэсгүүд ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Бүрэлдэхүүн<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('article'); ?>">Агуулга ...</a></li>
<li><a class="navlink" href="<?php echo admin_url('article/create'); ?>">Агуулга Үүсгэх</a></li>
<li><a class="navlink" href="<?php echo admin_url('articletype'); ?>">Агуулгын Төрлүүд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('media'); ?>">Медиа ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('tag'); ?>">Түлхүүр үгс ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('extendfield'); ?>">Нэмэлт мэдээлэл ...</a></li>
</ul>
</li>
<li class="parnav">
<a href="#">Тохиргоо<span></span></a>
<ul class="subul">
<li class="subnav">
<a href="#">Лавлах мэдээлэл<span></span></a>
<ul class="subul">
<li><a class="navlink" href="<?php echo admin_url('country'); ?>">- Улс -</a></li>
<li><a class="navlink" href="<?php echo admin_url('language'); ?>">- Хэл -</a></li>
<li><a class="navlink" href="<?php echo admin_url('currency'); ?>">- Валют -</a></li>
</ul>
</li>
<li><a class="navlink" href="<?php echo admin_url('setting'); ?>">Тохируулгууд ...</a></li>
<li class="sepline"><a class="navlink" href="<?php echo admin_url('user'); ?>">Хэрэглэгч ба эрх ...</a></li>
</ul>
</li>
<li><a href="#">Тусламж</a></li>
</ul>
<ul class="rightnav">
<li>
<div>Хэрэглэгч : <?php echo $this->context->user(); ?> (<?php echo $this->context->role(); ?>)</div>
</li>
<li><div><a href="<?php echo site_url(); ?>" target="_blank">Веб</a></div></li>
<li><div><a href="<?php echo admin_url('auth/logout'); ?>">Гарах</a></div></li>
<li>
<div class="time">
<?php echo '<i>MGL: '.local_datetime().'</i>'; ?>
<?php echo '<i>UTC: '.utc_datetime().'</i>'; ?>
<!-- <a href="<?php echo admin_url(); ?>">
<img src="<?php echo theme_url('images/world_flags/flag_mn.gif'); ?>" alt="en">
</a>-->
</div>
</li>
<li>
<div id="test0">
...
</div>
</li>
</ul>
</div>
</section>
</header>
<script>
$(function() {
$('#nav-panel ul.topnav li > a').hover(function() {
var a = $(this).addClass('hover');
var li = $(a).parent();
var ul = $(a).next().show();
if ($(li).hasClass('subnav')) {
$(ul).css('top', '0').css('left', $(li).width());
}
$(li).hover(function() {
}, function() {
$(a).removeClass('hover');
$(ul).hide();
//When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
CSS
#nav-panel {
display: block;
position: relative;
width: 100%;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
}
#nav-panel ul.rightnav{
position: fixed;
list-style: none;
padding: 0 10px;
top: 0;
right: 0;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.rightnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.rightnav li div{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.rightnav li div a:hover{
text-decoration: underline;
}
ul.rightnav li div.time {
position: relative;
line-height: 11px;
width: 140px;
padding: 6px 2px;
text-align: right;
font-size: 11px;
}
ul.rightnav li div.time i {
position: relative;
font-style: normal;
white-space: nowrap;
top: -2px;
}
ul.rightnav li div#test {
padding: 0;
margin: 0;
}
#nav-panel ul.topnav {
list-style: none;
padding: 0 10px;
margin: 0;
float: left;
display: block;
height: 34px;
background: url(images/bg-nav.png) repeat-x scroll 0 bottom #1B1B1B;
font-size: 1.2em;
}
ul.topnav li {
border-left: 1px solid #444;
border-right: 1px solid #333;
cursor: pointer;
display: inline-block;
float: left;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
position: relative;
text-shadow: 0 0 2px #000000;
}
ul.topnav li a{
color: #E6E6E6;
display: block;
font-style: normal;
font-weight: normal;
padding: 8px 12px;
vertical-align: middle;
text-decoration: none;
}
ul.topnav li a.hover{
background: url(images/bg-noise.jpg) repeat-x scroll 0 0 #1B1B1B;
}
ul.topnav li.parnav a{
padding-right: 30px;
}
ul.topnav li.parnav a span { /*--Drop down trigger styles--*/
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/subnav10.gif) no-repeat center top;
}
ul.topnav li.subnav a{
padding-right: 30px;
}
ul.topnav li.subnav a span {
position: absolute;
right: 10px;
top: 0;
width: 10px;
height: 34px;
background: url(images/dropdo10.gif) no-repeat center center;
}
ul.topnav li ul.subul {
list-style: none;
position: absolute;
left: -2px; top: 32px;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
border-top: none;
background: url(images/bg-noise.jpg) repeat scroll 0 0 #1B1B1B;
z-index: 10000;
}
ul.topnav li.subnav ul.subul {
border: 1px solid #111;
}
ul.topnav li ul.subul li{
margin: 0; padding: 0;
color: #E6E6E6;
display: block;
float: none;
clear: both;
}
ul.topnav li ul.subul li a {
white-space: nowrap;
padding-left: 15px;
}
ul.topnav li ul.subul li a:hover {
background: #111;
}
ul.topnav li ul.subul li.sepline{
border-top: 1px solid #444;
}
Subscribe to:
Posts (Atom)