Jump to content

vmars316

Members
  • Content Count

    421
  • Joined

  • Last visited

Posts posted by vmars316

  1. 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...

  2. 14 hours ago, dsonesuk said:

    Which is totally unrelated to the link provided, which explains why you get this error mainly for browserview but also mentions webview.

    You are introducing a new conversation on a subject that was not mentioned, not referred too, with no reason to mention. The issue was with browserview, the link was how go about fixing that issue.

    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 

     

     

  3. 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 

     

  4. 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') ;
    } ) ;
    
    
    

     

  5. 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  :)

     
  6. 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  :)

  7. 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...

  8. 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 ?

     

  9. Tia;

    Trying to redirect from one page to another page

    and still leave 1st page open .

    This works except that it closes 1st page:

     

        window.location.href = "https://www.w3schools.com ";  // works fine

    This doesn't work at all:

        window.location.href = "https://www.w3schools.com target="_blank" ";  // doesn't work

    Full code:

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function CreateJsListener() {
       document.querySelector('a').onclick = Redirect();
      }
    </script>
    </head>
    
    <body onload="CreateJsListener()">
    
    
    <a href="https://www.google.com"> https://www.google.com </a>
    
    <script>
    var timesThru = 0 ;
      
    function Redirect() {
        alert('Redirecting To:  https://www.w3schools.com instead'); 
    if (timesThru > 0) {
        alert('Redirecting To:  https://www.w3schools.com instead'); 
        window.location.href = "https://www.w3schools.com target="_blank" ";  // doesn't work
        window.location.href = "https://www.w3schools.com ";  // works fine
       }
    	timesThru = timesThru + 1 ;
       }
    	
    </script>
    
    </body>
    </html>

    Tia

     

  10. function SpecificSiteLinks(navigateTo) {
        SafeSite = false ;
        for (var i = 0; i < specificSiteLinksArray.length; i++) {
            if (specificSiteLinksArray[i] == navigateTo) {
                SafeSite = true ;
    			alert("SpecificSiteLinks SafeSite =  true   " + "navigateTo = " + navigateTo);
    			break ;
    		}else {
                SafeSite = false ;
            }	
        }
    		if  (SafeSite == false) { 
    			alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo);
    	}
    }

    Ok , I see it now ,

    Thanks

  11. Tia ;

    I need more eyes :

    Can't figure out my error in 

    function SpecificSiteLinks(navigateTo) .

    What am I doing wrong , Thanks for your Help...

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    span.buttons {
      display: inline; /* the default for span */
      padding: 5px;
    }
    p {
      border: 1px solid blue;  
    }
    </style>
    </head>
    <body>
    <div style="text-align: center">
        <input type="text" placeholder="Enter URL" id="myInput" value="http://www.google.com">
        <button type="button" onclick="getInputValue()" >Get URL</button>
    
    
    </div>
    <p>
    <span class="buttons"><button onclick="WholeSite(0)">duckduckgo.com/</button></span> 
    <span class="buttons"><button onclick="SpecificSite(0)">http://vmars.us/SafeBrowser/SafeBrowserHome.html</button></span> 
    </p>
    <p>
    <span class="buttons"><button onclick="WholeSite(1)">pbskids.org/</button></span> 
    <span class="buttons"><button onclick="SpecificSite(1)">https://www.infoplease.com/</button></span> 
    </p>
    <p>
    <span class="buttons"><button onclick="WholeSite(2)">.sesamestreet.org/</button></span> 
    <span class="buttons"><button onclick="SpecificSite(2)">https://www.youtube.com/watch?v=K1MhFN2Ld30</button></span> 
    </p>
    
    <script>
    var wholeSiteLinksArray= ["duckduckgo.com", "pbskids.org/", ".sesamestreet.org/"];
    var specificSiteLinksArray= ["http://vmars.us/SafeBrowser/SafeBrowserHome.html", 
                                  "https://www.infoplease.com/", "https://www.infoplease.com/" , 
    							  "https://www.youtube.com/watch?v=K1MhFN2Ld30"];
    var NavigateTo = "" ;						  
    var SafeSite = false ; 
    var arrayPos = 0 ;
    
    function WholeSiteLinks(navigateTo) {
        SafeSite = false ;
        for (var i = 0; i < wholeSiteLinksArray.length; i++) {
            if (wholeSiteLinksArray[i] == navigateTo) {
                SafeSite = true ;
    			alert("WholeSiteLinks SafeSite = true   " + "navigateTo = " + navigateTo);
    		}else {
                SafeSite = false ;
    			alert("WholeSiteLinks SafeSite = false   "+ "navigateTo = " + navigateTo);
                SpecificSiteLinks(navigateTo);
            } 
    	}
    }
    
    function SpecificSiteLinks(navigateTo) {
        SafeSite = false ;
        for (var i = 0; i < specificSiteLinksArray.length; i++) {
            if (specificSiteLinksArray[i] == navigateTo) {
                SafeSite = true ;
    			alert("SpecificSiteLinks SafeSite =  true   " + "navigateTo = " + navigateTo);
    		}else {
                SafeSite = false ;
    			alert("SpecificSiteLinks SafeSite = false "+ "navigateTo = " + navigateTo);
            }	
        }
    }
    
    function WholeSite(arrayPos) {
    navigateTo = wholeSiteLinksArray[arrayPos];
    alert("function WholeSite(arrayPos) "  + "navigateTo = " + navigateTo);
    WholeSiteLinks(navigateTo);
    }
    
    function SpecificSite(arrayPos) {
    navigateTo = specificSiteLinksArray[arrayPos];
    alert("function specificSiteLinks(arrayPos)"  + "navigateTo = " + navigateTo);
    SpecificSiteLinks(navigateTo);
    }
    
    function getInputValue(){
                // Selecting the input element and get its value 
                var inputURL = document.getElementById("myInput").value;
                // Displaying the value
                alert("function getInputValue()  " + inputURL);
    			navigateTo = inputURL ;
                WholeSiteLinks(navigateTo);
        }
    </script>
    
    </body>
    </html>

     

  12. Thanks dsonesuk ; 
    Like this:

    Quote

    <script>
            //Get the button element
            var btn = document.getElementById('button');

            //Get paragraph element
            var makeBold = document.querySelectorAll('p , div');

            //Define an click event listener on button
            btn.addEventListener('click', function() {
            for (i = 0; i < makeBold.length; i++) {
                makeBold[i].style.fontWeight = '700';
            }  
            });
        </script>
     

    Thanks !

  13. Tia ;

    I want to change all fontWeight of <p and <div>> to bold .

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bold Text Demo</title>
    </head>
    <body>
    <p> This is a sample paragraph </p>
    <button id="button"> Make Bold </button>
    <div>This is a sample div</div>
    <script>
            //Get the button element
            var btn = document.getElementById('button');
    
            //Get paragraph element
            var makeBold = document.querySelectorAll(p , div);
    
            //Define an click event listener on button
            btn.addEventListener('click', function() {
            	//Change the font weight style to 700
            	makeBold.style.fontWeight = '700';
    
    
            });
        </script>
    </body>
    </html>

    How can I do that ?

    Thanks for your Help...

  14. Tia  ;

    Getting errors

    getElementByTagName-ChangeBlankToSelf.html:24 Uncaught TypeError: Cannot read property 'getAttribute' of undefined
        at ChangeBlankToSelf (getElementByTagName-ChangeBlankToSelf.html:24)
        at HTMLButtonElement.onclick (getElementByTagName-ChangeBlankToSelf.html:17)

    with the following code

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <h4>getElementByTagName-ChangeBlankToSelf.html</h4>
    
    <p>
    <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
    <br>
    <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
    </p>
    
    <p>getElementByTagName-ChangeBlankToSelf.html</p>
    
    <button onclick="ChangeBlankToSelf()">Change_Blank To _Self</button>
    
    <script>
    function ChangeBlankToSelf(){
      var linkElements , i;
      linkElements = document.getElementsByTagName("a");
      for (i = 0; i < linkElements.length; i++) {
            if (linkElements.item[i].getAttribute("target") = "_blank") 
             {
               linkElements.item[i].setAttribute("target", "_self")
            }
    }
    }
    </script>
    
    </body>
    </html>
    

    I like the new Forum look ,

    Thanks for your Help...

  15. Hello & Thanks ; 

    I have been working on my KidsafeBrowser , in .vb .

    Sorry . I have forgotten How to do this:

    Using Calibre I Converted a .pdf into .html . 

    I have a html file : ~reads/Communion-with-God-Son-HolySpirit-ESV.html

    WIth quite a few in page links and Calibre does this:

    <p class="calibre1"><a href="file:///C:/Users/vmars/Calibre%20Library/William%20H.%20Gross/Owen%20Communion%20with%20God%20(4)/Of-Communion-with-God-Owen_Gross.html#calibre_link-1"><b class="calibre2">EDITOR’S PREFACE ................................................................................................................................................ I</b> </a></p>
    <p class="calibre1"><a href="file:///C:/Users/vmars/Calibre%20Library/William%20H.%20Gross/Owen%20Communion%20with%20God%20(4)/Of-Communion-with-God-Owen_Gross.html#calibre_link-2"><b class="calibre2">PART 1. COMMUNION WITH THE FATHER ..................................................................................................... 1</b> </a></p>
    But I want to make each link to point to an anchor within the same html . 

    Pls , how do I code that ? 

    Thanks for your Help...

     

  16. On 7/22/2020 at 11:54 PM, Makwana Prahlad said:

    Hello, @vmars316

    Please try this code,To Put two tables side by side (on same line)

    
    <strong>Using display: inline-block; </strong><br>
        <table border=1 class="inlineTable">
            <tr>
                <td>Cell content</td>
                <td>Cell content</td>
                <td>Cell content</td>
            </tr>
        </table>
        <table border=1 class="inlineTable">
            <tr>
                <td>Cell content</td>
                <td>Cell content</td>
                <td>Cell content</td>
            </tr>
        </table>
    
    <hr>
    <strong>Using float: left; </strong><br>
       <table border=1 class="floatedTable">
            <tr>
                <td>Cell content</td>
                <td>Cell content</td>
                <td>Cell content</td>
            </tr>
        </table>
        <table border=1 class="floatedTable">
            <tr>
                <td>Cell content</td>
                <td>Cell content</td>
                <td>Cell content</td>
            </tr>
        </table>
    
    //Css File
    
            .floatedTable {
                float:left;
            }
            .inlineTable {
                display: inline-block;
            }

    I hope this code will be useful.

    Thank you.

    That doesnt work for me :

    I havent been back here for a long time . So didnt notice your Post.

    I needed two tables side by side by side , such that I could select/copy each table as a column , without effecting the other Tab

    I ended up doing this:

    
    <!doctype html>
    <html>
    <head>
        <title></title>
    	<style>
    table{ table-layout: fixed;
             background-color: rgb(232, 230 , 228); width: 100%;
             border-style: solid; border-width: 3px; border-color: maroon;
    }
    
    .table01 { 	text-align: left; width: 100%; 
    }
    
    .table02 {	text-align: left; width: 100%; 
    }
    
    td{vertical-align: top; width: 100%; background-color:  
    }
    
    p{vertical-align: top;  width: 100%; background-color: rgb(246, 244, 242); 
    }
    	</style>
    </head>
    <body>
    <h6 style="text-align:center;">Aside-With-2-Tables-table-layout-fixed-Editable.html 
    <br>[aside style="float: right; width: 50%; font: 20px Calibri;"] 
    </h6>
            <aside style="float: right; width: 50%; font: 20px Calibri;">
    <div>
    <table  class="table01" contenteditable="true" >
    <tbody>
    <tr>
    <td ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; " ><p>2</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; " ><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
            </aside>
    
        <aside style="float: left; width: 50%; font: 20px Calibri ">
    <div>
    <table  class="table02" contenteditable="true" >
    <tbody>
    <tr>
    <td style="vertical-align: top; " ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; " ><p>2</td>
    </tr>
    <tr>
    <td style="vertical-align: top; " ><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
       </aside>
    </body>
    </html>

    Thanks

  17. Yes , and I can select/copy each Table individually . 

    Thanks 

    What I don't like is that if I hit enter-key It creates what loos like a whole line . 

    Is there a way to stop it from creating a whole new colored line ,

    it looks like a whole new paragraph (sort of) . 

    And keep enter-key  text in the same line . 

    I could ignore the enter-key with .js , but then how would I create a new line ?

    Type in blanks til I overflow to a new line ? 

    Thanks

  18. Thanks ;

    JMRKR "What does the desired output look like?

    Here is exactly how I would like it to behave :

    <!DOCTYPE html>
    <html>
    <style>
    .Lcol {
    
    }
    .Rcol {
    
    }
    </style>
    <body>
    <h4>Editable-Simple-P.html Needs Copy Button + Which Col InputBox</h4>
    <p  class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>
    
    <p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 2. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 5. Rcol<hr></p>
    
    <p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>
    
    </body>
    </html>

    Thanks

×
×
  • Create New...