Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!DOCTYPE html>
<html>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 

    <body>

          
        <!-- YouTubeプレイヤーのプレースホルダ -->
	    <div id="player"></div>
        
        <div ng-app="movieListApp">
        
            <div id = "movieListCtrlID" ng-controller="movieListController">
      
                <select id="movieList" ng-model="movie" ng-options="movie.movieTitle for movie in movies" ng-change="onSelectChange()" style="position: absolute; left: 5px; top: 250px">
                </select>                
                
                <br>
                             
                <button id="previousBtn" ng-click="previous()" style="position: absolute; left: 5px; top: 290px">Previous</button>  
                <button id="forwardBtn" ng-click="forward()" style="position: absolute; left: 130px; top: 290px">Forward</button>  
                <button id="sizeBtn" ng-click="changePlayerSize()"  style="position: absolute; left: 290px; top: 290px">Size</button>

                <br>
                             
                <button id="defaultMVListBtn" ng-click="defaultMVList()" style="position: absolute; left: 5px; top: 330px">DefaultMVList</button>  
                <button id="shuffleMVListBtn" ng-click="shuffleMVList()" style="position: absolute; left: 200px; top: 330px">ShuffleMVList</button>  
                               
                <br>
                
                <form name="txtForm">
                    <button id="repeatStateSetBtn" ng-click="setRepeatState()" style="position: absolute; left: 5px; top: 370px">Repeat</button>
                    <input  id="repeatStateDispTxt" type="text" name="repeatState" size="11" maxlength="10" value="REPEAT OFF" readonly="readonly" style="position: absolute; left: 130px; top: 370px"> 
                </form>
                <br>
                
                <a href="http://www.amazon.co.jp/gp/search?ie=UTF8&keywords=光エレクトロニクス&tag=myinteresting-22&index=aps&linkCode=ur2&camp=247&creative=1211"  id="amazonBtn" rel="nofollow" target="_blank" style="position: absolute; left: 5px; top: 410px">Amazon</a>
                <a href="http://twitter.com/share?url=http://jsdo.it/siouxcitizen/uoG0&amp;text=勉強用に「筑波大学 2016年度 光エレクトロニクス」のYoutube動画リストを連続再生"  id="twitterBtn" rel="nofollow" target="_blank" style="position: absolute; left: 130px; top: 410px">Twitter</a>
                <a href="http://www.facebook.com/sharer.php?u=http://jsdo.it/siouxcitizen/uoG0" id="facebookBtn" rel="nofollow" target="_blank" style="position: absolute; left: 245px; top: 410px">Facebook</a>
        
            </div>
            
        </div>
        
    </body>
    
</html>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  padding: 10px;
  background: #5088ff;
  font: 1.0em sans-serif;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}

select {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}

a {
    background-color: #4099FF;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 2em;
    text-decoration: none;
    font-style: none;
}

a:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

