change html content with javascript missing content

Question

At the moment I create a page. The page will be displayed with the iPod Touch (5th generation) in the safari browser. In addition, the page should be displayed in full screen mode.

Now I started to solve this problem, but some content is missing. Here is my startpage index.html.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/desktop.css">
  <link rel="stylesheet" type="text/css" href="css/ipod.css">

  <script src="js/jquery-1.11.3.min.js"></script>

  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
  <div id="content">
    <div id="dumpingStationButtonContainer">
      <a id="dumpingStationOneButton" class="dumpingStationButton">Lader&uuml;ssel 1</a>
      <a id="dumpingStationTwoButton" class="dumpingStationButton">Lader&uuml;ssel 2</a>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#dumpingStationOneButton').click(function() {
        $('body').load("dumpingStationOne.html");
      });

      $('#dumpingStationTwoButton').click(function() {
        $('body').load("dumpingStationTwo.html");
      });
    });
  </script>
</body>

</html>

dumpingStationOne.html

<div id="content">
  <div id="cameraContainer">
    <script type="text/javascript">
      var sDomainPort = 80;
      var Speck_var = 0;
      var channel_s = 0;
      var view_w = 900;
      var view_h = 675;


      if (window.innerWidth > 0) {
        window_width = window.innerWidth;
      } else {
        window_width = screen.width;
      }

       if (window_width < 981) {
        var percent = window_width / view_w;
        view_w = window_width;
        view_h = percent * view_h;
      }

      function onLive(sDomainURL, test) {
        var ret;
        var obj = document.getElementById(test);
        obj.Author('admin', 'admin');
        obj.SetDateFormat(0);
        obj.SingleAudio = 0;
        obj.VideoPath = channel_s;
        obj.UnderScan = 1;
        obj.ROILEFT = 0;
        obj.ROITOP = 0;
        obj.ROIRIGHT = 0;
        obj.ROIBOTTOM = 0;

        //var bSuccess = obj.CheckInitState;
        //if (bSuccess == 0) {
        //	setTimeout("onLive();", 1000);
        //	return;
        //}
        obj.LivePlay(sDomainURL, sDomainPort, sDomainPort, 0);
      }

      function closeActiveX(test) {
        var obj = document.getElementById(test);
        obj.CloseActiveX();
      }

      document.write('<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="' + view_w + '" height="' + view_h + '"> ');
      document.write('<img id="camera" width="' + view_w + '" height="' + view_h + '" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..."</img>');
      document.write('</object>');
    </script>
  </div>

  <div id="operationButtonContainer">
    <a id="btnMoveUp" unselectable="on" class="operationButton">Heben</a>
    <a id="btnStartStop" unselectable="on" class="operationButton">Start</a>
    <a id="btnMoveDown" unselectable="on" class="operationButton">Senken</br></a>
    <div id="circleDiv">
      <div id="lifeCircle" class="greenCircle"></div>
    </div>
    <a id="btnBack" unselectable="on" class="operationButton" href="index.html">Zur&uuml;ck</a>
  </div>
  <div class="clearBoth"></div>
</div>

The buttons are missing. And the code is wrong, I pressed on the page rightclick -> Show Code, and the code on the page is:

<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="900" height="675"> <img id="camera" width="900" height="675" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..."</img></object>

Thats all. The Buttons are missing. What did I wrong? Can anyone help me?

I think the "document.write" replaces all content on the page. Is that what you want? Try to set content to a div instead using: document.getElementById('myDiv').innerHTML = "text"; — arpo
– arpo, Commented Jan 8, 2016 at 7:40
@arpo thanks for the comment. Your idea was correct! Write an answer, I will mark it as solution then. — MyNewName
– MyNewName, Commented Jan 8, 2016 at 9:18

arpo · Accepted Answer · 2016-01-08 09:27:13Z

1

"document.write" replaces all content on the page. Use document.getElementById('myDiv').innerHTML = "text"; instead. Like this:

<div id="myDiv"></div>

<script type="text/javascript">
    var code =  '<object id="LiveShow1" classid="clsid:f9bf64a0-5a65-43e0-acdb-b223e7f9ddd9" CODEBASE="WEBWATCH2.cab#version=1,2,5,24" width="\' + view_w + \'" height="\' + view_h + \'">' +
                '   <img id="camera" width="\' + view_w + \'" height="\' + view_h + \'" src="http://192.168.1.195/GetData.cgi?CH=1" alt="Die Verbindung wurde unterbrochen. Bitte warten..." </img>\'' +
                '</object>';
    document.getElementById('myDiv').innerHTML = code;
</script>

answered Jan 8, 2016 at 9:27

arpo

1,9392 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change html content with javascript missing content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related