开发者

Run native JavaScript function on page load

开发者 https://www.devze.com 2023-03-14 02:10 出处:网络
With the help of you fantastic JavaScript wizards I\'ve got a native JavaScript function that beefs up the size of an HTML5 video when clicking a butt开发者_如何学JAVAon and then re-runs whenever the

With the help of you fantastic JavaScript wizards I've got a native JavaScript function that beefs up the size of an HTML5 video when clicking a butt开发者_如何学JAVAon and then re-runs whenever the window is resized.

I'd like to remove the button from the equation instead launching it on page load, remove the class name dependencies (if they're still in after button removal), while maintaining the window resize trigger.

Thanks for your help! Couldn't do it without you. A demo can be seen at 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;


Are you looking for something like...

window.onload = mySuperCoolFunction;

And why do you need jQuery? Maybe you could explicitly state your goals/questions at the bottom in bold so that we can help you :)


If you're only looking to init another function, why not just add the call to your superCoolFunction while you're calling your other pre-written jQuery function. For example:

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

Rewritten in 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();
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号