How to set the size of button in HTML - html

I have some buttons on my pure HTML/JS page.
When the page is opened in browser, the button size is normal.
But on refresh/reloading page, the button size is reduced.
In fact, I have not set the button text value. The button's text is blank.
How should I set the size of my button in HTML irrespective to the size of the text?

Do you mean something like this?
HTML
<button class="test"></button>
CSS
.test{
height:200px;
width:200px;
}
If you want to use inline CSS instead of an external stylesheet, see this:
<button style="height:200px;width:200px"></button>

This cannot be done with pure HTML/JS, you will need CSS
CSS:
button {
width: 100%;
height: 100%;
}
Substitute 100% with required size
This can be done in many ways

button {
width:1000px;
}
or even
button {
width:1000px !important
}
If thats what you mean

If using the following HTML:
<button id="submit-button"></button>
Style can be applied through JS using the style object available on an HTMLElement.
To set height and width to 200px of the above example button, this would be the JS:
var myButton = document.getElementById('submit-button');
myButton.style.height = '200px';
myButton.style.width= '200px';
I believe with this method, you are not directly writing CSS (inline or external), but using JavaScript to programmatically alter CSS Declarations.

Related

Reach an html div with inside a tree structure with css

I have the following html structure (inside a wiki-content div) and I don't know how to reach it.
This doesn't seem to work, would you know why?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100%;
}
Thank you
It doesnt work because you have an inline CSS value of width set to 99.9315%. Inline styles get processed after your css so this will override any other setting for width in your css file.
Try removing the inline width setting.
Have you tried using !important?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100% !important;
}
You can try doing this and the try to put !important to override the existing width.
.table-wrap .relative-table.wrapped.confluenceTable
{
width: 100%!important;
}
If the inline style width is generated by a certain javascript, you need to re initialized it using also a javascript. because you can't override a inline style using css since it has the most specificity value. Please read this link about https://css-tricks.com/specifics-on-css-specificity/
Please see below javascript code to re initialized the width.
document.getElementsByClassName("relative-table").style.width = "100%";

Whole Page Clickable, Firefox

I have this piece of code in my style sheet to change the cursor to a pointer on one page, and it works well except on firefox, where it doesn't give you a "pointer" finger to let you know the page is clickable.
html {
cursor:pointer;
}
The thing is, the normal method of putting an onclick event in the body tag isn't working. (shown below not working)
<body onclick="window.href.location=filename">
body text
</body>
How do I get a pointer finger on the whole page instead of the normal mouse cursor in firefox?
Add a hover rule to the body element.
body:hover {
cursor:pointer;
}
You'll have to fill your whole screen with the element.
html {
cursor:pointer;
width: 100%;
height: 100%;
}
Check this JSFiddle that I put together for you.
I guess you need to fill the entire page with some element like:
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px">
</div>
and use this inside the body. There you probaly need to care about the bodies margins.
Or you append a click handler to the entire window via JavaScrip:
window.addEventListener("click", doSomething, false);
Make life easy:
CSS
#page{display:block;position:absolute;top:0;bottom:0:left:0;right:0;}

Make readonly textarea's height determined by it's content

I would to make a readonly input appear like a pre or div tag with CSS.
I would have thought that it would have been easy to do with a textarea but it seems to be quite the task. I'm able to hide the border and the resizing but, for whatever reason, I can't make the textarea's height be determined by it's content.
I've seen a lot of stuff on using javascript to auto-resize textareas but is there anything I can do if it's static text that doesn't require javascript?
UPDATE
I just wanted to clarify the purpose of this: I'm looking to write, re-write with javascript, and submit a single readonly element with forms and, at the same time, not have it constrained to a single inline area which forces, at best, scrolling and, at worse, loss of data.
UPDATE 2
Per the request, I've created a fiddle to show an example of what I'm trying to do: http://jsfiddle.net/BUwdE/1/ .
textarea[readonly] {
width: 100%;
border: 0;
resize: none;
overflow: hidden;
}
You'll see that the content is cutoff at the bottom because the textarea's height isn't determined by its content.
I actually tried to do what you have been doing. But since it is going to be a read-only input, I actually ended up applying a CSS to a div element. This will be a hack which releases our headache.
HTML
<div class="faketextarea"> some long long text </div>
CSS
.faketextarea {
// css of a text area
}
You can specify the height of a textarea in HTML using the rows attribute, but that doesn't automatically resize. You might have to appeal to the W3C CSS Working Group to get what you want.
<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">
Modified from here:
function auto_grow(){
var ts = document.getElementsByTagName('textarea')
for (i in Object.keys(ts)){
ts[i].style.height = "5px";
ts[i].style.height = (ts[i].scrollHeight+49)+"px";
}
}
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
...
(properties for your needs)
}
<body onload='auto_grow()'>
<textarea>anytexts</textarea>
<textarea>texts 2</textarea>
</body>
The differences being I have assigned the auto_grow() function on the html <body> tag instead of the <textarea> tag
fiddle: https://jsfiddle.net/btq7m3a6/
More: https://jsfiddle.net/8o67huq2/

Make HTML button same size as its background

Usually, you make a button with a given size:
<button style="width: 120px; height: 40px;">
Mememe
<button>
Then you add a background which is the same size as the button:
button
{
background-size: 100% 100%;
}
Obviously, if you want it to be 1:1, the image should be 120x40 px too.
But is there a way to make the button same size as the image is? (With neither IMG elements nor scripts).
Regards,
No, not by using only HTML and CSS. It is, however, possible by using either PHP (or some other server-side scripting language) or JavaScript
One way might be to get the size of the loaded image, using JavaScript, and then apply the appropriate style on your button:
var width = document.images[0].width;
var height = document.images[0].height;
var button = document.getElementById('button-id');
button.style.width = width;
button.style.height = height;

Change 'src' value by css for input tag with type="image"

Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.
Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)
No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage
Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.
(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.
It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.
Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)
Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps