カテゴリー:「JavaScript」

サイト内のリンクで別ドメインのものは全て別タブで開かせる

JavaScript
サイト内のリンクで別ドメインのものは全て別タブで開かせる

ブログを書いていると別サイトにリンクしたい時ってないですか?
別サイトだから、自分のサイトからアクセス後に離脱して欲しくないので、別タブで開かせてページを閉じたら戻ってきてほしいものですよね?

ただ、毎回「target="_blank"」の設定をするのはめんどくさい!
僕もそう思い、簡単なjsを作ってみました。
一応、jQuery必須です。

(さらに…)

inputのradioをcheckboxみたいにcheckedを外す方法

JavaScript
inputのradioをcheckboxみたいにcheckedを外す方法

ラジオボタンをフォームで使いたいけど、間違ってクリックされた時は外させることがデフォルトの仕様ではできません。
(間違う可能性がある時点でフォームの設計が悪いとも言われかねないですが。。)

しかしそういった要望があるのも事実。
javascriptを使うことで対応が可能です。

(さらに…)

jQueryプラグインの「slick」を自動再生しつつ最後で停止させる方法

JavaScript
jQueryプラグインの「slick」を自動再生しつつ最後で停止させる方法

私はよくスライダーを実装する際にjQueryプラグインである「slick」をよく使うのですが、今回はそのslickを使ってスライドショー(フェイドショー?)などを作った際に一番最後まで行ったら自動再生を止めたいといった依頼を受けました。

そんなに難しくないだろ〜なと思い引き受けたら、これがビミョーに手こずる内容だったので記録として残しておきたいと思います。

(さらに…)

IEでSVGタグを使った時にheight:autoが効かない

JavaScript
IEでSVGタグを使った時にheight:autoが効かない

一昔前、iPadやiPhoneなどといったRetinaディスプレイが世に出た頃、Web制作の世界では通常サイズと2倍サイズの2種類の画像を書き出し、javascriptなどを使って表示を出し分けたりしていかに画像やアイコンを綺麗に見せるかといった技術が出回っていました。

現在ではブラウザやスマートフォーンの進化のおかげで、イラストレータで作ったSVG(オブジェクト)が画像と同じように使えるようになってきて、同じ画像を2倍で書き出したりといった手間が減ってきています。

私も案件によってはsvgを多用したり、svgタグをjavascriptで動かしたりとsvgの恩恵を受けていたのですが、、、

コーダーが嫌ってやまないInternet Explorer。
こやつでsvgタグを使うとheightが横幅に対して自動で設定されず、表示が崩れるといった問題に遭遇しました。

今回はjavascriptで解決できたので方法をご紹介。

(さらに…)

MacのSafariでiframe内のfixedが表示されない

JavaScriptMac
MacのSafariでiframe内のfixedが表示されない

サイトの作りによってはiframeを使うことは今でもあると思います。

iframeの使用用途としては、
・自分で作ったページをiframeで読み込む
・外部サイトの動画などを読み込む
といった使い方があると思います。

そんな中、今回は自分で作ったページをiframeで読み込んだ際に、
MacのSafariの時に要素が透明化され表示されないといったバグに遭遇したので、
回避方法をご紹介。

(さらに…)

スマホでページ内リンクが効かない

JavaScript
スマホでページ内リンクが効かない

レスポンシブやスマートフォン専用ページでページ内リンクを実装した時に、稀にページ内リンクが効かなくなる時があります。

理想はクリックしたらスムーススクロール(スムーズスクロール)して欲しいのですが、なぜか動作しない。

そんな時は普段使いしてるスムーススクロールのjsを紹介する内容に変更して見てください。

(さらに…)

【MicroSoft Edge対応】【jQuery不要】のcss-browser-selector.js

JavaScript
【MicroSoft Edge対応】【jQuery不要】のcss-browser-selector.js

Webの制作を行っていく中で切り離せないもんだはいくつもありますが、その中でも
「OS」「ブラウザ」による表示の差。
今まではWeb上で公開されているJavaScriptなどを使い、HTMLタグにOSやブラウザのクラスを追加して、
そこからCSSなどで微調整を行いたいが、MicroSoft EdgeをサポートしてるJavaScriptがない!

なので今回私の方で機能を限定して「css-browser-selector.js」を作ってみました。

(さらに…)