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.

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/q4ov&amp;text=勉強用に「電験三種 理論」 の講義動画リストを連続再生"  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/q4ov" 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 "勉強用に福井大学の「計算量理論」(2009年) の講義動画リストを連続再生" http://jsdo.it/siouxcitizen2/E2xP
//
//Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。
//
//[ShuffleMVList]ボタンで再生動画の順番をシャッフルします
//[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします
//
//勉強用に「電験三種 理論」講義のYoutube動画を連続再生
//
//
//*注
//なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです

//動画プレイヤー
var player = null;
//動画プレイヤー用パラメータ
var options =
    {
        width: 352,              //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット
        height: 230,             //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット
        videoId: "NeILCFjljTQ",  //下部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": "NeILCFjljTQ", "movieTitle": "電験三種 理論第1回 静電気①"},
        {"movieIndex": 1, "movieID": "INfLTZFEzuo", "movieTitle": "電験三種 理論第2回 静電気②"},
        {"movieIndex": 2, "movieID": "dbEoA1mbcvA", "movieTitle": "電験三種 理論第3回 コンデンサ①"},
        {"movieIndex": 3, "movieID": "ewuJWahDUK4", "movieTitle": "電験三種 理論第4回 コンデンサ②"},
        {"movieIndex": 4, "movieID": "q2QYVhjSt-k", "movieTitle": "電験三種 理論第5回 磁気①"},
        {"movieIndex": 5, "movieID": "AdeddGDFzmA", "movieTitle": "電験三種 理論第6回 磁気②"},
        {"movieIndex": 6, "movieID": "BNtlKM-gbcw", "movieTitle": "電験三種 理論第7回 磁気③"},
        {"movieIndex": 7, "movieID": "cI90a3iD4Nc", "movieTitle": "電験三種 理論第8回 コイル①"},
        {"movieIndex": 8, "movieID": "MrD6Ueb7ZDY", "movieTitle": "電験三種 理論第9回 コイル②"},
        {"movieIndex": 9, "movieID": "PfvlUugV__A", "movieTitle": "電験三種 理論第10回 直流回路①"},
        {"movieIndex": 10, "movieID": "AsaykPCxfBA", "movieTitle": "電験三種 理論第11回 直流回路②"},
        {"movieIndex": 11, "movieID": "bO1B83IITQQ", "movieTitle": "電験三種 理論第12回 直流回路③"},
        {"movieIndex": 12, "movieID": "Sj7Hn3G05HA", "movieTitle": "電験三種 理論第13回 交流回路①"},
        {"movieIndex": 13, "movieID": "N37AAVGYCPA", "movieTitle": "電験三種 理論第14回 交流回路②"},
        {"movieIndex": 14, "movieID": "KqET9FUypdo", "movieTitle": "電験三種 理論第15回 交流回路③"},
        {"movieIndex": 15, "movieID": "Ee9KZvfEPN0", "movieTitle": "電験三種 理論第16回 三相交流①"},
        {"movieIndex": 16, "movieID": "UbdlbvfNUQA", "movieTitle": "電験三種 理論第17回 三相交流②"},
        {"movieIndex": 17, "movieID": "UIH9EfNWnq4", "movieTitle": "電験三種 理論第18回 電子回路①"},
        {"movieIndex": 18, "movieID": "7i0Ktedykus", "movieTitle": "電験三種 理論第19回 電子回路②"},
        {"movieIndex": 19, "movieID": "JCKQ0wC0a3M", "movieTitle": "電験三種 理論第20回 電子回路③"}
    ];

    $scope.defaultMovies = [
        {"movieIndex": 0, "movieID": "NeILCFjljTQ", "movieTitle": "電験三種 理論第1回 静電気①"},
        {"movieIndex": 1, "movieID": "INfLTZFEzuo", "movieTitle": "電験三種 理論第2回 静電気②"},
        {"movieIndex": 2, "movieID": "dbEoA1mbcvA", "movieTitle": "電験三種 理論第3回 コンデンサ①"},
        {"movieIndex": 3, "movieID": "ewuJWahDUK4", "movieTitle": "電験三種 理論第4回 コンデンサ②"},
        {"movieIndex": 4, "movieID": "q2QYVhjSt-k", "movieTitle": "電験三種 理論第5回 磁気①"},
        {"movieIndex": 5, "movieID": "AdeddGDFzmA", "movieTitle": "電験三種 理論第6回 磁気②"},
        {"movieIndex": 6, "movieID": "BNtlKM-gbcw", "movieTitle": "電験三種 理論第7回 磁気③"},
        {"movieIndex": 7, "movieID": "cI90a3iD4Nc", "movieTitle": "電験三種 理論第8回 コイル①"},
        {"movieIndex": 8, "movieID": "MrD6Ueb7ZDY", "movieTitle": "電験三種 理論第9回 コイル②"},
        {"movieIndex": 9, "movieID": "PfvlUugV__A", "movieTitle": "電験三種 理論第10回 直流回路①"},
        {"movieIndex": 10, "movieID": "AsaykPCxfBA", "movieTitle": "電験三種 理論第11回 直流回路②"},
        {"movieIndex": 11, "movieID": "bO1B83IITQQ", "movieTitle": "電験三種 理論第12回 直流回路③"},
        {"movieIndex": 12, "movieID": "Sj7Hn3G05HA", "movieTitle": "電験三種 理論第13回 交流回路①"},
        {"movieIndex": 13, "movieID": "N37AAVGYCPA", "movieTitle": "電験三種 理論第14回 交流回路②"},
        {"movieIndex": 14, "movieID": "KqET9FUypdo", "movieTitle": "電験三種 理論第15回 交流回路③"},
        {"movieIndex": 15, "movieID": "Ee9KZvfEPN0", "movieTitle": "電験三種 理論第16回 三相交流①"},
        {"movieIndex": 16, "movieID": "UbdlbvfNUQA", "movieTitle": "電験三種 理論第17回 三相交流②"},
        {"movieIndex": 17, "movieID": "UIH9EfNWnq4", "movieTitle": "電験三種 理論第18回 電子回路①"},
        {"movieIndex": 18, "movieID": "7i0Ktedykus", "movieTitle": "電験三種 理論第19回 電子回路②"},
        {"movieIndex": 19, "movieID": "JCKQ0wC0a3M", "movieTitle": "電験三種 理論第20回 電子回路③"}
    ];

    $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