The problem is that get the error:
TypeError: div1.style is undefined
Which leads to the problem that the function isn't called and nothing happens.
JS
<script type="text/javascript">
function siteChange() {
var div1 = board1;
var div2 = board2;
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
</script>
CSS
.FullDiv {
height: 100%;
width: 100%;
}
ASP
<div id="board1" class="FullDiv">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
ASP function call
1
2
It can not be able to map your board1 and board2 that's why it is give an error:
function siteChange() {
var div1 = document.getElementById("board1");//change this
var div2 = document.getElementById("board2");//change this
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
Now its work for you.
I guess it should be: var div1 = document.getElementById("board1") instead of var div1 = board1
Related
I'm confused as to how to make an element be visible when scrolled by the user, here is my code:
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
if (document.body.scrollTop > benefitpub.getBoundingClientRect().top + 'px') {
benefitpub.style.visibility = 'visible';
}
if (document.body.scrollTop > advbox2.getBoundingClientRect().top + 'px') {
advbox2.style.visibility = 'visible';
}
#advbox, #pubbox{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
You will need to change a few things, firstly, you need a onscroll event handler so you can check when the user is scrolling the window.
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
window.onscroll = function () {
if (document.documentElement.scrollTop > benefitpub.getBoundingClientRect().top) {
benefitpub.style.visibility = 'visible';
} else {
benefitpub.style.visibility = 'hidden';
}
if (document.documentElement.scrollTop > advbox2.getBoundingClientRect().top) {
advbox2.style.visibility = 'visible';
} else {
advbox2.style.visibility = 'hidden';
}
}
#advbox, #pubbox{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
Also, note that I am getting the scrollTop of the documentElement which is the <html> tag, not the body since that returns 0.
Try this , i have made few changes to your code snipet
onscroll event added
changed benefitpub.style.visibility = 'visible'; to benefitpub.style.visibility = 'inherit';
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
window.addEventListener('scroll', function(e) {
if (document.body.scrollTop > benefitpub.getBoundingClientRect().top - 200) {
benefitpub.style.visibility = 'inherit';
}
if (document.body.scrollTop > advbox2.getBoundingClientRect().top - 200) {
advbox2.style.visibility = 'inherit';
}
});
#advbox, #pubbox,#pubbox1{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
<div id="pubbox1">
Hello this is Pubbox
</div>
I'm using pure JS and flexbox to create grid for my project.
Parts of the project are hidden with display: none at page load, but after clicking the button it should toggle between display none and block.
Sadly this completely either ruins display: flex or does not toggle. Is there any way to make these 2 properties work together?
Here is JSfiddle i put together
https://jsfiddle.net/c3dw0woa/
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
CSS
.container{
display: flex;
}
JS
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function(){
if(legend_displayed == false){
container.style.display = "block";
container_displayed = true;
} else {
container_displayed.display = "none";
container_displayed = false;
}
}
You an always use display= flex in js, to avoid the problem
I changed a few things in your javascript code
See result:
var container = document.querySelector('.container');
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function() {
if (container_displayed == false) {
container.style.display = "flex";
container_displayed = true;
} else {
container.style.display = "none";
container_displayed = false;
}
}
.container {
display: flex;
}
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
Chiller's solution should work, but here's another option in case you want to do it with an event listener:
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.addEventListener('click', function(){
if (container.style.display == "none"){
container.style.display = "block";
} else {
container.style.display = "none";
}
})
I made a search box that should open and close when searched "button"(input) it's pressed. The problem is that when I want to close the search box I have to click twice and in the Same Spot(x,y axes must be exacly the same else the function submits the result).
function slideOpen(elopen){
var elem = document.getElementById(elopen);
elem.style.transition = "width 1.4s ease-in-out"
elem.style.width = "250px";
elem.style.height = "50px";
}
function slideClosed(elclose){
var elem = document.getElementById(elclose)
elem.style.transition = "width 1.4s ease-in-out"
elem.style.width = "0px";
elem.style.height = "50px";
elem.style.border = "0";
elem.style.padding = "10px 25px 10px 25px";
}
function searchbutton(){
var typetext = document.getElementById("typetext");
var typetextWidth = document.getElementById("typetext").getAttribute("width");
var onClick = document.getElementById("searchtext").onclick;
if(typetextWidth === "0"){
onClick = slideOpen('typetext');
} else {
onClick = slideClosed('typetext');
}
}
<form>
<input id="typetext" type="text" name="search" placeholder="Patience is a virtue" />
<input id="searchtext" type="image" src="search.png" onclick="searchbutton()" />
</form>
If you don't have a problem with global variables then I think this is better:
...
var searchIsShown = false;
function searchbutton(){
if(searchIsShown)
{
searchIsShown = false;
slideOpen('typetext');
} else {
searchIsShown = true;
slideClosed('typetext');
}
}
Plus, you should move your height and transition to CSS
I'm trying to learn Javascript and at the moment and I am working on AddEventListener.
What I'm trying to do is to add a new row and so far it works.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.colorOrange {
background-color: orange;
}
.colorBlue {
background-color: blue;
}
.colorYellow {
background-color: yellow;
}
.colorGray {
background-color: gray;
}
.colorRed {
background-color: red;
}
.colorGreen {
background-color: green;
}
.colorWhite {
background-color: white;
}
#main {
margin: 0 auto;
width: 325px;
text-align: center;
background-color: gray;
}
.row {
width: 300px;
padding: 10px;
border: 1px solid black;
display: block;
}
.hideButton, .mainText, .deleteButton {
margin: 0 auto;
padding: 10px;
border: 1px solid black;
display: inline;
}
.btn {
}
</style>
</head>
<body>
<div id="main">
<div class="AddBtn btn">Add</div>
<input type="text" id="txtBox" name="text till ruta" />
</div>
<script>
var rownr = 0;
function addListeners() {
var addButton = document.getElementsByClassName('AddBtn');
for (var i = 0; i < addButton.length; i++) {
var addBtn = addButton[i];
addBtn.addEventListener('click', function () {
var elBtn = event.srcElement;
var valueBtn = elBtn.textContent;
alert(valueBtn);
hideOrShow();
addRow();
function addRow() {
switch (valueBtn) {
case "Add":
var input = document.getElementById('txtBox').value;
rownr++;
var div = document.createElement('div');
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement('div');
div2.className = "hideButton colorGreen";
var tx = document.createTextNode("<");
div2.appendChild(tx);
div2.addEventListener('click', hideOrShow, false);
div.appendChild(div2);
var div3 = document.createElement("div");
if (input.toLowerCase() == "red") {
div3.className = "mainText colorRed";
}
else if (input.toLowerCase() == "orange") {
div3.className = "mainText colorOrange";
}
else if (input.toLowerCase() == "blue") {
div3.className = "mainText colorBlue";
}
else if (input.toLowerCase() == "yellow") {
div3.className = "mainText colorYellow";
}
else if (input.toLowerCase() == "gray") {
div3.className = "mainText colorGray";
} else {
div3.className = "mainText colorWhite";
}
tx = document.createTextNode(rownr + " " + input);
div3.appendChild(tx);
div.appendChild(div3);
var div4 = document.createElement("div");
div4.className = "deleteButton colorRed";
tx = document.createTextNode("X");
div4.appendChild(tx);
//div4.addEventListener('click', deleBtn, false);
div.appendChild(div4);
var linebreak = document.createElement("br");
div.appendChild(linebreak);
default:
}
}
So far everything works as I want it to do. But when I click on "<" it will go in to this function and find all tags with the hideButton class in it.
The first click it won't find anything, but the second time it will find the "<" value and an alert window will popup and show the value. Here is where I
get lost and can't get it to work. When you click the the third time it will
loop or whatever to call it - anyway it will show the alert window 2 times and
then if you repeat the same click it will do the same thing 3 times and so it goes.
function hideOrShow() {
var hideButton = document.getElementsByClassName('hideButton');
for (var j = 0; j < hideButton.length; j++) {
hideBtn = hideButton[j];
hideBtn.addEventListener('click', function () {
var hideElBtn = event.srcElement;
var valueHideBtn = hideElBtn.textContent;
alert(valueHideBtn);
}, false);
}
}
}, false);
}
}
window.onload = addListeners;
</script>
</body>
</html>
The goal with this exercise is that
when you click add button add the text from the input field and add that text to the new row.
and "<" shall hide the row and change it to ">" to show it again
and "X" shall just delete the row.
But what I need help with is finding the value part that I mentioned above.
Here is my rework of your javascript. I explained my solution in your comment, but it may be a bit more clear if illustrated.
In the addListeners function, I removed the hideOrShow call as it shouldn't be called in the add button.
Next, I removed the for loop in the hideOrShow method as you really are only after the caller. I also removed the addEventListener call in the same method as you already have an event listener on that element, so there's no need to add one again.
var rownr = 0;
function addListeners() {
var addButton = document.getElementsByClassName('AddBtn');
for (var i = 0; i < addButton.length; i++) {
var addBtn = addButton[i];
addBtn.addEventListener('click', function () {
var elBtn = event.srcElement;
var valueBtn = elBtn.textContent;
alert(valueBtn);
//hideOrShow();
addRow();
function addRow() {
switch (valueBtn) {
case "Add":
var input = document.getElementById('txtBox').value;
rownr++;
var div = document.createElement('div');
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement('div');
div2.className = "hideButton colorGreen";
var tx = document.createTextNode("<");
div2.appendChild(tx);
div2.addEventListener('click', hideOrShow, false);
div.appendChild(div2);
var div3 = document.createElement("div");
if (input.toLowerCase() == "red") {
div3.className = "mainText colorRed";
}
else if (input.toLowerCase() == "orange") {
div3.className = "mainText colorOrange";
}
else if (input.toLowerCase() == "blue") {
div3.className = "mainText colorBlue";
}
else if (input.toLowerCase() == "yellow") {
div3.className = "mainText colorYellow";
}
else if (input.toLowerCase() == "gray") {
div3.className = "mainText colorGray";
} else {
div3.className = "mainText colorWhite";
}
tx = document.createTextNode(rownr + " " + input);
div3.appendChild(tx);
div.appendChild(div3);
var div4 = document.createElement("div");
div4.className = "deleteButton colorRed";
tx = document.createTextNode("X");
div4.appendChild(tx);
//div4.addEventListener('click', deleBtn, false);
div.appendChild(div4);
var linebreak = document.createElement("br");
div.appendChild(linebreak);
default:
}
}
function hideOrShow() {
var hideButton = document.getElementsByClassName('hideButton');
var hideElBtn = event.srcElement;
var valueHideBtn = hideElBtn.textContent;
alert(valueHideBtn);
}
}, false);
}
}
window.onload = addListeners;
<style>
#main div {
display: none;
}
</style>
<div id="main">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<script>
var divElems = [].slice.call(document.querySelectorAll('#main div')),
main = document.querySelector('#main'), i = 0;
setInterval(function f() {
var item = divElems[i % divElems.length];
item.style.display = 'block';
i++;
}, 3000);
</script>
Can you please tell how to make within #main show up on the queue without stopping? Initially, they are hidden.
Element first, second and third should appear in sequence, every 3 seconds
First shows a block
<div>first</div>
then instead
<div>second</div>
and then
<div>third</div>
I have updated my answer again after your comment. Is this what you are looking for?
var divElems = [].slice.call(document.querySelectorAll('#main div')),
main = document.querySelector('#main'),
i = 0;
divElems[0].style.display = 'block';
setInterval(function f() {
var item = divElems[i % divElems.length];
item.style.display = 'none';
i++;
item = divElems[i % divElems.length];
item.style.display = 'block';
}, 3000);