Jump to content

vmars316

Members
  • Posts

    435
  • Joined

  • Last visited

Everything posted by vmars316

  1. Thanks , The images code is working great , but audio and video are not showing the <div class="hideDiv"> code . Any ideas ?
  2. Thanks , The hover is working , but the display: inline; is not working . Any idea why ? Thanks
  3. 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
  4. 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
  5. 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>
  6. 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
  7. 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>
  8. Hello , I have an html page with an iframe inside . And I am trying unsuccessfully to querySelect a <a> in the iframe . function Function_1(){ console.log("Function-1()") const iFrame1 = document.querySelector("iFrame"); console.log(iFrame1) const iFrame1Body = iFrame1.Document.querySelector("a") ; console.log(iFrame1Body) } No probs with 'querySelector("iFrame")' . But with 'querySelector("iFrame")' I get error 'Uncaught TypeError: Cannot read property 'querySelector' of undefined' . Pls , what am I doing wrong ? Thanks for your Help...
  9. Yes I am working on it . All day this one has me stumped: This line: const myIframe = document.getE1ementById("myIframe") ; What's wrong with it ? Thanks
  10. This : function Function_1(){ alert("Function-1()") // var showThis = iframe.document.documentElement.outerHTML var myIframe = document.querySelector("iframe"); myIframe = iframe.document.documentElement.outerHTML console.log(myIframe); document.getElementById("paragraph_1").innerHTML = myIframe ; } yields this "ReferenceError: iframe is not defined" This function Function_1(){ alert("Function-1()") // var showThis = iframe.document.documentElement.outerHTML var iframe = document.querySelector("iframe"); iframe = iframe.document.documentElement.outerHTML console.log(iframe); document.getElementById("paragraph_1").innerHTML = iframe ; } yields this: Cannot read property 'documentElement' of undefined
  11. Hello ; I want to show iframe.document in parent html , but I only get an "Uncaught ReferenceError: iframe is not defined" error . Pls , what am I doing wrong ? <!DOCTYPE html> <html lang="en"> <head> <title>Opening Links in an iFrame</title> <style> iframe { width: 100%; height: 500px; } button {display: inline-block;} iframe { width="100%";} </style> </head> <body> <p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements <button onclick="Function_1()">1</button> <button onclick="Function_2()">2</button> <button onclick="Function_3()">3</button> <button onclick="Function_4()">4</button> <p id="paragraph_1"> empty </p> <iframe src="SomeLocalLinks-01.html" name="myFrame"></iframe> <script> var links = myFrame.document.querySelectorAll( 'a' ); for ( var c = 0; c < links.length; c ++ ) { links[c].addEventListener('click', WhichLinkWasClicked); } function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } </script> <script> function Function_1(){ alert("Function-1()") var showThis = iframe.document.documentElement.outerHTML console.log(showThis); document.getElementById("paragraph_1").innerHTML = showThis ; } </script> <script> function Function_2() { alert("Function-2()")} </script> <script> function Function_3(){ alert("Function-3()")} </script> <script> function Function_4(){ alert("Function-4()")} </script> </body></html> Thanks
  12. Hello , How can parent-html detect onNewPage in iframe-html , same-domain ? Here is the Prototype of this scenario online: http://vmars.us/Frames_Study/Which-Open-Links-In-iFrame-Which.html or <!DOCTYPE html> <html lang="en"> <head> <title>Opening Links in an iFrame</title> <style> iframe { width: 100%; height: 500px; } </style> </head> <body> <p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements <br>On <a> Click in 'iframe' , Send Clicked Url to a 'parent' function .</p> <iframe src="SomeLocalLinks-00.html" name="myFrame"></iframe> <script> var links = myFrame.document.querySelectorAll( 'a' ); for ( var c = 0; c < links.length; c ++ ) { links[c].addEventListener('click', WhichLinkWasClicked); } function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <title>Opening Links from an iFrame</title> <style> iframe { width: 100%; height: 500px; } </style> </head> <body> <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> Thanks for your Help...
  13. Hello ; I want to Set font-size for contentEditable grid ; but as soon as I enter text , it reverts to some default size . Pls , how to fix this ? Thanks for your Help... <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!-- https://www.freeformatter.com/html-validator.html --> <style> /* comment */ body { font-size: 16px; } .grid-container { display: grid; grid-gap: 2px; /*grid-gap*/ grid-template-columns: repeat( auto-fill, minmax(120px, 100%) minmax(120px, 100%) ); background-color: peachpuff; /*grid-background-color*/ padding: 4px; /*padding*/ } .grid-container > .div_div{ text-align: left; background-color: rgba(255, 255, 255, 0.8); padding: 4px; } .div_div { resize: vertical; height: 7000px; /textarea-height*/ Width: 100%; } p { text-align: left; } </style> </head> <body> <h5 contenteditable="true" style="text-align: center;" >Generated By Html-Grid-Maker</h5> <!-- comment --> <div contenteditable="true" class="grid-container" style=" class="text-align:left; font-size: 20px; "> <!--contenteditable--> <!-- <div contenteditable="true" class="div_div" style="order: 1;">1</div> --> <div class="div_div"style="order: 1;"><p>Row 1 Col 1</p></div> <div class="div_div"style="order: 2;"><p>Row 1 Col 2</p></div> </div> <br><br> </body> </html>
  14. Hello; I found exactly what I need here: https://gist.github.com/erickzhao/3f2141be4c6d84c3028742b8998e0f6e
  15. Thanks niche I ended using #mainDiv { text-align: center; width: 55%; background-color: #ffffff; padding: 4px; white-space: nowrap; Thanks
  16. Hello; I want to float a <div> so that it is always centered on the webpage . How can I do this ? <style> body { background-color: #ebe8e4; } #flexBox-container { display: flex; flex-wrap: nowrap; background-color: #fbe9d6; text-align: center; // width: 100%; } </style> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <link rel="stylesheet" type="text/css" href="./styles.css"> </head> <body> <div id="flexBox-container"> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="back">Back</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="forward">Forward</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="refresh">Refresh</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="home">Home</button> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <input id="url" style="width: 200px;" type="url" value="http://vmars.us/KidSafeBrowser/"/> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <button id="go">Go</button> </div> <script> // You can also require other files to run in this process require('./renderer.js') </script> </body> </html> Thanks for your Help...
  17. I am not using: How to fix BrowserWindow is not a constructor error when creating child window in Electron renderer process Ask Question. So it is not pertinent to me . I gave these links , just in case you are not proficient with webview/BrowserView in Electron , to give you some context for this question . https://www.electronjs.org/docs/api/webview-tag Recommends not using webview any more . This is the recommended way: https://www.electronjs.org/docs/api/browser-view
  18. Yes it is here: ttps://www.electronjs.org/docs/api/webview-tag
  19. Thanks dsonesuk ; I am using BrowserView not webview , and I am doing it in main.js , not in renderer.js . https://www.electronjs.org/docs/api/webview-tag Recommends not using webview any more . This is the recommended way: https://www.electronjs.org/docs/api/browser-view My whole main.js code: const electron = require("electron") ; const app = electron.app ; const path = require('path') ; const url = require('url') ; const { BrowserView, BrowserWindow } = require('electron') ; app.on('ready', function() { const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true} }) ; const view = new BrowserView( ) ; // {width: 350, height: 350, webPreferences: {nodeIntegration: true} win.setBrowserView(view) ; win.webContents.loadURL("file:///C:/Electron-js/~~KidSafeBrowser-RESTART/index.html") ; win.webContents.openDevTools() // works in same window view.setBounds({ x: 10, y: 40, width: 750 , height: 500 }) ; view.webContents.loadURL('http://vmars.us/KidSafeBrowser/SafeBrowserHome.html') ; } ) ; app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (browserwindow.getAllWindows().length === 0) { createWindow() } }) // _dirname Example: win.loadURL(file://${__dirname}/index.html) //view.webContents.openDevTools() // works but in a separate window
  20. Hello; I am getting error: "Uncaught exception: Type error: BrowserView is not a constructor" ?? on this line: const view = new BrowserView( ) ; in code below ; I can't figure out why , because the line above is basically the same: const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true} }) Thanks const { BrowserView, BrowserWindow } = require('electron') ; app.on('ready', function() { const win = new BrowserWindow( {width: 600, height: 600, webPreferences: {nodeIntegration: true} }) ; const view = new BrowserView( ) ; // {width: 350, height: 350, webPreferences: {nodeIntegration: true} win.setBrowserView(view) ; win.webContents.loadURL("file:///C:/Electron-js/~~KidSafeBrowser-RESTART/index.html") ; win.webContents.openDevTools() // works in same window view.setBounds({ x: 10, y: 40, width: 750 , height: 500 }) ; view.webContents.loadURL('http://vmars.us/KidSafeBrowser/SafeBrowserHome.html') ; } ) ;
  21. It took me a while , but here's the code; <!DOCTYPE html> <html> <head> <title> AddEventListener-For-A-Tag-Stop-Navigation </title> <script> function CreateJsListener() { document.querySelector('a').addEventListener('click', function(event) {Redirect(event) } ) } ; </script> </head> <body onload="CreateJsListener()"> <a href="https://www.google.com"> https://www.google.com </a> <script> var timesThru = 0 ; function Redirect(event) { event.preventDefault() ; window.open("NOT-A-SafeSite.html"); timesThru = timesThru + 1 ; } </script> </body> </html> <!DOCTYPE html> <html> <head> <title> NOT-A-SafeSite.html </title> </head> <body> <h4> The Link you clicked on is <span style="color: red">UNSAFE !</span> &nbsp; ....Navigation CANCELED. </h4> </body> </html> Thank you
  22. Ah..... Finally; <!DOCTYPE html> <html> <head> <title> AddEventListener-For-A-Tag-Stop-Navigation </title> <script> function CreateJsListener() { document.querySelector('a').addEventListener('click', function(event) {Redirect(event) } ) } ; </script> </head> <body onload="CreateJsListener()"> <a href="https://www.google.com"> https://www.google.com </a> <script> var timesThru = 0 ; function Redirect(event) { event.preventDefault() ; window.open("NOT-A-SafeSite.html"); timesThru = timesThru + 1 ; } </script> </body> </html> <!DOCTYPE html> <html> <head> <title> NOT-A-SafeSite.html </title> </head> <body> <h4> The Link you clicked on is <span style="color: red">UNSAFE !</span> &nbsp; ....Navigation CANCELED. </h4> </body> </html> Thank you
  23. Thanks ishan_shah ; I had tried this: window.open('https://www.duckduckgo.com' ; 'target= "_blank" ') But couldn't find the proper format . Turns out my code above doesn't work , but this works except for one issue: <!DOCTYPE html> <html> <head> <script> function AddEventListner(){ var timesThru = 0; document.querySelector('a').addEventListener('click', event => { if (timesThru > 0 ) { alert('Opening SecondPage() , timesThru = ' + timesThru ) window.open('https://www.duckduckgo.com', '_blank'); // keeps page one active // window.location.href = "https://www.duckduckgo.com"; // closes page one , opens page two } if (timesThru < 1 ) { alert('timesThru = ' + timesThru) } timesThru = timesThru + 1 ; } )}; </script> </head> <body onload="AddEventListner()"> <a href="https://www.w3schools.com" target="_blank" >Visit W3Schools</a> </body> </html> 1st time thru , it opens the clicked Link . How can I prevent the '1st time thru Link from opening ? Thanks for your Help...
  24. Thanks Ingolme; Yes , this works perfectly , the 'href' allows me to keep current window open: <!DOCTYPE html> <head> <script> function AddEventListner(){ document.querySelector('a').addEventListener('click', event => { OpenSecondPage() }); } </script> <head> </html> <body onload="AddEventListner"()> <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a> <script> function OpenSecondPage() { window.location.href = "https://www.duckduckgo.com"; // default page }; </script> </body> </html> Thanks Again Btw: I miss your foxy Avatar . I would like to have a copy of it possible ?
×
×
  • Create New...