「うざい、絶滅して欲しい、不快感を感じる」続きを読むボタンをCSSとjQueryで作る方法
表示ページに合わせて動的に「戻る」ボタンのリンク先URLを変更する方法【JavaScript / jQuery】
当ブログではヘッダーバーを固定しており、左上のロゴをクリックするとトップページに戻るようにしています。レスポンシブデザインによるスマートフォン対応を行いました。PCブラウザでのデザインが、そのままスマホでのデザインに反映されるようになったことで、スマホにおいては状況により、このロゴは「戻る」ボタンとしてクリックされるようになるんじゃないかと思い、記事のページが表示された時のみ、前のページに戻るような機能を実装することにしました。特にindexの2ページ目以降から記事ページに飛んだ時とかに威力を発揮するのではと思っています。
history.back();問題を解決してみる at softelメモ
history.back()はブラウザの履歴を利用して1つ前のページに戻る機能です。これによりどのページから来た訪問者でも個々のユーザーに合わせたページへ戻ることができます。 この機能、多くのところでは以下のように書かれており、ブラウザからアドレスを入力して開いた場合は機能しません。 <a href="javascript:history.back();">一つ前のページへ戻る</a> 戻るリンクはそのサイトのトップなり1つ上のカテゴリページへ戻ることを意識してリンクをクリックしますので、動かなかったり、検索エンジンへ戻ったりするとユーザーはそのままサイトから離脱している可能性が高いです。 そこで対策を考えてみます。直接来た場合はトップページへ返すことを考えます。 まず、history.lengthで考えてみます。これは戻す、進むで使う履歴がいくつあるか取ることができます。ですので、直接開
Javascriptファイルを非同期に読み込む$script.jsを使ってみた
Javascriptの読み込みが遅いのは、ユーザー体験のリッチなウェブページを作るうえで悩むポイントです。特に、Facebook・Twitter・Google+の各スクリプトの読み込みが遅い気がしていました。 Twitter ツイートボタンの設置タグ <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/wi
JavaScriptでAS風のEnterFrameの実装を考えてみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryのアニメーション機能はあまりにも便利ですが、 刻々と位置情報などを更新していくタイプの処理には向いていません。 こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、 似たような実装をJavaScriptで出来ないだろうか、というのが今回の趣旨です。 生のsetInterval/setTimeoutでいいんじゃない？ ごもっとも。そんなに複雑にはなりませんしね。 ただ、もうちょっと直感的に扱いたかったり、管理し易いクラスが欲しかった。 さらに強いて言えば、「書いてみたかった」のです。 以下に、2通りのパターンをライブラリにしてみました。 さりげなくjsdo.itデビューも果たしてみましたよ！ ※いずれもjQueryを使用 Timeline.js jQueryのbind/triggerを使っ
手軽にテキストをシャッフル演出できるjQueryプラグイン「jQuery Shuffle Effect」 | A40
私のポートフォリオサイト「KATOSHUN.com」のオープニングで、テキストのシャッフル演出用に作ったjQueryプラグインを公開します。 ３年くらい前にベースとなるJavaScriptを作ったのですが、KATOSHUN.comのリニューアルにあたって、jQueryプラグインに書き換えたものです。 実は作ってから他にも似たようなプラグインがいくつかあることを知りました…orz でもシンプルでわかりやすいから使ってくれる人もいるだろうと思い込むことにして、公開に踏み切りたいと思います。 デモ 簡単にテキストにこんな効果を加えることができます。（「デモ」のボタンを押してみてください） デモ 使い方 まずは「jQuery.shuffleeffect.js」をダウンロードし、HTMLに読み込ませます。 <script type="text/javascript" src="jquery.js">
Creatorish is for sale at Squadhelp.com!
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする - orangain flavor
はじめに DD_belatedPNGを利用すると、IE6でPNGファイルを透過させることが出来ます。 DD_belatedPNGはITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」で解説されているように、簡単にそして高速に透過PNGを表示できるという特徴があります。 しかし、ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されていますが、次のような問題点があります。 ここで、img要素に使用する際のいくつかの注意点を。 ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。 しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。 たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場
フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen
結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この スクリプトにはjQueryプラグインとprototype の2つが用意されています。 optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。 通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。 デモ見たほうが早いですね。※追記：日本語だとFirefoxのみ動かないみたい。英
Bridge Word
This shop will be powered by Are you the store owner? Log in here
社内講習わくわくjQuery編1 - jQueryを使ってみよう
今回の目標 読める＋書ける＝学べる 2時間ちょっとでいきなり書けるようになる訳はありませんが，書いてみないと覚えられないので，2時間かけて触ってみて独学できるようにします． 最初に，1+1=2の原理を覚える必要はないので，2=1+1でも 2=2＊1 でも 2=1/2＊4 でもいいので，やりたいことをやってみるのが一番です． やること jQueryセレクタをつかってみよう 要素をブン回してみよう スライドショーの動きを追ってみよう 開閉メニューの動きを追ってみよう やらないこと プログラムの基本（習うより慣れる） JavaScriptの構文（書きながら覚える） jQueryPluginの使い方（オプションをいじる以上のことをやろうと思うと難しい） thisなんてしりません $.eachなんてしりません 変数とかIFなんてわかりません jQueryを使えるようにする Downloading j
画像、動画やWebページをクリックで表示するLightbox系javascript「Shadowbox」
ホームページで、画像、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字を クリックして、そのページ内で動画などを開く方法 [Shadowbox] Lightbox for Media 更に、画像も動画も一緒に、スライドショーをしてくれる[Shadowbox] Shadowbox は、画像、動画など幅広い多くのメディアを拡大ポップアップ表示してくれる。 また、様々なJSフレームワーク(アダプター）に対応しているので、いずれかを好みによりダウンロードして、使用します。 Base(standoalone)（非JSフレームワークタイプ） jQuery Prototype MooTools (requires 1.2 Core) Dojo Toolkit Yahoo! User Interface Library Ext (requires ext-core.js) jQue
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie : 4GALAXYのメモ
19 29 08 2007 CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie jQuery, Css CSSを動的に切り替える方法をいくつか紹介します。全てcookieにより保存されます 1.styleswitch.jsを使う方法 まずGoogleで一番ヒットするのがstyleswitch.jsです。 コード <script src="styleswitch.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
jQuery ベースの横スクロール Coda-Slider 2.0 | Nutspress
ページ部分なので、個別にテンプレートを作ってNiall Doherty's dot bizからダウンロードしてきたCoda-Slider 2.0のスクリプトを突っ込むだけ。あとはスタイルシートでサイトに合うように調整してアップして完了。お手軽ですね。 Coda-Slider – Niall Doherty's dot biz デモを見るとわかるように、細かな設定が出来るので、設定マニュアルを見ながら目的やサイトデザインに合わせて設定してみましょう。 ダウンロードファイルはスクリプト以外にもデモページとスタイルシートが同梱されているので、コーディングできる人であれば、そのページをベースに組み替えてしまったほうが早いかもしれません。 ローカル上で動作確認をしたら、あとはWordpress用のテンプレートに組み込んでいきます。ここで、注意！jQuery自体はWordpress既存のものを使う形
第3回 jQueryにより操作性と見栄えが格段に向上（1/3） - ＠IT
ProductManagerDBクラスのGetProductListメソッド（リスト1）は、App_Dataフォルダに格納されているXMLファイル（Books.xml）からすべての商品データを取得してProductクラスに格納してコレクションを返します。 GetProductListメソッドでは、Books.xmlファイルをDataSetオブジェクトのReadXmlメソッドで読み込みます。そして、DataSetのTablesコレクションからDataTableを生成します。DataTableは、CacheオブジェクトのInsertメソッドにより、Webサーバのメモリ上に20分間キャッシュされます。 DataTableのRowsコレクションからDataRowを取得したらProductのインスタンスを生成して商品データを格納します。生成したProductはListコレクションに追加します。Row
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita
http://solidstate.jp/ImageDisplay/background/script_134.html
IDEA * IDEA
