オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like databaseyoshikawa_t

jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法をφ(..) jQueryで、ウィンドウ幅と高さを取得するには、 var w = $(window).width(); var h = $(window).height(); こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。 var w = window.innerWidth ? window.

JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider

jQueryの素敵なナビゲーションの紹介です。 最近、ちょくちょく僕も触ってるんですが、こういったデモ有りの実装例は貴重ですね。 ソース見るだけでかなり、参考になります。 1.Circular Motion Effect

今回はシンプルに3枚のjpg画像をフェードインフェードアウトで切替表示し、 setIntervalを使用して切替えを繰り返してみます。 1．CSSの記述例 以下は調整してみて下さい。 <style type="text/css"> <!-- .clImg{ position:relative; width:200px; margin:0 auto; } .clImg img { position:absolute; left:0; top:0; } --> </style>

ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="

株式会社フレームス(以下当社)は、お客様の氏名・住所・電話番号・メールアドレスなど 個人を識別できる情報(以下個人情報)を、お客様が同意する場合に限り収集いたします。 個人情報の収集 当社では、利用目的を明確にし、お客様の同意を得た上で以下個人情報を収集いたします。 【収集する個人情報】 ・名前・会社名・住所・電話番号・電子メールアドレス ・当社および当社サービスに関するお客様のご意見およびご要望・お問い合わせ 個人情報の利用 お客様より収集した個人情報は、次に掲げる目的でのみ利用いたします。 ・当社および当社サービスに対するお客様からのご質問やご意見に対する回答 ・本人から個別に同意を頂いた目的に利用するため 第三者への情報の開示 当社、以下の場合を除き、本人の同意なく第三者にその個人情報を開示いたしません。 ・法令、条例その他関係当局の要請を受けた場合 ・その他法令上第三者への開示が許

動作が止まっているときはRERUNしてください、それでもうまくいかない場合はこのリンク先で見れます シンプルながら、SVGを活かしたカッコいいアニメーションです サイトのロゴにこのアニメーションを加えて面白そうです あとはダウンロードリンクにつけてもボタン的になって良いかなと思います – CODE – HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> </svg> <div class="text">HOVER</div> </div> CSS html, body { background: #333; height: 100%; overflow: hi

Wordpressがメジャーアップデートされて、ビジュアルエディターが大幅に変更になりました、それについて思うことを少し さくらインターネット Snapupの機能を使って手軽にファイルの自動バックアップ環境を構築する

Depending on the type of website or app you’re building, there will always be some key areas to which you have to give more attention than others. One area that is critical to all types of websites, and requires more thought than others, is navigation. Menu items generally lead to a site’s most important pages or areas and help visitors navigate easier. And, as you have to consider multiple screen

縦長のwebデザインをがむしゃらに集めています。

Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