<a href=”#○○○”>でリンクする「アンカーリンク」ですが、jQueryを利用してアンカーリンクの先頭まで自動でスクロールするという今となってはあって当たり前の機能ですよね。 そのJavaScriptソースがこちらですが $(function(){ jQuery("a[href^=#]").click(function(){ var Hash = $(this.hash); var HashOffset = $(Hash).offset().top - 80; jQuery("html,body").animate({ scrollTop: HashOffset }, 500); return false; }); }); これを<head>タグ内の<script>タグに記述すれば、そのページのアンカーリンク全てがスクロール機能を実装できます。 しかし、ページ遷移がともなうアンカー
Connecting the dots Like seeing the Big Dipper in a sky full of stars, Pts helps you connect the dots in the vastness of conceptual spaces. Pts enables you to compose and express what you see in your mind's eyes — points as ideas, shapes, colors, motions, interactions, and more. A modern javascript library Pts is lightweight and modular. Written in typescript, it comes with many useful algorithms
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; // 合計を計算
ソース <div onscroll="display_account()"> <script type="text/javascript"> <!-- function keisan(){ // 計算開始 var tax = 5; // 消費税率 var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価 var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex; var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex; var
「Advent Calendar in 信州松本（だけじゃなくてもいいよ） 」にお誘いいただいたので、14日目担当として1ネタ参加させていただきます。どんなネタがいいか悩みましたが、Advent Calendarを眺めていたらその名のごとくカレンダーに関することないかな…という短絡的な結論で、以前社内で話題になっていたレスポンシブ対応のJQueryプラグイン「Calendario」をいじってみることに。 Calendario: A Flexible Calendar Plugin | Codrops 配布サイトでデータをダウンロードして、CSSをちょっとだけ変更して（背景変えたぐらい）アップしたのがこれ。簡単～！ カレンダーのデータはdata.jsというファイルにまとめて書かれている。なるほど。 書式はこんな感じ。 '12-14-2012' : '<a href="リンク先">ページタイト
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
googlemapAPIでマウスホイールによるズームの動きが邪魔？ googleマップをWebサイトに設置した時、マウスホイールでズームさせたりすると、コントローラーでいちいち動かさなくても楽ちんです。 ですが、ブラウザをマウスホイールでスクロールしていった時にマップにあたると、ブラウザのスクロールが止まってしまいマップがズームされてしまうなんて事があります。 ホイールでのズームは楽ですが、デフォルトの表示を大きめにしておけばさほどホイールで動かく事も少ないのではないでしょうか。 zoom：1；くらいから引いた表示で見る事なんてほぼ必要ないでしょうし、ホイールをグリグリしまくる程ズームする事も現実あまりありません。 ですので、マウルホイールによるズームが不要の場合は動きを無効化しちゃいましょう。
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
レスポンシブデザイン、iframeと相性悪くて、普通に作るとスマホでyoutubeはみ出るみたいになる。そこで、よく使うiframeのレスポンシブ対策をまとめた。 Facebook Like Boxまずfb-like-boxをdivで囲う <div class="likebox-container"> <div class="fb-like-box"></div> </div> 次に下記のスタイルを書く。と幅可変になる div.likebox-container .fbcomments, div.likebox-container .fb_iframe_widget, div.likebox-container .fb_iframe_widget[style], div.likebox-container .fb_iframe_widget iframe[style], div.likeb
IEで「エラー：識別子、文字列または数がありません。」というエラーが出た。 （FireFoxだと正常に動作する） ソースを調べてみると、 $("#dir_conf").click(function(){ $("#dir_conf_load").load("register.php", { name: "dir002_conf", number: "1_1", }); return false; });「number: "1_1",」の最後に「,」があった・・。 FireFoxだとこれOKなんですよね。久しぶりにこのエラーが出たのでなかなか突き止められなかったです。 1票ポチッと押して下さい♪このブログのランキングが少し上がります。
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
