vmars316

April 3, 2023

Hi Ingolme

Oh , I thought you folks might have changed to a pay for '$ Help Forum' .

Btw: I am glad you switched back to 'Foxy Avatar' .

Thanks for your Reply...

March 29, 2023

How come no Help here ?

For my last few Posted Topics I have received no Help .

Are you folks under new management ?

Just wondering why ❓

Thanks

February 1, 2023

Thanks for your Help...

What I am trying to do is Modify this W3School's example code
so that I can DragDrop Multiple Divs
Rather than just DnD 1 Div .
W3Schools online HTML editor
https://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html

Problem is I can't get past the 'function dragElement'

it doesn't get to the other Functions .

Please , what am I doing wrong ?

Thanks for your Help...

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid; 
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId ;
//  dragElement(holdTargetId) ;

const divGroup = document.getElementById("elemContainer");
const result = document.getElementById("result");

const divGroupPressed = e => { 
  
  const isDiv = e.target.nodeName === 'DIV';
  
  if(!isDiv) {
    return
  }
 
 holdTargetId = e.target.id ;
  console.log("holdTargetId = " + holdTargetId) ;
  
  dragElement(holdTargetId) ;
}
divGroup.addEventListener("click", divGroupPressed);

</script>

<script>
var elmnt ;
var timesIn = 0 ;

function dragElement(holdTargetId) {
console.log("function dragElement(elmnt = "  + holdTargetId) ;
  elmnt = holdTargetId ;

//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

   elmnt.onmousedown = dragMouseDown;  
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
	
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
console.log("function elementDrag(e)") ;

    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }

</script>

</body></html>

December 21, 2022

These are the Errors I am getting :

Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131:16)
    at HTMLTableElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:78:132)

Please see video , it was to large for this Forum .
Please view from my site:
https://vmars.us/ShowMe/Drag-n-Drop.mp4

Thanks for your Help...

December 21, 2022

Hello & TIA ,

Need help , Having problem with Drag n Drop ?

My code seems quite simple , but I have been hung up for days :

The first DnD doesnt Drop : 'div id="itemContainer" '

Tha 2nd DnD works fine .

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
    .item {
	  display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
//      background-color: #F5F5F5;  //  whitesmoke 
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
	  z-index: 8;
    }

</style>
</head>
<body>

<h2>Drag and Drop</h2>
<br>
<div id="itemContainer"   id="dragItems"    ondrop="drop(event)"  ondragover="allowDrop(event)" class="POS"  style=" width:100%;  border: thick solid pink;">  
<br>  <div class="item" class="flatOne"  id="flatOne"     draggable="true"   style="  background-color: yellow;" >b1</div>   
<br>  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  background-color: #FF0004;" > 1</div>   
<br>  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♯1</div>   
<br>  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♮1</div>   
</div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br><br><br><br>

<br>
<div  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" border: thick solid blue; width:100%; height: 200px;">
</div>

<script>
function allowDrop(ev) {
  ev.preventDefault();
  console.log("function allowDrop(ev)")
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log("function function drag(ev)")
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  console.log("function drop(ev)")
}
</script>

</body>
</html>

December 21, 2022

TIA ,

Is this forum dead ?

December 20, 2022

Hello & TIA ,

So far I am unable make drop(event) work :

What am I doing wrong ?

The original code is 600 + lines , so I have chunked down to this :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-CLONE.html</title>

<style>
body {
      margin: 20px;
      background-color: #FFFFFF;
    }
.flex-container {
  display: flex;
}

.flex-container > div {
  font-size: 20px;
}

#outerContainer{ border: 5px solid red;
}
    #itemContainer {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      counter-reset: itemCount;
    }
    .item {
	  display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      background-color: #F5F5F5;  //  whitesmoke 
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
	  z-index: 8;
    }
	
.dragItems {   } 
#tableContainer {    }

#fretboardContainer { background-color: #DCDCDC;  // #000000;  // #636363;   // #DCDCDC;  // #FFFBA7
}
.pearlFret { background-color:#6363FF;
}
tbody { background-color:#636363;
}
.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF} /*darkGrey  OR  LightGrey  @DCDCDC */

#tbodyId { background-color:#636363;
}
   .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
  </style>
</head>

<body onload="button1Clicked()">

<div id="outerContainer"    style="border:4px;"  ondrop="drop(event)" ondragover="allowDrop(event)" >  <!--  BEGIN OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ       position: absolute;   border: 2px;                                         -->

<p>
  X: <span id="x"></span><br>
  Y: <span id="y"></span>  <!--   ondrop="drop(event)" ondragover="allowDrop(event)"  -->
</p>

