diff options
| -rw-r--r-- | css/print.css | 24 | ||||
| -rw-r--r-- | js/print.js | 18 | ||||
| -rw-r--r-- | print.html | 11 |
3 files changed, 45 insertions, 8 deletions
diff --git a/css/print.css b/css/print.css new file mode 100644 index 0000000..e71a0ae --- /dev/null +++ b/css/print.css @@ -0,0 +1,24 @@ +#page { + width: 800px; + + +} + +#camImage { + position: absolute; + top: 0px; + left: 0px; +} + +#metaContainer { + position: absolute; + top: 0px; + left: 700px; +} + +#textContainer { + position: absolute; + top: 500px; + left: 0px; + +} diff --git a/js/print.js b/js/print.js index 1dfa576..7375047 100644 --- a/js/print.js +++ b/js/print.js @@ -11,6 +11,9 @@ // // This Software is licensed under the GPL Version 3, 29 June 2007 +var popen = '<p id="text">', + pclose = '</p>'; + //create event which is triggered when DOM is ready window.onDomReady = initReady; @@ -28,7 +31,8 @@ function initViewer() { //load contents from localStorage var display = document.getElementById("camImage"), - page = document.getElementById("page"), + meta = document.getElementById("metaContainer"), + text = document.getElementById("textContainer"), formName = localStorage.getItem("formName"), formDate = localStorage.getItem("formDate"), formAnalysis1 = localStorage.getItem("formAnalysis1"), @@ -43,12 +47,12 @@ function initViewer() { //display loaded data if (stor) { display.setAttribute("src", stor); - page.innerHTML += '<p>' + formName + '</p>'; - page.innerHTML += '<p>' + formDate + '</p>'; - page.innerHTML += '<p>Kamera ' + camera + '</p>'; - page.innerHTML += '<p>' + formAnalysis1 + '</p>'; - page.innerHTML += '<p>' + formAnalysis2 + '</p>'; - page.innerHTML += '<p>' + formAnalysis3 + '</p>'; + meta.innerHTML += popen + formName + pclose; + meta.innerHTML += popen + formDate + pclose; + meta.innerHTML += popen + 'Kamera ' + camera + pclose; + text.innerHTML += popen + formAnalysis1 + pclose; + text.innerHTML += popen + formAnalysis2 + pclose; + text.innerHTML += popen + formAnalysis3 + pclose; } //commented out for debugging and layouting purposes @@ -2,12 +2,21 @@ <head> <script src="js/print.js" type="text/javascript"></script> + <link rel="stylesheet" type="text/css" href="css/print.css"> </head> <body> <div id="page"> - <img src="about:blank" id="camImage"> + <div id="imageContainer"> + <img src="about:blank" id="camImage"> + </div> + <div id="metaContainer"> + + </div> + <div id="textContainer"> + + </div> </div> |