初心者のためのjQuery | 第1回 jQueryでできること
初心者のためのjQuery 第1回 jQueryでできること 普段HTMLやCSSを中心にソースコードを書いていて、JavaScriptなどのプログラムには触れたことのない人を主な対象に、jQueryを解説します。まずは、jQueryでなにができるのか概観してみましょう。 jQueryでできること このシリーズでは、普段HTMLやCSSを中心にソースコードを書いていて、JavaScriptなどのプログラムには触れたことのない人を主な対象にしています。 まずはjQueryがどんなことができるのか、簡単なサンプルでみてみましょう。 特定の要素にいろいろできる ボタンをクリックするとidがhogeの要素に、赤い枠が付いたり、テキストが変わったり、要素が隠れたり、現れたりします。 <div id="hoge">sample</div> $('#hoge').css('border','3px so
carouFredSelで画面横幅いっぱいのスライダーや、レスポンシブスライダーを実装する｜Gimmick log
<div id="slider"> <div id="wrapper"> <ul id="carousel"> <li><a href="#"><img src="../images/main-bnr/01.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/02.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/03.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/04.jpg" width="600" height="3
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
googlemapをブラウザの横幅一杯に表示するとカッコイイかも | スターフィールド株式会社
googleMapのapiを利用して、地図を表示することは多いと思います。 弊社でもアクセス情報を載せる時は、かなりの確率で利用させてもらっています。 （最近では、apiではなく、googlemapの埋め込み用コードを使うことも多いですが・・・） ふと、このmapを横幅一杯に表示されたらなんかかっこいいんじゃないかと思って、 試してみました。 DEMO なんかデザイン次第じゃかっこ良くなるんじゃあないでしょうか？？ ただ、横幅一杯にした場合、地図をスクロールやマウスのホイールで動くようにしてしまうと 若干めんどくさいですね。。。 DEMOでは動かないようにしています。 方法は、ただcssでwidthを100%に設定するだけで、 googlemapの設定は通常の設定でOKです。 一応、googlemapのソースを載せておきます。 <script type="text/javascr
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
初心者のjQuery・左からスライドインするメニューのサンプル | ペンクおじさんのエンジニアブログ｜株式会社penq [ペンク] / Penq Inc.
株式会社penq(ペンク)の木村巳千尋によるエンジニアブログ。Amazon Web Services、Amazon EC2を使ったクラウドサーバの構築、大規模なアプリケーションの設計・開発、JavaScriptのフレームワークを使用やプラグイン開発、スマートフォン、Webアプリの開発などサーバサイドの構築からクライアントサイドのアプリケーションまで幅広く情報をお届けします。 Category Amazon Web Service (16) Aurasma (3) ExtJS (18) Facebook Aplication (3) Google API (5) JavaScript (1) jQuery (21) Monaca (8) OAuth2.0 (0) Sencha Touch2 (10) Smartphone (0) ThreeJS (13) Tag AR EC2 firefox
サイドからパネルがスライドインする - かちびと.net
Result jQuery //クリックイベント $('.open').click(function() { //パネルをアニメーションでトグル出来るようにする $("#panel").animate({width: 'toggle'}, 300); }); css #panel { height: 600px; width: 200px; padding:20px; background: #eee; float: left; display: none; color: #666; font-size: xx-large; } .open { height: 20px; width: 70px; background: #666; padding:20px; float: left; margin-top: 200px; color:#fff; } html <div id='panel
jQueryの短いコードでコンテンツをフェードインしながらふわりと読み込む方法
コードの細かい解説が参考記事にあります。とても参考になりました！ サンプルを作りました。（サンプルデモ→”fadein｜memocarilog demo”） 使い方 ヘッド内で以下のようにjQuery本体とコードを読み込みます。 読み込む時間とフェードインの時間を指定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#フェードインしてくる要素').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int=setInt
jqueryでできる簡単プルダウン
メニューを触った瞬間にプルダウンするメニューはホームページの画面をうまく使える必須ツールです。 jqueryを使えば、簡単にプルダウンメニューを作ることができます。 htmlタグ <ul id="menu"> <li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> </ul> </li> <li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> CSS
画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」
画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。 しかし飽き飽きしている人も多いのも確かです。 たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？ sponsors 使用方法 jQuery Smooth Div Scrollからjquery.smoothDivScroll-0.6.jsや画像、CSSファイルを、jQueryからjquery.jsをダウロードしましょう。 またjquery.scrollToからjquery.scrollTo.jsをダウロードします。 <link rel="stylesheet" type="text/css" href="smoothDivScroll.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></scri
魅せる画像スライドショーJavaScript「jQuery GalleryView」
スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。 sponsors 使用方法 jQuery GalleryViewからファイル一式をダウンロードします。 themesはjsと同じディレクトリにアップして下さい。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.galleryview-1.0.js"></script> <script type=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp