I want scroll not working
So, when open popup overflow value is hidden,
and close popup overflow value is initial..
but not working when close popup overflow value
window.onload = function () {
document.getElementById('button').onclick = function () {
document.getElementById('modal').style.display = "none"
document.body.style.overflow = "initial";
};
};
if(document.getElementById('modal').style.display = "block"){
document.body.style.overflow = "hidden";
} else if(document.getElementById('modal').style.display = "none"){
document.body.style.overflow = "initial";
};
You can check problem captures
enter image description here
Related
I am building a web app that has a fixed positioned Sidenav bar on Desktop always visible but on Mobile the Sidenav is hidden and the user clicks the Hamburguer button to Show it as modal and of course Close it later (Using Javascript for that).
The Problem
Lets imagine an iPad, that Vertically display mobile view but Horizontally displays the desktop view. If the user is Vertically and he toggles the Sidenav Visible and then Hidden, but if later he changes the orientation to Horizontal the Sidenav will be hidden, and the expected behaviour is that on desktop the Sidenav is always visible (I think this is because CSS Styles are loaded on page render, and when I change the styles with JS to toggle visibility it remains that way even when the DOM resized).
Question
The solution that occurred to me is having 2 identical Sidenavs and 1 show only on desktop and 1 only on mobile, and that way the styles of 1 dont affect the other, but that means a duplicated code.
If I want a more elegant solution without duplicating a whole block of code, I wonder if there is a way to reset all CSS values when it detects a Media Query Breakpoint, or what could be another solution?
I hope I explained well, and thank you for you help.
Edit: Solution I found thanks tacoshy's comment
When the Resize Event detects the Breakpoint it forces to trigger the Hide/Show function for the Sidenav
const showDrawer = () => {
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
drawerBack.style.opacity = "1";
drawer.style.left = "0";
drawerBack.style.visibility = "visible"
}
const hideDrawer = () => {
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
drawerBack.style.opacity = "0";
drawer.style.left = "-16rem";
setTimeout(
() => {drawerBack.style.visibility = "hidden"}
, 500);
}
window.addEventListener("resize", resizeFunction);
const resizeFunction = () => {
var w = window.outerWidth;
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
if (w > 1216) {
drawerBack.style.opacity = "1";
drawer.style.left = "0";
drawerBack.style.visibility = "visible";
} else {
drawerBack.style.opacity = "0";
drawer.style.left = "-16rem";
setTimeout(
() => {drawerBack.style.visibility = "hidden"}
, 500);
}
}
Solution I found thanks tacoshy's comment
When the Resize Event detects the Breakpoint it forces to trigger the Hide/Show function for the Sidenav
const showDrawer = () => {
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
drawerBack.style.opacity = "1";
drawer.style.left = "0";
drawerBack.style.visibility = "visible"
}
const hideDrawer = () => {
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
drawerBack.style.opacity = "0";
drawer.style.left = "-16rem";
setTimeout(
() => {drawerBack.style.visibility = "hidden"}
, 500);
}
window.addEventListener("resize", resizeFunction);
const resizeFunction = () => {
var w = window.outerWidth;
var drawer = document.querySelector('.drawer');
var drawerBack = document.querySelector('.drawer-back');
if (w > 1216) {
drawerBack.style.opacity = "1";
drawer.style.left = "0";
drawerBack.style.visibility = "visible";
} else {
drawerBack.style.opacity = "0";
drawer.style.left = "-16rem";
setTimeout(
() => {drawerBack.style.visibility = "hidden"}
, 500);
}
}
When the user clicks a div an image appears and then they click the image to hide it. What I'm trying to do is disable all clicks on the page after the div is clicked for a couple seconds so the user doesn't accidentally close the image while they're waiting for it to appear.
I'm using javascript to show/hide the image
function showCard(ele) {
var id = ele.id;
var x = document.getElementById(id);
var y = document.getElementById("cards");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "block";
} else {
x.style.display = "none";
y.style.display = "none";
}
}
I've done this before for a button but I'm not really sure how to disable the click when it's not a button.
Thanks in advance for any advice.
You can have a boolean variable on the click handlers that you want to disable.
And then check the variable to check if it will be possible to click or not.
Like in the example below, were you can only click once a second in the red box to change its color.
let allowClicks = true;
document.getElementById('main').addEventListener('click', (e) => {
if(allowClicks) {
e.target.style.background = e.target.style.background === 'red' ? 'blue' : 'red';
allowClicks = false;
setTimeout( () => allowClicks = true , 1000 );
}
});
html, body, #blo {
height: 100%;
}
#main {
width: 100%;
height: 100%;
}
<div id="main" style="background: red"></div>
So I am experiencing a weird bug that I do not know how to fix. When I click a button on my website called "Enlarge" it starts an overlay and inside there is a canvas that loads a protein structure. But when I click the close button and try to enlarge it again it loads up nothing and I can't seem to figure out why.
Example HTML
<!-- Expanded Canvas-->
<div id= "myNav" class ="overlay">
X
<div class = "overlay-content">
<div class = "fixed">
</div>
<div id = "viewer2">
<canvas id = "expandedCanvas"></canvas>
</div>
</div>
</div>
</div>
<a id = "expandImage" style = "cursor:pointer">[Enlarge]</a>
<script>
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("sequence-label").style.display = "none";
document.getElementById("picked-atom-name").style.display = "none";
document.getElementById("proteinAlbum").style.display = "none";
}
</script>
The JS
function expandImage() {
expandImageButton = true;
//Start off as default for both the buttons not showing
show("antibodyOn", false);
show("antibodyOff", false);
//Reset the width
document.getElementById("myNav").style.width = "100%";
viewer.requestRedraw();
viewer = pv.Viewer(document.getElementById('viewer2'), {
antialias : true, fog : true,
outline : true, quality : 'high', style : 'phong',
selectionColor : 'white', transparency : 'screendoor',
background : '#111215', animateTime: 500, doubleClick : null,
});
//Fit to the nav bar
viewer.fitParent();
this.value = "";
this.blur();
// Same principle as the loadFromPdb
var XHR = new XMLHttpRequest();
XHR.open("GET", urlPdb, true);
XHR.send();
XHR.onreadystatechange = function () {
if (XHR.readyState === 4) {
if (XHR.status === 200 || XHR.status === 0) {
staticProteinLabel = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(62, 4).trim();
var canvasStaticLabel = document.getElementById('static-label');
canvasStaticLabel.textContent = staticProteinLabel;
typeOfProtein = XHR.responseText.slice(0, XHR.responseText.indexOf("\n")).substr(10, 26).trim();
var result = XHR.responseText;
var allLines = result.split("\n");
var lineTwo = String(allLines[1]);
alert(lineTwo);
var antibodyText = "ANTIBODY";
if (typeOfProtein === "COMPLEX (ANTIBODY-ANTIGEN)") {
isAntibody = true;
anitbodyOn();
}
else if (lineTwo.indexOf(antibodyText) ) {
isAntibody = true;
antibodyOn();
}
}
}
}
io.fetchPdb(urlPdb, function(s) {
structure = s;
mol.assignHelixSheet(structure);
cartoon();
viewer.autoZoom();
});
}
So I was wondering if it was just the problem with the changing of the width and it can't load up the viewer again and how to go about fixing it?
So I was able to figure it out. The data inside of the canvas needs to be destroyed, so I wrote a little function to erase the data and clear the canvas so it can reload again.
I've got an HTML/jQuery Mobile project and I have a dialogue box with a 'create button'. When the 'create button' is pressed I need it to go back to previous page (however it can't access the previous page because the VisualStudio won't let me redirect to a page not in the same folder as my dialogue?) So two questions really, the first is how can I redirect to previous page through this button click. It works like this, you start off on a page and click new profile to create a new profile, once Create is clicked on the dialogue it needs to go back to the main page with new methods, which brings me to the second question.
The button accesses two methods which are checkNewUser(); and toggle(); checkNewUser is basically validation in the form and toggle is to make some DIVs appear and disappear when redirected back to the original page. My main question is how do I get the submit button to do the checkNewUser method first, and if the credentials entered are valid then do the toggle method and redirect to my main page, I hope this makes sense and I don't get down voted into oblivion :-)
<a href="C:\Users\A569417\Documents\AppsMaintenance\UI\Privileges.html" önclick="checkNewUser(); toggle();" data-role="button" data-theme="b"
data-inline="true" data-mini="true" data-icon="check">Create</a>
Here is the checkNewUser method:
function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
}
else {
console.log("failed")
}
and the checkTextboxesValid method that it uses:
function checkTextboxesValid() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
var error_message = "";
// check the fields aren't empty
if (profileName == "") {
error_message = "You must enter a profile name";
} else {
$("#profilename").removeClass("ui-body-f").addClass("ui-body-a");
}
if (companyCode == "" || companyCode == "Company") {
error_message = "You must select a company code";
} else {
}
if (error_message != "") {
$("#message_table").removeClass("hide_element");
$("#login_status_message").html(error_message);
return false;
} else {
return true;
}
then finally this is the Toggled method that hides the divs. I'm not sure how I can get both methods to be used by the submit button and the toggle method only works if the validation is okay. I'm guessing I'd have to combine the two methods or maybe there's a simpler way?
var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),
toggle = function () {
if( toggled ) {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "block";
div4.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "block";
}
toggled = !toggled;
};
tried using the one answer posted but that one didn't work, the div's weren't affected in that method but I can't see why not, anyone help me out?
Since you have tagged jQUery I would consider changing getElementById to $("#..
However (embed your toggle inside your check):
function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),
toggle = function () {
if( toggled ) {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "block";
div4.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "block";
}
toggled = !toggled;
};
}
else {
console.log("failed")
}
Glad I could help. I think you should use this refactored code instead:
function checkNewUser() {
var profileName = $("#profilename").value;
var companyCode = $("#companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
var toggled = false,
div1 = $("#OldProfile"),
div2 = $("#NewProfile"),
div3 = $("#OldProfileButtons"),
div4 = $("#NewProfileButtons"),
toggle = function () {
if( toggled ) {
$(div1).css('display','block');
$(div2).css('display','none');
$(div3).css('display','block');
$(div4).css('display','none');
} else {
$(div1).css('display','none');
$(div2).css('display','block');
$(div3).css('display','none');
$(div4).css('display','block');
}
toggled = !toggled;
};
}
else {
console.log("failed")
}
I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code)..
but it doesn't work :/
here is my code:
function show_hide_box(an, width, height, borderStyle) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
var browserIsIE = true;
} else { browserIsIE = false; }
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
can any help me please?
That should mean that the path of src is wrong. ie, ../../Images/closebox.png
Add this to your code and see whether this works
inImage2.setAttribute('alt', 'Close');
Even if this doesn't work, it shows you that something else is wrong with the code.
Its a very good practice to add alt attribute to img tag always.
Update:
I just saw this inClosebox.style.visibility = 'hidden';
You are appending img to that and so how are you gonna possibly make it visible when the parent is hidden?
Beats me. Or do you have extra code? If no, please remove that line and try.