タグ

javascriptとjQueryに関するginga0118のブックマーク (3)

  • ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ

    2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか?(え?ない?w)そんな時はファイル不要!環境設定不要なオンラインテストサイトを使っちゃいましょう!動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します!ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです! ↑私が10年以上利用している会計ソフト! CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK!ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単! HTML

    ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
  • JavaScriptを使って、選択された要素の表示/非表示を切り替える|クリエイターブログ|東京都新宿区のWeb制作会社 - ウェブラボ

    今月からウェブラボ技術メモが復活します! 新しい技術や、有用な情報をお伝えしていきたいと思いますので、宜しくお願いいたします。 さて、今回紹介するのは、JavaScriptを使ってラジオボタンのチェックの有無でコンテンツの表示非表示を切り替える、というものです。 実際の動きを見た方がわかりやすいと思うので、まずはデモをご覧ください。 DEMOはこちら チェックを切り替えるごとに表示されるコンテンツも切り替わっているのがわかると思います。 フォームの項目は多くなってしまうと、ユーザーはストレスを感じてしまいます。 そんな時、チェックした項目によってその後の内容を変化させれば、よりユーザビリティに優れたフォームになります。 例えば、「初めての方」と「2回目以降の利用」で入力項目が違う場合は「初めての方」にチェックを入れると名前や住所などの入力欄を表示させ、「2回目以降の利用」にチェックを入れた

  • CSS and jQuery Image Comparison Slider | CodyHouse

    Image Comparison Slider A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. When you create a product page, there are some effective UX solutions that can be used to make the user 'feel' the product. A comparison image slider is one of those.  If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display res

    CSS and jQuery Image Comparison Slider | CodyHouse
  • 1