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;
Related
I'm trying to get a content editable text box (div element) to grow as needed to fit the text typed into it, up to 80% of the width of the parent div.
Is there any way to do this with just CSS? If not, I'm open to Javascript solutions, but I am using React, which complicates things in that regard
This is NOT a duplicate of any other question I'm aware of, as it requires a solution which is:
Independent of viewport size
Supports a parent div with a max-width
Works on contentEditable
Works when the text content changes
May be you could have a div inside parent div which is 80% of the parent div. And then set width : auto for the text box.
Might sound a bit tricky.
I'm trying to get a text box to grow as needed to fit the text typed
into it, up to 80% of the width of the parent div.
I'm fairly certain this won't be possible via CSS alone, because there is no way for CSS to determine the length of the text-content of the textarea.
With javascript, on every keypress, you can check the length of the text-content and if:
the text-content is above a certain number of keypresses; and
the width of the textarea is still narrower than the maximum allowed width
then the textarea can incrementally expand.
Working Example:
var myTextArea = document.getElementsByTagName('textarea')[0];
var myTextLength = myTextArea.value.length
var myTextWidth = parseInt(window.getComputedStyle(myTextArea).width);
var myTextMinLength = 20;
var myTextMaxWidth = ((parseInt(window.getComputedStyle(document.body).width) / 100) * 80);
function checkTextLength() {
myTextLength = myTextArea.value.length;
if ((myTextLength > myTextMinLength) && (myTextWidth < (myTextMaxWidth))) {
myTextWidth += 8;
}
myTextArea.style.width = myTextWidth + 'px';
}
myTextArea.addEventListener('keypress', checkTextLength, false);
textarea {
width: 180px;
height: 40px;
}
<form>
<textarea placeholder="Start typing..."></textarea>
</form>
hm... try this:
display: inline-block;
I am not sure tho. Let me know if it works.
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.
I use this wonderful tool, tinyMCE, for editing pages at my website.
But i have a problem with the resizing of images.
Is it possible to change the way tinyMCE changes the size of the image?
Now the software changes the width and height inside the ..
<img src="..." width="..." height="..." />
But this setting gets overridden by the CSS.
(I have some general img settings in the CSS, width, height:auto, and centering on page.)
If the users define a size for the image, i want this new size to override the general css.
But with the img parameter width & height. this is notpossible. CSS override their value.
So.
I want tinyMCE to change the size of the image by CSS. Is this possible?
ex:
<img src="..." style="width:...;height...;" />
(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)
Thanks for reading.
Matte
I bypassed this by adding a plugin in the project that handles the re-size event.
Just going to post it here in case someone ever needs it.
tinymce.PluginManager.add('imageresizing', function(editor, url) {
editor.on('ObjectResizeStart', function(e) {
if (e.target.nodeName == 'IMG') {
var selectedImage = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width);
tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height);
selectedImage.removeAttribute('width');
selectedImage.removeAttribute('height');
}
});
});
Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.
To solve the problem of getting the default image insert size to fit the container, i used
content_style: 'img {max-width: 100%;}'
Inside the tinymce.init({
It doesn't appear to be currently possible to easily change the way TinyMCE adds width and height tags to the img element. There is a feature request open to add this functionality Stop Prepopulating Image Dimensions.
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150");
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");
Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..
With this you can resize the image .. .. ..Sarath#f1
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
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
Say if image is smaller, we retain the size and put it at the center of container. if image is bigger, we scale it down according to the prominent direction.
Our container is 500x500 and image is say 1000x400, then it will be scaled like 500x200. Similarly if image is 400x1000, then scaled image is 200x500. Is this doable with just html/css. Any help is appreciated. Thanks.
You can use max-width and max-height CSS properties to get the effect you want:
#container img {
max-width:500px;
max-height:500px:
}
Be aware that this does not work in IE6. To make it work there you may need to either scale the image serverside OR use expressions which are nasty. There are other workarounds which you can find on google :)
You'll get much better results if you resize the images on the server. Resizing in the browser means the client is downloading much larger files than necessary, and the resizing quality is not great.
No. It's not fully doable with htm and css.
img{ width: 100% }
will make 1000x400 image to appear as 500x200 bu 400x1000 will appear as 500x1200.
You can use javascrpt like:
function scaleimage(id)
{
var image = document.getElementById(id);
if(image.offsetWidth > image.offsetHeight)
{
if(image.offsetWidth > 500)
{
image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
image.offsetWidth = 500;
}
}
else
{
if(image.offsetHeight > 500)
{
image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
image.offsetHeight = 500;
}
}
}
Sorry for poor formating, seems like my iPhone doesn't support it.
The best way to do it on the server. Or manually before uploading them (if it's possible).
You can use width and height CSS properties to get the effect you want:
container img {
width:500px;
height:500px:
}
Be aware that this work in all browsers.
Thanks
Ptiwari.