メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • javascript

javascript

DrupalのBootstrapテーマにあるハイライトエリアにjumbotronとwellクラスより表示バランスが崩れため、一時的にこのクラスをjavascriptページをロード時に削除

  • Drupalのブロックシステムにある「ハイライトされ」エリアにTwitterなどのフォローボタンを配置したいですが、テーマ(Bootstrap)のjumbotron、wellクラスよりハイライトエリアの表示バランスが崩れます。
  • javascriptでページロード時に特定なクラス(jumbotron, well)を削除します。

DrupalのモジュールViews Bootsrapのブレイクポイントの設定

  • 問題点:Views Bootstrapのブレイクポイント設定が乏しい、設定されたブレイクポイントは画面1200基準(col-lg-xx)のものとなりました。
  • BootstrapのグリッドシステムがPC、タブレット、スマホのサイズに応じてカラム数を変更するのは本来の機能を活かすことができないです。
  • ここで、javascript(jQuery)でページがロード時に、ブレイクポインを動的に追加します。例:col-sm-x, col-xsなどの属性をクラスの追加します。

DrupalでBootstrapテーマ導入後にモジュールViewsのBetter Exposed Filtersのレイアウト崩れ

  • Bootstrap導入後にモジュール(Better Exporsed Filters)のレイアウトが崩れました。
  • 原因:Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました。
  • Bootstrapの「form-control」クラスがブロックの高さ(height)が定義しています。
  • 「form-control」クラスがブロックの高さ(height)を消せば、通常の検索フォームに戻りました。

cssとjQueryで画面サイズ変更(PC、スマホなど全デバイスの画面対応)時にposition:absolute要素の上下ポジションを保持

やりたいこと:画面サイズが変更(PC、スマホなど全デバイスの画面対応)時にposition:absolute要素の上下ポジションを保持したい

  • サイトの個人紹介ページに個人写真が背景イメージの上に載せする手法がよく利用されます
    • 方法としては、cssで人の顔写真のプロパティ:position:absolute; top:200px などえ設定すればよいです
  • ブラウザの幅が固定している場合は、ポジション(top)の固定値指定はできます

マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成

マウスオーバー:イメージのズームイン+マウスクリック:イメージのズームアウト

  • マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです

実現:css+jQueryで作成します

コンテンツ表示とスクロール時のアニメ効果

やりたいこと:ページがロード/スクロール時に、コンテンツがブラウザに次から次への流れ込むようなアニメ効果

  • ホームページがロード、またはスクロール時にコンテンツが一定な間隔で次から次へ流れ込むアニメ効果が比較的にコンテンツを強調しやすいです。
  • 簡単なサンプルを作成して、以下のような効果となります:

Fractionslider使用方法と注意点

FractionSliderでは、一枚のSlideに複数の画像/テキストオブジェクトが一定の時間間隔で次々に流れ込んで、Flash動画のような高い表現力として知られています。

    • FractionSliderの本家:http://jacksbox.de/
    • デモページ:http://jacksbox.de/

関数のcall()、apply()メッソドからJavascriptの「this」を再確認

Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()

animateの物体移動場所指定際にcssのposition指定に注意

JavaScriptのanimate関数を利用して、cssのposition属性を利用して表示物体の移動先を指定する際に、「aboslute」指定し忘れると、物体の移動がうまくいかないことがある。その場合「margin」属性の設定で物体を移動させることが可能となる。

cssのleftとrightで物体移動先設定する場合にposition属性に「aboslute」を設定し忘れると物体がうまく移動しない

  • 前提条件:
    • JavaScriptのanimate関数を利用して表示物体を移動する

javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります

  • Javascriptの「this」の参照先が基本的に呼出し主に指す
  • 入れ子関数の呼出し主がない場合に、その関数内の「this」がグローバルオブジェクト(window)に参照する
  • 入れ子関数の呼出し主がある場合に、その関数内の「this」の参照先がその呼出し主である

ページ送り

  • 前ページ ‹‹
  • 2 ページ
  • 次ページ ››
javascript を購読

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads