<div id="mono">
<input type="checkbox" name="image" id="tonggle" />
<label for="tonggle">
<img src="http://wikipics.net/photos/20150206142322639625248.jpg" >
</label>
<div id="tex">Praesent sodales suscipit eros ut tempor. Curabitur pulvinar lectus ut enim gravida dictum. Vivamus eget nunc diam. Donec nec risus dictum, ullamcorper erat non, rutrum purus. Mauris lacus nibh, ornare sit amet ipsum et, rutrum sagittis tellus. Cras tincidunt facilisis facilisis. Cras lectus elit, efficitur at est nec, dictum gravida diam. Praesent eget ex porttitor nisi egestas commodo placerat vel eros. Nam sed justo congue, lobortis felis quis, fermentum massa. Donec egestas faucibus magna vitae maximus. Integer non facilisis dolor. Maecenas posuere elit ut magna bibendum, sit amet iaculis justo tempus. Vivamus vulputate eu neque quis hendre</div>
</div>
#mono {
width: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#mono label {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
z-index: 2;
position: relative;
}
#mono input {
position: absolute;
left: -9999px;
}
#mono input:checked + label img {
-webkit-transform: translate(0, -350px);
-ms-transform: translate(0, -350px);
transform: translate(0, -350px);
}
#mono #tex {
position: absolute;
padding: 20px;
z-index: 1;
top: 0;
left: 0;
}
#mono img {
width: 500px;
position: relative;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
.cont-title {
background-color: green;
}
.cont-title a {
background-color: white;
display: inline-block;
}
.cart {
background-color: white;
}
<div class="cont-title">
<a href="#" class="cell">
<h1>Заголовок</h1>
</a>
<div class="cell cell--mid"></div>
<div class="cart cell">Дата</div>
</div>
.cont-title {
display: table;
}
.cell {
display: table-cell;
}
.mid {
width: 100%;
background-color: green;
}
<div class="roulette" style="display:none;">
<img src="http://example.com/star.png"/>
<img src="http://example.com/flower.png"/>
<img src="http://example.com/coin.png"/>
<img src="http://example.com/mshroom.png"/>
<img src="http://example.com/chomp.png"/>
</div>
<button class="start">START</button>
<button class="stop">STOP</button>
$(document).ready(function () {
var option = {
speed : 10,
duration : 3,
stopImageNumber : 0,
startCallback : function() {
console.log('start');
},
slowDownCallback : function() {
console.log('slowDown');
},
stopCallback : function($stopElm) {
console.log('stop');
}
}
$('div.roulette').roulette(option);
// START!
$('.start').click(function(){
$('div.roulette').roulette('start');
});
// STOP!
$('.stop').click(function(){
$('div.roulette').roulette('stop');
});
});
$(function(){
$('a[data-scroll^="#"]').click(function(){
$('.menu li').removeClass('active');
var target = $(this).attr('data-scroll');
$('html, body').animate({scrollTop: $(target).offset().top - 0}, 800);
return false;
});
});
var hide = false, show = true;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 100 && !hide){
hide = true;
$('.navigation').stop()
.animate({"marginTop": "-210px"},"slow", function () {
show = false;
});
}
if (scrollTop < 100 && !show){
show = true;
$('.navigation').stop().animate({"marginTop": "+0px"}, "slow", function () {
hide = false;
});
}
});
<button id="open">Открыть</button>
<div id="form">
<form action="#" method="post">
<input type="text" value="" placeholder="найти" />
</form>
</div>
#form {
padding: 20px;
background-color: #000;
display: none;
}
$(document).ready(function () {
var searchBlock = $('#form');
$(document).on('click', '#open', function () {
searchBlock.slideToggle();
return false;
});
});
(function (w, d) {
w.onload = function () {
var wrap = d.querySelector('#wrapper'), add = d.querySelector('button');
wrap.addEventListener('DOMNodeInserted', function(event) {
var target = event.target;
alert("На страницу был добавлен " + target.tagName);
}, false);
add.addEventListener('click', function (e) {
var el = d.createElement('iframe');
wrap.appendChild(el);
e.preventDefault();
}, false);
};
}(window, document));
$('#photoimg').die('click').live('change', function() {
var files = this.files;
if (files.length > 5) {
console.log("Вы превысили лимит на кол-во файлов!");
return;
}
//Далее идет ваш код
});
@keyframes fon {
0% {
background-color: red;
}
30% {
background-color: blue;
}
60% {
background-color: yellow;
}
100% {
background-color: green;
}
}
$(function(){
$('textarea').on('keypress',function(event){
var text = $('textarea').val();
var lines = text.split("\n");
var currentLine = this.value.substr(0, this.selectionStart).split("\n").length;
console.log(lines);
console.log(currentLine);
console.log(lines[currentLine-1]);
if(event.keyCode == 13) {
if (lines.length >= $(this).attr('rows'))
return false;
}
else{
if(lines[currentLine-1].length >= $(this).attr('cols')) {
if (lines.length <= $(this).attr('rows') - 1) {
$(this).val(text + '\n');
} else {
return false;
}
}
}
});
});
/*global console*/
var greet = 'Hello';
function say() {
"use strict";
return function (name) {
return greet + " " + name;
};
}
var en = say();
console.log(say("John"));
console.log(say("Martin"));