<div id="itemContainer"   id="dragItems" class="flex-container"; class="POS"  style="  position: absolute;  top: 40px; ">  
  <div class="item" class="flatOne"       draggable="true" ondragstart="drag(event)"  style=" position: absolute;  left: 100px; top: 0; background-color: yellow;" >b1</div>   
  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  position: absolute; left: 400px; top: 0; background-color: #FF0004;" > 1</div>   
  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style=" position: absolute; left:  700px; top: 0;  background-color: yellow;" >♯1</div>   
  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style=" position: absolute; left: 1000px; top: 0; ; background-color: yellow;" >♮1</div>   
</div>   <!--  id="itemContainer"  --> 

<div id="tableContainer" style="  position: absolute;  top: 155px; left: 55px; ">  <!--   id="tableContainer" ZZZZZZZZZZZZZZZ   -->
<table   id="fretboardContainer"  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" position: absolute ; width: 1200px;">   <!--  <p> BEGIN OF  fretContainer   ZZZZZZZZZZZZ  -->
<!--  Start Copy Here  -->
<tbody id="tbodyId" style="background-color:#636363;" >
<tr style="height: 40px; border-bottom: 2px solid red;  border-top: 3px solid white;">  
<!-- Row 1  -->
<td style="vertical-align: top; border-bottom: 3px solid white;  border-top: 4px solid white;"><br>
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br> 
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
</tr>
</tbody>
</table>  <!--  <p> END OF  fretContainer   ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->

</div>  <!--  <p> END OF  tableContainer   ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->


<div id="buttonContainer" style=" background-color: white; width: 240px;  position: absolute ;  top: 455px; Left:550px;">

<div style="background-color: white; width: 340px;">
<button class="button"  id="button1" onclick="button1Clicked()">Color</button>
<button class="button"  id="button2" onclick="button2Clicked()">Color</button>
</div>
</div>  <!--  id="buttonContainer"  -->

<p  id="notes" contenteditable ="true" style=" display: block;  
      height: 150px; width: 1200px; border-color: red; position: absolute ;  top: 525px; left: 55px; 
      border-width: 2px;  border-style: solid; border-color: green; " >Notes: 
</p>  
  <p class="item" class="three" onclick="alertHelp()" style=" position: absolute; top: 460px; width: 32px; left: 1280px; 
  background-color: #FFFF0D; display: block; " >? </p>

</div> <!--  <p> END OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->

<!--  <p>  BEGIN SCRIPT  ZZZZZZZZZZZZZZZZZ  </p>  -->

<script>
window.addEventListener('mousemove', (event) => {
  let x = event.clientX;
  let y = event.clientY;

  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
});
</script>

<script>
function button1Clicked() {
//document.body.style.backgroundColor = "red";
document.getElementById("tbodyId").style.backgroundColor =  "#636363" ;
// document.getElementById("fretboardContainer").style.backgroundColor = "#DCDCDC"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"

    var elements = document.getElementsByClassName("pearlFret")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor =  "#636363" ;                      // "#333333";
  }
}
</script>

<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"

    var elements = document.getElementsByClassName("pearlFret")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor = "#CFD7E4"         //  "#595959";
  }
}
</script>

      <script>
         function alertHelp() {
            var newLine = "\r"
            var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop."
            msg += newLine;
            msg += "You can Download your Design , and Browser will keep everything in place!";
            msg+= newLine;
            msg += " ";
            msg += newLine;
            msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs.";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412";
            msg+= newLine;
            msg += "It takes good snapshots for Selected Regions.";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49";
            msg+= newLine;
            msg += "Your ScreenShots will be quite Large.";
            msg+= newLine;
            msg += "Irfanview can Resize these to a much smaller image.";
            msg+= newLine;
            msg += "Have Fun !";
            alert(msg);
         }
      </script>
 
 <script>
 function allowDrop(event) {
	event.preventDefault();
}

function drag(event) {
	event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
	event.preventDefault();
	var data = event.dataTransfer.getData("text");
	event.target.appendChild(document.getElementById(data));
}

 </script>
 

</body>
</html>

December 12, 2022

Got it , Thanks...

December 10, 2022

Hello & TIA ,

I am trying to change a background color of a <div> backgroundColor with javascript .

#fretboardContainer { background-color: #DCDCDC; 

<button class="button"  id="button2" onclick="button2Clicked()">Color</button>

<table   id="fretboardContainer" style=" position: absolute ; width: 1200px;">

With this code:

<script>
function button2Clicked() {
alert("button2 was clicled") ;
document.body.style.backgroundColor = "red";
document.getElementById(fretboardContainer).style.backgroundColor = "#000000"
}
</script>

This is the culprit:

document.getElementById(fretboardContainer).style.backgroundColor = "#000000"

Pls , what is the proper way to code that ?

November 6, 2022

Hello , TIA ,

Sorry , I've for gotten how to do this .

