I have this HTML structure:
<button onclick="console.log('blih');">
<div style="padding:20px; border: 1px solid black" onclick="console.log('blah');">Test</div>
Test 2
</button>
This always only fires the button onclick when clicked, even inside the "Test" zone. How can I get it to fire the div's onclick ?
I have the problem on Firefox, this works fine on Chrome and Safari.
JSFiddle: https://jsfiddle.net/ovr0w9w4/
That won't work consistently, because it's not valid to have a <div> in a <button>.
You can fake a button though.
.btn {
border: 1px solid black;
border-radius: 2px;
display:inline-block;
padding: 0.2em;
background-color: #dddddd;
}
.btn:active {
background-color: #aaaaaa;
}
.btn > div {
padding:20px;
border: 1px solid black;
}
<div class="btn" onclick="console.log('blih');">
<div onclick="console.log('blah');">Test</div>
Test 2
</div>
Instead of invalid html you could simply use Bootstrap and add btn class to your first <div>.
<div id="div1" class="btn btn-default">
<div id="div2">
</div>
</div>
See example: https://jsfiddle.net/ddan/co5sm0d6/
Related
My webpage is constructed as:
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
I want to be able to change the color of the button inside the particular <a> </a> that's being hovered over. How should I write the javascript to do it? Thanks so much for the help!
First at all, you only need a button to fire an JS onclick event. In every other case you use a div to style a "button". Also a button is not an empty tag and therefor needs a closing tag <button>Text</button>
Just like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
<div>I'm a Link-Button</div>
to change the color during hover, you dont need JS. You can simply use the :hover pseudo selector like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
a:hover div {
background-color: red;
}
<div>I'm a Link-Button</div>
As you insist on using your invalid HTML and seem not to understand the use of :hover the same for your code:
.hoverMe:hover .changeColor {
background-color: red;
}
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 1</button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 2</button>
</div>
</div>
</div>
</a>
This is a pretty basic question checking docs usually can help you. Check this out
The use of :hover pseudo selector will help you achieve what you want. In our example we see the a:hover action which enables the hover color change.
a:hover {
background-color: yellow;
}
a {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
w3schools.com
wikipedia.org
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
I have 4 buttons and each button have a diferent style when it is pressed, but when I do click in other side I lost the style of the button.
.bar-serv {
padding: 12px 20px;
display: inline-block;
width: 90px;
text-align: center;
}
.bar-opt1:focus {
border-bottom: #7ebf10 solid 2px;
}
.bar-opt2:focus {
border-bottom: #1F589A solid 2px;
}
.bar-opt3:focus {
border-bottom: #73afe7 solid 2px;
}
.bar-opt4:focus {
border-bottom: #e73827 solid 2px;
}
<div id="chooseServ" class="block">
<div class="container">
<p class="p-20" style="display: inline;">options: </p>
<a onClick="method1" class="bar-serv bar-opt1 p_lr_20">option1</a>
<a onClick="method1" class="bar-serv bar-opt2 p_lr_20">option2</a>
<a onClick="method1" class="bar-serv bar-opt3 p_lr_20">option3</a>
<a onClick="method1" class="bar-serv bar-opt4 p_lr_20">option4</a>
</div>
</div>
You are using The :focus CSS pseudo-class that gets triggered when the user clicks or taps on an element. This is usually used on form fields
Try using the :active CSS pseudo-class instead that gets triggered when the user presses down the primary mouse button and ends when it is released.
Try this in CSS!
bar-opt1:hover{
background-color:red;
border:1px solid black;
}
I have a couple of buttons, which stand for available webservices in form of maps or graphs. The user would be able to drag the buttons in different DIVs of various sizes on the screen, in order to compose for himself a context on the GUI which fits his needs.
I am not very familiar with the drag-and-drop functionalities of HTML5 and jQuery. I have set up an example, which works fine for a single button and single DIV. But working with multiple buttons and multiple DIVs, I wonder if that workflow of mine is the right one.
I have set up a Fiddle here. The first button can be dragged to the first DIV, and an image (just a placeholder) appears. The others don't work yet.
As the DIVs and Buttons are called by IDs, I could now just have four different IDs for the buttons and four different IDs for the DIVs. But that would that mean that I have to write four times the same javascript code, with the different IDs hard-coded into it? I guess there is a more flexible solution to this, no? Especially, as the target DIVs must stay flexible...
I wonder too how I can avoid of having the button disappear, once it is being dragged. I would rather want to make it grey or so.
Thanks for any hints!
The GUI would look like this:
For the buttons, I have this:
<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
For the javascript part:
function onDragOver(e) {
e.preventDefault();
e.target.className = "over-me";
}
function onDragLeave(e) {
e.target.className = "static";
}
function onDragStart(e) {
e.target.innerHTML = "<h4>You are Dragging me</h4>";
document.getElementById('dropzone1').className = 'drop-into-me'
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
document.getElementById('dropzone1').className = 'static'
if (e.target.parentElement.id === "dropzone1") {
e.target.innerHTML = "<img src='http://ede.grid.unep.ch/images/logo_geo.gif'>";
}
}
function onDrop(e) {
e.preventDefault();
var draggableDiv = document.getElementById("a-draggable-div");
draggableDiv.setAttribute("draggable", "false");
e.target.appendChild(draggableDiv);
}
For the CSS:
#dropzone1, #dropzone2, #dropzone3 {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}
Here is a solution for which you need not to use id You can have as many number of buttons and corresponding number of divs to drop in.
Have given ids to divs where you will be dropping the buttons just to show in which div the button have been dropped in.
Here is the updated Fiddle.
//just to know which button is being dragged we will use this variable
var draggingDiv;
function onDragOver(e) {
e.preventDefault();
e.target.classList.add("over-me");
}
function onDragLeave(e) {
e.target.classList.add("static");
e.target.classList.remove("over-me");
}
function onDragStart(e) {
draggingDiv=e.target;
e.target.innerHTML = "<h4>You are Dragging me</h4>";
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
e.target.parentElement.classList.add("static");
draggingDiv.innerHTML="<h4>Dragged once Can't drag me now:)</h4>";
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>";
}
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
//uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
//draggingDiv.draggable=false;
//e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
}
.dropzone {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}
<div draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
Hope it helps :)
I need your help,
Without using long and code resource intensive jQuery and Javascript context menu plugins, how can one, just using plain & simple jQuery code to basically take my div (which has the id: 'right-click-menu') and bind a right click action to the other div which had the id: box1?
Here is a fiddle: http://jsfiddle.net/ALAHX/
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#right-click-menu {
width: 150px;
border-top: 1px solid rgb(212,208,200);
border-left: 1px solid rgb(212,208,200);
border-right: 1px solid rgb(64,64,64);
border-bottom: 1px solid rgb(64,64,64);
font-family: tahoma;
font-size: 8.5pt;
box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
list-style-type: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
background: rgb(212,208,200);
margin: 0;
padding: 2px
}
#right-click-menu ul li {
padding: 4px;
}
#right-click-menu li:hover {
color: #fff;
cursor: pointer;
background: rgb(10,36,106);
}
</style>
</head>
<body>
<div id="right-click-menu">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>
</html>
Javascript:
$(document).ready(function() {
$('#box1').mouseup(function(event) {
if (event.which == 3) { // right click
$('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
}
});
});
HTML: Be sure to include position: absolute for the menu to allow it to move around, and oncontextmenu to return false to prevent the default browser right-click.
<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
Fiddle:
http://jsfiddle.net/ALAHX/1/
You'll want to include things like hiding the menu at first and when options are selected, but this should get you started.
Looking at you comment, you may or may not have included jQuery in your project, which is a Javascript addon. The above code is written using jQuery, so make sure to include a <script> link to it in your HTML.
$(document).ready(function(){
$('div').click(function(){
$('#box1').slideToggle('slow');
});
});
Maybe something like this?
I have links on my web page that are called like this:
<a href="/xxx/" >
<button >xxx</button>
</a>
I have several like this and I would like to make it easy for a user to click them without the user having to go to the button and click. Is it possible for me to give the user a shortcut such as ALT M or something like that assigned to a button? Also can I make a button be the default if the user clicks enter?
You should use the accesskey property
<a href="/xxx/" >
<button accesskey="M" >xxx</button>
</a>
Give the element an "accesskey" using accesskey="1". When a user presses 1 that will activate the link.
EDIT
For a javascript (jQuery) solution see this SO post
I would recommend styling a div to look like a button as they do for the tags here on stackoverflow.com as an example
<div class="post-taglist">
<a class="post-tag" rel="tag" title="" href="/questions/tagged/javascript">javascript</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/html">html</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/css">css</a>
</div>
CSS used by stackoverflow.com (needs a bit of work!)
.post-taglist {
clear: both;
margin-bottom: 10px;
}
.edit-tags-wrapper > a.post-tag {
margin-right: 6px;
}
.post-tag, .post-text .post-tag, #wmd-preview a.post-tag {
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
color: #3E6D8E;
font-size: 90%;
line-height: 2.4;
margin: 2px 2px 2px 0;
padding: 3px 4px;
text-decoration: none;
white-space: nowrap;
}
post-tag:hover, .post-text .post-tag:hover, #wmd-preview a.post-tag:hover {
background-color: #3E6D8E;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
color: #E0EAF1;
text-decoration: none;
}
Alternatively you can wrap your button in a form element like
<form method="post" action="nextPage.html" >
<button>Press me</button>
</form>