button {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #3B5998;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}


button:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

input[type="text"] {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;
}

              
            
!

JS

              
                // forked from siouxcitizen2's "勉強用に「筑波大学  計算機数学I (2017)」のYoutube動画リストを連続再生" http://jsdo.it/siouxcitizen2/S0iJ
//
//Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。
//
//[ShuffleMVList]ボタンで再生動画の順番をシャッフルします
//[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします
//
//勉強用に「筑波大学 計算機数学I (2017)」のYoutube動画リストを連続再生
//
//
//*注
//なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです

//動画プレイヤー
var player = null;
//動画プレイヤー用パラメータ
var options =
    {
        width: 352,              //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット
        height: 230,             //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット
        videoId: "5yrOkJRhUPA",  //下部AngularJS部分に記述された動画ID配列($scope.movies)の先頭にある動画IDをセット
        playerVars: {
            autoplay: 1,
            controls: 1,
            autohide: 1,
            html5: 1
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    };

//iframe apiの読込 
//iframe apiの読込完了時に onYouTubeIframeAPIReady が呼び出されて 動画Player設定→動画再生処理開始
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//iframe apiの読込完了時に呼び出される
//Youtube Playerのパラメータ設定や、イベント処理の設定を行う
function onYouTubeIframeAPIReady() {
    
    player = new YT.Player( 'player', options );
    
}

//Youtube Playerの準備ができたら(読込完了したら?)動画再生を開始
function onPlayerReady(event) {
    //event.target.playVideo();
    player.playVideo();
}

//動画の再生が終了したら、動画IDリストから次の動画のIDを取得して再生する
function onPlayerStateChange(event) {
    
    if(event.data == YT.PlayerState.ENDED) {

        //angularJSの関数を呼び出す
        var scope = angular.element(document.getElementById("movieListCtrlID")).scope();
        
        scope.$apply(function () {
            scope.playNextMovie();
        });
  
    }          
}

angular.module('movieListApp', [])
.controller('movieListController', function ($scope) {
    //動画IDの配列参照用のインデックス   
    $scope.index = 0;
    $scope.isRepeat = false;
    $scope.size = 0; // 画面サイズ 0 ~ 3 

    //Youtubeプレイヤーのサイズとそれに対応したボタン位置設定を保持する配列
    $scope.sizes = [
        {"sizeIndex": 0, "height": 230, "width": 352, 
         "movieListLeft": "5px", "movieListTop": "250px", "sizeBtnLeft": "290px", "sizeBtnTop": "290px",
         "previousBtnLeft": "5px", "previousBtnTop": "290px", "forwardBtnLeft": "130px", "forwardBtnTop": "290px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "330px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "330px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "370px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "370px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "410px", "twitterBtnLeft": "130px", "twitterBtnTop": "410px", "facebookBtnLeft": "245px", "facebookBtnTop": "410px"},
        
        {"sizeIndex": 1, "height": 288, "width": 512, 
         "movieListLeft": "5px", "movieListTop": "308px", "sizeBtnLeft": "290px", "sizeBtnTop": "348px",
         "previousBtnLeft": "5px", "previousBtnTop": "348px", "forwardBtnLeft": "130px", "forwardBtnTop": "348px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "388px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "388px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "428px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "428px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "468px", "twitterBtnLeft": "130px", "twitterBtnTop": "468px", "facebookBtnLeft": "245px", "facebookBtnTop": "468px"},
        
        {"sizeIndex": 2, "height": 495, "width": 704, 
         "movieListLeft": "740px", "movieListTop": "115px", "sizeBtnLeft": "1030px", "sizeBtnTop": "155px",
         "previousBtnLeft": "740px", "previousBtnTop": "155px", "forwardBtnLeft": "870px", "forwardBtnTop": "155px",
         "defaultMVListBtnLeft": "740px", "defaultMVListBtnTop": "195px", "shuffleMVListBtnLeft": "950px", "shuffleMVListBtnTop": "195px",
         "repeatStateSetBtnLeft": "740px", "repeatStateSetBtnTop": "235px", "repeatStateDispTxtLeft": "870px", "repeatStateDispTxtTop": "235px",
         "amazonBtnLeft": "740px", "amazonBtnTop": "275px", "twitterBtnLeft": "870px", "twitterBtnTop": "275px", "facebookBtnLeft": "985px", "facebookBtnTop": "275px"},
        
        
        {"sizeIndex": 3, "height": 144, "width": 256, 
         "movieListLeft": "5px", "movieListTop": "164px", "sizeBtnLeft": "290px", "sizeBtnTop": "204px",
         "previousBtnLeft": "5px", "previousBtnTop": "204px", "forwardBtnLeft": "130px", "forwardBtnTop": "204px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "244px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "244px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "284px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "284px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "324px", "twitterBtnLeft": "130px", "twitterBtnTop": "324px", "facebookBtnLeft": "245px", "facebookBtnTop": "324px"}
        
    ];
    
    $scope.movies = [
        {"movieIndex": 0, "movieID": "5yrOkJRhUPA", "movieTitle": " 筑波大学 第1回 2016年度 光エレクトロニクス 「エネルギーバンド構造と真性半導体のキャリア密度」"},
        {"movieIndex": 1, "movieID": "aN0762uIQ3o", "movieTitle": " 筑波大学 第2回 2016年度 光エレクトロニクス 「不純物ドープ半導体のキャリア密度」"},
        {"movieIndex": 2, "movieID": "P90wmW-9bTk", "movieTitle": " 筑波大学 第3回 2016年度 光エレクトロニクス 「キャリアの再結合割合」"},
        {"movieIndex": 3, "movieID": "z4sHA90VxtA", "movieTitle": " 筑波大学 第4回 2016年度 光エレクトロニクス 「pn接合ダイオード Ⅰ」"},
        {"movieIndex": 4, "movieID": "NSoZJGaBTS8", "movieTitle": " 筑波大学 第5回 2016年度 光エレクトロニクス 「pn接合ダイオード Ⅱ」"},
        {"movieIndex": 5, "movieID": "z4sHA90VxtA", "movieTitle": " 筑波大学 第6回 2016年度 光エレクトロニクス 「発光素子Ⅰ - 発光ダイオードⅠ」"},
        {"movieIndex": 6, "movieID": "Ll60TeFNGr8", "movieTitle": " 筑波大学 第7回 2016年度 光エレクトロニクス 「発光素子Ⅰ - 発光ダイオードⅡ」"},
        {"movieIndex": 7, "movieID": "06XX9E1bQas", "movieTitle": " 筑波大学 第8回 2016年度 光エレクトロニクス 「発光素子Ⅱ - 半導体レーザⅠ」"},
        {"movieIndex": 8, "movieID": "UfwzhNywCJM", "movieTitle": " 筑波大学 第9回 2016年度 光エレクトロニクス 「発光素子Ⅱ - 半導体レーザⅡ」"},
        {"movieIndex": 9, "movieID": "fGqteGX3vCs", "movieTitle": " 筑波大学 第10回 2016年度 光エレクトロニクス 「太陽電池Ⅰ - 光吸収係数、キャリア生成割合」"},
        {"movieIndex": 10, "movieID": "3jwD6-MUnaI", "movieTitle": " 筑波大学 第11回 2016年度 光エレクトロニクス 「太陽電池Ⅱ - 光電流」"},
        {"movieIndex": 11, "movieID": "rxGCg0JZIg0", "movieTitle": " 筑波大学 第12回 2016年度 光エレクトロニクス 「太陽電池Ⅲ - 出力電力と禁制帯幅」"},
        {"movieIndex": 12, "movieID": "FbnMKuBgWUA", "movieTitle": " 筑波大学 第13回 2016年度 光エレクトロニクス 「太陽電池Ⅳ - 変換効率向上の歴史」"}
    ];

    $scope.defaultMovies = [
        {"movieIndex": 0, "movieID": "5yrOkJRhUPA", "movieTitle": " 筑波大学 第1回 2016年度 光エレクトロニクス 「エネルギーバンド構造と真性半導体のキャリア密度」"},
        {"movieIndex": 1, "movieID": "aN0762uIQ3o", "movieTitle": " 筑波大学 第2回 2016年度 光エレクトロニクス 「不純物ドープ半導体のキャリア密度」"},
        {"movieIndex": 2, "movieID": "P90wmW-9bTk", "movieTitle": " 筑波大学 第3回 2016年度 光エレクトロニクス 「キャリアの再結合割合」"},
        {"movieIndex": 3, "movieID": "z4sHA90VxtA", "movieTitle": " 筑波大学 第4回 2016年度 光エレクトロニクス 「pn接合ダイオード Ⅰ」"},
        {"movieIndex": 4, "movieID": "NSoZJGaBTS8", "movieTitle": " 筑波大学 第5回 2016年度 光エレクトロニクス 「pn接合ダイオード Ⅱ」"},
        {"movieIndex": 5, "movieID": "z4sHA90VxtA", "movieTitle": " 筑波大学 第6回 2016年度 光エレクトロニクス 「発光素子Ⅰ - 発光ダイオードⅠ」"},
        {"movieIndex": 6, "movieID": "Ll60TeFNGr8", "movieTitle": " 筑波大学 第7回 2016年度 光エレクトロニクス 「発光素子Ⅰ - 発光ダイオードⅡ」"},
        {"movieIndex": 7, "movieID": "06XX9E1bQas", "movieTitle": " 筑波大学 第8回 2016年度 光エレクトロニクス 「発光素子Ⅱ - 半導体レーザⅠ」"},
        {"movieIndex": 8, "movieID": "UfwzhNywCJM", "movieTitle": " 筑波大学 第9回 2016年度 光エレクトロニクス 「発光素子Ⅱ - 半導体レーザⅡ」"},
        {"movieIndex": 9, "movieID": "fGqteGX3vCs", "movieTitle": " 筑波大学 第10回 2016年度 光エレクトロニクス 「太陽電池Ⅰ - 光吸収係数、キャリア生成割合」"},
        {"movieIndex": 10, "movieID": "3jwD6-MUnaI", "movieTitle": " 筑波大学 第11回 2016年度 光エレクトロニクス 「太陽電池Ⅱ - 光電流」"},
        {"movieIndex": 11, "movieID": "rxGCg0JZIg0", "movieTitle": " 筑波大学 第12回 2016年度 光エレクトロニクス 「太陽電池Ⅲ - 出力電力と禁制帯幅」"},
        {"movieIndex": 12, "movieID": "FbnMKuBgWUA", "movieTitle": " 筑波大学 第13回 2016年度 光エレクトロニクス 「太陽電池Ⅳ - 変換効率向上の歴史」"}
    ];

    $scope.tempMovies = [
    ];
    $scope.destMovies = [
    ];
    
    $scope.movie = $scope.movies[0];

    $scope.onSelectChange = function() {
        player.loadVideoById($scope.movie.movieID);
        $scope.index = $scope.movie.movieIndex;
        
    };
    
    $scope.previous = function() {
        if ($scope.index - 1 >= 0) {
            //1つ前の動画インデックスに戻す
            $scope.index = $scope.index - 1; 
            //戻したインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //戻したインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最初の動画のインデックスから最後の動画のインデックスへ変更してから同じ処理    
        } else if ( ($scope.index - 1) < 0 && $scope.isRepeat) { 
            $scope.index = $scope.movies.length - 1;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };
    
    $scope.forward = function() {
        if ($scope.index + 1 < $scope.movies.length) {
            //1つ後の動画インデックスに進める
            $scope.index = $scope.index + 1;
            //進めたインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //進めたインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最後の動画のインデックスから最初の動画のインデックスへ変更してから同じ処理        
        } else if ( ( $scope.index + 1 ) == $scope.movies.length && $scope.isRepeat) {
            $scope.index =  0;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };

    //再生動画リストをデフォルトのものに設定
    $scope.defaultMVList = function() {
        
        //デフォルトの再生動画リストをセットし、
        //その他項目を初期化してリスト先頭の動画から再生しなおす        
        $scope.movies = $scope.defaultMovies.slice();
        $scope.index = 0;
        $scope.movie = $scope.movies[0];
        player.loadVideoById($scope.movies[$scope.index].movieID);
        
    };
    
    //再生動画リストをシャッフル
    $scope.shuffleMVList = function() {
        
        $scope.tempMovies = $scope.movies.slice();
        $scope.destMovies = [];
        var destIndex = 0;
        
        while($scope.tempMovies.length > 0) {

            var tempIndex = Math.floor(Math.random() * $scope.tempMovies.length);
            
            //alert(tempIndex);
            //alert($scope.tempMovies[tempIndex].movieIndex);
            
            $scope.tempMovies[tempIndex].movieIndex = destIndex;
            
            $scope.destMovies.push($scope.tempMovies[tempIndex]); 
            $scope.tempMovies.splice(tempIndex, 1);
            
            destIndex = destIndex + 1;
        }
        
        //シャフルされた再生動画リストをセットし、
        //その他項目を初期化してリスト先頭の動画から再生しなおす
        $scope.movies = $scope.destMovies;
        $scope.index = 0;
        $scope.movie = $scope.movies[0];
        player.loadVideoById($scope.movies[$scope.index].movieID);
        
    };
    
    //REPEAT設定のON・OFFを行う REPEAT設定は画面のテキストボックスに反映される
    $scope.setRepeatState = function() {
        if($scope.isRepeat) {
            //isRepeat = false;
            $scope.isRepeat = false;
            document.txtForm.repeatState.value = "REPEAT OFF";
        } else {
            //isRepeat = true;
            $scope.isRepeat = true;
            document.txtForm.repeatState.value = "REPEAT ON";
        }
    };

    //REPEAT設定のON・OFFを行う REPEAT設定は画面のテキストボックスに反映される
    $scope.playNextMovie = function() {

        //動画IDリストの最後のIDになるまで動画を再生する
        if ( ($scope.index + 1) < $scope.movies.length) {

            //動画IDリストのインデックスを進める
            $scope.index = $scope.index + 1;

            //画面のSELECTリストに反映させる
            $scope.movie = $scope.movies[$scope.index];

            //動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

        //REPEAT ON の場合に動画IDリスト最後の動画が終了した場合は
        //動画IDリストの最初のIDに戻って動画を再生する    
        } else if ( ($scope.index + 1) ==$scope.movies.length && $scope.isRepeat) {

            $scope.index = 0;

            //画面のSELECTリストに反映させる;
            $scope.movie = $scope.movies[$scope.index];

            //動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

        } 

    };


    //YoutubePlayerのサイズを変更する
    $scope.changePlayerSize = function() {

        $scope.size = $scope.size + 1;
        //サイズ保持配列からYoutubePlayerのサイズを取得して変更する
        if ($scope.size < $scope.sizes.length) {
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);
            

            
        } else {
            $scope.size = 0;
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);
            
        }
        //ボタンの座標を設定
	    var element = document.getElementById("movieList"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].movieListLeft; 
	    element.style.top  = $scope.sizes[$scope.size].movieListTop; 
	                
	    element = document.getElementById("sizeBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].sizeBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].sizeBtnTop; 
	    
	    element = document.getElementById("previousBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].previousBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].previousBtnTop;
	    
	    element = document.getElementById("forwardBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].forwardBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].forwardBtnTop;

	    element = document.getElementById("defaultMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].defaultMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].defaultMVListBtnTop;
	    
	    element = document.getElementById("shuffleMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].shuffleMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].shuffleMVListBtnTop;
	    
	    element = document.getElementById("repeatStateSetBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateSetBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateSetBtnTop;
	    
	    element = document.getElementById("repeatStateDispTxt"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateDispTxtLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateDispTxtTop;

	    element = document.getElementById("amazonBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].amazonBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].amazonBtnTop;
	    
	    element = document.getElementById("twitterBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].twitterBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].twitterBtnTop;

	    element = document.getElementById("facebookBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].facebookBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].facebookBtnTop;

    };
    
});

              
            
!
999px

Console