SerenityNetworks Posted March 13, 2015 Share Posted March 13, 2015 (edited) The following page works fine (for the functionalities finished so far). BUT when I move one input tag from the top of a table to the middle of the same table it ceases to work. I can't figure it out. For a nice layout I need to move the input tag. (See comments in code, lines 99 & 146, for where it works and where it needs to appear.) Any help on getting it to function in the proper place will be greatly appreciated. Thanks in advance, Andrew <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Review</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family:Arial, Helvetica, sans-serif;}/* STYLES FOR THE JSON TABLE */table { border: 1px solid #666; width: 100%;}th { background: #f8f8f8; font-weight: bold; padding: 2px;}/* END OF STYLES FOR THE JSON TABLE *//* VIDEO STYLES */.info { background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.error { background-color: red; color: white; font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle1 { font-family: Arial, Helvetica, sans-serif; font-size: small;}.myStyle2 { font-size: small;}/* END OF VIDEO STYLES *//* START OF SKEW STYLES */ div.transbox { width: 1px; height: 1px; } div.transbox p { position:fixed; margin-left: 1px; width: 1px; height: 1px; background-color:yellow; opacity:0.01; /* filter: alpha(opacity=40); */ /* For IE8 and earlier */ /* ms-transform: skew(20deg,10deg); *//* IE 9 */ /* webkit-transform: skew(20deg,10deg); *//* Safari */ transform: skew(0.1deg,0.1deg); /* Standard syntax */ }/* END OF SKEW STYLES */</style></head><body onkeypress="mainFunction(event)"> <div id="title" class="myStyle2">Fagan Consulting - Lane Audit Tool</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td colspan="3"> <div style="text-align:center"> <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> <input type="file" accept="video/*"/> <!-- INPUT WORKS FINE HERE, BUT I WANT IT APPEARING WHERE INDICATED BELOW !!! --> <span id="message" visible="false"></span> <br/> <button onclick="sizer(50)" class="myStyle1">Smallest</button> <button onclick="sizer(75)" class="myStyle1">Smaller</button> <button onclick="sizer(100)" class="myStyle1">Normal</button> <button onclick="sizer(150)" class="myStyle1">Larger</button> <button onclick="sizer(200)" class="myStyle1">Largest</button> <br class="myStyle1"/> <span class="myStyle1">Playback Speeds: </span> <button onclick="speed(0.10)" class="myStyle1">10%</button> <button onclick="speed(0.25)" class="myStyle1">25%</button> <button onclick="speed(0.50)" class="myStyle1">50%</button> <button onclick="speed(0.75)" class="myStyle1">75%</button> <button onclick="speed(1.00)" class="myStyle1">100%</button> <button onclick="speed(1.25)" class="myStyle1">125%</button> <button onclick="speed(1.50)" class="myStyle1">150%</button> <button onclick="speed(1.75)" class="myStyle1">175%</button> <button onclick="speed(2.00)" class="myStyle1">200%</button> <button onclick="speed(4.00)" class="myStyle1">400%</button> <br class="myStyle1"/> <span class="myStyle1">Set Time: </span> <button onclick="timeValue('txt1')">Manual</button> <input type="text" name="txt1" size="4" value="1" id="txt1"/> <button onclick="timeStart()" class="myStyle1">Start</button> <button onclick="timechange(-10)" class="myStyle1">-10</button> <button onclick="timechange(-8)" class="myStyle1">-8</button> <button onclick="timechange(-6)" class="myStyle1">-6</button> <button onclick="timechange(-4)" class="myStyle1">-4</button> <button onclick="timechange(-2)" class="myStyle1">-2</button> <button onclick="timechange(2)" class="myStyle1">+2</button> <button onclick="timechange(4)" class="myStyle1">+4</button> <button onclick="timechange(6)" class="myStyle1">+6</button> <button onclick="timechange(8)" class="myStyle1">+8</button> <button onclick="timechange(10)" class="myStyle1">+10</button> <button onclick="timeEnd()" class="myStyle1">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="2" id="txt2"/> </div> <br/> </td> </tr> <tr align="center"> <td align="center" valign="top"><!-- ============== VIDEO ============== --> <div> <button onclick="playPause()">Play/Pause</button> <button onclick="muteUnmute()" type="button">Mute/Unmute</button> <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> <input type="file" accept="video/*"/> <!-- INPUT DOES NOT WORK WHEN PLACED HERE! WHY? THIS IS WHERE I WANT IT. ?????? --> <span id="message"></span> <br/> </div> <video id="video" controls class="myStyle1"></video><span class="myStyle1"> </span> </td> <td align="center" valign="top"><!-- ============== KEYPRESS LOG ============== --> <button onclick="toggleLogDisplay();" id="buttonText01">Hide the Log</button> <button onclick="toggleLogButton(event);" id="buttonText02">Start Logging Keystrokes</button> <input type="button" value="Clear the Log" onclick="javascript:eraseText();"/><br/> <p id="toggleLog">Press ESC to start logging or use one of the buttons below.</p> <textarea id='myTextArea' align="left" style="height:400px;width:300px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"></textarea> </td> <td align="center" valign="top"><!-- ================ JSON =============== --> <button onclick="getDataFile();" id="id04" class="myStyle2">Select Data File</button><br/><br/> <div align="center" style="height:380px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"> <div id="id01" align="center"></div> </div> </td> </tr> <tr align="center"> <td colspan="3"> <div> <span class="myStyle1">[Current Playback Speed: <span id="speed"></span>] </span> <button onclick="speed(vvid.playbackRate-0.1)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds" class="myStyle2"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds" class="myStyle2">II</button> <button onclick="forwardIt(this)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speed(vvid.playbackRate+0.1)" id="speeds" class="myStyle2"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> <span class="myStyle1"> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </span> </div> </td> </tr> </table><!-- BELOW IS THE AREA SET UP FOR THE SKEW --> <div class="transbox"> <p> </p><!--This is the element that is overlayed with the transparency.--> </div> <br/><br/><table style="width: 300"> <tr><td colspan="2">Update values to modify lane highlight overlay.</td></tr> <tr><td>Mask Color</td><td><input type="text" id="MaskColor" value="yellow"/></td></tr> <tr><td>Left Margin</td><td><input type="text" id="MarginLeft" value="250"/></td></tr> <tr><td>Top Margin</td><td><input type="text" id="MarginTop" value="-425"/></td></tr> <tr><td>Opacity</td><td><input type="text" id="Opacity" value="0.75"/></td></tr> <tr><td>Skew</td><td><input type="text" id="Skew" value="105"/></td></tr> <tr><td>Width</td><td><input type="text" id="Width" value="15"/></td></tr> <tr><td>Height</td><td><input type="text" id="Height" value="150"/></td></tr> <tr><td colspan="2"><button onclick="myFunction01()">Change Values</button></td></tr></table><br/><br/><br/><p id="d01" style="color:white;"><font color="white"></font></p><!--Need a placeholder for the skew variables, but making it white so it doesn't show on screen.--><!-- ABOVE IS THE AREA SET UP FOR THE SKEW --><!-- ---------- JAVASCRIPT ------------ --><script>// ------------ ON LOAD ------------ toggleLogDisplay();//initializes the toggle value, so next time the function will work (to hide the field) //vvid.currentTime=0; //vvid.pause(); //muteUnmute();//okay outside of on-load var loggingEnabled = false;// ---------- VIDEO LOADER ---------- (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); muteUnmute(); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); var message = 'Ability to play video (type) "' + type + '": ' + canPlay; var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false);}(window));// ------------ MAIN VARIABLES ------------ var vvid = document.getElementById("video"); // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) vvid.play(); else vvid.pause(); } // ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true;}// ------------ RESIZE VIDEO ------------ function sizer(val) { vvid.width = 720*val/100; } // ------------ PLAYBACK SPEED ------------ function speed(val) { vvid.playbackRate = val;} // ------------ SET TIME POSITION ------------ function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeEnd() { vvid.currentTime=vvid.duration;}function timeValue() { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timechange(val) { vvid.currentTime=vvid.currentTime+val; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunctionP()}; function myFunctionP() { // Display the current position of the video in an element with id="elapsed" document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2); document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); }/* THE CODE BELOW IS USED TO MANAGE THE SKEW VARIABLES */function setStyle(cssText) { var sheet = document.createElement('style'); sheet.type = 'text/css'; /* Optional */ window.customSheet = sheet; (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet); return (setStyle = function(cssText, node) { if(!node || node.parentNode !== sheet) return sheet.appendChild(document.createTextNode(cssText)); node.nodeValue = cssText; return node; })(cssText);};function myFunction01() { var mF01 = document.getElementById("MaskColor").value; document.getElementById("d01").innerHTML = mF01; setStyle('div.transbox p{ background-color:'+mF01+'; }', setStyle('div.transbox p{}')); // Replaces the previous CSS with this one var mF02 = document.getElementById("MarginLeft").value; document.getElementById("d01").innerHTML = mF02; setStyle('div.transbox p{ margin-left:'+mF02+'px; }', setStyle('div.transbox p{}')); var mF03 = document.getElementById("MarginTop").value; document.getElementById("d01").innerHTML = mF03; setStyle('div.transbox p{ margin-top:'+mF03+'px; }', setStyle('div.transbox{} p')); var mF04 = document.getElementById("Opacity").value; document.getElementById("d01").innerHTML = mF04; setStyle('div.transbox p{ opacity:'+mF04+'; }', setStyle('div.transbox p{}')); var mF05 = document.getElementById("Skew").value; document.getElementById("d01").innerHTML = mF05; setStyle('div.transbox p{ transform:skew('+mF05+'deg,0.1deg); }', setStyle('div.transbox p{}')); var mF06 = document.getElementById("Width").value; document.getElementById("d01").innerHTML = mF06; setStyle('div.transbox p{ width:'+mF06+'px; }', setStyle('div.transbox p{}')); var mF07 = document.getElementById("Height").value; document.getElementById("d01").innerHTML = mF07; setStyle('div.transbox p{ height:'+mF07+'px; }', setStyle('div.transbox p{}'));};/* THE CODE ABOVE IS USED TO MANAGE THE SKEW VARIABLES */ /* THE CODE BELOW IS USED TO MANAGE THE JSON IMPORT */ var xmlhttp = new XMLHttpRequest();var url2 = "85A-28507-21.txt";function getDataFile() { alert("Right now this doesn't do anything. Once coded it will allow the user to browse and select the data file to view."); document.getElementById("id04").innerHTML = url2; }xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}xmlhttp.open("GET", url2, true);xmlhttp.send();function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<tr><td><input type="checkbox"></td><td>' + arr[i].time + '</td><td>' + arr[i].text + '</td></tr>'; } document.getElementById("id01").innerHTML = '<table><tr><th>Mark</th><th>Time</th><th>Data</th></tr>' + out + '</table>';}/* THE CODE ABOVE IS USED TO MANAGE THE JSON IMPORT */ /* THE CODE BELOW IS USED TO MANAGE THE KEY PRESS LOGGING */ function eraseText() { document.getElementById("myTextArea").value = "";//function to clear the log field}function mainFunction(event) { var kp1 = event.which || event.keyCode;//returns the unicode number if (kp1 == 27){//escape key to disable loggingEnabled = !loggingEnabled; var bt3; bt3 = loggingEnabled; if (bt3 == true) {bt3 = "Disable Logging";} else {bt3 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt3; } if (!loggingEnabled){ return; } //following lines populate the log if (kp1 == 1||kp1 == 27) {kp2 = "START";} else {var kp2 = String.fromCharCode(kp1);}//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("toggleLog").innerHTML = "Logging enabled. Last key: " + kp2 + " at " + d; document.getElementById("myTextArea").value += kp2 + " | " + d + " | " + "n"; }function toggleLogButton(event){//this function enables or disables the keypress logging var bt2; bt2 = loggingEnabled; loggingEnabled = !loggingEnabled; bt2 = loggingEnabled if (bt2 == true) {bt2 = "Disable Logging";} else {bt2 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt2; mainFunction(event); }function toggleLogDisplay(event){//this function hides or shows the log TextArea var el1 = document.getElementById('myTextArea'); var style = el1.style.display; var bt1; el1.style.display = style == "block" ? "none" : "block"; if (style == "none"||style == "") {bt1 = "Hide the Log";} else {bt1 = "Display the Log";} document.getElementById("buttonText01").innerHTML = bt1; //event.preventDefault();//we don't want the browsers default link behavior - uncomment if using a hyperlink for a trigger instead of a button}/* THE CODE ABOVE IS USED TO MANAGE THE KEY PRESS LOGGING */ </script></body></html> Edited March 13, 2015 by SerenityNetworks Link to comment Share on other sites More sharing options...
justsomeguy Posted March 13, 2015 Share Posted March 13, 2015 I don't see any reason why moving that would break anything. Are you checking for Javascript errors? Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 13, 2015 Author Share Posted March 13, 2015 No, I'm not checking for JS errors. How would I go about doing that? Link to comment Share on other sites More sharing options...
thescientist Posted March 13, 2015 Share Posted March 13, 2015 what browser are you using? Every modern day browser comes with a set of development tools for viewing network requests made by the page, assets loaded, cookies, and a javascript error console (amongst other features). Look at justsomeguy's signature, he has links for the popular browsers. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 13, 2015 Author Share Posted March 13, 2015 Firefox. Thanks. I'll take a look at the console. Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 13, 2015 Author Share Posted March 13, 2015 Some html style issues, but no js unless I'm reading it wrong. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now