JavaScript

jQueryで簡単にパララックスを作ってみよう

先にjQueryを読み込んだ後こういう記述を追加してみます。[/p]

 var top = $('#hoge').css('top');
$(window).scroll(function() {
    var value = $(this).scrollTop();
    $('hoge').css('top', value * -0.2);
});

jQueryでCSSの値に応じて条件分岐をする方法

例えば特定のクラスのdisplayの値に応じた処理をする場合

if($(".hoge").css('display') == 'none') {
		//display:none;だった時の処理を書く
} else if($(".hoge").css('display') == 'block') {
	    //display:block;だった時の処理を書く
}

JavaScriptで連想配列の要素数を取得する方法

Object.keys()を使用して取得することができます。


var fruit = {
  name:'りんご',
  name:'バナナ',
 name:'すいか',
 name:'メロン',
 name:'みかん',
};

var length = Object.keys(fruit).length;
console.log(length); // 5

AngularJS ng-controllerの外から値を操作する方法

AngularJSでチェックボックスの値をng-controllerの外の要素をクリックした時に変更したいということがあったのでその方法になります。

下記はtestというボタンをクリックしたらAngularJSのController内にあるチェックボックスの値が変化して、さらにそれに応じて別のフォームが入力必須の状態になるという内容です。

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="test()">test</button>
<div ng-app="myApp">
  <div ng-controller="myController">
      <form name="testForm">
          <div id="testElement"><input type="checkbox" name="test" ng-model="test" ng-init="test=''"></div>
          <input type="text" name="name" ng-model="name" ng-required="test==true">
          <span ng-show="testForm.name.$error.required">入力してください</span>
          <span ng-show="testForm.name.$valid">OK</span>
      </form>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope) {
}]);

function test() {
  var element = document.getElementById("testElement");
  var change = angular.element(element).scope();
  change.$apply(function(){
    change.test=true;
  })
}
</script>
</body>
</html>

JavaScriptでアドレスバーのURLの記述を変更する方法

クリック時の処理等に追加することでアドレスバーのURLの表示を自由に変更することが可能になります。

現在のURLのアドレス以下を変更する場合

例 http://hogehoge.com/ooo/abc → http://example.com/ooo/abc

history.replaceState('','','abc');

トップページURLのアドレス以下を変更する場合

例 http://hogehoge.com/ooo/abc → http://example.com/abc

history.replaceState('','','/abc');

現状のパラメーター等を残しつつさらに記述を追加していく場合

history.pushState('','','abc');

URLの#以降が変化した時に処理を加える方法

URLの#以降はURLフラグメントと言いますが、アンカーリンクをクリックした場合等に何らかの処理を加えたい場合等に利用します。

function hashChange() {
  //ここに実行したい処理を書く
}
window.onhashchange = hashChange;