I'd like to make a textarea float to the right, but that would show the resize:both; style that's default to textareas on the right side, while the resizing itself would expand the textarea to the left.
The HTML I'm using is simply:
<textarea style="float:right;"></textarea>
but it is much clearer to see what I mean by viewing this demo. As you can see, resizing the textarea will require you to drag to the right, while it will expand to the left. Is there a way for me to reposition the little indicator in the corner of the textarea to the left side?
As far as I know, that is not a feature that is exposed by the browsers at this time. It's a relatively new feature to HTML, as it is, and I don't think there are any semantic or programmatic hooks to that UI piece of textareas yet.
Your best bet, at this point then will be to fake it with drag-and-drop JS and pseudo-controls, and hide the native resize.
Actually, I stand (somewhat) corrected. According to a comment in this article (http://davidwalsh.name/textarea-resize), you can play around with the resize widget, but only in Safari at the time of that comment:
Greg March 11, 2013
In webkit you can play around with the scrollbar styling.
I used >
::-webkit-resizer{background-color:transparent;}
::-webkit-scrollbar-corner{background-color:rgba(0,0,0,0.2);}
to style the resizer on the textareas in one of my sites.
(Easier to read in the comments section there.)
Related
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
Long story short, I've been using sprite sheets and some of them might have quite huge dimensions. To get the image I need, I use the css attribute clip: rect(top, right, bottom, left), but something strange about clip is that whatever that is hidden is indeed not visible, but adds to horizontal (and probably vertical) scrolling to my browser when the browser window is small enough that part that would have been visible does not fit into the browser window even though they are not visible.
I found that adding a overflow: hidden attribute to any parent of the clipped image solves the problem.
The reason I'm asking here is, if it was my own pages, I'd just add that overflow: hidden to my html tag and be done with it. However, I'm making a jquery plugin and while I'm probably not skilled enough to make plugins that other people will use, I still want to make my plugins well behaved. If I add the css attribute through jquery to the html tag, would it cause unforeseen problems?
I would recommend using background position instead. As explained here: http://css-tricks.com/css-sprites/
It is more industry standard and you won't get those weird issues.
Can I get the small re-size widget that appears in the lower right of text areas (on modern browsers) to appear on the lower left?
You can do that by setting writing direction to right-to-left. This implies that text is aligned to the right by default, but this can easily be overridden:
textarea { resize: both; direction: rtl; text-align: left; }
There are other side effects that you cannot override. The vertical scroll bar will appear on the left. The cursor will appear at the left at times (after typing in a directionally neutral character), even characters will appear on the right when typing only left-to-right characters intermixed with neutral characters – though directionally neutral characters first appear at the left (test with typing “abc (1) x” to see what I mean).
So it comes with features that are oddities when typing left-to-right text, and it’s better to look for a different approach to the original problem (whatever it was that made you want to put the resize handle in the lower left corner).
CSS3 adds a "resize" property that allows you to control whether the textarea is resizable. But as far as I can tell, there's no property that specifies where the handle is. If you want that level of control, you'll have to implement the widget yourself with Javascript (similar to the way the jQuery Dialog widget adds a resize handle to the DIV it creates).
That's not meant to be done, because then the standard of textareas would be very inconsistent and that's what the W3C tries to avoid. The internet should be consistent in some things and the resizing widget of the html textarea element will most likely always be on the right. One thing you can do is use jQuery or other JavaScript techniques to add a resizing widget in the bottom left and cover the one in the bottom right.
I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});
I am a newbie to HTML and CSS and am trying to design a website, where the majority of text will be in boxes on the screen.
Each box will be coloured differently and will have more text than is visible directly
My question
Can I make the background colour of the scroll section, ie the bit between the two arrow heads match the existing background colour?
If I could even change the colour of the actual scroll bar, that would be even better
Finally, can I get rid of the horizontal scroll bar, as it is not required ? At present it makes my box have a white band along the bottom
There are several soutions to change the style of scrollbars on websites:
Via CSS:
This doesnt work reliable: For example it works only in IE, not in firefox. So I would avoid that.
Via JavaScript:
I suggest: Hide the browser-scrollbars and make your own scrollbar using javascript and some arrow-images, so you got full control over the style.
For example you could use JQuery and JScrollPane (demo). According to the documentation this works in all modern browsers (IE, Firefox ...). If the user would disable javascript support it would still work but the scrollbars appear unstyled.
Only Internet Explorer and Opera in quirks mode support colouring browser scrollbars, so you'll need to try a javascript solution.
Interestingly, CSS defines some system colors, so if you're (very) flexible with your design you could set the background of the scroll area to match one of those. An unlikely solution though.
For the horizontal scrollbar, you could try out overflow-x: hidden; overflow-y: scroll. That is intended to stop horizontal scrolling but allow vertical scrolling. I believe it is CSS3 so is unlikely to work in all browsers.
Update: Just saw this, which should meet your needs: http://www.leigeber.com/2009/09/javascript-scrollable-div/