This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I have 5 buttons that are coded on 1 single line. This allows me to squeeze them next to each other without any spaces in between, which is what I want.
However, if I move the code for each button down one line, there are spaces in between the buttons, which is what I don't want.
Here is the sample code for 2 buttons:
<button id="home" type="button">Home</button><button id="save" type="button">Save
</button><button id="create" type="button">Create</button>
Thanks
You could put the newline character inside your tags:
<button>btn1</button
><button>btn2</button
><button>btn3</button>
You can comment out the space between your tags so it's as if the space wasn't even there.
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>
As for the CSS, CSS lets you define attributes for multiple classes/ids/etc at the same time.
#save, #home {
margin-top: 20px;
height: 40px;
width: 240px;
}
#home { margin-left: 40px; }
Create your buttons with a class:
<button class="button" id="save">Save</button>
<button class="button" id="new">New</button>
<button class="button" id="load">Load</button>
Create a class in the CSS file:
.button {
display: block;
float: left;
width: 100px; /*For example*/
}
That will make your buttons stick together without spaces, and HTML will be more readable.
EDIT: As you use an ID, add that ID in your CSS class with a margin-left.
/* in this example, the button to the mostleft is #save, so...*/
#save {
margin-left: 10px;
}
Here is the demo
You can use the "class" attribute of the input element to define styling options which are influencing all the buttons that got the class. Let me show you:
<button id="home" type="button" class="btn-style">Home</button>
<button id="save" type="button" class="btn-style">Save</button>
<button id="create" type="button" class="btn-style">Create</button>
And in your css you have the stylings:
.btn-style{
//your css here
}
To have no space between the buttons you simply use CSS styling. But for that make, search at google. You may need styling attributes like "display, margin, float...".
Greetz
Well, it's pretty irritating that HTML does this but the way I solve it is as follows:
<button>btn1</button
><button>btn2</button
><button>btn3</button
><button>btn4</button
><button>btn5</button>
Or as other users are also suggesting, you can insert comments in-between:
<button>btn1</button><!--
--><button>btn2</button><!--
--><button>btn3</button><!--
--><button>btn4</button><!--
--><button>btn5</button>
For your problem of spaces between inline-elements such as <button>, try to write the code like that :
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>
Apply common css by button selector and any specific styles by their ids
button{
margin-top: 20px;
height: 40px;
width: 240px;
}
#home{
margin-left: 40px;
}
#save{
}
Related
Not really sure how to word it but here is the CSS code I'm working with.
<style>
#st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide,
#st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide {
left:0;
}
</style>
How do I go about calling the whole thing using the jquery $('.className').removeClass('className'); when the piece of style code is using more than one ID AND Class? How do I reference all of that within the '.className' part of the jquery code? I want to remove this piece of code from a document that cannot be modified or edited internally. I can only add on to the existing code. I'm pretty new to how jquery works. Thanks!
Here is a simple way to add and remove classes & ID's with jQuery
$('.addColor').on("click", function(){
$('.box').addClass("blue")
})
$('.removeColor').on("click", function(){
$('.box').removeClass("blue")
})
$('.addId').click(function(e){
$(".box").attr("id", "yellow");
});
$('.removeID').click(function(e){
$('.box').removeAttr('id');
});
.box {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
.blue {
background-color: blue;
}
#yellow {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<br />
<button class="addColor">Click to add class</button>
<br /><br />
<button class="removeColor">Click remove class</button>
<br /><br />
<button class="addId">Click add an ID (yellow)</button>
<br /><br />
<button class="removeID">Click remove an ID</button>
JSFiddle example
You can insert another <style> element into the page overriding the values of the previous one.
Although not best practice, you can use the !important flag to ensure your rules take preference
var myStyle = '\
#st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide,\
#st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide { \
left:auto!important;\
}';
$('body').append($('<style>'+myStyle+'</style>'));
The backslashes \ are only used to increase code readability
Otherwise you can change the elements class from .advanced_style_wide to something else, or remove the class using jQuery's .removeClass('.advanced_style_wide') which should stop the rules from your question effecting it
I'm currently working on a project where I'm writing a webpage that gives basic diagrams about human anatomy. What I'm currently testing is the ability to switch dynamically between different images at the press of a button using a Javascript function, so that the user will eventually be able to switch between different views of the human body.
This is the code that I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function skin()
{
document.getElementById("image").src="humanoutline.jpg";
}
function muscle()
{
document.getElementById("image").src="humanoutline2.jpg";
}
function organs()
{
document.getElementById("image").src="humanoutline3.jpg";
}
function skeleton()
{
document.getElementById("image").src="humanoutline4.jpg";
}
</script>
</head>
<body>
<style>
.button
{
background-color: green;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#image
{
position:absolute;
width:500px;
height:700px;
z-index: 0;
top: 30%;
left: 45%;
padding:50px;
margin: -100px 0 0 -200px;
text-align:center;
align-content:center;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
#rightside
{
text-align:center;
width:400px;
height:1000px;
padding: 30px;
line-height: 100px;
float:right;
outline-style:solid;
outline-width:1px;
outline-color:black;
}
</style>
<div id="rightside">
<p>Select Layer</p>
<form>
<button class="button" onclick="skin()">Skin</button><br>
<button class="button" onclick="muscle()">Muscle</button><br>
<button class="button" onclick="organs()">Organs</button><br>
<button class="button" onclick="skeleton()">Skeleton</button><br>
</form>
</div>
<div>
<img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; ">
</div>
</body>
</html>
While this should work in theory, the problem is that whenever each of the buttons is pressed, the page only partially loads the new image and then switches back to the default image, which is humanoutline.jpg.
For reference, here are the four images that I'm currently using.
humanoutline.jpg:
humanoutline2.jpg:
humanoutline3.jpg:
humanoutline4.jpg:
The issue is that the button is "submitting" the form, which causes the page to reload.
The simple solution is to modify your functions as follows:
function skin() {
document.getElementById("image").src="humanoutline.jpg";
// the "return false" will cause the button to NOT submit the form
return false;
}
however your code as written so far is going to get large quickly, and be difficult to maintain, so I'd like to suggest / offer an alternative method of doing this.
You can change your buttons to call the same function, but pass in the parameter that is relevant. Additionally, they should return, see below:
<form>
<button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br>
<button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br>
<button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br>
<button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br>
</form>
And also change your script to accept a parameter, and use that in the image:
function changeImage(img) {
document.getElementById("image").src=img;
return false;
}
You just need to add type="button" to the <button> tags, like this:
<form>
<button type="button" class="button" onclick="skin()">Skin</button><br>
<button type="button" class="button" onclick="muscle()">Muscle</button><br>
<button type="button" class="button" onclick="organs()">Organs</button><br>
<button type="button" class="button" onclick="skeleton()">Skeleton</button><br>
</form>
And here's a codepen with the change that's working (though the image URLs are hotlinked from the uploads in this SO question, so I'm not sure if they'll keep working): http://codepen.io/anon/pen/GZZJVv
I have the following part of code:
<div id="code" class="bg-primary">
<div class="code-output">rgb(0,0,0);<div class="btn btn-warning pull-right" id="reset">Reset</div></div>
</div>
The problem is that the button with id="reset" will not appear at all sometimes or will disappear after clicking it.Any ideas?Here is my css and some js:
CSS
#reset{
position: relative;
bottom: 0.56em;
left: 0.5em;
}
JS
$('#reset').click(function(){
$('.rgb').val(0);
color="rgb(0,0,0)";
$(".code-output").html(color+";");
$("#rgbaOutput").css("background","black");
});
It seems that you want to close div for your code output before you declare your button, otherwise calling html() method will erase your button.
Also notice my JavaScript Tweaks - don't use variable before you declare it - because it will go to the global object (talking about color var).
Extra advices: Try to be consistent using quotations. Try to be consistent about code indentation. Also, put a space around operators. All those small details improve readability of your code.
(I am ignoring that there's jQuery statements that don't do anything in the example code, assuming that it would do something in your full context)
$("#reset").on("click", function () {
var color = "rgb(0,0,0)";
$(".rgb").val(0);
$(".code-output").html(color + ";");
$("#rgbaOutput").css("background", "black");
});
#reset {
position: relative;
bottom: 0.56em;
left: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="code" class="bg-primary">
<div class="code-output">rgb(0,0,0);</div>
<div class="btn btn-warning pull-right" id="reset">Reset</div>
</div>
Well you say this:
$(".code-output").html(color+";");
Which will replace everything in the <div class=".code-output"> and make the rgb value appear.
Because your reset div is inside this div, it will disappear (obviously).
Just use this instead:
<div class="code-output">rgb(0,0,0);</div> <!-- use </div> tag here -->
<div class="btn btn-warning pull-right" id="reset">Reset</div> <!-- instead of here -->
I have following HTML snippet for a button:
HTML:
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos"></button>
</div>
<div class="ClearText">
Clear
</div>
</div>
CSS:
div.ClearButton
{
vertical-align: top;
display: inline-block;
background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
height: 16px;
overflow: hidden;
width: 16px;
}
div.Clear
{
vertical-align: top;
display: inline-block;
overflow: hidden;
cursor: pointer;
padding-left: 2px;
padding-bottom: 6px;
padding-right: 6px;
padding-top: 4px;
}
On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.
var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;
As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.
Use :
resetBtn.disabled = "disabled";
This works in all browsers -> http://jsfiddle.net/fMV4B/
Using Only CSS:
//CSS
.no-click {pointer-events: none;}
<input class="no-click" />
You can do it with the method : setAttribute()
Your js will be like that :
document.getElementById("reset").setAttribute('disabled','disabled');
This JSFiddle shows it working, based on this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled. It could be that it's not working as expected because your CSS is making it visually appear different. Remove you CSS first to make sure the JavaScript it working as expected.
Here's the code for the JSFiddle:
<button type="button" id="test">Click Me!</button>
<script>
document.getElementById("test").disabled = true;
</script>
Do you have an example of when your JavaScript is running?
Have you read through this answer or tried
https://stackoverflow.com/a/3014678/2992661
resetBtn.setAttribute('disabled', 'disabled');
Your code works fine.
The problem is almost certainly that the JavaScript code is either not being called at all or is being called in the wrong spot.
If you run this code immediately, make sure that the DOM is loaded (window.onload callback, or preferably have your JS code right before </body>).
Otherwise just make sure that any event that runs the JS code is actually firing.
Try this code:
To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.
$('#buttonId').click(function(){
$('#buttonId').attr("disabled", true);
});
To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute:
$('#buttonId').attr("disabled", false);
or
$('#buttonId').removeAttr("disabled");
I am trying to create button group (text and icon buttons next to each other) with bootstrap 2.
<div class="btn-group chips">
<button type="button"class="btn btn-large btn-success userChips">asdasd</button>
<button type="button" class="btn btn-large btn-danger removeUser">
<i class="icon-minus-sign"></i>
</button>
</div>
the size of the left button (the one with the icon) is smaller then the one with the text (the right one).
How do I fix this?
Apply a fixed width
.btn {
width: 80px;
}
While applying a fixed with will get you the expectation, it carries with it a cost. Your buttons now can only have so many characters in them before they start falling behind.
.fixed .btn {
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
}
Here is a fiddle for you to check out.
Give your buttons the same exact width.
.btn-large {width: 80px;}