Запустить встроенную функцию JavaScript при загрузке страницы - PullRequest
Новая
       6

Запустить встроенную функцию JavaScript при загрузке страницы

0 голосов
/ 19 июня 2011

С помощью ваших фантастических мастеров JavaScript у меня есть встроенная функция JavaScript, которая увеличивает размер HTML5-видео при нажатии кнопки, а затем повторно запускается при изменении размера окна.

Я бы хотел удалить кнопку из уравнения, а не запускать ее при загрузке страницы, удалить зависимости имени класса (если они остаются после удаления кнопки), сохраняя при этом триггер изменения размера окна.

Спасибо за вашу помощь!Не смог бы сделать это без тебя.Демонстрацию можно посмотреть по адресу http://kzmnt.com/test/

JavaScript: 

var clicked =  document.getElementById("buttonImportant")

  var videoContainer = document.getElementById('video_container');
  var video = videoContainer.getElementsByTagName('video')[0];

  video.style.height="auto";
  video.style.width="1280px";

  clicked.addEventListener('click',function(){
    if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
        videoContainer.className="video-js-box";
        video.style.height = "";
        video.style.width="";
    }
    else
    {
        videoContainer.className="video-js-box fullScreen";
        video.style.height = "";
        video.style.width="";
    }
    myResizerObject.prevWidth = video.offsetWidth;
    myResizerObject.prevHeight = video.offsetHeight;



    myResizerObject.Init();
  },false);

    var RESIZER = function(){ 

        this.prevWidth = video.offsetWidth;
        this.prevHeight = video.offsetHeight;

        this.videoContainer = document.getElementById('video_container');
        this.video = videoContainer.getElementsByTagName('video')[0];
        this.videoStyle = this.video.style;

        var ratio = this.video.offsetHeight/this.video.offsetWidth;

        var that = this;

        this.Init = function(){
            if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
            {
                var videoContOffsetWidth = that.videoContainer.offsetWidth;
                var videoOffsetWidth = that.video.offsetWidth;
                var videoContOffsetHeight = that.videoContainer.offsetHeight;
                var videoOffsetHeight = that.video.offsetHeight;

                if(that.prevWidth!= videoContOffsetWidth)
                {
                    that.prevWidth = videoContOffsetWidth;
                    var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
                    if(desired>ratio){
                        that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
                    }
                }

                if(that.prevHeight!=videoContOffsetHeight)
                { 
                    that.prevHeight = videoContOffsetHeight;
                    var desired = videoContOffsetHeight/videoContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        that.videoStyle.top = '0px';
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                        that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';

                    }
                }

            }
        };
    };

    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;

1 Ответ

1 голос
/ 19 июня 2011

Вы ищете что-то вроде ... 

window.onload = mySuperCoolFunction;

А зачем вам jQuery?Возможно, вы могли бы четко изложить свои цели / вопросы внизу жирным шрифтом, чтобы мы могли вам помочь:)

Если вы только хотите инициировать другую функцию, почему бы просто не добавить вызов к вашемуsuperCoolFunction при вызове другой предварительно написанной функции jQuery.Например: 

$(document).ready(function() {
    center();
    mySuperCoolFunction();    // not necessary to init in another file...
});
$(window).load(function(){
    center();
    mySuperCoolFunction(); 
});
$(window).resize(function(){
    center();
    mySuperCoolFunction(); 
});

Переписано в jQuery: 

$(function() {
$('video').eq(0).css({
    height: "auto",
    width: "1280px"
});

if ($('#video_container').hasClass('fullScreen')) {
    $('#video_container').attr('class', 'video-js-box');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    });
}
else {

    $('#video_container').attr('class', 'video-js-box fullscreen');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    }); 
}

myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
});
...