ページ内リンクでURLを変えたくない時の対処法｜assassin@Web屋
ロングページのユーザビリティを手軽に向上してくれるページ内リンク（目次やTOPへ戻るetc.）は便利なものですが、常に気なっているというか、気持ち悪いなーと思っていた点がありました。それは… #リンクをクリックした直後 、URLが変わってしまうこと です。なんだそんなこと？…と思われた方はスルーして下さい。 とりあえず、今回はページ内リンクをスムーズスクロールしつつ、URLに「＃」が付かないスクリプトを見付けたので備忘録としてメモ。 この事象に対応するスクリプトは探せば色んなものがありますし、個人的にも色々試してみましたが、どのようなページであっても概ね問題なく機能するのが以下の方法です。 準備jQueryを使用するため、ページ内に以下コードを追加。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jq
iframeの高さを自動調整する - シンプルシンプルデザイン JavaScript
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル：iframeの高さを自動調整するデモ ソースコード：GitHub HTML + JavaScript <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <iframe src="a.html" frameborder="0" width="100%" height="150"></iframe> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script> $('iframe') .on('load', function(){ try { $(t
[JavaScript] onloadイベントを複数記述する方法 - nLabo
このサイト上で javaScript を色々と試していて window.onload = function () { //処理 } なんて記述が複数あると、後から読み込まれたものしか処理されません。 当たり前なんですが、見落として数時間悩んでしました；； 色んなフレームワークを試していると、その中で onload 記述があったりして・・・ 盲点でした；； 対処法ですが・・・ 全てが自分で記述するコードなら、対処法はどうにでもなるのですが フレームワークとの衝突回避するためには、window.onload = ... を使わずに 『prototype.js の Event.observe をもちいて、onload イベントを追加する』方法が良さそうです prototype.jsのEvent.observeをもちいて、onloadイベントを追加する方法 Event.observe(追加する要素
documentation/get-started.md at master · aurelia/documentation · GitHub
はじめに Aureliaにようこそ! このチュートリアルではAureliaを使って単純なアプリケーションを作成し、それを通じてAureliaの中心となる概念を説明します。読者はJavaScript、HTML、そしてCSSに慣れていることを想定しています。さっと概要を把握するために、"HTMLページを準備する" セクションを先にみることをおすすめします。 Aureliaを使うことがいかに直感的かわかるでしょう。次に、実際にものを作る準備ができたなら、戻って "環境を設定する"、"プロジェクト構成とビルドの準備" を読むと良いでしょう。このチュートリアルの完全な結果を見るためには、我々のナビゲーションスケルトンプロジェクトを見てください。 注: このガイドの翻訳を探していますか? 我々のドキュメントリポジトリを見てください。 環境を設定する まずはモダンなJavaScriptアプリケーションを
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
Slicebox – A fresh 3D image slider with graceful fallback | Codrops
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties. With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create t
【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
まじで使えるJavascriptライブラリ75選 | CREAMU
Javascriptで優れたインターフェースを実装したい。 そんなあなたにおすすめなのが、『75 (Really) Useful JavaScript Techniques』。まじで使えるJavascriptライブラリ75選だ。 以下にいくつかご紹介。 » Lightview スムーズに画像を拡大してくれる » FancyUpload アップロード中のプログレスを表示してくれる » SWFObject Javascriptを使ったFlashプレーヤ » JavaScript tabifier 簡単にJavascriptで切り替えられるタブインターフェースが作れる » FancyZoom 1.1 簡単なエンベッドでスムーズに画像を拡大してくれる » SimpleModal オーバーレイするクールなモーダルダイアログ » A Mac OS X-style Dock In JavaScript
[JS]jQueryのプラグイン33+1選 -2010年9・10月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Best AI website design software. Generate website with AI!