Textarea having always window height - javascript

I'm not sure how to do this. II'm currently using Bootstrap's textarea, along with its container. I don't know how to make it so that the textarea extends to the bottom of the screen, which automatically increase/decrease depending on the window height. I've tried:
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
But nothing seems to change. Does anyone know how I can get this done?
Edit:
This is my html file:
<body>
<div class="container">
<div class="form-group">
<textarea class="form-control" rows="15" id="note"></textarea>
</div>
</div>
</body>

You have to put height property on the element like the code below.
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:50px;
}
If it doesn't work, try !important. If it doesn't work either, try setting rows in markup and set line-height on CSS.
<textarea rows="4">

.form-control should be a CSS class for bootstrap.
Are you using <textarea class="form-control"></textarea>? If so, your css rule is using #, which corresponds to an element ID, not a class. Change your CSS to this:
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}

Try this code.
Actually you have used (id) #form-control, which should be (class) .form-control
I've used your code, just added width 100%
Now it'll take height and width of screen.
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
<div class="form-group">
<textarea class="form-control" placeholder="textarea"></textarea>
</div>

You can use the height property to set it to a certain height.
You can do something like this:
#form-control {
position:fixed;
height: 200px;
}
or
#form-control {
position:fixed;
height: 50%;
}
Just as a few examples.
I would suggest that you check out this W3 Schools page on the height css property... If you read the page you can see how else you can size it.
On that page there is also a link to this demo which I suggest you try to see what the different "settings" for lack of better word do.
Also make sure that the opening <textarea> tag calls the selector... so it should look something like this <textarea id="form-control">.
Good Luck

Related

How to improve PreLoadMe script to support browsers with disabled JavaScript?

Hi all, this script (by Niklaus Gerber) works, but there's one problem. Once I set it up, it starts from CSS styles by covering whole page with div. Then script comes to uncover fully loaded site, however, it also locks browsers with disabled JavaScript (infinite loading).
Can someone help me to unlock those users, by changing this script or suggest me something more friendly for also those folks? (it's not online yet).
The code is:
$(window).load(function() {
$('#status').fadeOut();animation
$('#preloader').delay(350)\.fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
For the HTML:
<div id="preloader">
<div id="status"> </div>
</div>
CSS:
body {
overflow: scroll;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(../img/status.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
Thanks in advance for any sugestions.
Try this very simple solution
In your js add $('body').addClass('jsSupport');
and in your css hide the preloader by default, so when there is no JavaScript it will not show on screen.
#preloader{
display:none;/*hide when no js*/
}
When JavaScript exist, you can show it on screen using the extra css class.
.jsSupport #preloader {
display:block;/*show when js is supported*/
}
You can see how I set up the code here
Demo
You can disable the browser's JavaScript here to test it out
Full screen demo

Making a scrollable div which doesn't scroll the rest of the body

Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working

Button resizing changing all design

Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>

skrollr.js Responsiveness

I just started using Skrollr.js - I was able to make the animations I wanted, however i needed to use position:fixed; for my elements to position them exactly where they should be.
Problem is, if your screen isn't a certain size, the animations are cutoff or not centred.
Is there a better way to position the elements or something with Skrollr I can do to fix this?
I have a 3 elements that come together to make a logo so it needs to be pretty precise in how it comes together.
Thanks
Just place those 3 elements inside a div, that way you will only position that div while not affecting the positioning of the elements inside it...no matter how you position the container, the elements inside will not suffer any transformation.
Here's an example:
JSFIDDLE
CSS:
#logo {
width:200px;
height:200px;
position:fixed;
top:20px;
left:20px;
background:red;
}
#elem1 {
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
background:yellow;
}
#elem2 {
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
background:blue;
}
#elem3 {
width:200px;
height:100px;
position:absolute;
bottom:0;
background:green;
}
HTML:
<div id="logo">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>

Dynamic content that changes height depending on header and footer height

I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.
My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.
Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?
If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)
Thanks!
EDIT: This is what I got atm.
<div class="container">
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
</div>
CSS:
#content {
position:absolute;
background: url('img/textures/fabric.png');
background-color: gray;
height:auto;
width:auto;
margin:0 auto 0 48px; /* Center content */
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#dashtop {
position:fixed;
width:auto;
background-color:aqua;
opacity: .5;
margin-left: 48px;
top:0;
left:0;
right:0;
text-align:center;
}
#footer {
position: fixed;
margin-left: 48px;
background-color:green;
bottom:0;
right:0;
left:0;
width:auto;
height:auto;
text-align:center;
opacity:0.5;
z-index:0;
}
Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.

Categories

Resources