『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
スマホ用サイトの読み込み速度を改善し、1秒以内の表示を目指そう
携帯端末向けページのレンダリングを高速化するためのガイドラインができたことを紹介する内容です。ガイドラインは英語ですがなかなか勉強になります。 日本語版は準備中だそうです。 最初に見える部分は1秒以内に表示する ここでは1秒以内にページ（スクロールなしで表示される部分）を見ることができる状態にすることが重要だといわれています。1秒を超えると我慢できなくなり離脱する人が増えるようです。1秒で諦めるのもちょっと短気な気もしますが、読込みは早いに越したことはないですね。 まず、3G環境では一般的にDNSルックアップ、TCP接続、HTTPリクエストにそれぞれ0.2秒かかるそうです。この辺のことはあまり詳しくないですが、とにかくこれらにかかる計0.6秒はこちらでどうしようもありません。 ですので1秒で表示しようと思うと残り0.4秒しかありません。ということで、サーバーのレスポンスとユーザー側のレンダ
検索窓をクリックした時に、既存で入っている文字を消す技 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
私のブログにも取り入れているのですが、よく検索窓に文字が入っていて、いざ検索しようとクリックすると、入っていた文字が消えて文字が打ち込めるというものです。まぁ小技といったところでしょうか。でも、こうしたちょっとした気遣いがプロっぽくみせる方法の一つかもしれません。 検索窓をクリックした時に、既存で入っている文字を消す技 onfocus と onblurを適用。 onfocus とはマウスがのっている時にある処理を行うイベントハンドラ。onblur はその onfocus が外れた時に処理行うイベントハンドラです。 実際のソースはこんな感じ <input type="text" onfocus="if (this.value == '検索窓') this.value = '';" onblur="if (this.value == '') this.value = '検索窓';" value
Session variables without cookies
Security update May 17, 2008 Sanitizer added to prevent eval() of malicious code. The flag sessvars.$.prefs.includeFunctions now defaults to false. I never liked the JavaScript implementation of cookies. The storage space is limited (4 x 20 Kb per domain), the only data format that can be used is a string and the syntax for setting and getting cookies is unnecessarily complicated. On top of that t
PHP+Smarty+jQueryによるカレンダー作成 | めだか＠たいぷ
色んなライブラリあるんですが、根本を知らないとカスタマイズできないというわけで、作ってみました。 元がPHP人間なのでですね〜、全部Javascriptでもできるんでしょうが、そこはカレンダーにデータをのせるのが目的だったのでPHP使ってます。 ちょっと自分で作って、作れることに感動してしまいました（笑） なので、メモっときます。 この部分は iframe 対応のブラウザで見てください。 ■サンプル 参考サイト http://study.rakuto.net/php/template/Smarty/ 【index.html】 index.htmlには読み込み部分を書くだけです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
シンプルで高機能なカレンダー機能をjQueryで作れる『jCal – Multiday Calendar Datepicker JQuery Plugin』 - DLARE.ME
overset – Multiday Calendar Datepicker JQuery Plugin 現在携わっている案件でカレンダーを実装することになったのでいろいろ調べてみました。 やりたいこと 日付をプルダウンとかカッコ悪いやりかたはしたくなかったので、カレンダーを入れたかった。 できればjQueryを使っていてほしい。 PHPとの連動も簡単に実装できるやつがいい。 できればデザインのカスタマイズしやすいようにデフォルトのデザインがシンプルなやつ ってな感じでいろいろ探してたらいいの発見しました、jCal。まさにこういうの探してました。 デモページ View Demo ダウンロードはリンクが切れてたのでjQuery Pluginのサイトよりダウンロード Plugins | jQuery Plugins(現在V0.3.5) ソース ソースを読み解いていくと、読み込むときにオプション
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
見やすい？見にくい？30の横スクロールWebサイト | Webクリエイターボックス
2017年6月29日 Webデザイン 誰もが目にする使い慣れたWebサイトといえば、やはり縦スクロールのレイアウト。そこにあえて横スクロールでデザインされているWebサイトを紹介します。JavaScriptでマウスウィールを使用できるようにしたり、いろんな効果を出しているサイトもあり、新しいデザインの種が見つけられるかも。 ↑私が10年以上利用している会計ソフト！ 横スクロールWebサイトギャラリー 以前紹介した「うっとりしてしまうデザインのシングルページWebサイト30」でもいくつか横スクロールのデザインを紹介しました。多くの場合JavaScriptで横に移動するデザインですね。私はMacbook Proのトラックパッドを使っているので横スクロールも楽チンですが、horizontinyscrollingなどのJavaScriptで横スクロールでもマウスウィールが使えるようにすると全てのユ
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
とほほのJavaScriptリファレンス
とほほのJavaScriptリファレンス [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう JavaScript の書き方 <script>～</script>
JavaScript/DOM » formオブジェクト » Radio／Checkbox | PHP & JavaScript Room
チェックボックスで選択したグループに入力制限をかける checkboxの例 サンプルを見る<script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Posts by Year | kvz.io
IDEA * IDEA
http://www.designwalker.com/2009/03/form-design-2.html