How to not run a function until "button click" ?

November 3, 2022

Please Remove this Post .

Thanks

October 30, 2022

Well I have made some headway

see here :https://vmars.us/ShowMe/Fretboard-Forum.html

But how can I position DCDCDC-Box image below GuitarfretboardGrayRed image ?

Thanks

October 30, 2022

I made some headway with this https://vmars.us/ShowMe/Fretboard-Forum.html

October 29, 2022

Hmm...

I am trying to do a similar thing here : https://w3schools.invisionzone.com/topic/63436-dragdrop-image-anywhere-on-screen/

See here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html

I want to drop balls onto guitar fretboard .

I am reading up on layers now .

Lets keep in touch...

October 29, 2022

Hello TIA ,

I am having probs with 'Drag&Drop image anywhere on screen ' .

I want to drop one image on top of another image .

The page example is here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html

What am I not doing . Should I be using layers ? Here is my code:

<!DOCTYPE HTML>
<html>
<head>
<style>
html,body
{
height:100%;
}
div 
{
height:100%;
border-style: double;

}
</style>

<script type="text/javascript">

var OneBall-Charcol = null;
var dragging = false;
var x;
var y;

function window_onload()
{
   OneBall-Charcol = document.getElementById("OneBall-Charcol");

   if(window.addEventListener)
   {
      OneBall-Charcol.addEventListener('mousedown', startDrag);
      document.body.addEventListener('mousemove', drag);
      document.addEventListener('mouseout', stopDrag);
      document.body.addEventListener('mouseup', stopDrag);
   }
}

function startDrag(ev)
{
   if(!dragging)
   {
      x = ev.clientX - OneBall-Charcol.offsetLeft;
      y =  ev.clientY - OneBall-Charcol.offsetTop;
      dragging = true;
   }
}

function drag(ev)
{
   if(dragging)
   {
      OneBall-Charcol.style.left = ev.clientX - x + "px";
      OneBall-Charcol.style.top = ev.clientY - y + "px";
   }
}

function stopDrag(ev)
{
   if(dragging)
   {
      OneBall-Charcol.style.left = ev.clientX - x + "px";
      OneBall-Charcol.style.top = ev.clientY - y + "px";
      dragging = false;
   }
}

</script> 

<body onload="window_onload()">
<div>
<img id="OneBall-Charcol" src="OneBall-Charcol.png" width="32" height="32"  draggable="true">
<br><br>
<img id="3-ScaleBoxes-Charcol" src="3-ScaleBoxes-Charcol.png" width="600" height="197"  >

</div>

</body>
</html>

February 2, 2022

I got pretty much what I wanted by using <table> .

I'll fight this battle <body style=" background-image: url('Hex-558A1D.png'); background-repeat: no-repeat; background-size: cover; " >

another day .

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
body {
}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {
}

.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
background-color: #558A1D; 
}

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
background-color: #CCDDAA;
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</head>

<body  style=" background-image: url('Hex-558A1D.png'); background-repeat: no-repeat; background-size: cover; " > 
<table>
<tr>
<td  style=" background-color: #558A1D;" >
<p class="p1">
<h2 style="text-align: center; background-color: #FF0000; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>
</p>

<div class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br><p style="color: #FFFFFF;" >To see a larger image , right-click , then select 'Open image in New Tab' .</p>
</div>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,



</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>
</td>
</tr>
<table>
<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

Thanks

February 2, 2022

Ok , I'll check it out .

I generally use the '//' to keep track of what I already tried .

February 1, 2022

This is the color scheme I am aiming for , except in reverse:

https://www.vmars.us/SafeBrowser/SafeBrowserHome.html

https://www.vmars.us/SafeBrowser/SafeBrowserHome.html

February 1, 2022

Hmm...

It doesn't like my

background shows as white , my syntax must be wrong , but I don't see error ?

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
//body {
//     background-color: rgb(113, 30 , 19);
//}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {

}


.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
background-color: rgb(246, 244, 242); }

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
//background-color: #558A1D;
//background-color: rgba(85, 138, 29, 0.1);
//background-color:rgba(85, 138, 29, 0.3);
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</style>
</head>

<body  style="background-image: url('Hex-558A1D.png'); background-size: cover;" > 
<h2 style="text-align: center; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>

<p class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br>To see a larger image , right-click , then select 'Open image in New Tab' .
</p>

<p class="p2" contenteditable="false" style="text-align: left; background-color: #CCDDAA;"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,

</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

February 1, 2022

Aha !

That's it "cover" .

As always , Thank you very much !

February 1, 2022

Ah , didn't know about the mixing .

Hmm...

Seems to me we used to be able to propagate a small image to fill the background .

I forget what that is called , is that still an option ?

February 1, 2022

