bobbintb Posted May 9 Share Posted May 9 I am working on a plugin. I have some HTML in the page file and some Javascript between some `script` tags. PHP converts `if (height < 0)` to `if (height < 0)` for some reason and it breaks things. If I use PHP tags and echo it, it will work but that's really a work around. Any idea why this is happening and how to fix it? The page file doesn't even contain any PHP, it's strictly HTML. Quote Link to comment
SimonF Posted May 9 Share Posted May 9 Can you post the page fi!e or attach? And will take a look tomorrow. Quote Link to comment
bobbintb Posted May 10 Author Share Posted May 10 Menu="Utilities" Title="Fan Auto Control" Icon="dynamix.system.autofan.png" --- <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/Common.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/resizer.js"></script> <style> .element { border: 1px solid #999999; border-radius: 4px; margin: 5px; padding: 5px; } </style> <script type="text/javascript"> function onresize() { var element1 = document.getElementById("element1"); var element2 = document.getElementById("element2"); var element3 = document.getElementById("element3"); var ResizerY = document.getElementById("resizerY"); ResizerY.style.top = element3.offsetTop - 15 + "px"; var topElements = document.getElementById("topElements"); topElements.style.height = ResizerY.offsetTop - 20 + "px"; var height = topElements.clientHeight - 32; if (height <?='<'?> 0) height = 0; height += 'px'; element1.style.height = height; element2.style.height = height; } function resizeX(x) { var element2 = document.getElementById("element2"); element2.style.width = element2.parentElement.clientWidth + document.getElementById('rezizeArea').offsetLeft - x + 'px'; } function resizeY(y) { var element3 = document.getElementById("element3"); var height = element3.parentElement.clientHeight + document.getElementById('rezizeArea').offsetTop - y ; if ((height + 100) > element3.parentElement.clientHeight) return; element3.style.height = height + 'px'; onresize(); } var emailSubject = "Resizer example error"; </script> </head> <body> <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element"> <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;"> <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;"> Element 2 <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div> <script type="text/javascript"> resizerXY("resizerXY", function (e) { resizeX(e.pageX + 10); resizeY(e.pageY + 50); }); </script> </div> <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div> <script type="text/javascript"> resizerX("resizerX", function (e) { resizeX(e.pageX + 25); }); </script> <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div> </div> <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div> <script type="text/javascript"> resizerY("resizerY", function (e) { resizeY(e.pageY + 25); }); </script> <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div> </div> <script type="text/javascript"> onresize(); </script> </body> </html> Line 29 is the problem area. Quote Link to comment
SimonF Posted May 10 Share Posted May 10 10 hours ago, bobbintb said: Line 29 is the problem area. I think you should be able to remove the html lines. here is an example of one of my page files. https://github.com/SimonFair/WOLforServices/blob/master/src/WOL4Services/usr/local/emhttp/plugins/WOL4Services/WOL.page Quote Link to comment
bobbintb Posted May 10 Author Share Posted May 10 I don't follow. What HTTML do you mean? If I remove the html tags, it displays the code as literal text. Quote Link to comment
SimonF Posted May 10 Share Posted May 10 2 hours ago, bobbintb said: I don't follow. What HTTML do you mean? If I remove the html tags, it displays the code as literal text. I have been able to get it to work, replacing <html> with form. Menu="Utilities" Title="Fan Auto Control" Icon="dynamix.system.autofan.png" --- <?PHP ?> <form> <head> <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/Common.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/anhr/resizer/master/resizer.js"></script> <style> .element { border: 1px solid #999999; border-radius: 4px; margin: 5px; padding: 5px; } </style> <script type="text/javascript"> function onresize() { var element1 = document.getElementById("element1"); var element2 = document.getElementById("element2"); var element3 = document.getElementById("element3"); var ResizerY = document.getElementById("resizerY"); ResizerY.style.top = element3.offsetTop - 15 + "px"; var topElements = document.getElementById("topElements"); topElements.style.height = ResizerY.offsetTop - 20 + "px"; var height = topElements.clientHeight - 32; if (height < 0) height = 0; height += 'px'; element1.style.height = height; element2.style.height = height; } function resizeX(x) { var element2 = document.getElementById("element2"); element2.style.width = element2.parentElement.clientWidth + document.getElementById('rezizeArea').offsetLeft - x + 'px'; } function resizeY(y) { var element3 = document.getElementById("element3"); var height = element3.parentElement.clientHeight + document.getElementById('rezizeArea').offsetTop - y ; if ((height + 100) > element3.parentElement.clientHeight) return; element3.style.height = height + 'px'; onresize(); } var emailSubject = "Resizer example error"; </script> </head> <body> <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element"> <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;"> <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;"> Element 2 <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div> <script type="text/javascript"> resizerXY("resizerXY", function (e) { resizeX(e.pageX + 10); resizeY(e.pageY + 50); }); </script> </div> <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div> <script type="text/javascript"> resizerX("resizerX", function (e) { resizeX(e.pageX + 25); }); </script> <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div> </div> <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div> <script type="text/javascript"> resizerY("resizerY", function (e) { resizeY(e.pageY + 25); }); </script> <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div> </div> <script type="text/javascript"> onresize(); </script> </body> </form> Quote Link to comment
itimpi Posted May 10 Share Posted May 10 Are any of the <html>, <head> or <body> tags needed? Are these not automatically supplied by the Unraid level as part of embedding the .page file into the GUI? Quote Link to comment
Peuuuur Noel Posted May 14 Share Posted May 14 Code in .page (next to ---) is directly included in page body. So don't add <html>, <head> and <body> tags in your code. Quote Link to comment
bobbintb Posted May 22 Author Share Posted May 22 Ah, ok. Got it now. Thanks everyone. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.