Morning, I have an issue with the styling of a popup window I am trying to create, when a button is clicked, the popup is shown and keeps focus when clicking on the popup body, although when clicking a child element of the popup within it, the popup loses focus.
How can I keep focus on the popup when clicking any child element within the popup?
Many Thanks.
<html>
<head>
<style type="text/css">
#modal{display:none;}
#modal:focus {display:block;}
#modal:focus * #modal{display:block;}/*i thought maybe this would apply when any child element of #modal has focus, although if i give a child element of modal a tabindex, it still doesn't work.*/
.num:focus + #modal{display:block;}
</style>
</head>
<body>
<div id="onetwo">
<input type="button" id="btn1" class="num" tabindex="1" value="Click here"/>
<div id="modal" style="background-color:green;width:200px;height:200px;
position:absolute;top:40%;left:40%;" tabindex="2">
<input type="button" id="btn1" onclick="alert("Alerted")" value="Click.."/>
<input type="text" id="txt1" placeholder="some text"/>
</div>
</div>
</body>
</html>
The problem is that as soon as you click on a child element in the popup, your button is no longer in focus and the popup will not be displayed.
This cannot be done easily just in CSS. The best way would be to use javascript and add click handlers to your button to show and hide the popup using CSS:
var btn = document.getElementById('btn1');
btn.onclick = function() {
var popup = document.getElementById('modal');
if(popup.style.display == 'block') {
popup.style.display = 'none';
}
else {
popup.style.display = 'block';
}
}
See this Fiddle
Related
I have the following code:
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
The result:
When I click on the div #question I go to an other page.
But when I click on the button I also go to the other page.
However my button is disabled...
I would like not to go to another page when I click on the button.
In Firefox when I click on the button nothing happens (This what I want).
But in Chrome I go to the other page...
Someone could help me to permanently disable the button?
I use HTML5 and Bootstrap 4
you have the button inside the div so when you click on the button you are also clicking on the div. You can also do it your way and just check to see if the event.taget is a button. if it is don't go to the url, if it isn't then go.
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
Try moving the onclick to the <button> itself rather than the surrounding <div>. The disabled attribute of the button will not be able to disable the onclick applied to its parent element.
In the two examples below I have styled it so you can see the difference between the surrounding div (In blue) and the button. Notice that the alert will only fire in the top example when clicking the div.
I am assuming that your styling means you can not see the difference between the div and button and it is left for Chrome and Firefox to decide whether you are clicking the disabled button or the div.
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
function myFunction(){
console.log(event.target.innerHTML);
if(event.target.innerHTML=='div')window.location.href='{% url ' + 'read_question' + 'question.id %}';
}
<div id="question" onclick='myFunction()' style="cursor:pointer;">
<button class="btn btn-primary" >div</button>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
If you want to keep the button in the div, you should use event.stopPropagation();. Try the following code.
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
There is also a event.stopImmediatePropagation(); method. I hope this helps you out.
The button is disabled and that works exactly as it should (prevents the default action of the button).
However, by default, click events are bubbling. Which effectively means any such event on any elements in your page does not only get triggered on that particular element, but on every one of its parents until document or until one of the elements in the chain stop the bubbling.
To stop a click event (or any other bubbling event) from bubbling you have to call stopPropagation() method on it.
In your case:
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})
...or, in jQuery:
$('#question btn').on('click', e => { e.stopPropagation() });
Now your button will not pass the click event to the div. If it's enabled it will do what you want it to, if not, it won't. The <div> won't have a clue in either case.
If you only want to cancel the bubbling when the button is disabled, change the selector from #question btn to #question btn[disabled]
I have the next html:
<a href="somelink" class="list-group-item">
Text
<div onclick="func()">Content</div>
</a>
But when I am clicking on my div a is getting an even too. How to prevent subsequent events? I wanna if the user has clicked my div then only this div would was clicked.
UPDATED
Maybe it's not an elegant solution but I have solved my problem so:
<button class="list-group-item" type="button" onlick="link('somelink')">
Text
<div onclick="func()">Content</div>
</button>
Although now it shows a focus highlighter and outline: none; didn't help to hide it.
With pure javascript (with event.preventDefault() to prevent the default action of the link):
<a href = "somelink">
Text
<div id="div">Content</div>
</a>
<br/>
<span id="result"></span>
<script>
document.getElementById("div").addEventListener("click", function(event){
event.preventDefault();
//you may also want to use event.stopPropagation() to stop the event bubbling down the DOM tree
myFunc();
});
function myFunc(){
document.getElementById("result").innerHTML = "Function myFunc called.";
}
</script>
just use the pointer-events property & preventDefault() function to ignore anchor tag:
$('.somelink').on('click', function(e){
e.preventDefault();
console.log(e.target);
})
.somelink{
pointer-events: none
}
.somelink > div {
pointer-events: all
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href"somelink">
Text
<div onclick="func()">Content</div>
</a>
I want load a disabled button by default but change it to enable on click the button. Here is how I did it.
<button id="Btn" class="navBtn" disabled onclick="enableBtn()">click to enable</button>
function enableBtn() {
document.getElementById("Btn").disabled = false;
}
But it is not working....
I've tried to load an enabled button by default and click to disabled, but the reverse is not working...
I'm using HTML and JavaScript
You are trying to click on a disabled button. The button is disabled, so it can't be clicked.
Why are you trying to make it so that you have to click to activate it in the first place? Maybe there is a better solution to the problem as a whole?
Edit: The actual purpose of the button is to toggle a boolean, this can be done fairly easily like this.
var enableFeature = false;
function toggleFeature(){
enableFeature = !enableFeature;
(put code setting the feature's status to enableFeature here)
}
https://www.w3schools.com/js/js_booleans.asp
You can use this code -
//html
<button id="Btn" class="navBtn" onclick="enableBtn()">click to enable</button>
//js
function enableBtn() {
document.getElementById("Btn").setAttribute("disabled", "false")
}
A disabled button cannot trigger the click method, you should better add a CSS class which makes the button look like disabled.
Here is an example:
<style>
button.inactive {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
</style>
<button id="Btn" class="navBtn" onclick="toggleBtn()">click to enable</button>
<script>
var buttonEnabled = true;
function toggleBtn() {
if（buttonEnabled){
document.getElementById("Btn").className = "navBtn inactive"
} else {
document.getElementById("Btn").className = "navBtn";
}
buttonEnabled = !buttonEnabled;
}
</script>
You can solve it by adding a wrapper around it that listens to a click event to enable the underlying button.
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>
However, this approach requires a CSS addition: pointer-events which is well supported on desktop browsers. Here is the CSS I added to your button:
#Btn {
pointer-events:none;
}
This allows you to enable your button when clicking on it.
Life example:
function enableBtn() {
console.log('button enabled');
document.getElementById("Btn").disabled = false;
}
#Btn {
pointer-events:none;
}
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>
I have a page which contains at the bottom 3 buttons with the following coding:
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
printButton.style.visibility = 'visible';
}
#options {
align-content:center;
align-items:center;
text-align: center;
}
<div id="options">
<input type="submit" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" value="re-enter the news">
</div>
I managed to hide the print button while printing but i couldn't with the others.
I've searched the internet for the solution, and most questions were answered by adding the display:none; in css, but i end up with 3 hidden buttons on the screen.
I only want the buttons hidden while printing
Answer might be simple, my knowledge in web developing is acient.
Thank you in advance.
You can use CSS #media queries. For instance:
#media print {
#printPageButton {
display: none;
}
}
<button id="printPageButton" onClick="window.print();">Print</button>
The styles defined within the #media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a blank page.
You can use a css media query to target print:
#media print {
.hide-print {
display: none;
}
}
Assign an id to the other 2 buttons. For the POST NEWS button you can set id to postnews and RE-ENTER THE NEWS to reenterthenews; Then do this
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
var postButton = document.getElementById("postnews");
var reenterButton = document.getElementById("reenterthenews");
//Set the button visibility to 'hidden'
printButton.style.visibility = 'hidden';
postButton.style.visibility = 'hidden';
reenterButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Restore button visibility
printButton.style.visibility = 'visible';
postButton.style.visibility = 'visible';
reenterButton.style.visibility = 'visible';
}
HTML
<div id="options">
<input type="submit" id="postnews" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" id="reenterthenews" value="re-enter the news">
</div>
I have a button with an image that links to another page when pressed. It all works fine, except when I click on the button it blanks out, and the image does not reappear until something else on the page is selected. The HTML is as follows:
<input type="submit" class="personalbutton" value="" onclick="location.href='http://www.google.ca'">
The personalbutton CSS class:
.personalbutton {
background-image: url(../images/buttons/buttonimage.png);
width: 175px;
height: 50px;
}
How do I prevent this from happening?
Instead of using a tag of type 'submit' to create your button, try using the tag and see if you still have the same problem.
<button class="personalbutton" onclick="location.href='http://www.google.ca'">Click Me</button>