<!DOCTYPE html>
<html><head><meta content="text/html; ">
<!--  https://vmars.us/SafeBrowser/SafeBrowserHome.html  -->
<title>SafeBrowser-HELP.html</title>
<style>
//body {
//     background-color: rgb(113, 30 , 19);
//}
table {
border-style: none;  
border-spacing: 0 1px;
}
tr {
border-style: none;  
}

.trBetween {

}


.p1 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
background-color: rgb(246, 244, 242); }

.p2 {
color: rgb(0, 0, 0);
vertical-align: top;
width: 100%;
font-size: 20px;
font-weight: bold;
border-style:none;
//border-color: white white rgb(246, 244, 242) white; 
//border-width: 2px;
//background-color: #558A1D;
//background-color: rgba(85, 138, 29, 0.1);
//background-color:rgba(85, 138, 29, 0.3);
}

.fBtn01{ // Draw Button background 
font-family:"Verdana", sans-serif; background-color:#D0D0D0;   // #C8C8C8;  //  #e1e1e1;   626262; F2F1ED;
font-size:16.0px; line-height:1.13em; font-weight: bold;
border-style: solid; border-color: #0000ff;
border-width: 2px;
text-align: center;
}
.udL {text-decoration: underline; font-size:16px;} 
.udLB {text-decoration: underline; font-size:16.0px; font-weight: bold;}
.BLD {font-size:16.0px; font-weight: bold;}

</style>
</head>

<!-- <body style="background-color:#253C0D; color: #ab1b50; font-size: 20px;"> 
<body style="background-color:#558A1D;"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF">  -->
<body style="background-color: rgba(85, 138, 29, 0.9);"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF"> 
<h2 style="text-align: center; color: #FFFFFF; " >SafeBrowser-HELP.html</h2>

<p class="p1" contenteditable="false" style="text-align: center; "> 
<img src="SafeBrowserEditor.png" width="500px" alt="SafeBrowserEditor-Mini.png" >
<br>To see a larger image , right-click , then select 'Open image in New Tab' .
</p>

<p class="p2" contenteditable="false" style="text-align: left; background-color: rgba(85, 138, 29, 0.3);"> 
&nbsp;&nbsp;  Welcome to SafeBrowser Editor .
<br>Herein is a listing of the TWO 'Approved Link Files' .
<br> One contains &nbsp; 'Whole Sites Links' 'named: 'SakerPlats.swd' (in Swedish it means 'Safe Sites') .
<br> The other contains &nbsp; 'Specific Links' 'named: 'SakerLank.swd' (in Swedish it means 'Safe Links')
<br>'Whole Sites Links' means that the Whole Site is Approved , the User can go anywhere on that site .
<br>'Specific Links' means that only certain Links on a Site are Approved . &nbsp; For example , 
you may not want the User to have access to everything on YouTuube , only certain videos ,

</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> or Browse </span> &nbsp;&nbsp;  First step : So , click on the 'onBrowse' button and locate this FOLDER .
</p>
<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<p class="p2" contenteditable="false" style="text-align: left;"> 
&nbsp;&nbsp; 
<span class="fBtn01"> button name goes here</span>
&nbsp;&nbsp; Text goes here :
</p>

<!--StartMessageHere-->
<script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
</script>
<script type="text/javascript">
BGLinks.version = "GNT";
BGLinks.linkVerses();
</script>
<div id="bg_popup-container"></div>
</body>
</html>

January 31, 2022

Tia :

Why would this work:

<body style="background-color: rgba(85, 138, 29, 0.9);"   alink="#FFFFFF"   link="#FFFFFF" vlink="#FFFFFF">

And this not work:

<p class="p2" contenteditable="false" style="text-align: left; background-color: rgba(85, 138, 29, 0.3);">

January 22, 2022

Got it , Thanks

January 19, 2022

23 hours ago, Ingolme said:

I'm not sure if what you wanted was to see the code itself, if so then I can provide a solution for that.

Yes , please , that would be great !

Sign In

vmars316

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by vmars316

How come no Help here ?

How come no Help here ?

Draggable DIV Element

Need help , Having problem with Drag n Drop ?

Need help , Having problem with Drag n Drop ?

Is this forum dead ?

Need drop(event) Help...

what is proper code: document.getElementById(fretboardContainer).style.backgroundColor =

what is proper code: document.getElementById(fretboardContainer).style.backgroundColor =

How to not run a function until "button click" ?

Drag&Drop image anywhere on screen ?

Drag&Drop image anywhere on screen ?

drag en drop images . in form too

drag en drop images . in form too

Drag&Drop image anywhere on screen ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Why doesn't this work: rgba(85, 138, 29, 0.3) ?

Having trouble with: document.documentElement.outerHTML

Having trouble with: document.documentElement.outerHTML

Browse

Activity