I need a textarea control with mask able property, if the textarea is mask able then the text should appear as stars instead of actual text.
I can have any no of textareas in my form, So i can't save actual text in other variable and save the stars or dots for actual textarea.
Can somebody help me to solve this issue?
As others have already pointed out, it's not possible and should not be done. But here is something which you should give a try. If you really want to achieve it, you'll have to compromise on something. Use contenteditable div instead of input and use following CSS:
Demo: http://jsfiddle.net/GCu2D/793/
CSS:
.checked {
font-size:20px;
position:relative;
display:inline-block;
border:1px solid red;
}
.checked:before {
font-size: inherit;
content:" ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: #FFF;
width: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Asterisk.svg/32px-Asterisk.svg.png");
background-repeat: repeat-x;
z-index: 1;
background-size: 12px;
background-position: left center;
}
HTML:
<div contenteditable class="checked">Sample Text</div>
Obviously, this is not a perfect solution, but you can start from here.
Note: You will need to adjust the font-size and the image used. Both dimensions needs to be in sync. Ofcourse you can change the size of image using background-size . Border here is just for visual feedback. If you need to adjust the width of the stars, then you may use calc() and play around with the exact dimension.
Related
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
I have an annoying issue with the html layout of a form. I cannot really change the general setup, since it is part of a huge framework. But I have to "move" a button to a more suitable location. I am close, but not happy with the solution so far. Maybe you can give me some idea in this. Here is a dramatically simplified version to demonstrate my approach:
I have two container divs, top and bottom.
The top container shows a button on the left side. That button is fixed, but can have a different width due to the translation of its label.
The bottom container holds lots of stuff. Amongst that a second button at its top which works fine, but looks wrong. I want to optically move it into the top container, since there is a logical connection to the button in there. Sure, really placing it in there would be the correct solution, but I currently cannot do that. Instead I use a fixed position which works fine, except for the horizontal placement. I have to decide how far pushed from the left to place the button, so that it certainly does not overlap the first button in the container. I obviously have to consider all translations, the result works, but depending on the first buttons label I have an annoying horizontal gap between the two buttons.
I tried to use a pseudo element (::before) on the second button to help with the layout. Since when rendering the view I obviously have the translated label of the first button I can copy that into some property of the second button and use that property in my css to fill a before pseudo element of the second button which has exactly the same length as the first button. That is what is shown in the code example posted below.
What I completely fail to do is to place that pseudo element such that is it left in the top container (so exactly below the first button). The idea is to indirectly place the second button that way. Looks like this is not possible, obviously. But since I am a bloody beginner in markup and styling I thought it might be worth asking here...
Below is some drastically stripped down code to demonstrate my approach.
I create a jsfiddle for you to play around with. Here is the code:
HTML:
<div id="top-container">
<button>multilingual button text</button>
</div>
<div id="bottom-container">
<h2>
Some title opening the bottom container
<span class="into-top-container">
<button id="place-me" reference-text="multilingual button text">button to be placed</button>
</span>
</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
#place-me {
position: fixed;
top: 0;
left: 400px;
margin: 5px;
background: yellow;
}
#place-me::before {
z-index: 0;
/*visibility: hidden;*/
position: absolute;
content: attr(reference-text);
margin: 0 5px;
padding: 0;
background: gold;
right: 100%;
}
Notes:
that in the above code the second button is placed with left: 400px;. That is more or less what I want to change. But obviously left: 0 is not correct...
the visibility css rule for the pseudo element is currently commented out for demonstration purpose
keep in mind that the second button is *not* contained inside the top container, but actually logically below the title of the bottom container. The goal is to move it optically up into the top container which already is where close to what I want. Except for the horizontal alignment...
Upon request here is a screenshot:
It is taken from the fiddle I posted above. I added the red ellipse which shows what element pair I want to move and the left pointing arrow indicating where I want to move that too. I want to move it exactly that far, that the two tests "multilingual button text" are exactly placed on top of each other, but without specifying an explicit left placement obviously. That is why the pseudo element exists: as a dummy placeholder. I would then hide that pseudo element and have the second button placed exactly right of the first button, regardless of how long the translated text in there is.
So the final result should like like that:
OK, I invested some more time, since this issue popped up again after a regression in our code and I found, as often after allowing some time to pass, a logical and relatively clean solution:
I use the same stripped down code to for demonstration purposes.
The jsfiddle is based on the one provided in the question itself.
HTML: no real change, except for the reference-text having moved from button to container, for the why see below:
CSS:
* {
font-size: 12px;
font-weight: normal;
font-family: Arial;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
span,
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
span.into-top-container {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border: 1px solid transparent;
}
span.into-top-container::before {
visibility: hidden;
content: attr(reference-text);
position: relative;
margin-right: 5px;
padding: 5px;
border: 2px solid;
background: gold;
}
#place-me {
background: yellow;
pointer-events: all;
}
The basic change in strategy: it is the container holding the button to be placed that has to be positioned in a fixed manner, not that button itself (so the <span class="into-top-container">)! That allows to use the pseudo before element, now also anchored to that container, not the button, to take the space as required without actually getting part of the button itself.
Since that container is now place over the original multilingual button that one is not clickable any more. That issue is fixed by a css pointer-events set to none for the container and set to all for the placed button again. That makes the container itself simply ignore all events (clicks) and have them passed to the original button beneath.
I had to make sure that the font used inside the pseudo element is style exactly like the original multilingual button. That actually makes sense, since the font styling defines the actual width used by that button, so the actual width used by the pseudo element should be defined in exactly the same manner. In the example above I forced that by simply setting all elements font style rules to some fixed values (the initial * {...} in the CSS code). That can obviously also be done right inside the css rules for the pseudo element itself. I chose the more simple and brute variant here to keep the code clean.
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.