<ul> <li>Ruby</li> <li>JavaScript</li> <li>PHP</li> </ul> $('li').each(function(index, element){ console.log(index + ':' + $(element).text()); })
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> css .container { position: relative; overflow: auto; } $('.container').perfectScrollbar(); 見た目のスタイルの変更 見た目はvariable.scssを編集することで簡単にカスタマイズできます。 variables.scss $ps-border-radius: 6px !default; // スクロールバーの丸み $ps-rail-default-opacity: 0 !default; // コンテナにマウスが入ってない時の透過度 $ps-rail-container-hover-opacity: 0.6 !defaul
一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。 Perfect Scrollbarについて Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html ダウンロードはこちら perfect-scrollbar 実装方法 準備するもの jQuery Perfec
プログラミングの助け、質問への回答 / Jquery /完璧なスクロールバープラグインを使って同じページに複数のスクロールバーを追加する - jquery、css、jquery-plugins、スクロールバー 完璧なスクロールバープラグインを使用して同じページに複数のスクロールバーを追加する - jquery、css、jquery-plugins、scrollbar 私はパーフェクトスクロールバーのjsプラグインを使用しました。スクロールバーはうまく動きます。しかし、私が別のコンテンツのためにこのスクロールバーをもう一度追加すると(同じページ)、それは2番目に動作しません div。このプラグインを使用して同じページに複数のスクロールバーを追加する方法 JS jQuery(document).ready(function ($) { "use strict"; $("#Default").p
スクロールバーをカスタマイズできるプラグイン「perfect-scrollbar.js」を使ってみます。 ※今回はバージョン1.2.0を使っていますが、バージョン1.0未満は使い方が違うようです。 詳しくは公式のドキュメントでご確認ください。 使い方 GitHubからダウンロードします。 ダウンロード後、必要なファイルを読み込みます。 cssはcssフォルダ、jsはdistフォルダに格納されているので、それぞれコピーして使ってください。 <link rel="stylesheet" href="perfect-scrollbar.css" /> <script src="perfect-scrollbar.js"></script> #sampleのスクロールバーを変更するようにしてみます。 HTML <div id="sample"> <p>君も事実いったいこの前後っ放しというのの ..
clear とか clearAll とか remove とか delete とか配列を空にするシンプルなメソッドがあるのかと思ったけどなかった。 もう少し高機能な splice メソッドを使うのが良さそう。 Array.prototype.splice() - JavaScript | MDN splice() メソッドは、 (in place で) 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 サンプルコード。 let array = ['Tanis'] // 配列要素を指定して初期化 array.push('Sturm') // 要素を1つ追加 array.push('Flint', 'Tasslehoff') // 要素を複数追加 Array.prototype.push.apply(array, ['Caramon', 'Rai
PDFを画像化するかーという時にお世話になったこのサイト http://ameblo.jp/linking/entry-10997312536.html PDFが画像1枚ならこのサイトの情報だけで2014年現在も問題ないんですが、 ここにきて初めて複数ページのPDFの画像変換をやることになりまして このサイトの通りにコーディングしたところ、Exception Errorになりました。 set ImageIndex method is deprecated and its use should be avoided なんじゃろなーと思いながら上記エラーメッセージで検索するもよくわからない。 そしてようやくマニュアルに返る事を思いつきます。 このメソッドは非推奨です。 このメソッドは非推奨です。 このメソッドは非推奨です。 ほう。じゃあ代わりに紹介されているsetIteratorIndexでも
下記コマンドを実行 # convert -version 実行結果 Version: ImageMagick 6.7.2-7 2016-06-16 Q16 http://www.imagemagick.org Copyright: Copyright (C) 1999-2011 ImageMagick Studio LLC Features: OpenMP 関連記事 CentOSのバージョン確認 下記コマンドを実行 実行結果... vagrantでcronログを確認出来るようにする cronのログを確認しようとvar/log/を見に行ったがcronがなかったので見えるように設定するメモ。 c […]... Vagrant環境でLaravel5.5インストールからプロジェクトの作成まで 各種、必要なものをインストールする。インストール済みの場合はスキップ ・Virtualboxをインストール
Introduction The Carbon class is inherited from the PHP DateTime class. <?php namespace Carbon; class Carbon extends \DateTime { // code here } You can see from the code snippet above that the Carbon class is declared in the Carbon namespace. You need to import the namespace to use Carbon without having to provide its fully qualified name each time. use Carbon\Carbon; Examples in this documentatio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く