简体   繁体   中英

Execute jquery script after page loaded

I try to execute the following script, after the page was loaded.

First i included jquery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then i wrote my script:

<script>
    function scale()
    {
        $hc = document.getElementById("hc").innerHTML;
        $he = document.getElementById("he").innerHTML;
        $we = document.getElementById("we").innerHTML;

        jQuery('#mydiv_cam')    .css('height', '8000px');

        jQuery('#camera')       .css('height', $hc+"px");
        jQuery('#viewport')     .css('height', $he+"px");
        jQuery('#viewport')     .css('width', $we+"px");
    }
</script>

This is my body tag

<body onload="scale();">

And inside of the body i load the variables:

<p hidden="true" id="hc"> <?php echo $höhe_camera ?> </p>
<p hidden="true" id="he"> <?php echo $heightexplode[1] ?> </p>
<p hidden="true" id="we"> <?php echo $widthexplode[1] ?> </p>

But nothing happens.

If you want to execute your function on document load then just do it this way:

$(document).ready(function(){

    $hc = document.getElementById("hc").innerHTML;
    $he = document.getElementById("he").innerHTML;
    $we = document.getElementById("we").innerHTML;

    jQuery('#mydiv_cam')    .css('height', '8000px');

    jQuery('#camera')       .css('height', $hc+"px");
    jQuery('#viewport')     .css('height', $he+"px");
    jQuery('#viewport')     .css('width', $we+"px");
   //put everything else inside here
});

This will set this function as the ready function for the document so it will be executed as soon as the document will be fully loaded. Also you can remove the attribute on the body tag. Also, you may want to fix your jQuery import:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Just remove spaces before and after php tags. Write it is as below:

<p hidden="true" id="hc"><?php echo $höhe_camera ?></p>
<p hidden="true" id="he"><?php echo $heightexplode[1] ?></p>
<p hidden="true" id="we"><?php echo $widthexplode[1] ?></p>

This will work. As you are taking innerhtml of p tag in jquery it is accepting spaces also and after you are concatenating it with px so it will be consider as 1 px is style sheet which won't work. Try it.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM