Tag Archives : JavaScript

jQuery 3 でfadeInとfadeOutが使えない対策CSS - 2018/08/15(Wed)
ドラクエ攻略FAQ（https://www.dqfaq.com/）のデザインをBootstrapを使って更新しようとしています。せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascript...
jQueryのスムーズスクロールが動かないときの解決方法 - 2017/06/29(Thu)
javascript と jQuery をつかってスムーズスクロールをウェブサイトに導入することは割とよくあると思います。ドラクエ11攻略プロジェクトでも導入ました。しかし、なぜか全く動かない。うんともすんとも言わない。「なぜか」というとjavascriptのコードが間違っているんでしょうけど、なぜかがわからない状態でした。jQueryのコードは、（おそらく）よく見かける以下です。jQuery(function() { // #で始まるアンカーをクリックし...
URLの一部をリアルタイムに書き換える - 2016/02/12(Fri)
URLの一部をリアルタイムに書き換えたい、ということがあって、調べてみました。WEBページ上での操作をローカルストレージ（localStorage：https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage）に保存させていたのですが、それだと端末が変わるとその内容を引き継げない、という使い勝手でイマイチな部分がありました。このご時世、流石にスマホでやった内容がパソコンでも引き継げる、というのは、まあ、普通で...
検索ボックス（input）の全角スペースを半角スペースに置換する - 2014/12/16(Tue)
Wordpressなどの検索ボックス（検索フォーム）において、半角スペースは"AND"検索ですが、全角スペースを入れるとひとつの単語とみなされて検索されることが有ります。例えば、「javascript input 空白」なら「javascript」「input」「空白」のAND検索ですが、「javascript　input　空白」だと「javascript　input　空白」という文字列の検索になってしまい、入力者が意図とはことなる結果が返ってきます。これはあまりよろしくな...
ウェブサイト作成にあたりよく使うサイトのまとめ - 2013/06/29(Sat)
LZ77 JavaScript CompressorJavaScriptの圧縮。結果として難読化される。/packer/JavaScriptの圧縮。コメント、改行、タブ・スペースの削除だけならこちら。HeartRails Capture | サムネイル画像／PDF ファイル作成サービス縦・横のサイズを1px単位で調整可能な、ウェブサイトのスクリーンショット自動作成サイト。YUI 3Yahoo!'s next-generation JavaScript and CSS library.「CSS Reset」と「CSS Fonts」は大変便利。Google Libr...
ソースコードをハイライトする google-code-prettify の設置方法 - 2013/06/22(Sat)
この「高密度商業地域」のように、HTMLやCSS、JavaScriptのコードをブログに掲載する際、単純に<pre>タグで囲うだけでも良いのですが、ソースコードの可読性を上げたり見た目をカッコよくしたいと思うことが稀によくあると思います。世の中には同じようなことを思う方がたくさんいるわけで、いわゆるテキストエディタのようなかたちでソースコードをハイライトし、可読性を高めてくれるツールが存在します。その手のツールで...
textContent と innerText の挙動の違い - 2012/07/16(Mon)
JavaScriptにおいて、ある特定エレメントのテキスト部分を取り出すプロパティとして、「textContent」「innerText」があります。前者はW3Cで規定されている標準のプロパティ、後者はInternet Explorer独自の拡張機能です。これらが全く同じ動作をするのか、といえばそうではなく、その挙動でハマったのでメモ。いやー、XMLの仕様まで読むことになるとは思っていませんでした……。実現したかったことは、ブログテンプレート作成の際...
packerで圧縮されたJavaScriptを元に戻す - 2012/02/23(Thu)
容量削減等々の目的で/packer/（http://dean.edwards.name/packer/）を利用しJavaScriptを圧縮することはよくあると思います。しかし同じく、圧縮した後のJavaScriptファイルは残っているものの、圧縮前のものが無い、ということもよくあると思います（たぶん）。そんなとき、packerで圧縮したJavaScriptファイルを圧縮前のものに戻すサービスとして、以下があります。圧縮した後のJavaScriptをコピペして「decode」ボタンひとつで...
jQueryで擬似フレーム - 2011/02/25(Fri)
かなり前に作成していた擬似フレームですが、この度、大いにやる気が出たので作成しなおしてみることにします。前回は特にJavaScriptのライブラリを使わず実装しましたが、今回はjQueryを使用してみたいと思います。以下の３点を実現することを目標とした擬似フレームを作成しますjQueryを使うことでコードを簡単にする。ヘッダー、フッター、メニューが指定可能。JavaScriptのみで制御しているため、実装が簡単（別途のCSSファイ...
jQueryで設定したイベントをすべて無効化する - 2010/12/12(Sun)
jQueryでclickなどのイベントを設定した際、CSSを動的に切り替えたときにはそのイベントを無効化したいケースがあると思います。例えば、a.cssではタブ切り替え前提、b.cssではタブ切り替え無し、のスタイルのとき、タブのclickイベントに「display: none」する関数を登録している場合、b.cssになると表示が崩れる場合などが考えられます。そういうときは .unbind() APIを使います。登録しているイベントを全て、全部の要素に対し...
iモードブラウザがJavaScript、Cookie、リファラに対応＋α - 2009/05/20(Wed)
NTTドコモが2009年夏モデルに18機種を発表しました。例によって、ソニーエリクソン携帯（SOシリーズ）は発表されなかったので、SO902から買い換えることはなさそうですが、ホームページを作る側からすると重大な変更が発表されました。iモードブラウザがJavaScript、Cookie、リファラに対応するということです（iモードブラウザの機能拡充について）。また、ページ内のテキストがコピーできるようにもなるとのこと。...
jQueryでonMouseoverとonMouseoutを同時に設定する（２） - 2008/08/28(Thu)
jQueryメモ。ちょっとはまってしまったので、備忘録。以下のような動作をjQueryで実装しようとしました。（「＞」「＜」は実際はbackground-image画像）【HTML】<div id="togglebar">＞<br>＞</div><div id="tdmenu">メニュー</div>【表示（イメージ）】「＞」をクリックするとメニューが非表示、表示が切り替わった後「＜」をクリックするとメニューが表示されるようにする。＞│メニュー│＞│メニュ...
jQueryでonMouseoverとonMouseoutを同時に設定する - 2008/06/28(Sat)
jQueyメモ（備忘録）。マウスをある画像の上に乗せたら画像が変わる（大きくなる、色が変わる etc.）、マウスを外すと元に戻る、という処理がよくあります。通常は、こんな風に書くはずです。（id#mntoggle の background-imageを変更する）<div id='mntoggle' onMouseover='document.getElementById("mntoggle").style.backgroundImage = "url(画像１.jpeg)";'onMouseout='document.getElementById("mntoggle").style.backgro...
雪を降らせるJavascript - 2007/12/09(Sun)
雪を降らせるJavaScriptはいろいろあるかと思いますが、以下２つのうちいずれかが使いやすいのではないかと思います。・画像を使う→DHTML Snowstorm!・画像を使わない→Snow Fall_1 - without images...
IE７ ツールバーをJavaScriptで消せるか - 2007/02/06(Tue)
JavaScriptを使いツールーバー（戻るボタンや、URLが表示されている部分）を非表示にすることが可能です。<a href="#" onClick="Javascript:window.open('index.html','title','toolbar=0,location=0,menubar=0,directories=0');return false;">ここをクリック</a>ここをクリックのようにアンカーに設定すると、このアンカーをクリックしたリンク先ウインドウのツールバーや、アドレスバー、メニューバーが表示されな...
JavaScriptファイルの中からJavaScriptを呼び出す（import） - 2007/01/24(Wed)
JavaScriptファイルの中からJavaScriptを呼び出す、つまり、JavaScriptから別のjsファイルを呼び出したいということです。例えば、Javaならimport java.util.Vector;またはjspならば、pageディレクティブで<%@ page import="java.util.Vector" %>のように外部ファイル（クラス）をインポートできます。当然、インポートした後はその先にある関数を呼び出すこともできます。必要な関数だけを読み込むことで余計な処理がなくな...
リンクを無効にするJavaScript - 2007/01/01(Mon)
謹賀新年。年末年始こそどこにも出かけず、家族＋αとまったり過ごすのがモットーゆえ、こんな時間は暇だったりします。ということで、タイトルの通りリンク(<a href="～"></a>を無効にするJavaScriptについて。...
テンプレート 『spring_2col_cssframe』 - 2006/12/06(Wed)
擬似フレーム、CSSフレームと言われるものをテンプレート化…できるかどうかわかりませんが、テンプレート化してみます。現状はここをクリック。追記：実際に反映させて、テストしています。読みづらい部分があるかと思いますが、ご勘弁を。(12/17追記)JavaScript オフでもそれなりに見栄えのする形になりました。ほぼ完成。そこそこクライアント側で処理しているので、動きがちょっと重いかも。...
擬似フレーム２（印刷・メニュー切り替え対応） - 2006/11/26(Sun)
XFramesの実装が待ちきれなかったため、擬似フレームとか疑似フレームとか言われているものを完成させました。（注：現在はjQueryを使用したものに変更しました）以下の特徴があります。フレーム弱点を克服し、特徴はそのまま活かしているかたちです。・フレーム内の個別のページの URL もブラウザに表示される。というよりも、「フレーム内の個別ページ」という概念がない。・印刷が可能。・他のフレームに無関係にスクロール使用...
URLの?以降を取得するJavaScript - 2006/11/25(Sat)
HTMLのform要素などを使い、フォームの送信時に GET メソッドで要求を出した場合、URLの末尾に "?nantoka_form=cream" のような値が追加されます。（例えば、http://www.example.com/index.html?nantoka_form=cream）この ? 以降をJavaScriptで取得したい場合はwindow.location.searchで取得できます。上記URLで取得した場合は「?nantoka_form=cream」となります。このような取得方法ではなく、nantoka_formの値「cream」を取得す...