Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Everything posted by vmars316

  1. Aha...Upon further study , its not as magical as I originally thought . This ' /\s/g, ' must be 'RegularExpression' . I havent learned that yet .
  2. Thanks Inglome , Wow! Look what I found: I was expecting to find an 'executejavascript' in there but no such thing . What do you think of this ? <!doctype html> <!--Bhaskar Tiwari--> <html> <head> <meta charset="utf-8"> <title>Web Editor</title> </head> <body> <table> <tr> <td> <div class="tag">HTML (Body)</div> <div id="html" class="content" contenteditable></div> </td> <td> <div class="tag">CSS</div> <div id="css" class="content" contenteditable></div> </td> </tr> <tr> <td> <div class="tag">JavaScript</div> <div id="js" class="content" contenteditable></div> </td> <td> <div class="tag">Output</div> <iframe id="output"></iframe> </td> </tr> </table> </body> </html> <script> window.onload=function(){ var html=document.getElementById("html"), css=document.getElementById("css"), js=document.getElementById("js"), output=document.getElementById("output"), working=false, fill=function(){ if(working){ return false; } working=true; var document=output.contentDocument, style=document.createElement("style"), script=document.createElement("script"); document.body.innerHTML=html.textContent; style.innerHTML=css.textContent.replace(/\s/g,""); script.innerHTML=js.textContent; document.body.appendChild(style); document.body.appendChild(script); working=false; }; html.onkeyup=fill; css.onkeyup=fill; js.onkeyup=fill; } </script> <style> html,body,table,div.content,iframe{ border:0; height:100%; margin:0; padding:0; width:100%; } td{ border:2px solid black; height:50%; padding:25px 5px 5px 5px; position:relative; vertical-align:top; width:50%; } div.tag{ position:absolute; right:5px; top:5px; } </style>
  3. I made iframe editable , but still cant get x into it (or anywhere else) . Curses: Why can x show in alert but not anywhere else ? Any ideas ? <!DOCTYPE html> <html> <head> <style> </style> </head> <body contenteditable="true" > <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 400px; height: 400px; border: 2px solid green;"> <iframe src="" style="width: 300px; height: 300px; border: 3px solid red;" id="iframe"> asdf </iframe> . </div> <script> window.onload = function(){ var frameElement = document.getElementById("iframe"); var doc = frameElement.contentDocument; doc.body.contentEditable = true; } let x; function myFunction() { x = document.documentElement.outerHTML ; alert(x); document.getElementById("iframe").innerHTML = x; }</script> </body> </html>
  4. Thanks Hmm... That's interesting . How did you manage to get the printout for "This is the document after you doubleclick: ? Programmatically ? I think I'll try if I can pop it into an iframe ? ?
  5. Thanks , Sorry I didn't explain whats happening : ondblclick: alert() works fine . but 'document.getElementById("div1").innerHTML = x;' doesnt update 'div1' Instead looks like the green border gets duplicated at each doubleclick , it grows and grows . What would cause that ? <!DOCTYPE html> <html> <body> <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;"> You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick .. </div> <script> let x; function myFunction() { x = document.documentElement.outerHTML ; alert(x); document.getElementById("div1").innerHTML = x; } </script> </body> </html>
  6. Greetings , Having trouble with: document.documentElement.outerHTML In particular this line: document.getElementById("div1").innerHTML = x; How can this be fixed ? <!DOCTYPE html> <html> <body> <div id="div1" ondblclick="myFunction()" contenteditable="true" style="width: 300px; height: 400px; border: 2px solid green;"> You can Click me once . then edit me ..or.. <br>take a chance on DoubleClick .. </div> <script> let x = document.documentElement.outerHTML function myFunction() { alert(x); document.getElementById("div1").innerHTML = x; } </script> </body> </html> Thanks for your help...
  7. I ended up going with below , so that I could see the before and after . <!DOCTYPE html> <html> <head> <script> document.addEventListener("DOMContentLoaded", () => { alert("DOM ready! Hit F12 to Open DevTools"); }); </script> <script> function ATargetHtmlOne() { // Declare Target inside the function to guarantee that the list of links is up to date let Target = document.getElementsByTagName('A'); console.log("Target.length = " , Target.length) for (var i = 0; i < Target.length; i++) { console.log("Target = ", Target[i]); } alert('End of: ATargetHtmlOne()') } function ATargetHtmlTwo() { let Target = document.getElementsByTagName('A'); for (var i = 0; i < Target.length; i++) { console.log("Target = ", Target[i]); if (Target[i].hasAttribute("target")) { Target[i].setAttribute("target", "_self"); } } alert('End of: ATargetHtmlTwo()') } </script> </head> <body> <h3> Accessing HTML 'a' of a DOM element in JavaScript . </h3> <h4> <a href="file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value.html" target="_blank">file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value.html</a> </h4> <h4><a href="file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value-iframe.html" target="_blank">file:///C:/EXPERIMANTAL/Change-Html-A-Target-Value-iframe.html</a> </h4> <h4><a href="file:///C:/EXPERIMANTAL/Write-To-iframe.html" target="_blank">file:///C:/EXPERIMANTAL/Write-To-iframe.html</a> </h4> <p> <a href="https://www.w3schools.com" target="_blank"></a>1 Visit W3Schools.com</a> <br> <a href="https://www.w3schools.com" target="_top"></a>2 Visit W3Schools.com</a> <br> <a href="https://www.w3schools.com" target="_self"></a>3 Visit W3Schools.com</a> </p> <body> <button onclick="ATargetHtmlOne()">function ATargetHtmlOne()</button> <br> <button onclick="ATargetHtmlTwo()">function ATargetHtmlTwo()</button> <br> <div id="div" style="border: solid 2px; height: 250px; width: 400px;"></div> </body> </html> Thanks
  8. Sorry about that , seems like the older I get , the thicker I get . I have trouble with reading , then applying . So generally what I do is work backwards , starting with example , then look up each piece , to understand what's going on and why . So, I greatly appreciate your code : )
  9. Greetings , I am having a problem with this script . Getting errors: let Target = document.getElementsByTagName('A'); Change-Html-A-Target-Value.html:34 Target = undefined Change-Html-A-Target-Value.html:37 Uncaught TypeError: i.hasAttribute is not a function at ATargetHtml (Change-Html-A-Target-Value.html:37) at HTMLButtonElement.onclick (Change-Html-A-Target-Value.html:26) <!DOCTYPE html> <html> <head> <title> How to get/change the HTML with DOM element in JavaScript? </title> </head> <body> <h3> Accessing HTML <a> of a DOM element in JavaScript . </h3> <p> <a href="https://www.w3schools.com" target="_blank"></a>1 Visit W3Schools.com</a> <br> <a href="https://www.w3schools.com target="_top"></a>2 Visit W3Schools.com</a> <br> <a href="https://www.w3schools.com target="_self"></a>3 Visit W3Schools.com</a> </p> <button onclick="ATargetHtml()"> Get and change the html for DOM element </button> <script> let Target = document.getElementsByTagName('A'); console.log(" let Target = document.getElementsByTagName('A');") function ATargetHtml() { console.log("Target = " + Target[i]); for (var i = 0; i < Target.length; i++) { if (i.hasAttribute("target")) { i.setAttribute("target", "_self"); } } } </script> </body> </html> Pls , what am I doing wrong ? : ( Thank you...
  10. preload.js ipcRenderer.on('Send-url', url => { console.log('2 url = ' + url) document.getElementById("url").value = url ; console.log('2 url = ' + url) }) main.js view.webContents.on('did-start-navigation', (event, url) => { console.log("2 main.js 'did-start-navigation' = " + url) win.webContents.send('Send-url', url) ; }) // 'did-start-navigation' https://gist.github.com/58b504c9cd156eacb71dbfe4238a3066
  11. Greetings , How to pass a value rather than object ? main.js (sends a msg to renderer.js) view.webContents.on('did-start-navigation', (event, url) => { console.log("2 main.js 'did-start-navigation' = " + url) win.webContents.send('Send-url', url) ; }) // 'did-start-navigation' preload.js (receives message from main.js , them preload.js plugs message into id="url") ipcRenderer.on('Send-url', holdUrl => { document.getElementById("url").value = holdUrl; console.log('2 holdUrl = ' + holdUrl) }) index.html <input id="url" type="url" value="https://google.com"/> But what gets plugged into <input> is this: '[object Object]' How do I pass a value , not an object ? Thanks
  12. Hello , Is there a difference between the results of these scripts syntax ? <script src="renderer.js"></script> <script> src="./renderer.js"> </script> Thanks
  13. Yes , old school . But the <body style="font-size:16px"> Ends up displaying smaller that 16px . Even if I specify 20px , it is still too small , more like 12px . How come ? Thanks
  14. Hello , I am having a problem with <body style="font-size:16px"> , getting text size enforced throughout the page . How can I fix this ? Thanks <!-- saved from url=(0039)http://www.soulreach.org/wcf/wcf12.html file:///C:/WCF/WCF-Chapter-12-PROBLEM.html --> <!DOCTYPE> <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>WCF Chapter 12</title> <!-- HTML by Stephen Pribble --> </head> <body style="font-size:16px"> <blockquote><center><b><font color="#800080" size="+2"><big>W</big>ESTMINSTER <big>C</big>ONFESSION OF <big>F</big>AITH</font></b><br> <h3>CHAPTER XII<br> <i>Of Adoption</i></h3></center> <p align="LEFT"><b>I. All those that are justified, God vouchsafeth, in and for his only Son Jesus Christ, to make partakers of the grace of adoption,<a name="RETURN1"></a><a href="#NOTE1">[1]</a>&nbsp;&nbsp;&nbsp; by which they are taken into the number, and enjoy the liberties and privileges of the children of God,<a name="RETURN2"></a><a href="#NOTE2">[2]</a>&nbsp;&nbsp;&nbsp; have his name put upon them,<a name="RETURN3"></a><a href="#NOTE3">[3]</a>&nbsp;&nbsp;&nbsp; receive the Spirit of adoption,<a name="RETURN4"></a><a href="#NOTE4">[4]</a>&nbsp;&nbsp;&nbsp; have access to the throne of grace with boldness,<a name="RETURN5"></a><a href="#NOTE5">[5]</a>&nbsp;&nbsp;&nbsp; are enabled to cry, Abba, Father,<a name="RETURN6"></a><a href="#NOTE6">[6]</a>&nbsp;&nbsp;&nbsp; are pitied,<a name="RETURN7"></a><a href="#NOTE7">[7]</a>&nbsp;&nbsp;&nbsp; protected,<a name="RETURN8"></a><a href="#NOTE8">[8]</a>&nbsp;&nbsp;&nbsp; provided for,<a name="RETURN9"></a><a href="#NOTE9">[9]</a>&nbsp;&nbsp;&nbsp; and chastened by him, as by a father:<a name="RETURN10"></a><a href="#NOTE10">[10]</a>&nbsp;&nbsp;&nbsp; yet never cast off,<a name="RETURN11"></a><a href="#NOTE11">[11]</a>&nbsp;&nbsp;&nbsp; but sealed to the day of redemption;<a name="RETURN12"></a><a href="#NOTE12">[12]</a>&nbsp;&nbsp;&nbsp; and inherit the promises,<a name="RETURN13"></a><a href="#NOTE13">[13]</a>&nbsp;&nbsp;&nbsp; as heirs of everlasting salvation.<a name="RETURN14"></a><a href="#NOTE14">[14]</a>&nbsp;&nbsp;&nbsp; </b> <br> <hr width="60%"><center>| <a href="http://www.soulreach.org/wcf/wcf11.html">Back</a> | <a href="http://www.soulreach.org/wcf/WCF_chapters.html">WCF Index</a> | <a href="http://www.soulreach.org/wcf/wcf13.html">Next</a> |</center></blockquote></body></html>
  15. Hello , 1) In webpage: if I don't specify a font-size , what is Default font-size ? (msEdge & Chrome) 2) In Browser settings: if I do specify a font-size of Medium, what is Default font-size ? (msEdge & Chrome) Thanks
  16. Thanks dsonesuk , I am still working this thru .
  17. Thanks , The images code is working great , but audio and video are not showing the <div class="hideDiv"> code . Any ideas ?
  18. Thanks , The hover is working , but the display: inline; is not working . Any idea why ? Thanks
  19. Thanks , Yes , I see that . I have written a program that builds a very simple webpage of all images in a Folder . It looks like this There is a program option to stack images vertically (as above) or display images horizontally . Is there a way to 'show img src= on hover' without using <div> ? <div> would destroy page formatting . Thanks
  20. Hello , I see this code Couldn't get the Code "&lt; &gt;" working so I'll try Quote . Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover Is it possible to show img src= on hover ? Thanks
  21. With console.log(allTags[2]) I was expecting to get the 3rd <a> . Why do I get undefined ? <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1"></iframe> <script> var iframe1 = [] ; var allTags = [] ; iframe1 = document.querySelector("iframe"); console.log(iframe1) var allTags= iframe1.contentDocument.querySelectorAll("a"); //document.querySelectorAll("a"); console.log(allTags) console.log(allTags[2]) </script>
  22. Hmm... I don't understand , why does the Console show "#document" ? What does it represent ? <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1"> #document <!DOCTYPE html> This doesn't work either ? <script> var iframe1 = [] iframe1 = document.querySelector("iframe1"); console.log(iframe1) var allTags= iframe1.contentWindow.querySelectorAll("a"); console.log(allTags) //for(let i of allTags){i.callMethod} </script> This var allTags= iframe1.contentWindow.querySelectorAll("a"); gives this error: Uncaught TypeError: Cannot read property 'contentWindow' of null
  23. Are you sure ? Hmm... Making headway , showing iframe elements But I'm still not collecting allTags . Node list is still showing 0 , don't know why . Code: ``` const load = () => { //var iframe1 = document.querySelector(“iframe1”).contentWindow.document; var iframe1 = document.getElementById('iframe1') console.log("iframe1"); console.log(iframe1); var allTags= iframe1.querySelectorAll("a"); console.log("allTags"); console.log(allTags); function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } console.log("for(let i of allTags){1}") for(let i of allTags){ i.addEventListener('click', WhichLinkWasClicked) console.log("for(let i of allTags){2}") console.log(i.allTags) ; } } document.addEventListener('DOMContentLoaded', load); ``` Console: ``` <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1">#document <!DOCTYPE html> <html lang="en"> <head>… </head> <body> <h1 style="text-align: center">01 Same-Domain , Same Folder </h1> <br> <br> <a href="SomeLocalLinks-01.html">SomeLocalLinks-01 </a> <br> <br> <a href="SomeLocalLinks-02.html">SomeLocalLinks-02 </a> <br> <br> <a href="SomeLocalLinks-03.html">SomeLocalLinks-03 </a> <br> <br> <a href="SomeLocalLinks-04.html">SomeLocalLinks-04 </a> <br> <br> </body> </html>
×
×
  • Create New...