May 9, 20242 yr 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.
May 10, 20242 yr Author 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.
May 10, 20242 yr 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
May 10, 20242 yr Author I don't follow. What HTTML do you mean? If I remove the html tags, it displays the code as literal text.
May 10, 20242 yr 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>
May 10, 20242 yr 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?
May 14, 20242 yr Code in .page (next to ---) is directly included in page body. So don't add <html>, <head> and <body> tags in your code.
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.