Disable div onclick when I click on button - html

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]

Related

How to make inner div clickable?

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>

Bootstrap Button Group Show/Hide Div

I've got a Bootstrap button group that has 2 buttons (JSON and XML) with JSON being active when the page is loaded. Pressing the XML button will automatically change focus to it.
Now, I'd like to attach some behavior to these buttons so that clicking the XML button hides the error-json pre element and shows the error-xml pre element.
Is there a Bootstrap-native way to accomplish this?
<div class="btn-group">
<button class="btn btn-default" autofocus="true">JSON</button>
<button class="btn btn-default">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
$("#error-xml").hide();
$(".btn").click(function () {
var id = $(this).attr("id");
if(id == "json"){
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-xml").hide();
$("#error-json").show();
}else{
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-json").hide();
$("#error-xml").show();
}
});
:focus{
outline: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn btn-default" id="json" autofocus="autofocus">JSON</button>
<button class="btn btn-default" id="xml">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
I think this can be accomplished with css dependencies. You can use the css selector #error-json + #error-xml {
/*something here*/
}
Bootstrap has pre-builtin classes to show/hide elements. You find the classes in the documentation:
http://getbootstrap.com/css/#helper-classes-show-hide
Maybe this thread helps out:
On a CSS hover event, can I change another div's styling?
Why do you dont want to use javascript/jQuery to add the desired behaviour?
Regards

Button does not work properly

I'm using button with position:fixed. If I hover mouse, it changes as a hand symbol when after scrolled it does not hover.
Before scrolling hover works at center of the button not at edges.
<form action="response.php">
<button style=" position:fixed;" >Get Your Result </button>
</form>
default position i bring mouse into center of button it works
same default position hover is not working even mouse cursor on button
finally i scrolled after hover entirely gets disabled
Try adding z-index property to your button.
This might be happening because on scroll, your button might be having any other element overlapping it.
FYI: In z-index, elements with higher z-index value comes in front.
I think need to set button type
Like this
<button type="submit" style=" position:fixed;" >Get Your Result </button>
I think here works what you want:
<form action="response.php" style="min-height:800px;">
<button style=" position:fixed; cursor:pointer;" >Get Your Result </button>
</form>
Check Fiddle
Use this
<form action="response.php">
<button type="submit" style=" position:fixed;cursor:pointer;" >Get Your Result </button>
</form>
Are you looking something like this:
<body>
<form action="response.php">
<button type="button" style=" position:fixed;" >Get Your Result </button>
</form>
</body>
styles
button:hover{
background-color: red;
cursor: pointer;
}
body{
height: 2000px;
}

Focus selector, keep focus on popup

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

Bootstrap refresh icon with text on Submit button

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}