Would it be possible to use YUI to change all my input boxes to have rounded corners? I cannot use a background image as the inputs will be variable width and I cannot add divs wrapped around them because some input elements are generated. Also I cannot use border radius or any moz/webkit variation as it needs to appear the same in IE6.
Any pointers appreciated, thanks.
There multiple techniques to make cross-browser rounded corners, and YUI can certainly be used to convert input elements on the fly, adding wrapper divs if needed to support the method you choose to use.
Here is a YUI 3 implementation of rounded corners for a text-type input, using background images for the corners:
<html>
<head>
<title>Stack Overflow 1471254</title>
<link rel="stylesheet" type="text/css" href="roundMyCorners.css">
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"></script>
</head>
<body>
<p>Here is an input box: <input type="text" value="type stuff" class="roundMyCorners"> Thanks!</p>
<script type="text/javascript">
YUI({combine: true, timeout: 10000}).use("node", function(Y) {
Y.all('body input.roundMyCorners').each(function(rcInput) {
var outerDiv = Y.Node.create('<div class="roundMyCornersOuterDiv"></div>');
outerDiv.appendChild(Y.Node.create('<div class="tl"></div>'));
outerDiv.appendChild(Y.Node.create('<div class="tr"></div>'));
outerDiv.appendChild(rcInput.cloneNode());
outerDiv.appendChild(Y.Node.create('<div class="bl"></div>'));
outerDiv.appendChild(Y.Node.create('<div class="br"></div>'));
rcInput.get('parentNode').replaceChild( outerDiv, rcInput );
});
});
</script>
</body>
</html>
Here's the CSS file. For demo purposes, I'm (somewhat rudely) hotlinking the PNGs from a site that has a rounded corner demo in this code. Of course it's preferable to make your own images for your site.
.roundMyCorners {
width: 12em;
border: none;
font-weight: bold;
color: white;
background-color: #3f6daf;
}
.roundMyCornersOuterDiv {
position: relative;
display: -moz-inline-stack; /* inline-block for older Gecko */
display: inline-block;
*zoom: 1; /* force hasLayout for IE */
*display: inline; /* rendered as inline-block in IE after hasLayout */
vertical-align: middle;
padding: 6px;
color: white;
background-color: #3f6daf;
}
.roundMyCornersOuterDiv .tl {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tl.png) top left no-repeat;
top: 0;
left: 0;
}
.roundMyCornersOuterDiv .tr {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-tr.png) top right no-repeat;
top: 0;
right: 0;
}
.roundMyCornersOuterDiv .bl {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-bl.png) bottom left no-repeat;
bottom: 0;
left: 0;
}
.roundMyCornersOuterDiv .br {
position: absolute;
width: 6px;
height: 6px;
background: url(http://www.bestinclass.com/images/ui/rounded/colhead-br.png) bottom right no-repeat;
bottom: 0;
right: 0;
}
Of course, the styles for the tl, tr, bl, br and even the roundMyCornersOuterDiv classes could be set via JavaScript. I left them in the CSS here for clarity.
Note that if you want to change all the input elements, you just change the initial selector from 'body input.roundMyCorners' to 'input'. However, I don't expect this to work nicely for checkbox and radio types of input, so perhaps 'input[type="text"]' is a better selector, if you want to avoid stamping class names everywhere.
One other note: since input is an inline element, I wanted the wrapper div to be inline-block. This is essential for popular techniques for table-free form layouts. Unfortunately, this required a couple of proprietary tweaks.
Finally, if you don't want to fuss with the CSS or maintain your own YUI/jQuery/whatever code, you could try Nifty Corners or Curvy Corners, which are JavaScript libraries that claim to do this sort of thing automagically, at least for divs. Your mileage may vary.
Possibly a selector to find the inputs and then replace them with divs around the inputs?
Related
I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.
When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.
Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?
Thanks!
Here's my JsFiddle, and here's the snippet
.center {
display: table;
margin: 0 auto;
}
body {
background-color: #27ae60;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}
.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}
<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>
<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>
First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.
The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.
The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.
A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Good luck!
You can get the desired effect in a much simpler code.. have a look:
body {
background-color: #27ae60;
}
.desk {
position: relative;
background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
width:560px;
height:839px;
margin: 0 auto;
}
.header {
padding: .5rem 0 0 2rem;
font-size: 2.5rem;
font-family: 'Just Me Again Down Here', cursive;
}
.answer {
width: 100%;
margin-left: 2rem;
outline: none;
border: none;
background-color: transparent;
overflow: hidden;
resize: none;
font-size: 2rem;
font-family: 'Just Me Again Down Here', cursive;
}
Fiddle: https://jsfiddle.net/y3h1ogms/5/
When set position: relative on an element, it will be positioned relative to the nearest positioned ancestor, where "positioned" according to MDN means:
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
In your example, the header is not a descendant of the image, so there's no way to position it relative to the image. What you might do instead is convert the <img> to a <div> set the background-image of your div to be the image URL. You would also need to explicitly set the width and height of the div.
I am working on a parallax page and super frustrated when it comes down to keeping the elements position exactly as i want when the window size is changed (responsive). All my elements are text and therefor a bit challenging hence the font-sizes need to follow a long with the positioning. I do not know where to begin with this challenge, as i have been experimenting with the viewport units such as vw and vh without any luck.
I have attached three images that illustrates the element positioning i want to achieve. I have added a background color to the elements to illustrate the positions. How do i achieve this responsiveness on my elements?
Absolute position is a must hence i need to parallax the elements up and down without being independent of any orders.
Fiddle: https://jsfiddle.net/440k02wg/1/
HTML
<section>
<div class="header__1">
A LOT OF TEXT
</div>
<div class="header__2">
BIT MORE TEXT
</div>
<div class="header__3">
SOME TEXT
</div>
</section>
CSS
body, html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
.header__1 {
font-size: 5vw;
color: red;
background-color: grey;
top: 14vh;
}
.header__2 {
top: 25vh;
left: 4vw;
font-size: 10vw;
color: orange;
background-color: white;
}
.header__3 {
top: 48vh;
left: 60vw;
font-size: 5vw;
color: blue;
background-color: green;
}
Is position: absolute; crucial for you? Removing that makes the issue a whole lot simpler, since block elements positioned relatively or statically always stick to their siblings. I've updated your provided example with my suggestion (and some tweaks to have the elements align accordingly).
Fiddle
Hope it's of some help :)
In place of something like a horizontal rule or div border, I'd like to do something like this:
My Title
/*----------------------*/
My content
Notice how the divider between the Title and content is literally a slash, asterix, dashes, and then an asterix and slash to end (it's supposed to look like code).
I'm curious how I could achieve this effect on a fluid layout, with the divider stretching to fill the whole width of the div. Also, I'd like to not use any art for this. Just using ascii would be perfect.
Summary: How can I create a dynamically resizing custom ascii divider? I'm pressuming this will probably have to be done mostly in Javascript and then polling the width of the div everytime the window is resized, and then calculating the length of characters (it's a monospace font) required to fill that space. Is this on the right track?
What a great question, had a lot fun messing around making this CSS only solution.
(This needs to be tweaked for each new font family due differences in kerning but it should hold up reasonably well at different font sizes of the same family.)
hr {
/* reset */
display: inline-block;
border: none;
/* sizing */
box-sizing: border-box;
width: 100%;
height: 0.1em;
/* dashes */
background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 80%, transparent 80%); /* space */
background-size: 0.4em 0.4em; /* dash */
/* spacing between start/end */
padding: 0 0.7em;
background-clip: content-box;
/* anchor ::before/::after */
position: relative;
}
/* start/end */
hr::before,
hr::after {
position: absolute;
top: -0.5em;
}
hr::before {
content: '/*';
left: -0.1em;
}
hr::after {
content: '*/';
right: -0.1em;
}
<hr>
Editable demo: http://jsbin.com/tefuli/2
This is possible without using JavaScript with the white-space CSS property:
#container {
width: 300px;
position: relative;
border: 1px dotted black;
}
#dashes {
white-space: nowrap;
width: 100%;
overflow: hidden;
}
#opencomment, #dashes, #closecomment {
position: absolute;
}
#opencomment, #closecomment {
background-color: #FFFFFF;
z-index: 10;
}
#closecomment {
right: 0px;
}
<div id='container'>
<h1>Title</h1>
<div id='opencomment'>/*</div>
<div id='dashes'>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id='closecomment'>*/</div>
<!-- position:absolute elements don't affect the DOM, so we need to
"clear a line" -->
<div> </div>
<p>Content</p>
</div>
I just used an absurd amount of dashes in order to fill up wide screens. You can change the width of #container in order to make it wider or narrower, or you could remove the #container element entirely.
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
I want to put a colon at the start of input, like this:
It can't be delete.
I think can use a label to put it, then use css to position it, right?
How to use javascript to do it?
By the way, I use shift+: to show this input, but when I use script to focus it, the colon auto input into, how to remove?
That can be done in many ways, just in pure CSS without even disturbing Javascript. Background images and pseudo elements come to my mind.
I've played around and came out with this.
http://jsfiddle.net/q5DZP/
Notice that the input element must be wrapped in a div (or any other container element) otherwise :before or :after pseudo elements won't apply.
Working jsFiddle Demo
You can do this with multiple layers and positioning:
HTML
<div id="container">
<input id="input" type="text" />
<div id="colon">:</div>
</div>
CSS
#container {
position: relative;
width: 300px;
height: 50px;
}
#input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid black;
border-radius: 5px;
background: #ccc;
font-size: 18px;
padding-left: 20px;
}
#colon {
position: absolute;
top: 13px;
left: 15px;
font-size: 18px;
}