I am trying to make the search results for list items in search bar hyperlinked and clickable. Looking at the coding I can't see why... This is the coding as I have figured out thus far:
<!DOCTYPE html>
<html>
<style>
.filterDiv {
float: left;
background-color: #e42625;
color: #ffffff;
width: 200px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #050505;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
<body>
<h2>Ideas for A Fair Deal for Housing</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('A')"> A</button>
<button class="btn" onclick="filterSelection('B')"> B</button>
<button class="btn" onclick="filterSelection('C')"> C</button>
<button class="btn" onclick="filterSelection('E')"> E</button>
<button class="btn" onclick="filterSelection('G')"> G</button>
<button class="btn" onclick="filterSelection('H')"> H</button>
<button class="btn" onclick="filterSelection('L')"> L</button>
<button class="btn" onclick="filterSelection('N')"> N</button>
<button class="btn" onclick="filterSelection('O')"> O</button>
<button class="btn" onclick="filterSelection('P')"> P</button>
<button class="btn" onclick="filterSelection('T')"> T</button>
<button class="btn" onclick="filterSelection('V')"> V</button>
<button class="btn" onclick="filterSelection('W')"> W</button>
<button <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for organisation.." title="Type in a name">
<ul id="myUL">
<li>A2 Dominion</li>
<li>Google</li>
<li>Bing</li>
</ul>
<script>
var UL = document.getElementById("myUL");
// hide the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus", function(){
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
</body>
</html>
</button>
</div>
<div class="container">
<div class="filterDiv A">A2 Dominion</div>
<div class="filterDiv B">BPHA</div>
<div class="filterDiv W">WHG</div>
<div class="filterDiv N">Notting Hill Genesis</div>
<div class="filterDiv A">Accent</div>
<div class="filterDiv H">Housing 21</div>
<div class="filterDiv E">EMH Group</div>
<div class="filterDiv A">Anchor</div>
<div class="filterDiv G">Great Places</div>
<div class="filterDiv P">Paradigm</div>
<div class="filterDiv B">Bromford</div>
<div class="filterDiv L">Livewest</div>
<div class="filterDiv T">Thirteen</div>
<div class="filterDiv C">Citizen</div>
<div class="filterDiv H">Hyde</div>
<div class="filterDiv O">Optivo</div>
<div class="filterDiv V">Vivid</div>
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
While trying to resolve this the only searchable terms are A2 Dominion, Google and Bing!
Any guidance would be very helpful. I have also made it so that the list is hidden unless the term is searched for
Thank you in advance!
epascarello answered this in a comment:
because you find the options as soon as blur is called. So when you click the blur is triggered, the options hide, you click nothing.
Related
i write these code, but in output, when i click on a, this will not work.
what should i do so that this works properly.
actually, initially i want to hide filter list and when i type some keywords in input box it will show that possible lists.
till this, it is working properly but when i click on 'a' there is no response.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('logo.png');
background-size: 25px;
background-position: 10px 12px;
background-repeat: no-repeat;
width: 98%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
img {
width: 50px;
justify-content: center;
align-item: center;
position: relative;
left: 50%;
transform: translatex(-50%);
}
span {
display: none;
}
</style>
</head>
<body>
<div id="search">
<img src="logo.png"></img>
<div id="input">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<div id="ul">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
</div>
</div>
<script>
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus", function() {
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function() {
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if (filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
</body>
</html>
but href is not working.
I don't believe "ghib" is a valid href. Either use # for a placeholder or include a URL.
If you were trying to link to another section on your page you'd need to href="#id".
Hope the above helps!
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});
You are blurring the unordered list whenever you leave the input field, which hides your <li></li> whenever you click anywhere outside of the input field (hence why the a href isn't registering).
I prepared a html page with tabs. Each tab has input field. Below is the html code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'One')" id="defaultOpen">One</button>
<button class="tablinks" onclick="openTab(event, 'Two')">Two</button>
<button class="tablinks" onclick="openTab(event, 'Three')">Three</button>
</div>
<div id="One" class="tabcontent">
<h3>One</h3>
One :
<input type="number" min="0.0" id="txtOne" autofocus="autofocus" />
</div>
<div id="Two" class="tabcontent">
<h3>Two</h3>
Two :
<input type="number" min="0.0" id="txtTwo" autofocus="autofocus" />
</div>
<div id="Three" class="tabcontent">
<h3>Three</h3>
Three :
<input type="number" min="0.0" id="txtThree" autofocus="autofocus" />
</div>
<script>
function openTab(evt, Name) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(Name).style.display = "block";
evt.currentTarget.className += " active";
document.getElementById("txtOne").focus();
document.getElementById("txtTwo").focus();
document.getElementById("txtThree").focus();
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
I click each tab and entered some values in input field in first time. While clicking the second time the each tab, the input field has the entered values.Now I want to clear the input fields or reload/refresh the page while clicking the tabs further times and want to set auto focus the input field. Guide me for my situation. Thanks in advance.
Try to reset the value
function reset(Name) {
document.getElementById("txt"+Name).value = '';
}
function openTab(evt, Name) {
reset(Name);
// your code
}
I'm working on the pomodoro project on free code camp:
https://www.freecodecamp.com/challenges/build-a-pomodoro-clock
And I'm trying to center my input boxes but I am not achieving much success. Does anyone have any ideas?
var timeMin = 0;
var timeSec = 3;
var timerIntervalID = null;
function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
function updateTimer() {
var displayString = "";
console.log("Update timer()");
if (timeSec === 0) {
timeSec = 59;
timeMin--;
} else {
timeSec--;
}
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
if (timeMin < 1 && timeSec < 1) {
$(".timer").css('color', 'red');
clearInterval(timerIntervalID);
alert("Pomodoro Over!")
}
}
function test() {
console.log("Test");
}
$(document).ready(function() {
$("button").click(function() {
var whichButton = $(this).attr("value");
console.log("Button pressed");
switch(whichButton) {
case "start":
timerIntervalID = setInterval(updateTimer, 1000);
break;
case "reset":
timeMin = 0;
timeSec = 3;
if (timerIntervalID !== null) {
clearInterval(timerIntervalID);
}
$(".timer").css('color', 'black');
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
break;
}
});
});
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>fccPomodoro</title>
</head>
<div class="container">
<div class="jumbotron text-center">
<h1>fccPomodoro</h1>
<h2 class="timer">Time Left: 25 minutes</h2>
<button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
<button type="button" class="btn btn-danger" value="reset">Reset</button>
<div class="form-group">
<label for="min">Minutes:</label>
<input type="text" class="form-control" id="min" value="25">
</div>
<div class="form-group">
<label for="sec">Seconds:</label>
<input type="text" class="form-control" id="sec" value="00">
</div>
</div>
</div>
</html>
styles.css
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
}
You can
margin: 0 auto
on the input boxes:
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0 auto;
}
See CSS below;
var timeMin = 0;
var timeSec = 3;
var timerIntervalID = null;
function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
function updateTimer() {
var displayString = "";
console.log("Update timer()");
if (timeSec === 0) {
timeSec = 59;
timeMin--;
} else {
timeSec--;
}
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
if (timeMin < 1 && timeSec < 1) {
$(".timer").css('color', 'red');
clearInterval(timerIntervalID);
alert("Pomodoro Over!")
}
}
function test() {
console.log("Test");
}
$(document).ready(function() {
$("button").click(function() {
var whichButton = $(this).attr("value");
console.log("Button pressed");
switch(whichButton) {
case "start":
timerIntervalID = setInterval(updateTimer, 1000);
break;
case "reset":
timeMin = 0;
timeSec = 3;
if (timerIntervalID !== null) {
clearInterval(timerIntervalID);
}
$(".timer").css('color', 'black');
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
break;
}
});
});
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.form-group {
text-align:center;
}
.form-group input {
max-width: 4rem;
display:block;
margin:0 auto 0 auto;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>fccPomodoro</title>
</head>
<div class="container">
<div class="jumbotron text-center">
<h1>fccPomodoro</h1>
<h2 class="timer">Time Left: 25 minutes</h2>
<button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
<button type="button" class="btn btn-danger" value="reset">Reset</button>
<div class="form-group">
<label for="min">Minutes:</label>
<input type="text" class="form-control" id="min" value="25">
</div>
<div class="form-group">
<label for="sec">Seconds:</label>
<input type="text" class="form-control" id="sec" value="00">
</div>
</div>
</div>
</html>
Have you tried to code the input tag inside a center tag?
<center><input type="text" ></center>
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
css
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
<script>
function myFunction1() {
document.getElementById("myDIV1").style.display = "block";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction2() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "block";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction3() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "block";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction4() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "block";
}
</script>
Any help would be appreciated thanks in advance.
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
Add the css and js file in the html file like -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
We can easily add an unlimited amount of buttons using reusable code.
here is a full example! Enjoy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>