API tools faq
paste
Advertisement
wmas

Source Code My Blog Page

wmas
May 6th, 2014
1,226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 58.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html class='v2' dir='ltr' prefix='og: http://ogp.me/ns#' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='https://www.facebook.com/2008/fbml'>
  3. <head>
  4. <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  5. <title>Оформление элемента input type=file средствами CSS и JavaScript</title>
  6. <meta content='summary' name='twitter:card'/>
  7. <meta content='@chuvyr' name='twitter:site'/>
  8. <meta content='@wmas' name='twitter:creator'/>
  9. <meta content='Оформление элемента input type=file средствами CSS и JavaScript' property='og:title'/>
  10. <meta content='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' property='og:url'/>
  11. <meta content='jQuery плагин для создания оформляемого input type=file элемента для загрузки файла и пример его оформления в CSS.' name='description'/>
  12. <meta content='jQuery плагин для создания оформляемого input type=file элемента для загрузки файла и пример его оформления в CSS.' property='og:description'/>
  13. <meta content='http://widgets.c3h.ru/fix/?query=http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s72-c/input-type-file-css-js.jpg' property='og:image'/>
  14. <script src='//yandex.st/share/share.js' type='text/javascript'></script>
  15. <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  16. <link href='http://feeds.feedburner.com/chuvyr' rel='alternate' title='RSS Chuvyr.Ru' type='application/rss+xml'/>
  17. <link href='http://www.chuvyr.ru/favicon.ico' rel='icon' type='image/x-icon'/>
  18. <link href='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' rel='canonical'/>
  19. <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
  20. <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4108380392867804136&zx=3129ad43-7720-4bb9-9cd3-723a60aaf785' />
  21. <style id='page-skin-1' type='text/css'><!--
  22. @import url(http://fonts.googleapis.com/css?family=Roboto:400,700|Lobster&subset=latin,cyrillic);
  23. body{background:#e5e5e5;color:#222;font-family:Verdana,Geneva,sans-serif;font-size:14px;margin:0;padding:5px !important;text-align:center}
  24. a{color:#008ace}
  25. a:hover,.link:hover{color:#E84B3C}
  26. a:visited,.link:visited{color:#9e4e9e}
  27. a:focus{outline:none}
  28. .url,.link{color:#008ace;text-decoration:underline}
  29. .link,.click,.hand{cursor:hand;cursor:pointer}
  30. h1,h2,h3,h4{font-family:'Roboto',sans-serif;font-weight:400;color:#000}
  31. h1{font-size:24px}
  32. h2{font-size:20px}
  33. h3{font-size:18px;color:#555;}
  34. h4{font-size:16px;color:#555;}
  35. h5{font-size:14px;font-weight:700}
  36. hr{background-color:#E5E5E5;border:0 none;color:#E5E5E5;height:1px;clear:both}
  37. img{border:0;vertical-align:middle}
  38. form{margin:0;padding:0}
  39. strong,b{font-weight:bold}
  40. em,i {color:#008000;font:italic 'Times New Roman',Times,serif}
  41. small,.small{font-size:0.79em}
  42. pre,code,.code{color:#004080;font-family:Consolas,monaco,monospace;text-align:left}
  43. p.code{background:#EBEBEB;border-left:3px solid #CC3333;margin:20px 0 20px 30px;padding:7px 10px}
  44. blockquote{background:#F5F5F5;border-left:3px solid #54A9EB;margin:20px 0 20px 30px;padding:7px 10px;font:"PT Serif",Georgia,"Times New Roman",Times,serif}
  45. span.tag{color:#004080;font-family:Consolas,monaco,monospace;text-transform:uppercase;quotes:"<" ">";}
  46. span.tag:before{content:open-quote}
  47. span.tag:after{content:close-quote}
  48. span.key{background:#F5F5F5;border:1px solid #E5E5E5;border-right-color:#CCC;border-bottom-color:#CCC;color:#000;font-size:80%;margin:0 3px;padding:3px 5px;-webkit-border-radius:3px;border-radius:3px;}
  49. .mark{background:#FFEA80}
  50. .note{color:#999}
  51. .hide,#navbar{display:none}
  52. .clear{clear:both}
  53. input.f{background:#fff;border:1px solid #EBEBEB;color:#000;font:14px Roboto,arial,sans-serif;outline:none;padding:4px 7px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  54. input.b {background:#427FED;border:0;color:#fff;font:bold 11px Roboto,arial,sans-serif;padding: 4px 7px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  55. input.gsc-search-button{border:0 !important;background:#427FED !important;-webkit-border-radius:3px !important;border-radius:3px !important}
  56. .w20 {width:20%}
  57. .w100 {width:100%}
  58. .table {background:#ccc;border-collapse:separate;border-spacing:1px;}
  59. .table th {background:#eee;font-weight:bold;text-align:center;padding:4px}
  60. .table td {background:#fff;padding:4px}
  61. .table tr.th td,.table .th{background:#eee;text-align:center;padding:4px}
  62. html body .region-inner {min-width:0;max-width:100%;width:auto}
  63. .section,.widget {margin:0}
  64. .content-outer{margin:0 auto;text-align:left;width:950px}
  65. .content-inner {padding:0}
  66. .header-outer {overflow:hidden;padding:0;text-align:center}
  67. #header .title {color:#000;font:400 40px 'Lobster',serif;margin:5px 0;padding:0 15px;}
  68. #header .title a {color:#000; text-decoration:none}
  69. #header .description {font-family:'Roboto',sans-serif;margin:5px 0;padding:0 15px;}
  70. #header .titlewrapper {padding:0;margin:0}
  71. #header .descriptionwrapper {padding:0;margin:0}
  72. .tabs-inner {padding:0;}
  73. #crosscol {background:#E84B3C;color:#fff;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
  74. #crosscol select{font-family:Roboto,sans-serif;color:#fff;outline:none}
  75. #crosscol option{font-family:Roboto,sans-serif;color:#000;}
  76. #crosscol ul {padding:0 20px;}
  77. #crosscol li a {display:inline-block;font-family:Roboto,sans-serif;padding:12px 20px;text-decoration:none;color:#fff}
  78. #crosscol li a:hover {background:#EC7064}
  79. .PageList li.selected {background:#C54134}
  80. .subtabs-outer{background:#f7f7f7;padding:10px;text-align:center;border-top:2px solid #e1e1e1}
  81. .main-outer {background:#fff;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
  82. .main-inner {padding:0}
  83. .main-inner .columns{padding-left:0;padding-right:300px}
  84. .main-inner .column-center-inner{padding:15px 25px;}
  85. .main-inner .column-left-outer{width:0;right:100%;margin-left:0}
  86. .main-inner .column-right-outer{width:300px;margin-right:-300px}
  87. .main-inner .column-right-inner{padding: 15px 25px 15px 0}
  88. .post {padding:10px 0}
  89. h1.post-title {color:#000;}
  90. h3.post-title {color:#000;margin:5px 0;font-weight:700}
  91. h3.post-title a {color:#000;text-decoration:none}
  92. h3.post-title a:hover {color:#E84B3C;text-decoration:underline}
  93. .post-body {position:relative;text-align:justify;overflow:hidden}
  94. .post-body .thumb {padding: 23px 15px 10px 0;float:left;}
  95. .post-body .thumb img {background:#fff;border:3px solid #E84B3C;-webkit-border-radius:3px;border-radius:3px;width:150px}
  96. .post-body .thumbcut {overflow:hidden;width:150px;height:100px;float:left;border:3px solid #E84B3C;-webkit-border-radius:3px;border-radius:3px;margin: 23px 15px 10px 0;}
  97. .post-body .thumbcut img {max-width:none }
  98. .post-body h2 {border-bottom:2px solid #ccc}
  99. .post-body p {line-height:18px}
  100. .post-body img {max-width:100%}
  101. .post-body .video {position:relative;padding-bottom:56.25%; padding-top:25px;height:0;}
  102. .post-body .video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
  103. .post-header {color:#404040;font-size:0.889em;line-height:1.6;margin:0;padding:5px 0}
  104. .post-footer {color:#404040;font:12px Arial,Helvetica,sans-serif;line-height:1.6;margin:0;padding:5px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
  105. .post-footer-line {line-height:25px;}
  106. .post-author span.name{font-weight:bold}
  107. .post-timestamp {margin-left:0}
  108. .post-plus {float:right; width:65px}
  109. .post-tweet {float:right; width:90px; overflow:hidden;padding-top:2px}
  110. .jump-link {padding-bottom:20px}
  111. #sharethis {background:url('//lh6.googleusercontent.com/-65B3BIcn6Ho/UPsukLoCTiI/AAAAAAAAH3w/XQC1s6H0OEs/s800/share.png') 0 15px no-repeat;padding:60px 0 10px 10px}
  112. .comments{margin:0}
  113. #comments .avatar-comment-indent .comment-author{
  114. background:#f7f7f7;
  115. border:1px solid #E5E5E5;
  116. border-bottom:0;
  117. font-weight:normal;
  118. margin:0;
  119. margin-top:10px;
  120. padding:5px 10px;
  121. -webkit-border-radius:5px 5px 0 0;
  122. border-radius:5px 5px 0 0;
  123. }
  124. #comments .avatar-comment-indent .blog-author{font-weight:bold;font-size:12px}
  125. #comments .comment-avatar {position:absolute;left:-45px;}
  126. #comments .comment-avatar img {border:1px solid #E5E5E5;-webkit-border-radius:3px;border-radius:3px;width:35px;height:35px;}
  127. #comments .comment-body {border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;font-size:0.889em;margin:0;padding:5px 10px;text-align:justify;}
  128. #comments .comment-body img {max-width:500px}
  129. #comments .comment-footer {border:1px solid #E5E5E5;border-top:0;color:#999;font-size:0.79em;margin:0;padding:5px 10px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
  130. .blog-pager {background:transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center;}
  131. .blog-pager-older-link, .home-link, .blog-pager-newer-link {background:#fff;padding:5px}
  132. #sidebar-right-1 h2 {background:url("//lh3.googleusercontent.com/-no7MzFWBY0w/UQZyM3HZ0KI/AAAAAAAAIkU/3OIf6pvQUrY/s800/hitch.png") repeat-x scroll center bottom transparent;color:#333;font:400 16px 'Roboto',sans-serif;padding:7px 15px;text-transform:uppercase;}
  133. #sidebar-right-1 .widget-content, #google_translate_element {color:#333;font-size:0.79em;padding:10px 15px}
  134. #sidebar-right-1 .widget{margin-bottom:15px;background:#f7f7f7;-webkit-border-radius:5px;border-radius:5px}
  135. .footer-inner {border:0;font-size:0.79em;padding:15px 0;}
  136. #recentcomments table {border-collapse:separate;width:100%}
  137. #recentcomments td {border-bottom:1px dotted #d4d4d4;padding:5px}
  138. #recentcomments tbody > tr:last-child > td { border:0 }
  139. #recentcomments .rc-avatar img {-webkit-border-radius:5px;border-radius:5px;}
  140. #recentcomments .rc-content {width:100%}
  141. #recentcomments .rc-author {color:#666;font-size:0.889em}
  142. #recentcomments .rc-author b {color:#000}
  143. #recentcomments .rc-body {padding-top:5px}
  144. #relatedposts{background:#f7f7f7;-webkit-border-radius:5px;border-radius:5px}
  145. #relatedposts table{border-collapse:collapse}
  146. #relatedposts td{padding:10px;border-right:1px solid #eee;vertical-align:top}
  147. #relatedposts td:hover{background:#fada59}
  148. #relatedposts td:last-child{border-right:0}
  149. #relatedposts .rp-thumb{height:100px}
  150. #relatedposts .rp-thumb img{width:72px;height:72px;border:5px solid #fff;margin-top:15px;-webkit-box-shadow: 2px 2px 4px 0 #999;box-shadow: 2px 2px 4px 0 #999;-webkit-transition: margin 0.5s ease-out;-moz-transition: margin 0.5s ease-out;-o-transition: margin 0.5s ease-out}
  151. #relatedposts .rp-thumb img:hover{margin-top:0}
  152. #relatedposts .rp-body{padding:1% 2%;font-size:.79em;vertical-align:top;}
  153. .b-orphus{text-align:left;background-color:#f6f6f6;border:1px solid #bfbfbf;-webkit-box-shadow:0 0 12px rgba(0,0,0,0.2);-moz-box-shadow:0 0 12px rgba(0,0,0,0.2);box-shadow:0 0 12px rgba(0,0,0,0.2);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
  154. .b-orphus .icons-close{display:inline;float:right;width:17px;height:17px;position:absolute;right:15px;top:15px;z-index:1002;opacity:0.6;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;-o-transition:opacity 0.2s;transition:opacity 0.2s}
  155. .b-orphus .icons-close:hover{opacity:1}
  156. .b-orphus .icons-close img{display:none}
  157. .b-orphus .header{text-transform:uppercase;font-family:"PT Sans Caption","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:1px;color:#151515;background-color:#d5d5d5;padding:15px;line-height:1;font-weight:bold}
  158. .b-orphus .item{margin:15px;font-weight:bold}
  159. .b-orphus .message{margin:15px;font-family:"PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
  160. .b-orphus form{margin:15px;margin-bottom:20px}
  161. .b-orphus form input[type="text"]{width:510px;border:1px solid #d5d5d5;padding:5px 2px}
  162. .b-orphus .buttons{text-align:right;margin-top:15px}
  163. .b-orphus .buttons input{background-color:#fff;text-transform:uppercase;font-size:12px;border:1px solid #d5d5d5;padding:5px 15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;letter-spacing:1px}
  164. .b-orphus .buttons input:hover{color:#c33}
  165. .b-orphus .buttons .cancel{display:none}
  166. .icons-close {background: url('http://icdn.lenta.ru/assets/icons-s9b85560389-7ba301a83d2a2ee4d5450af0e313bf9c.png') no-repeat scroll -511px 0px transparent;}
  167.  
  168. --></style>
  169. <script>
  170. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  171. ga('create', 'UA-680124-11', 'chuvyr.ru');
  172. ga('send', 'pageview');
  173. </script>
  174. <style type='text/css'>
  175. #blackfire {position: fixed; bottom:0; right:0;}
  176. #toTop {
  177.     display: none;
  178.     position: fixed;
  179.     bottom: 10px;
  180.     right: 10px;
  181.     width: 50px;
  182.     height: 50px;
  183. }
  184. #toTop a {
  185.     display: block;
  186.     background: #333 url('https://lh5.googleusercontent.com/-_Hhgcz15NEU/U1FM_iMUXPI/AAAAAAAATtE/3DofsJ6TH5Q/up.png') 50% 50% no-repeat;
  187.     padding:0;
  188.     text-align: left;
  189.     text-decoration: none;
  190.     text-indent: -99999px;
  191.     width: 50px;
  192.     height: 50px;
  193.     -webkit-box-shadow: 1px 1px 5px 1px #ccc;
  194.     box-shadow: 1px 1px 5px 1px #ccc;
  195. }
  196.  
  197. #blog-pager-older-link {
  198.     display: block;
  199.     float: none;
  200.     margin-top: -25px;
  201.     position: fixed;
  202.     top: 50%;
  203.     right: 0;
  204.     width: 50px;
  205.     height: 50px;
  206. }
  207. .blog-pager-older-link {
  208.     display: block;
  209.     background: #e84b3c url('https://lh5.googleusercontent.com/-vFAjgof8X-Y/U1FM_JxselI/AAAAAAAATs8/d62lYCQuTng/right.png') 50% 50% no-repeat;
  210.     padding:0;
  211.     text-align: left;
  212.     text-decoration: none;
  213.     text-indent: -99999px;
  214.     width: 50px;
  215.     height: 50px;
  216.     -webkit-box-shadow: 1px 1px 5px 1px #ccc;
  217.     box-shadow: 1px 1px 5px 1px #ccc;
  218. }
  219.  
  220. #blog-pager-newer-link {
  221.     display: block;
  222.     float: none;
  223.     margin-top: -25px;
  224.     position: fixed;
  225.     top: 50%;
  226.     left: 0;
  227.     width: 50px;
  228.     height: 50px;
  229. }
  230. .blog-pager-newer-link {
  231.     display: block;
  232.     background: #e84b3c url('https://lh5.googleusercontent.com/-zI2CiABNG5E/U1FM_O4-VvI/AAAAAAAATtI/bEvue3hXwwI/left.png') 50% 50% no-repeat;
  233.     border-right: 2px solid #ccc;
  234.     border-bottom: 2px solid #ccc;
  235.     padding:0;
  236.     text-align: left;
  237.     text-decoration: none;
  238.     text-indent: -99999px;
  239.     width: 50px;
  240.     height: 50px;
  241.     -webkit-box-shadow: 1px 1px 5px 1px #ccc;
  242.     box-shadow: 1px 1px 5px 1px #ccc;
  243. }
  244. </style>
  245. <meta content='width=1100' name='viewport'/>
  246. <link href='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html?m=1' media='only screen and (max-width: 640px)' rel='alternate'/>
  247. <script type='text/javascript'>//<![CDATA[
  248. $(function() {
  249.  $(window).scroll(function(){
  250.    if ( $(this).scrollTop()>0 ) {
  251.       $('#toTop').fadeIn();
  252.       $('#blackfire').fadeOut();
  253.    } else {
  254.       $('#toTop').fadeOut();
  255.       $('#blackfire').fadeIn();
  256.    }
  257.  });
  258.  $('#toTop').click(function(){ $('body,html').animate({scrollTop:0},800); });
  259. });
  260. //]]></script>
  261. <script type='text/javascript'>//<![CDATA[
  262. if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) window.location.replace( document.location + '?m=1');
  263. (function() {
  264.  var cx = '000369063099465613418:mcm-7ce5kre';
  265.  var gcse = document.createElement('script');
  266.  gcse.type = 'text/javascript';
  267.  gcse.async = true;
  268.  gcse.src = (document.location.protocol=='https:'?'https:':'http:')+'//www.google.com/cse/cse.js?cx='+cx;
  269.  var s = document.getElementsByTagName('script')[0];
  270.  s.parentNode.insertBefore(gcse, s);
  271. })();
  272. //]]></script>
  273. <script type='text/javascript'>//<![CDATA[
  274. $(document).ready(function(){
  275.  $('.comment-avatar').each(function(){
  276.    var me = $(this);
  277.    var html = me.html();
  278.    var m = html.match(/longdesc="([^"]*")/g);
  279.    if ( m ) {
  280.      var s = m.toString().replace(/\/s\d*\-c\//g, '/s35/');
  281.      var src = s.substring(10, s.length-1);
  282.      me.html('<img alt="" src="'+ src +'" />');
  283.    } else {
  284.      me.html('<img alt="" src="//lh3.googleusercontent.com/-YwiZF1yKcw4/U144zjsJmYI/AAAAAAAAUIg/uzDHYfCLlxg/s35/pseudo_user_avatar.png" />');
  285.    }
  286.  });
  287.  $('.comment-body').each(function(){
  288.    var me = $(this);
  289.    var html = me.html()
  290.      .replace(/:\)|:-\)/g, '<img alt=":)" src="//lh5.googleusercontent.com/--IKtLxZe9Og/UFIMD6_bIJI/AAAAAAAAESQ/PWSbPRUs-wE/s14/smile.png"/>')
  291.      .replace(/;\)|;-\)/g, '<img alt=";)" src="//lh4.googleusercontent.com/-KH6zpivgvTY/UFIMD7ci50I/AAAAAAAAESU/UttsGDILY-E/s14/blink.png"/>')
  292.      .replace(/:\(|:-\(/g, '<img alt=":(" src="//lh6.googleusercontent.com/-huUU7C0L5mc/UFIMDyKo08I/AAAAAAAAESY/hQGehsJbUDE/s14/cry.png"/>')
  293.      .replace(/X\)|X-\)|&gt;.&lt;|&gt;_&lt;/g, '<img alt="X)" src="//lh6.googleusercontent.com/-TNyRs4rR5W4/UFIN_JkzAkI/AAAAAAAAESo/8vJrEnPGPsM/s14/oy.png"/>')
  294.      .replace( /\[img\](.*?)\[\/img\]/ig, '<img alt="" src="$1" />');
  295.    me.html(html);
  296.  });
  297. });
  298. //]]></script>
  299. <script>//<![CDATA[
  300. function clickme(obj) {if ( typeof obj.title != 'undefined' ) document.location = obj.title;}
  301. //]]></script>
  302. <script type="text/javascript">var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
  303. </script><script type="text/javascript">
  304. if (window.jstiming) window.jstiming.load.tick('headEnd');
  305. </script></head>
  306. <body class='loading'>
  307. <div class='navbar section' id='navbar'>
  308. </div>
  309. <a name='top'></a>
  310. <div class='content'>
  311. <div class='content-outer'>
  312. <div class='content-inner'>
  313. <header>
  314. <div class='header-outer'>
  315. <div class='region-inner header-inner'>
  316. <div class='header section' id='header'><div class='widget Header' id='Header1'>
  317. <div id='header-inner'>
  318. <div class='titlewrapper'>
  319. <div class='title'>
  320. <a href='http://www.chuvyr.ru/'>Chuvyr.Ru</a>
  321. </div>
  322. </div>
  323. <div class='descriptionwrapper'><p class='description'><span>Полезный блог для вебмастеров и не только</span></p></div>
  324. </div>
  325. </div></div>
  326. </div>
  327. </div>
  328. </header>
  329. <div class='tabs-outer'>
  330. <div class='region-inner tabs-inner'>
  331. <div class='tabs section' id='crosscol'><div class='widget PageList' id='PageList1'>
  332. <h2>Страницы</h2>
  333. <div class='widget-content'>
  334. <ul>
  335. <li><a href='http://www.chuvyr.ru/'>Блог</a></li>
  336. <li><a href='https://plus.google.com/100680009502230534584/about'>О блоге</a></li>
  337. <li><a href='https://plus.google.com/117210080099867317492/about'>Об авторе</a></li>
  338. <li><a href='http://www.chuvyr.ru/p/archive.html'>Архив</a></li>
  339. <li><a href='http://www.chuvyr.ru/p/rss.html'>RSS</a></li>
  340. <li><a href='http://www.chuvyr.ru/p/dictionary.html'>Словарь</a></li>
  341. <li><a href='http://www.chuvyr.ru/p/blog-page.html'>Трёхзначные HEX цвета</a></li>
  342. <li class='highlighting'><a href='http://www.chuvyr.ru/p/start.html'>С чего начать?</a></li>
  343. </ul>
  344. </div>
  345. </div></div>
  346. <div class='tabs section' id='crosscol-overflow'></div>
  347. </div>
  348. </div><!-- end .tabs-outer -->
  349. <div class='subtabs-outer'>
  350. <div class='region-inner subtabs-inner'>
  351. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/html'>html</span>,
  352. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/css'>css</span>,
  353. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/javascript'>javascript</span>,
  354. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/php'>php</span>,
  355. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/mysql'>mysql</span>,
  356. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/юзабилити'>юзабилити</span>,
  357. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/дизайн'>дизайн</span>,
  358. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/seo'>seo</span>,
  359. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/smo'>smo</span>,
  360. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/копирайтинг'>копирайтинг</span>,
  361. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/заработок'>заработок</span>,
  362. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/сервисы'>сервисы</span>,
  363. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/программы'>программы</span>
  364. </div>
  365. </div>
  366. <div class='main-outer'>
  367. <div class='region-inner main-inner'>
  368. <div class='columns fauxcolumns'>
  369. <div class='columns-inner'>
  370. <div class='column-center-outer'>
  371. <div class='column-center-inner'>
  372. <div class='main section' id='main'><div class='widget Blog' id='Blog1'>
  373. <div class='blog-posts'>
  374. <script>var DateScript = '15 апреля 2014 г.';</script>
  375. <div class='post-outer'>
  376. <div class='post' id='3945215883587040359' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  377. <meta content='http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s200/input-type-file-css-js.jpg' itemprop='image'/>
  378. <meta content='Одним из наиболее проблемных элементов HTML, в плане оформления, является поле выбора файла с диска ...' name='description'/>
  379. <h1 class='post-title' itemprop='name'>Оформление элемента input type=file средствами CSS и JavaScript</h1>
  380. <div class='post-header'>
  381. <div class='post-header-line-1'>
  382. <span class='post-labels'>
  383. Ярлыки:
  384. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/css'>css</span>,
  385. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/html'>html</span>,
  386. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/javascript'>javascript</span>,
  387. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/jquery'>jquery</span>,
  388. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD'>плагин</span>,
  389. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B'>примеры</span>,
  390. <span class='link' onclick='clickme(this)' title='http://www.chuvyr.ru/search/label/%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F'>решения</span>
  391. </span>
  392. </div>
  393. </div>
  394. <div class='post-body' id='post-body-3945215883587040359' itemprop='articleBody'><div class="thumb"><a href="http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html"><img alt="Оформление элемента input type file средствами CSS и JavaScript" border="0" src="http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s200/input-type-file-css-js.jpg" /></a></div><p>Одним из наиболее проблемных элементов HTML, в плане оформления, является поле выбора файла с диска для дальнейшей его загрузки на сервер. Как не крути, но без JavaScript, одним только CSS, добиться полноценного результата не получится.</p>
  395. <a name='more'></a><p>На самом деле проблема куда как масштабней чем может показаться на первый взгляд, но и её решение нельзя назвать особо сложным. Вот такой вот парадокс. С одной стороны, оформить&nbsp;<code>input type="file"</code> только средствами CSS не представляется возможным, а с другой &ndash; JavaScript не может вызвать диалоговое окно для открытия файла. Будет не лишним учесть и возможность отключения JavaScript в браузере.</p>
  396. <p>Для решения такого рода задачи используется JavaScript интеграция специальной HTML надстройки над имеющимся тегом <span class="tag">INPUT</span>, конечный результат которой может выглядеть следующим образом:</p>
  397. <p class="code">&lt;label class="upload_field"&gt;<br /> &nbsp; &lt;input type="file" name="file"&gt;<br /> &nbsp; &lt;div class="upload_value"&gt;&lt;span&gt;no file selected&lt;/span&gt;&lt;/div&gt;<br /> &nbsp; &lt;div class="upload_button"&gt;&lt;/div&gt;<br />&lt;/label&gt;</p>
  398. <p>Разберём эту надстройку подробнее. Тег <span class="tag">INPUT</span> оборачивается в метку <span class="tag">LABEL</span>, что делает входящие в неё элементы активными для дальнейшего вызова диалогового окна открытия файла. Примечательно, что сам тег <span class="tag">INPUT</span> скрывается через CSS-свойства, задаваемые <span class="note">(в данном случае)</span> через:&nbsp;<code>.upload_field input</code> &ndash; но без использования <code>display: none</code>. Осталось лишь оформить блочные элементы&nbsp;<code>upload_value</code> и&nbsp;<code>upload_button</code> и создать JavaScript обработчик события <i>change</i> <span class="note">(с англ. <i>изменение</i>)</span> для тега <span class="tag">INPUT</span>.</p>
  399. <p>В своём решении, я использую библиотеку jQuery, и конечный результат у меня представляет собой вот такой простенький плагин:</p>
  400. <p class="code">(function( $ ) {<br />$.fn.extended_itf = function() {<br />&nbsp; if ( /msie/.test(navigator.userAgent.toLowerCase()) ) return; // не работает для IE<br />&nbsp; this.each(function() {<br />&nbsp;&nbsp;&nbsp; var obj = $(this);<br />&nbsp;&nbsp;&nbsp; var placeholder = obj.is('[placeholder]') ? obj.attr('placeholder') : 'no file selected';<br />&nbsp;&nbsp;&nbsp; var value = $('&lt;div class="upload_value"/&gt;').html('&lt;div&gt;'+ placeholder +'&lt;/div&gt;');<br />&nbsp;&nbsp;&nbsp; var button = $('&lt;div class="upload_button"/&gt;');<br />&nbsp;&nbsp;&nbsp; obj.wrap('&lt;label class="upload_file"/&gt;');<br />&nbsp;&nbsp;&nbsp; obj.parent().append(value);<br />&nbsp;&nbsp;&nbsp; obj.parent().append(button);<br />&nbsp;&nbsp;&nbsp; obj.change(function() { value.find('div').text($(this).val()); });<br />&nbsp; });<br />};<br />})(jQuery);</p>
  401. <p>Обращаю ваше внимание на то, что для браузера Internet Explorer такое решение не работает. Конечно, можно было бы нагородить огород со слоями, но я решил просто исключить его из поля своего интереса. Само же использование плагина может иметь следующий вид:</p>
  402. <p class="code">$(function() {<br />&nbsp; $('input[type="file"]').extended_itf();<br />});</p>
  403. <p>Очевидно, что оформить такой элемент средствами CSS не составляет особого труда. Лично я предпочитаю использовать резиновый вид полей формы. Поэтому мне пришлось мастерить соответствующую конструкцию. Вот как это выглядит:</p>
  404. <p class="code">.upload_file {<br />&nbsp; background: #eee;<br />&nbsp; border: 1px solid #bbb;<br />&nbsp; display: block;<br />&nbsp; min-width: 200px;<br />&nbsp; overflow: hidden;<br />&nbsp; padding-right: 81px;<br />&nbsp; -webkit-border-radius: 3px;<br />&nbsp; -moz-border-radius: 3px;<br />&nbsp; border-radius: 3px;<br />}<br />.upload_file input {<br />&nbsp; position: absolute;<br />&nbsp; left: -9999px;<br />}<br />.upload_value {<br />&nbsp; float: left;<br />&nbsp; width:100%;<br />}<br />.upload_value div {<br />&nbsp; color: #333;<br />&nbsp; font: 14px/32px Arial, Helvetica, sans-serif;<br />&nbsp; padding: 0 6px;<br />}<br />.upload_button {<br />&nbsp; background: url(button.png) 50% 50% no-repeat;<br />&nbsp; cursor: hand;<br />&nbsp; cursor: pointer;<br />&nbsp; float: left;<br />&nbsp; margin-right: -81px;<br />&nbsp; width: 81px;<br />&nbsp; height: 32px;<br />}</p>
  405. <p>К слову <span class="note">(для упрощения задачи)</span>, оформление кнопки было осуществлено в виде фоновой картинки. В тоже время, вы всегда можете создать полноценный элемент. Например, заменив строку:</p>
  406. <p class="code">var button = $('&lt;div class="upload_button"/&gt;');</p>
  407. <p>на что-то вроде следующего:</p>
  408. <p class="code">var button = $('&lt;div class="upload_button"/&gt;').html('&lt;span&gt;Отправить&hellip;&lt;/span&gt;');</p>
  409. <p>Правда при моём варианте резиновой вёрстки следует учесть, что размер кнопки фиксирован. Тем не менее, при желании, можно добиться чего угодно, особенно если использовать ту же таблицу.</p>
  410. <p>Просмотреть демо-версию работы решения вы можете проследовав по <a href="http://jsfiddle.net/s2zYV/" target="_blank">этой ссылке</a> &raquo;</p>
  411. <p>На этом у меня всё. Спасибо за внимание. Удачи!</p><div class='clear'></div></div>
  412. <div id='sharethis'><div class='b-ya-likes yashare-auto-init' data-yashareDescription='Одним из наиболее проблемных элементов HTML, в плане оформления, является поле выбора файла с диска ...' data-yashareImage='http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s72-c/input-type-file-css-js.jpg' data-yashareL10n='ru' data-yashareLink='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' data-yashareQuickServices='twitter,facebook,vkontakte,moimir,odnoklassniki,yaru,gplus' data-yashareTheme='counter' data-yashareTitle='Оформление элемента input type=file средствами CSS и JavaScript' data-yashareType='big'></div></div>
  413. <style>.post-intro{font-style:italic}.post-footer{background:#E84B3C;border:0;color:#fff;padding-left:10px}.post-footer a,.post-footer .link{color:#fff;}</style>
  414. <div class='post-footer'>
  415. <div class='post-footer-line post-footer-line-1'>
  416. <span class='post-author'>
  417. <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  418. <meta content='https://plus.google.com/117210080099867317492' itemprop='url'/>
  419. <meta content='//lh6.googleusercontent.com/-3DSF2vKlO1E/AAAAAAAAAAI/AAAAAAAAPZ8/eyYNCGGnKg4/s512-c/photo.jpg' itemprop='image'/>
  420. <span itemprop='name'>Константин Кирилюк</span>
  421. </span>
  422. </span>
  423. <span class='post-timestamp'>
  424. <script>document.write(DateScript);</script>
  425. в
  426. <meta content='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' itemprop='url'/>
  427. <meta content='2014-04-15T08:00:00+03:00' itemprop='datePublished'/>
  428. <a class='timestamp-link' href='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' rel='bookmark' title='permanent link'>8:00</a>
  429. </span>
  430. <span class='post-icons'>
  431. <!--noindex--><span class='item-control blog-admin pid-1275083612'><span class='link' onclick='clickme(this)' title='http://www.blogger.com/post-edit.g?blogID=4108380392867804136&postID=3945215883587040359&from=pencil'>Edit</span></span><!--/noindex-->
  432. </span>
  433. <span class='post-plus'><span class='g-plusone' data-href='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html'></span></span>
  434. <span class='post-tweet'><a class='twitter-share-button' data-text='Оформление элемента input type=file средствами CSS и JavaScript' data-url='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html' data-via='wmas'></a></span>
  435. </div>
  436. </div>
  437. </div>
  438.  
  439. <!--noindex-->
  440. <div id='relatedposts'></div>
  441. <!--/noindex-->
  442. <script type='text/javascript'>
  443. var rp_numposts = 4;
  444. var rp_curpost = "http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html";
  445. var rp_posts = new Array();
  446. var rp_keys = new Array();
  447.  
  448. // <![CDATA[
  449. function relatedposts_callback(json) {
  450.  for (var i=0; i<json.feed.entry.length; i++) {
  451.    var entry = json.feed.entry[i];
  452.    var post = {
  453.      'id' : entry.id.$t,
  454.      'url' : '',
  455.      'title' : entry.title.$t,
  456.      'thumb' : '//3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s72-c/no_image.jpg'
  457.    };
  458.    post.id = post.id.substring(post.id.lastIndexOf('post-'));
  459.  
  460.    for (var j=0; j<entry.link.length; j++) {
  461.      if (entry.link[j].rel == 'alternate' ) {
  462.        post.url = entry.link[j].href;
  463.        break;;
  464.      }
  465.    }
  466.    try { post.thumb = entry.media$thumbnail.url; } catch (error) {}
  467.    if ( ( post.url != rp_curpost ) && !(post.id in rp_posts) ) {
  468.      rp_posts[post.id] = post;
  469.      rp_keys.push(post.id);
  470.    }
  471.  }
  472. }
  473.  
  474. function relatedposts() {
  475.  for ( var i=0; i<rp_keys.length; i++ ) {
  476.    var j = Math.floor((rp_keys.length - 1) * Math.random());
  477.    var rp_key_tmp = rp_keys[i];
  478.    rp_keys[i] = rp_keys[j];
  479.    rp_keys[j] = rp_key_tmp;
  480.  }
  481.  
  482.  if ( rp_numposts > rp_keys.length ) rp_numposts = rp_keys.length;
  483.  var cel_width = Math.ceil(100 / rp_numposts);
  484.  
  485.  var cels = '';
  486.  for ( var i=0; i<rp_numposts; i++ ) {
  487.    var rp_key = rp_keys[i];
  488.    var post = rp_posts[rp_key];
  489.    cels+= '<td width="'+ cel_width +'%">';
  490.    cels+= '<div class="rp-thumb"><a rel="nofollow" href="'+ post.url +'"><img alt="'+ post.title +'" src="'+ post.thumb +'"/></a></div>';
  491.    cels+= '<div class="rp-body"><a rel="nofollow" href="'+ post.url +'">'+ post.title +'</a></div>';
  492.    cels+= '</td>';
  493.  }
  494.  $('#relatedposts').html('<table border="0" cellpadding="5" cellspacing="0" width="100%"><tbody><tr>'+ cels +'</tr></tbody></table>');
  495. }
  496. // ]]>
  497. </script>
  498. <script src='http://www.chuvyr.ru/feeds/posts/default/-/css?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  499. <script src='http://www.chuvyr.ru/feeds/posts/default/-/html?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  500. <script src='http://www.chuvyr.ru/feeds/posts/default/-/javascript?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  501. <script src='http://www.chuvyr.ru/feeds/posts/default/-/jquery?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  502. <script src='http://www.chuvyr.ru/feeds/posts/default/-/плагин?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  503. <script src='http://www.chuvyr.ru/feeds/posts/default/-/примеры?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  504. <script src='http://www.chuvyr.ru/feeds/posts/default/-/решения?alt=json-in-script&callback=relatedposts_callback&max-results=5' type='text/javascript'></script>
  505. <script type='text/javascript'>$(document).ready(function(){ relatedposts(); });</script>
  506. <div class='comments' id='comments'>
  507.  
  508. <!--noindex-->
  509. <div class='comment-form'>
  510. <a name='comment-form'></a>
  511. <h5 id='comment-post-message'>Отправить комментарий к сообщению:<br/><a href='http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html'>Оформление элемента input type=file средствами CSS и JavaScript</a></h5>
  512. <div><b>Перед тем как оставить комментарий, пожалуйста, прочитайте статью!</b> Я приветствую замечания, вопросы и дополнения, которые способствуют конструктивному общению, но комментарии лишенные всякого смысла, содержащие спам, оскорбления и т.д. будут удалены. Все комментарии проходят <b>обязательную предварительную проверку</b>.</div>
  513. <a href='https://www.blogger.com/comment-iframe.g?blogID=4108380392867804136&postID=3945215883587040359' id='comment-editor-src' rel='nofollow'></a>
  514. <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
  515. <script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/313381681-comment_from_post_iframe.js"></script>
  516. <script type='text/javascript'>BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '08161902808843669832');</script>
  517. </div>
  518. <!--/noindex-->
  519. </div>
  520. </div>
  521. </div>
  522. <div class='blog-pager' id='blog-pager'>
  523. <span id='blog-pager-newer-link'><a class='blog-pager-newer-link' href='http://www.chuvyr.ru/2014/04/which-pages-indexed-google.html' id='Blog1_blog-pager-newer-link' title='Следующее'>Следующее</a></span>
  524. <span id='blog-pager-older-link'><a class='blog-pager-older-link' href='http://www.chuvyr.ru/2014/04/preview-photo-javascript.html' id='Blog1_blog-pager-older-link' title='Предыдущее'>Предыдущее</a></span>
  525. <a class='home-link' href='http://www.chuvyr.ru/'>Главная страница</a>
  526. </div>
  527. <div class='clear'></div>
  528. <script type="text/javascript">window.___gcfg = {'lang': 'ru'};</script>
  529. </div></div>
  530. </div>
  531. </div><!-- end center column -->
  532. <aside>
  533. <div class='column-right-outer'>
  534. <div class='column-right-inner'>
  535. <div class='sidebar section' id='sidebar-right-1'><div class='widget HTML' id='HTML5'>
  536. <h2 class='title'>Поиск по блогу</h2>
  537. <div class='widget-content'><gcse:searchbox-only></gcse:searchbox-only></div>
  538. </div><div class='widget HTML' id='HTML1'>
  539. <h2 class='title'>О блоге</h2>
  540. <div class='widget-content'><table border="0" cellpadding="7" cellspacing="0" width="100%"><tr>
  541. <td><img style="-webkit-border-radius:5px;border-radius:5px;" alt="Константин Кирилюк (aka wmas)" src="https://lh6.googleusercontent.com/-3DSF2vKlO1E/AAAAAAAAAAI/AAAAAAAAPZ8/eyYNCGGnKg4/s60/photo.jpg"/></td>
  542. <td width="100%">
  543. <b><a class='profile-name-link g-profile' href='https://plus.google.com/117210080099867317492' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);'>Константин Кирилюк</a></b><br/>
  544. <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/117210080099867317492" data-rel="author"></div></td>
  545. </tr></table>
  546.  
  547. <table border="0" cellpadding="7" cellspacing="0" width="100%">
  548. <tr>
  549. <td><a href="http://feeds.feedburner.com/chuvyr" target="_blank"><img alt="RSS" src="http://lh3.googleusercontent.com/-d00xNV5J33k/UmPYG5f4QrI/AAAAAAAANAQ/LkNx4qQaVyo/h80/rss.png" border="0"/></a></td>
  550. <td width="100%">
  551. &nbsp; &nbsp;<b>Хочу читать в</b><br/>
  552. <b>&raquo;</b> <a href="http://mail.yandex.ru/lenta/add?feed_url=http%3A%2F%2Ffeeds.feedburner.com%2Fchuvyr" target="_blank">Яндекс.Подписках</a><br/>
  553. <b>&raquo;</b> <a href="http://theoldreader.com/feeds/subscribe?url=http%3A%2F%2Ffeeds.feedburner.com%2Fchuvyr" target="_blank">The Old Reader</a><br/>
  554. <b>&raquo;</b> <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fchuvyr" target="_blank">feedly</a>
  555. </td>
  556. </tr>
  557. </table><br/>
  558.  
  559. <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chuvyr', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  560. <input type="hidden" value="chuvyr" name="uri"/>
  561. <input type="hidden" name="loc" value="ru_RU"/>
  562. <table border="0" cellpadding="3" cellspacing="0" width="100%">
  563. <tr>
  564. <td width="100%"><input class="f w100" type="text" name="email" placeholder="Ваш E-mail"/></td>
  565. <td><input class="b" type="submit" value="Подписаться" /></td>
  566. </tr>
  567. </table>
  568. </form>
  569.  
  570. <p align="center">
  571. <a href="https://www.facebook.com/chuvyr" target="_blank"><img alt="Facebook" src="//lh6.googleusercontent.com/-KXBzMz1En8I/UDYB9Q3Fo6I/AAAAAAAAD20/fo6wRbhF_PI/s50/ico_fb.png" /></a>
  572. <a href="http://vk.com/chuvyr" target="_blank"><img alt="ВКонтакте" src="//lh4.googleusercontent.com/--zKs9Yg1HbE/UDYB-Cj0DXI/AAAAAAAAD28/XJZDcb1M8E0/s50/ico_vk.png"/></a>
  573. <a href="http://twitter.com/chuvyr" target="_blank"><img alt="Twitter" src="//lh6.googleusercontent.com/-sRveopvZj2s/UDYDAQR5lQI/AAAAAAAAD3Y/Q2ms8rxd_XI/s50/ico_twitter.png" /></a>
  574. <a href="http://www.google.com/+ChuvyrRuBlog" rel="publisher" target="_blank"><img alt="Google+" src="//lh6.googleusercontent.com/-oJM_UqkYFUk/UDYB9X06ptI/AAAAAAAAD2w/7kdv82yYOOY/s50/ico_gplus.png" /></a>
  575. </p></div>
  576. </div><div class='widget HTML' id='HTML3'>
  577. <h2 class='title'>Новые комментарии</h2>
  578. <div class='widget-content'><div id="recentcomments"></div>
  579.  
  580. <script type="text/javascript">
  581. //<![CDATA[
  582. var rc_numposts = 5;
  583. var rc_numchars = 60;
  584. var rc_imagesize = 50
  585.  
  586. function recentcomments(json) {
  587.  if ( rc_numposts > json.feed.entry.length ) rc_numposts = json.feed.entry.length;
  588.  
  589.  var html = '<table border="0" cellpadding="5" cellspacing="0" width="100%"><tbody>';
  590.  for (var i=0; i<rc_numposts; i++) {
  591.    var entry = json.feed.entry[i];
  592.    var post = {'avatar': '//lh3.googleusercontent.com/-YwiZF1yKcw4/U144zjsJmYI/AAAAAAAAUIg/uzDHYfCLlxg/s'+ rc_imagesize +'-c/pseudo_user_avatar.png', 'name': entry.author[0].name.$t, 'url': '', 'content': '' };
  593.  
  594.    if ( ( entry.author[0].gd$image ) && ( entry.author[0].gd$image.src.indexOf('blank') == -1 ) ) post.avatar = entry.author[0].gd$image.src.replace(/\/s\d\d+-c\//, "/s"+ rc_imagesize +"-c/");
  595.  
  596.    for (var j=0; j<entry.link.length; j++) {
  597.      if (entry.link[j].rel == 'alternate') {
  598.        post.url = entry.link[j].href;
  599.        break;
  600.      }
  601.    }
  602.  
  603.    if ("content" in entry) post.content = entry.content.$t;
  604.    else if ("summary" in entry) post.content = entry.summary.$t;
  605.    else post.content = entry.title.$t;
  606.  post.content = post.content.replace(/<\S[^>]*>/g, '');
  607.    if (post.content.length > rc_numchars) {
  608.      post.content = post.content.substring(0, rc_numchars);
  609.      var pos = post.content.lastIndexOf(' ');
  610.      post.content = post.content.substring(0, pos) + '...';
  611.    }
  612.  
  613.    html+= '<tr valign="top">'+
  614.      '<td class="rc-avatar">'+
  615.        '<img class="avatar" alt="'+ post.name +'" src="'+ post.avatar +'" width="'+ rc_imagesize +'" height="'+ rc_imagesize +'" border="0" />'+
  616.      '</td>'+
  617.      '<td class="rc-content">'+
  618.        '<div class="rc-author"><b>'+ post.name +'</b> сказал(а):</div>'+
  619.        '<div class="rc-body"><a rel="nofollow" href="'+ post.url +'">'+ post.content +'</a></div>'+
  620.      '</td>'+
  621.    '</tr>';
  622.  }
  623.  html+= '</tbody></table>';
  624.  $('#recentcomments').html(html);
  625. }
  626.  
  627. (function() {
  628.  var rc = document.createElement('script');
  629.  rc.type = 'text/javascript';
  630.  rc.async = true;
  631.  rc.src = (document.location.protocol == 'https:' ? 'https' : 'http') +'://'+ window.location.hostname +'/feeds/comments/default?orderby=published&alt=json-in-script&callback=recentcomments&max-results='+ rc_numposts;
  632.  var s = document.getElementsByTagName('script')[0];
  633.  s.parentNode.insertBefore(rc, s);
  634. })();
  635. //]]>
  636. </script></div>
  637. </div><div class='widget HTML' id='HTML6'>
  638. <h2 class='title'>Сообщества для вебмастеров</h2>
  639. <div class='widget-content'><table cellpadding="2" cellspacing="0" width="100%">
  640. <tr>
  641. <td><img alt="Я &#9829; Blogger" src="https://lh3.googleusercontent.com/-DiGrAe6kERU/AAAAAAAAAAI/AAAAAAAAAAY/A6A43yHYDEs/s22/photo.jpg"/></td>
  642. <td width="100%"><a href="https://plus.google.com/communities/100483013263551883669" target="_blank">Я &#9829; Blogger</a></td>
  643. </tr>
  644. <tr>
  645. <td><img alt="Всё о SEO" src="https://lh5.googleusercontent.com/-BScJsIQ2Ksg/AAAAAAAAAAI/AAAAAAAAAAY/agl7FqmO8bI/s22/photo.jpg"/></td>
  646. <td><a href="https://plus.google.com/communities/109115714197902479439" target="_blank">SEO на русском</a></td>
  647. </tr>
  648. <tr>
  649. <td><img alt="HTML на русском" src="https://lh6.googleusercontent.com/-C46I9jM8DwA/AAAAAAAAAAI/AAAAAAAAAAY/Ywi2M-vxCaA/s22/photo.jpg"/></td>
  650. <td><a href="https://plus.google.com/communities/114499518562214633966" target="_blank">HTML на русском</a></td>
  651. </tr>
  652. <tr>
  653. <td><img alt="CSS на русском" src="https://lh4.googleusercontent.com/-qaXKOGOBnTc/AAAAAAAAAAI/AAAAAAAAAAc/2I7I2QVcuPg/s22/photo.jpg"/></td>
  654. <td><a href="https://plus.google.com/communities/111931899947362398874" target="_blank">CSS на русском</a></td>
  655. </tr>
  656. <tr>
  657. <td><img alt="PHP на русском" src="https://lh3.googleusercontent.com/-EuNPMgsN-MM/AAAAAAAAAAI/AAAAAAAAAAY/r-FUTR_5I-k/s22/photo.jpg"/></td>
  658. <td><a href="https://plus.google.com/communities/109725695097166035446" target="_blank">PHP на русском</a></td>
  659. </tr>
  660. <tr>
  661. <td><img alt="Тру Админ - IT юмор" src="http://lh4.googleusercontent.com/-SQtPcuW4AEE/AAAAAAAAAAI/AAAAAAAAAAY/FlscxUblAfk/s22/photo.jpg"/></td>
  662. <td width="100%"><a href="https://plus.google.com/communities/111260298735931858634" target="_blank">Тру Админ</a> - IT юмор</td>
  663. </tr>
  664. </table></div>
  665. </div><div class='widget BlogArchive' id='BlogArchive1'>
  666. <h2>Архив блога</h2>
  667. <div class='widget-content'>
  668. <div class='ltr' id='ArchiveList'>
  669. <div id='BlogArchive1_ArchiveList'>
  670. <ul class='flat'>
  671. <li class='archivedate'><a href='http://www.chuvyr.ru/2014_05_01_archive.html'>Май 2014</a> (3)</li>
  672. <li class='archivedate'><a href='http://www.chuvyr.ru/2014_04_01_archive.html'>Апрель 2014</a> (11)</li>
  673. <li class='archivedate'><a href='http://www.chuvyr.ru/2014_03_01_archive.html'>Март 2014</a> (6)</li>
  674. <li class='archivedate'><a href='http://www.chuvyr.ru/2014_02_01_archive.html'>Февраль 2014</a> (8)</li>
  675. <li class='archivedate'><a href='http://www.chuvyr.ru/2014_01_01_archive.html'>Январь 2014</a> (23)</li>
  676. <li class='archivedate'><a href='http://www.chuvyr.ru/2013_12_01_archive.html'>Декабрь 2013</a> (25)</li>
  677. <li class='archivedate'><a href='http://www.chuvyr.ru/2013_11_01_archive.html'>Ноябрь 2013</a> (21)</li>
  678. <li class='archivedate'><a href='http://www.chuvyr.ru/2013_10_01_archive.html'>Октябрь 2013</a> (5)</li>
  679. <li class='archivedate'><a href='http://www.chuvyr.ru/2013_09_01_archive.html'>Сентябрь 2013</a> (1)</li>
  680. </ul>
  681. </div>
  682. </div>
  683. </div>
  684. </div></div>
  685. </div>
  686. </div>
  687. </aside>
  688. <div id='blackfire'><span class='hand' onclick='clickme(this)' title='http://c.cblevt.com/8V'><img src='https://lh4.googleusercontent.com/-5bVmrnNygUo/U14XeVVjltI/AAAAAAAAUHs/0pN6vuDNrBo/w426-h330/blackfire.png'/></span></div>
  689. <div id='toTop'><a href='#top'>^</a></div>
  690. </div>
  691. <div class='clear'></div>
  692. </div>
  693. </div>
  694. </div><!-- end .main-outer -->
  695. <footer>
  696. <div class='footer-outer'>
  697. <div class='region-inner footer-inner'>
  698. <div class='foot section' id='footer-1'><div class='widget HTML' id='HTML4'>
  699. <div class='widget-content'><script type="text/javascript">
  700. var _tmr = _tmr || [];
  701. _tmr.push({id: "2435619",  type: "pageView", start: (new Date()).getTime()});
  702. (function (d, w) {
  703.    var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true;
  704.    ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
  705.    var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
  706.    if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
  707. })(document, window);
  708. </script>
  709. <noscript><div style="position:absolute;left:-10000px;"><img src="//top-fwz1.mail.ru/counter?id=2435619;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru" /></div></noscript>
  710. <script type="text/javascript" src="http://orphus.c3h.ru/orphus.js"></script>
  711.  
  712. <table border="0" cellpadding="5" cellspacing="0" width="100%">
  713. <tr>
  714.     <td><!-- Rating@Mail.ru logo --><a target="_blank" href="http://top.mail.ru/jump?from=2435619"><img src="//top-fwz1.mail.ru/counter?id=2435619;t=502;l=1" border="0" height="31" width="88" alt="Рейтинг@Mail.ru" /></a><!-- //Rating@Mail.ru logo --></td>
  715.     <td width="100%"><!--LiveInternet counter--><script type="text/javascript">document.write("<a href='http://www.liveinternet.ru/click' target=_blank><img src='//counter.yadro.ru/hit?t58.10;r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u" + escape(document.URL) + ";" + Math.random() + "' border=0 width=88 height=31 alt='' title='LiveInternet'><\/a>")</script><!--/LiveInternet--></td>
  716.     <td><a href="http://www.chuvyr.ru/?m=1"><img alt="Мобильная версия блога" src="https://lh5.googleusercontent.com/-RRXJFIZVbaM/U1_nxpHTbNI/AAAAAAAAUNA/oFUu-SgfLng/w100-h31-no/mob.png" /></a></td>
  717.     <td><a href="http://orphus.ru" id="orphus" target="_blank"><img alt="Система Orphus" src="https://lh3.googleusercontent.com/-trRuz3Pmx7w/U1_nxmtg7CI/AAAAAAAAUNE/_Cu4kp6yxYQ/w130-h31-no/orphus-130x31.png" /></a></td>
  718. </tr>
  719. </table></div>
  720. </div></div>
  721. </div>
  722. </div>
  723. </footer>
  724. </div>
  725. </div>
  726. </div><!-- end .content -->
  727. <!-- Yandex.Metrika counter --><script src='//mc.yandex.ru/metrika/watch.js' type='text/javascript'></script><script type='text/javascript'>try { var yaCounter8051713 = new Ya.Metrika({id:8051713, webvisor:true, clickmap:true, trackLinks:true, accurateTrackBounce:true}); } catch(e) { }</script><noscript><div><img alt='' src='//mc.yandex.ru/watch/8051713' style='position:absolute; left:-9999px;'/></div></noscript><!-- /Yandex.Metrika counter -->
  728. <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>
  729. <script type="text/javascript">
  730. if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
  731. </script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2798639676-widgets.js"></script>
  732. <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  733. <script type='text/javascript'>
  734. if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV2";window['blogger_blog_id'] = '4108380392867804136';BLOG_attachCsiOnload('item_'); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4108380392867804136','//www.chuvyr.ru/2014/04/input-type-file-css-javascript.html','4108380392867804136');
  735. _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4108380392867804136', 'bloggerUrl': 'http://www.blogger.com', 'title': 'Chuvyr.Ru', 'pageType': 'item', 'url': 'http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html', 'canonicalUrl': 'http://www.chuvyr.ru/2014/04/input-type-file-css-javascript.html', 'canonicalHomepageUrl': 'http://www.chuvyr.ru/', 'homepageUrl': 'http://www.chuvyr.ru/', 'blogspotFaviconUrl': 'http://www.chuvyr.ru/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': 'UA-680124-11', 'searchLabel': '', 'searchQuery': '', 'pageName': 'Оформление элемента input type\75file средствами CSS и JavaScript', 'pageTitle': 'Chuvyr.Ru: Оформление элемента input type\75file средствами CSS и JavaScript', 'metaDescription': 'jQuery плагин для создания оформляемого input type\75file элемента для загрузки файла и пример его оформления в CSS.', 'encoding': 'UTF-8', 'locale': 'ru', 'localeUnderscoreDelimited': 'ru', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Chuvyr.Ru - Atom\42 href\75\42http://www.chuvyr.ru/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Chuvyr.Ru - RSS\42 href\75\42http://www.chuvyr.ru/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Chuvyr.Ru - Atom\42 href\75\42http://www.blogger.com/feeds/4108380392867804136/posts/default\42 /\76\n\n', 'meTag': '', 'openIdOpTag': '', 'googleProfileUrl': 'https://plus.google.com/117210080099867317492', 'postImageThumbnailUrl': 'http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s72-c/input-type-file-css-js.jpg', 'postImageUrl': 'http://1.bp.blogspot.com/-Jfh4JUkfjgs/UzgecY7D9tI/AAAAAAAASUo/7jMmQIJeswE/s200/input-type-file-css-js.jpg', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42jstiming\42,k\75\42tick\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[k](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[g].srt\75h-c)}if(a){var e\75b[g].load;0\74c\46\46h\76\75c\46\46(e[k](\42_wtsrt\42,void 0,c),e[k](\42wtsrt_\42,\42_wtsrt\42,h),e[k](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b[f].csi().startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[k](\42_tbnd\42,void 0,b.external.startE),e[k](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[g].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[g].load[k](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[g].load[k](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'ieCssRetrofitLinks': '\74!--[if IE]\76\74script type\75\42text/javascript\42 src\75\42https://www.blogger.com/static/v1/jsbin/2694697636-ieretrofit.js\42\76\74/script\76\n\74![endif]--\076', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n', 'tf': ''}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
  736. _WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'crosscol', null, document.getElementById('PageList1'), {'title': 'Страницы', 'links': [{'href': 'http://www.chuvyr.ru/', 'title': 'Блог', 'isCurrentPage': false}, {'href': 'https://plus.google.com/100680009502230534584/about', 'title': 'О блоге', 'isCurrentPage': false}, {'href': 'https://plus.google.com/117210080099867317492/about', 'title': 'Об авторе', 'isCurrentPage': false}, {'href': 'http://www.chuvyr.ru/p/archive.html', 'title': 'Архив', 'isCurrentPage': false, 'id': '6184254348740086323'}, {'href': 'http://www.chuvyr.ru/p/rss.html', 'title': 'RSS', 'isCurrentPage': false, 'id': '215634332785868350'}, {'href': 'http://www.chuvyr.ru/p/dictionary.html', 'title': 'Словарь', 'isCurrentPage': false, 'id': '1306176784634490468'}, {'href': 'http://www.chuvyr.ru/p/blog-page.html', 'title': 'Трёхзначные HEX цвета', 'isCurrentPage': false, 'id': '6698859614584313702'}, {'href': 'http://www.chuvyr.ru/p/start.html', 'title': 'С чего начать?', 'isCurrentPage': false, 'id': '2773415961359286154'}], 'mobile': false}, 'displayModeFull'));
  737. _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar-right-1', null, document.getElementById('HTML5'), {}, 'displayModeFull'));
  738. _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-right-1', null, document.getElementById('HTML1'), {}, 'displayModeFull'));
  739. _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar-right-1', null, document.getElementById('HTML3'), {}, 'displayModeFull'));
  740. _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar-right-1', null, document.getElementById('HTML6'), {}, 'displayModeFull'));
  741. _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', null, document.getElementById('BlogArchive1'), {'languageDirection': 'ltr'}, 'displayModeFull'));
  742. _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'footer-1', null, document.getElementById('HTML4'), {}, 'displayModeFull'));
  743. _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', null, document.getElementById('Header1'), {}, 'displayModeFull'));
  744. _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/4092315162-lbx__ru.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/3904812905-lightbox_bundle.css'}, 'displayModeFull'));
  745. </script>
  746. </body>
  747. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!