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
Related
I am currently trying to enable a disabled button, once a certain action is complete. In this case, a progress bar reaching 100%. My button looks like this:
var i;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
I'm thinking that there must be a possibility to have some sort of if else condition in the button itself. Ideally, I could do this in the body.
You already have a working conditional to stop the progress bar updates when 100% is reached. This is the place where you can activate the button. You can wrap that code to another function.
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
// Enable the button when the progres is 100%
var button = document.getElementById("btn1");
button.disabled = false;
button.innerHTML = "enabled Button";
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<button disabled id="btn1" type="button">disabled Button</button>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
I reduced timer to 10 ms to make snippet more representative
function move() {
var i=0;
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
document.getElementById("btn1").disabled = false;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled="enabled" id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
var progressContainer=document.getElementById("myProgress");
var progress = document.getElementById("myBar");
var googleBtn =document.getElementById("btn1");
var loading = false;
function move() {
if(loading)return;
loading =true;
var id = setInterval(frame, 50);
var width =parseInt(progress.offsetWidth /progressContainer.offsetWidth);
function frame() {
if (width >= 100) {
clearInterval(id);
googleBtn.disabled = false;
loading = false;
return;
}
width++;
progress.style.width = width + "%";
progress.innerHTML = width + "%";
}
}
#myProgress{
width:200px;
height:20px;
border:1px solid black;
background-color:#bbb;
}
#myBar{
width:0px;
background-color:green;
}
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br><button onclick="move()">Run Experiment</button><br>
<button disabled="enabled" id="btn1" onclick="location.href='https://google.com'" type="button">
Go to Google</button>
I have created a modal using vanilla javascript. Here is what I have done:
let modal = document.createElement("div");
modal.id = "translation-loader";
modal.style.paddingRight = "15px";
modal.style.display = "block";
modal.style.overflowX = "hidden";
modal.style.overflowY = "auto";
modal.style.zIndex = "1072";
modal.style.position = "fixed";
modal.style.top = 0;
modal.style.left = 0;
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.outline = 0
modal.classList.add("animated","fadeInDown")
let modalDialog = document.createElement("div");
modalDialog.style.maxWidth = "500px";
modalDialog.style.margin = "1.75rem auto";
modalDialog.style.position = "relative";
modalDialog.style.width = "auto";
modalDialog.style.transition = "transform .3s ease-out,-webkit-transform .3s ease-out";
modalDialog.style.pointerEvents = "none";
modalDialog.style.minHeight = "calc(100% - 3.5rem)";
modal.append(modalDialog);
let modalContent = document.createElement("div");
modalContent.style.position = "relative";
modalContent.style.display = "flex";
modalContent.style.flexDirection = "column";
modalContent.style.width = "100%";
modalContent.style.pointerEvents = "auto";
modalContent.style.backgroundColor = "#fff";
modalContent.style.backgroundClip = "padding-box";
modalContent.style.border = "1px solid rgba(0,0,0,.2)";
modalContent.style.borderRadius = ".3rem";
modalContent.style.outline = 0;
modalDialog.append(modalContent);
let modalHeader = document.createElement("div");
modalHeader.style.display = "flex";
modalHeader.style.alignItems = "flex-Start";
modalHeader.style.justifyContent = "space-between";
modalHeader.style.padding = "1rem 1rem";
modalHeader.style.borderBottom = "1px solid #dee2e6";
modalHeader.style.borderTopLeftRadius = "calc(.3rem - 1px)";
modalHeader.style.borderTopRightRadius = "calc(.3rem - 1px)";
const modalHeaderElement = document.createElement("h5");
modalHeaderElement.innerText = "Translation In Progress";
modalHeaderElement.style.fontSize = "1.25rem";
modalHeaderElement.style.fontWeight = "500";
modalHeaderElement.style.marginTop = 0;
modalHeaderElement.style.marginBottom = 0;
modalHeader.append(modalHeaderElement);
modalContent.append(modalHeader);
let modalBody = document.createElement("div");
modalBody.style.position = "relative";
modalBody.style.flex = "1 1 auto";
modalBody.style.padding = "1rem";
modalBody.innerText = "Body";
modalContent.append(modalBody);
let modalFooter = document.createElement("div");
modalFooter.style.display = "flex";
modalFooter.style.flexWrap = "flex-wrap";
modalFooter.style.alignItems = "center";
modalFooter.style.justifyContent = "flex-end";
modalFooter.style.padding = "0.75rem";
modalFooter.style.borderTop = "1px solid #dee2e6";
modalFooter.style.borderBottomRightRadius = "calc(.3rem - 1px)";
modalFooter.style.borderBottomLeftRadius = "calc(.3rem - 1px)";
modalFooter.innerText = "Footer"
modalContent.append(modalFooter);
document.body.append(modal);
Array.prototype.forEach.call(document.body.children, (child) => {
if(child.id !== "translation-loader") {
child.style.opacity = 0.1
}
console.log(child.id);
});
<p>
This is a sample text..What'sup
click here
</p>
As you could see, that to display the modal, I am changing the opacity of all elements except the modal to 0.1. I think this is the incorrect way of showing the modal. The reason is, I just cannot change the opacity of all other elements back to 1 when the modal hides. This could alter the original (default) opacity of an element.
What is the better way of handling this?
The best way is to make an overlay behind your modal and make its opacity using background.
In your case you can do that by
#translation-loader {
background: rgba(255, 255, 255, 0.8);
}
Second Approach using pseudo element
let modal = document.createElement("div");
modal.id = "translation-loader";
modal.style.paddingRight = "15px";
modal.style.display = "block";
modal.style.overflowX = "hidden";
modal.style.overflowY = "auto";
modal.style.zIndex = "1072";
modal.style.position = "fixed";
modal.style.top = 0;
modal.style.left = 0;
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.outline = 0
modal.classList.add("animated","fadeInDown")
let modalDialog = document.createElement("div");
modalDialog.style.maxWidth = "500px";
modalDialog.style.margin = "1.75rem auto";
modalDialog.style.position = "relative";
modalDialog.style.width = "auto";
modalDialog.style.transition = "transform .3s ease-out,-webkit-transform .3s ease-out";
modalDialog.style.pointerEvents = "none";
modalDialog.style.minHeight = "calc(100% - 3.5rem)";
modal.append(modalDialog);
let modalContent = document.createElement("div");
modalContent.style.position = "relative";
modalContent.style.display = "flex";
modalContent.style.flexDirection = "column";
modalContent.style.width = "100%";
modalContent.style.pointerEvents = "auto";
modalContent.style.backgroundColor = "#fff";
modalContent.style.backgroundClip = "padding-box";
modalContent.style.border = "1px solid rgba(0,0,0,.2)";
modalContent.style.borderRadius = ".3rem";
modalContent.style.outline = 0;
modalDialog.append(modalContent);
let modalHeader = document.createElement("div");
modalHeader.style.display = "flex";
modalHeader.style.alignItems = "flex-Start";
modalHeader.style.justifyContent = "space-between";
modalHeader.style.padding = "1rem 1rem";
modalHeader.style.borderBottom = "1px solid #dee2e6";
modalHeader.style.borderTopLeftRadius = "calc(.3rem - 1px)";
modalHeader.style.borderTopRightRadius = "calc(.3rem - 1px)";
const modalHeaderElement = document.createElement("h5");
modalHeaderElement.innerText = "Translation In Progress";
modalHeaderElement.style.fontSize = "1.25rem";
modalHeaderElement.style.fontWeight = "500";
modalHeaderElement.style.marginTop = 0;
modalHeaderElement.style.marginBottom = 0;
modalHeader.append(modalHeaderElement);
modalContent.append(modalHeader);
let modalBody = document.createElement("div");
modalBody.style.position = "relative";
modalBody.style.flex = "1 1 auto";
modalBody.style.padding = "1rem";
modalBody.innerText = "Body";
modalContent.append(modalBody);
let modalFooter = document.createElement("div");
modalFooter.style.display = "flex";
modalFooter.style.flexWrap = "flex-wrap";
modalFooter.style.alignItems = "center";
modalFooter.style.justifyContent = "flex-end";
modalFooter.style.padding = "0.75rem";
modalFooter.style.borderTop = "1px solid #dee2e6";
modalFooter.style.borderBottomRightRadius = "calc(.3rem - 1px)";
modalFooter.style.borderBottomLeftRadius = "calc(.3rem - 1px)";
modalFooter.innerText = "Footer"
modalContent.append(modalFooter);
document.body.append(modal);
Array.prototype.forEach.call(document.body.children, (child) => {
if(child.id !== "translation-loader") {
child.style.opacity = 0.1
}
console.log(child.id);
});
#translation-loader {
position: relative;
}
#translation-loader::before {
content: '';
background: white;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 1;
}
<p>
This is a sample text..What'sup
click here
</p>
NOTE: You can change the opacity as per requirement.
A couple of suggestions:
You are doing a lot of styling in javascript. It is much more efficient to use classes. In fact, you already are doing this:
modal.classList.add("animated","fadeInDown")
All of your styling should be via adding classes. Remove all modal.style, modalDialog.style and modalContent.style - just add classes and move the styling into the class (<style></style> block or external stylesheet).
To show/hide the modal, use style.display = none and style.display = block. No need to use opacity. If you want a fadeIn / fadeOut effect, there are many tutorials easily googleable. Here's one:
https://chrisbuttery.com/articles/fade-in-fade-out-with-javascript/
Note that the fade effect is just applied to the outermost div, the modal div. Everything inside that will also fade as that div fades in/out.
Here is a simple example of rolling your own modal dialog:
Easiest way to use div as a modal dialog
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
My Question is: Change opacity of a particular div, on mouse hover, and add a text label, to display which div is being hovered and changed opacity.
My Solution so far- I have changed the opacity, but for all the divs(HISTOGRAM, basically).
Problem- Want to change for a particular div, on HOVER.
HTML File
<head>
<title>Statistical Histograms</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="boxes.css">
<!-- <script src="alter.js"></script> -->
</head>
<body>
<script type="text/javascript" src="box.js"></script>
<form>
Number:<input type="text" id="number"/><br>
<input type="button" id="button1" value="Draw" onClick="draw()"/><br>
<input type="button" id="button2" value="Change Color" onClick="color()"/><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
</body>
JavaScript File
function draw()
{
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0 ; i <= nums.length ; i++)
{
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i+1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
$(document).ready(function() {
$("#histContainer").bind("mouseover", function() {
var shade = $("#histContainer").css("opacity");
$("#histContainer").css("opacity", "0.7");
$("#histContainer").bind("mouseout", function() {
$("#histContainer").css("opacity", shade);
});
//$("histContainer").css("opacity", "0.4");
});
});
Add a class to all divs you would like to attach the hover event to, e.g.
<div class="histogram" id="histogram1"></div>
<div class="histogram" id="histogram2"></div>
<div class="histogram" id="histogram3"></div>
<div class="histogram" id="histogram4"></div>
Then use jquery's hover function to capture the event:
$(document).ready(function() {
$('.histogram').hover(
function() { // handler in
$( this ).css('opacity', 0.7);
// Additional actions (display info, etc.)
}, function() { // handler out
$( this ).css('opacity', 1);
// Additional actions (hide info, etc.)
}
);
})
Use CSS for this.
CSS:
#hover-content {
display:none;
}
#hover-me:hover #hover-content {
display:block;
}
#hover-me:hover {
opacity: 0.8;
}
HMTL:
<div class="container">
<div id="hover-me">
<span>Hover Me</span>
<div id="hover-content">
This content is visible only when you mouse hover the parent div and it has no transition.
</div>
</div>
</div>
Shouldn't you use CSS for that? Give a equal class to your divs and then just do :
.your_div : hover {
opacity: 0.8;
}
check out this snippet if you want only backgroundto be opaque try rgba()
$(document).ready(function() {
$('.histogram').hover(
function() {
$( this ).css('opacity', '0.7');
}, function() {
$( this ).css('opacity', '1');
}
);
})
.histogram{
height:40px;
width:40px;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.yell{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="histogram red" >1</div>
<div class="histogram blue">2</div>
<div class="histogram green">3</div>
<div class="histogram yell" >4</div>
Use this javascript instead. It works.
function draw()
{
var nums = document.getElementById("number").value.split(",");
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
for (var i = 0 ; i <= nums.length ; i++)
{
var x_cor = (i+1) * w;
var h = factor * nums[i];
var change = document.getElementById("histContainer");
var bar = document.createElement("div");
bar.className = 'myClass';
change.appendChild(bar);
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
}
}
$(document).ready(function() {
$(document).on("mouseover",".myClass", function(index,el) {
$(this).text($(this).index());
var shade = $(this).css("opacity");
$(this).css("opacity", "0.7");
$(document).on("mouseout",".myClass", function() {
$(this).css("opacity", shade);
});
});
});
I had some work done on a site and the developer didn't finish the job so I need some (probably) basic code to finish this off.
Basically I need a drop down box to go back up once a user clicks anywhere else on the page. At the moment it just stays dropped down until you click the menu item again.
Here is the code I have taken from the site:
<li class="gendb1" id="gnrl" onclick="gen();" >GENERAL</li>
<li class="gendb" id="dbid" onclick="Db();">D&B</li>
<script>
function gen()
{
var div = document.getElementById("txt");
var txt = document.getElementById("txt2");
if (div.style.height == "0px") {
txt.style.height = "0px";
div.style.height = "230px";
}
else {
div.style.height = "0px";
}
}
function Db()
{
var div = document.getElementById("txt2");
var txt = document.getElementById("txt");
if (div.style.height == "0px") {
txt.style.height = "0px";
div.style.height = "320px";
}
else {
div.style.height = "0px";
}
}
</script>
<div id="txt">
<span style="display: block; margin-top: 29px;">Some text</span>
</div>
<div id="txt2">
<span style="display: block; margin-top: 29px;">Some other text</span>
</div>
Any help would be great. Thank you!
There are probably a number ways to accomplish this. The below snippet contains one method that will "close" the boxes when anything but their "trigger" is clicked. This code also removes the onclick="gen();" and onclick="Db();" scripts from your list item html code and the subsequent functions from the JavaScript code that is not needed.
Hope this helps.
// NEW JAVSCRIPT CODE
<script>
document.addEventListener("click", function dropToggle(event) {
"use strict";
var target = event.target || event.srcElement;
var txtOne = document.getElementById("txt");
var txtTwo = document.getElementById("txt2");
var txtOneTrigger = "gnrl";
var txtTwoTrigger = "dbid";
var targetID = target.id;
switch (targetID) {
case txtOneTrigger:
txtTwo.style.height = "0px";
if (txtOne.style.height !== "0px") {
txtOne.style.height = "0px";
}
else {
txtOne.style.height = "290px";
}
break;
case txtTwoTrigger:
txtOne.style.height = "0px";
if (txtTwo.style.height !== "0px") {
txtTwo.style.height = "0px";
}
else {
txtTwo.style.height = "320px";
}
break;
default:
txtOne.style.height = "0px";
txtTwo.style.height = "0px";
break;
}
});
</script>
SNIPPET
document.addEventListener("click", function dropToggle(event) {
"use strict";
var target = event.target || event.srcElement;
var txtOne = document.getElementById("txt");
var txtTwo = document.getElementById("txt2");
var txtOneTrigger = "gnrl";
var txtTwoTrigger = "dbid";
var targetID = target.id;
switch (targetID) {
case txtOneTrigger:
txtTwo.style.height = "0px";
if (txtOne.style.height !== "0px") {
txtOne.style.height = "0px";
}
else {
txtOne.style.height = "290px";
}
break;
case txtTwoTrigger:
txtOne.style.height = "0px";
if (txtTwo.style.height !== "0px") {
txtTwo.style.height = "0px";
}
else {
txtTwo.style.height = "320px";
}
break;
default:
txtOne.style.height = "0px";
txtTwo.style.height = "0px";
break;
}
});
/* This CSS is just for demonstration purposes only */
#gnrl, #dbid {outline:solid green 1px;}
#txt, #txt2 {outline:solid red 1px;}
<ul>
<li class="gendb1" id="gnrl">GENERAL</li>
<li class="gendb" id="dbid">D&B</li>
</ul>
<div id="txt">
<span style="display: block; margin-top: 29px;">Some text</span>
</div>
<div id="txt2">
<span style="display: block; margin-top: 29px;">Some other text</span>
</div>
Add this.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>