vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by vmars316
-
-
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>
-
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>
-
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 ?
?
-
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>
-
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...
-
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
-
11 hours ago, Ingolme said:
I anticipate further questions about these explanations, so I'll just write functioning code below:
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 : )
-
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...
-
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' -
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
-
Ok , Thanks ,
and a Happy New Year' to you !
-
Hello ,
Is there a difference between the results of these scripts syntax ?
<script src="renderer.js"></script>
<script> src="./renderer.js"> </script>
Thanks
-
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
-
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> 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> have his name put upon them,<a name="RETURN3"></a><a href="#NOTE3">[3]</a> receive the Spirit of adoption,<a name="RETURN4"></a><a href="#NOTE4">[4]</a> have access to the throne of grace with boldness,<a name="RETURN5"></a><a href="#NOTE5">[5]</a> are enabled to cry, Abba, Father,<a name="RETURN6"></a><a href="#NOTE6">[6]</a> are pitied,<a name="RETURN7"></a><a href="#NOTE7">[7]</a> protected,<a name="RETURN8"></a><a href="#NOTE8">[8]</a> provided for,<a name="RETURN9"></a><a href="#NOTE9">[9]</a> and chastened by him, as by a father:<a name="RETURN10"></a><a href="#NOTE10">[10]</a> yet never cast off,<a name="RETURN11"></a><a href="#NOTE11">[11]</a> but sealed to the day of redemption;<a name="RETURN12"></a><a href="#NOTE12">[12]</a> and inherit the promises,<a name="RETURN13"></a><a href="#NOTE13">[13]</a> as heirs of everlasting salvation.<a name="RETURN14"></a><a href="#NOTE14">[14]</a> </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>
-
Got it Thanks...
-
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
-
Thanks dsonesuk ,
I am still working this thru .
-
Thanks ,
The images code is working great , but audio and video are not showing the <div class="hideDiv"> code .
Any ideas ?
Quote<!DOCTYPE HTML> <head> <title>Media2html.html vmars.us/freeware</title> <meta name="Generator" content="PureBasic"> <meta name="Description" content="...Created by Media2html.exe % PureBasic..."> <style type="text/css"> img { max-width: 20%; height: 20%; } .hideDiv { display: none; } .showDiv:hover + .hideDiv { display: inline; color: red; } </style> </head> <body text="#000000" style="text-align:left;"> <h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4> <br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204 - Copy.bmp" alt="" ></div><div class="hideDiv">2016-10-15_185204 - Copy.bmp</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204.bmp" alt="" ></div><div class="hideDiv">2016-10-15_185204.bmp</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Large.png" alt="" ></div><div class="hideDiv">Media2Html-ScreenImage-Large.png</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Small.png" alt="" ></div><div class="hideDiv">Media2Html-ScreenImage-Small.png</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\pimClip-ScreenShot.png" alt="" ></div><div class="hideDiv">pimClip-ScreenShot.png</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\pimClip-TopicsListScreen.jpg" alt="" ></div><div class="hideDiv">pimClip-TopicsListScreen.jpg</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\SocialSharing.jpeg" alt="" ></div><div class="hideDiv">SocialSharing.jpeg</div><br><br> <div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\vmars.us.ico" alt="" ></div><div class="hideDiv">vmars.us.ico</div><br><br> <div class="showDiv" style="display: inline"><audio controls ><source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\testBeep.mp3" type="audio/mpeg" > Your browser does not support the audio tag. </audio><div class="hideDiv">testBeep.mp3</div><br><br> <div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\FriendsOnFaceBook.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">FriendsOnFaceBook.mp4</div><br><br> <div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\FriendsOnFaceBook.ogv" type="video/ogv" > Your browser does not support the video tag.</video><div class="hideDiv">FriendsOnFaceBook.ogv</div><br><br> <div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\JustinGuitar-HeyHey.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">JustinGuitar-HeyHey.mp4</div><br><br> <div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\JustinGuitar-HeyHey.ogv" type="video/ogv" > Your browser does not support the video tag.</video><div class="hideDiv">JustinGuitar-HeyHey.ogv</div><br><br> <div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\NotYourAverage-HorseRace.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">NotYourAverage-HorseRace.mp4</div><br><br> </body></html></body></html> -
Thanks ,
The hover is working , but the display: inline; is not working .
Any idea why ?
Quote<!DOCTYPE HTML>
<head>
<title>Media2html.html vmars.us/freeware</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="...Created by Media2html.exe % PureBasic...">
<style type="text/css">
img {
max-width: 400px;
height: 200px;
}.hide {
display: none;
}
.myDIV:hover + .hide {
display: inline;
color: red;
}
</style>
</head>
<body text="#000000" style="text-align:left;">
<h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4>
<br><div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div><div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>
<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>
<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div></body></html>
Thanks
-
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
Quote<!DOCTYPE HTML>
<head>
<title>Media2html.html vmars.us/freeware</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="...Created by Media2html.exe % PureBasic...">
<style type="text/css">
img {
max-width: 400px;
height: 200px;
}
</style>
</head>
<body text="#000000" style="text-align:left;">
<h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4>
<br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204 - Copy.bmp" alt="" >2016-10-15_185204 - Copy.bmp<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204.bmp" alt="" >2016-10-15_185204.bmp<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Large.png" alt="" >Media2Html-ScreenImage-Large.png<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Small.png" alt="" >Media2Html-ScreenImage-Small.png<br><br>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
-
Hello ,
I see this code
Couldn't get the Code "< >" working so I'll try Quote .
Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover
QuoteI see this code
<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body><h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div></body>
</html>Is it possible to show img src= on hover ?
Thanks
-
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>
-
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
-
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>
Having trouble with: document.documentElement.outerHTML
in JavaScript
Posted
Aha...Upon further study , its not as magical as I originally thought .
This ' /\s/g, ' must be 'RegularExpression' .
I havent learned that yet .