Dynamically Update Width of Float Left Div - javascript

I've looked through a variety of other posts, and to no avail, I have yet to find the kind of solution I'm looking for. Many solutions involved people using CSS with methods like fixing the right and left (which wouldn't make it worth floating and a waste of brain power) or to word-wrap at a certain amount to the right (which also defeats the purpose of what I'm trying to do.
My problem exists like this:
I have 3 divs: wrapper, menu, and content. Wrapper is used to apply a background to 100% of the page, and create extra styling properties to be inherited by other CSS. Menu is for my menu script I coded in JQuery and it takes up 400px of space on the left hand of the screen and descends downwards at 100vh. I may change it to fixed, but it doesn't change the issue. Anyway, content is the rest of the page; let's say the other 80% of it. I have both menu and content floating left and it works just fine. However, until text wraps at the end of the screen, the div goes under (disappears in my case) the screen and no longer viewable.
My solution:
function simplyWidth(changed, menu1, wrapper){
var wrapperWidth = $(wrapper).width();
var menuWidth = $(menu1).width();
var newWidth = wrapperWidth - menuWidth;
$(changed).css("width", newWidth);
};
Does it work? Of course it works. The only problem is, it isn't dynamic at all! It resizes to the screen once, and you have to refresh the page just to get it to update again. Is there a way to take that JQuery/Javascript and make it so I can just update it every .1 of a second? Would that make the page lag? Or am I doing it wrong.
Also assume that my HTML is spot on, and it needs no corrections. The reason I won't disclose it is because there's too much there for me to post and to not confuse the living crap out of you people.
This is the basic layout of my page:
<div id="wrapper">
<div id="menu1"></div>
<div id="content"></div>
</div>
As for my wrapper CSS:
#wrapper {
width: 100%;
background-color:black;
margin: 0 auto;
top: 0px;
overflow:hidden;
height: 100vh;
background-image:url(Assets/background1.jpg);
}
Menu1 CSS:
#menu1 {
margin: 0 auto;
height: 100%;
width: 400px;
background-color:#191919;
color:white;
z-index: 400;
float: left;
}
Content CSS:
#content {
float:left;
color:white;
height: 100vh;
}

listen to resize event and call the same function when the window is resized:
$(window).resize(simplyWidth);

Related

stick scrollable div to bottom of screen

I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.

DIV height 100% for remaining space under another div

So I have a header bar for a page I made with a height of 150px. Under that area I want another DIV to fill the remaining space (width and height) all across the screen and to the bottom of the screen. I've tried setting height: 100% for the DIV, but that causes the screen to become scrollable and I only want it to fill the remainder of the page. NOTE: There is NO footer or anything under it.
Using jQuery/Javascript is acceptable, but CSS-only is prefered (if possible). If using jQuery, please explain the proper way to have it implemented into the page (I'm assuming $(function() {...}); under the <style> tag in the head.
I've tried searching for a result before, but nothing seems to work correctly.
tl;dr I basically made 3 options for you. click on the 'like this' in the below paragraph to see what they all look like without any text. Click on the A). B). and C). links in the paragraphs below that to see the difference between the three options. Check how each one scrolls differently, they are all different I promise. After you look at all three you can read how the one you want is implemented. (that is if you like any of them.) Hope you like it, no problem if you don't :)
I'll have a go at this, because it honestly depends on what you're going after there are multiple ways to look at it and it depends on your end goal. I will cover three possible scenarios: (which all look the same without text mind you, like this, but if you want to see what they look like with text click the letters. Make sure you scroll the page to see the difference between them.)
(Just as a side note I based A). and B). off how Twitter Bootstrap does it.)
A). You just want it to look like one div on top of the other (header div on top of main-content div) and display like that, but you still want the page to scroll if the 2nd div's text overflows. In this implementation when they scroll will move the header out of view, but if you don't want the header div to move out of view that leads me to
B). Same as the first header div on top of main-content div, but when they scroll the header div will still stay in place at the top instead of moving out of view.
and last of all,
C). You really do want the div to stretch to the bottom of the screen and never have the scroll bar for the whole page. This could be used in some cases, for instance, Spotify makes a nice music app with this kind of style so that you never scroll the whole page just panes in the page.
Ok so first here is the html code used to construct all three of them
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
And now to the fun part...
I will provide a Fiddle for the following examples, and with the css I will put the necessary code at the top and the unneccessary code at the bottom. (The html may have some unneccasary text so just ignore that. I just want you to see the page scrolls differently on the three.)
A).
no need to rephrase what it is so I'll just show you the code that is necessary.
First, here is A). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for A). (the background-color isn't completely necessary, but it is somewhat necessary to show the point.)
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
and now for...
B).
First, here is B). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for B).
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
As you can probably tell the only difference is the position: fixed on the .header, but look at the two examples to see the difference it makes.
and now last of all C).,
C).
First, here is C). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 1 where it has a scroll bar just for that area's overflowing content.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 2 where it hides the overflowing content. (This is honestly bad practice and I wouldn't do it. So if I may suggest. I would go with option 1 of C).)
Here is the necessary css for C).
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
I won't explain it, but here is an article on positioning that will.
here is the only necessary css for option 1 is adding overflow-y: auto to .main-content, but if you want to go with option 2 which I don't suggest you can go with overflow-y: hidden on .main-content
Well that's all for my post which is probably too long for most people sorry if I bored you, but I'm just trying to help. Hope you figure out the layout you want. This is only a few examples of the layouts possible with good old css. If you don't get the layout you want from this or any other post feel free to send me a message by commenting below, and I'll be happy to answer it sometime. Hope this helped. If it didn't that's fine too. :)
You can try css3 flexbox.
http://jsfiddle.net/wL9aM/1/
.container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 700px;
}
.header {
height: 200px;
background: red;
}
.main {
-webkit-flex: 1;
flex: 1;
background: blue;
}
try using script..
var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px
$(".filler_div").height(window_h - header_h);
You can also put that inside a function() so that you can add it also when you resize the browser, the filler space also adjusts...
function setfillerDivHeight(){
//the code above
}
$(document).ready(function(){
setFillerDivHeight(); //the initial setting of height
});
$(window).resize(function(){
setFillerDivHeight(); //reapply setting of height when window resizes
});
<div class="full-page-height-wrapper">
<header></header>
<main></main>
</div>
html,body {
height: 100%;
margin: 0;
}
header {
height: 150px;
}
.full-page-height-wrapper {
min-height: 100%;
position: relative;
}
CODE: http://fiddle.jshell.net/N7zJg/9/
preview: http://fiddle.jshell.net/N7zJg/9/show/
I don't think you cannot acheive that in pure CSS.
So, there is two different solutions:
1) You can put the 150px div in the 100% div.
2) You can do it with jQuery:
If your top div is <div id="A"> and the second one is <div id="B">, you'll have:
var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });
Feel free to adapt the code if you have some margins.
Found a solution myself finally. Doing it this way makes the design more responsive since (if i choose to add something to the bottom), it will automatically resize the div's height.
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-column;
}
#fullDiv {
height: 100%;
}
I found two solution.
The one is that I have must set the div in the absolute position.
the div float over the screen.
another one is use table-row display.
If you use just CSS, you cant achieve your task by giving 100% height to div. Because what basically CSS is doing is giving 100% height to your DIV plus giving 150 px to above header. Consider giving height of DIV less than 100% or some static value such as 600px or 700px.
Alternate is having a class of DIV with min-height 100% and inside it putting your header and body.

Keeping divs in shape

I have a few issues that I can't really get.
a. If I do something like:
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
Scrollsbars in my browser will appear. How to avoid that? I want my top bar to be full width, with padded content but I don't want it to exceed real width and make scrollbars appear. How to do that?
b. Do you have any articles on how to scale website elements according to user's resolution? When I try it with
position: absolute;
top: (some percentage)%
left: (some percentage)%
It's never accurate. With pixels instead of percents - it's not accurate either for different resolutions.
c. Menu overlay
Is there any way to level divs so that my drop-down css-only menu doesn't appear BEHIND divs ? When that happens, I can't click on certain items in that menu because they hide behind a body div.
Thanks in advance!
a. add box-sizing: border-box; -moz-box-sizing: border-box to your code. It will make the padding be within the 100% width, check here for more info and here for a demo
b. try searching the web for responsive designs. Plenty to find about how to display your website based on different devices. You probably don't want to scale everything.
c. are you looking for z-index? Can't help you any more than that with the information you give. Add your HTML/CSS code if you need to know more.
All of your issues are solved with plain ole CSS, so that's good news!
Padding
This is because of the way CSS handles padding. So for instance if you set your element to be:
#id{
width:100px;
height:100px;
padding:10px;
}
It would actually end up being 120px x 120px . This is explained here http://www.w3.org/TR/CSS2/box.html.
You can solve this by using the box-sizing method detailed here http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Scaling depending on Resolution
This is called responsive design. It's really too much to cover here but the basics is that you use media queries to do this. That is detailed here http://css-tricks.com/css-media-queries/
Menu Overlay
You can solve this with the z-index property given to you by CSS. That works essentially like this: z-index:1 is below z-index:2. The caveat is that z-index will only work if a position is declared on your element.
http://css-tricks.com/almanac/properties/z/z-index/
Again, no js is needed here and that's great news because CSS will be much faster for you and much more scalable.
a)
of course scrollbars will appear because you have a with of 100% + 10px
what you can do is:
position: absolute;
top: 0px;
width: 100%;
padding: 0;
or
position: absolute;
top: 0px;
width: 90%;
padding: 10px; // if screen allows it
b)
to scale pages acording to resolution I highly recommend you bootstrap it is really easy and really fast to make your page multidevice http://getbootstrap.com/
What you want to do is use the attribute:
box-sizing: border-box;
As shown here: http://jsfiddle.net/se34t/1/ This allows the padding to be calculated within the 100% width.

how do I make a resizable scrolling text box in a fluid layout?

I've tried using Dreamweaver's standard fluid layout, and modified it with 10% column widths and 24 columns on the desktop design. I've tried creating a div within a div (bear with me, I'm a noob at Dreamweaver), and set the constraints of the text box to be within the outside div, and haven't been able to come up with a solution on that front.
I tried to set the parameters of the text box itself but that doesn't work either because of the conflict of % v. px. In the fluid layout, I'm using % for the resizing to work.
In essence, the issue lies within being able to set the vertical constraints on the text box to be in proportion for when the screen size changes; horizontal is fine because I can just set the width constraint in Dreamweaver's design module.
I'm thinking that I'll have to set it up through a javascript of some sort; although I know nothing about java except to pluck code from someone who's built it and plug it into the site.
Sorry for the rambling nature of this post, and I hope it makes sense.
I was helping you in your other question regarding jQuery and I decided to snoop around and found this question. I understand you want a fluid height for a text box in a column. That can be achieved like this:
CSS:
/*
In order to use width/height: 100% on the body and html
You need to remove the margins and padding on them, otherwise
you'll see a vertical and horizontal scroll bar, which is awful.
This way, it removed margins and paddings on everything, ultimately
leading to better styling overall.
*/
*
{
margin: 0;
padding: 0;
}
body, html
{
width: 100%;
height: 100%;
}
/* Create a wrapper to base all other %-based measurements off of. */
#wrapper
{
width: 100%;
height: 100%;
}
/* The column that the textbox will be inside */
#someColumn
{
width: 50%;
height: 50%;
margin: 5px;
padding: 5px;
}
#someColumn textarea
{
width: 25%;
height: 50%;
/* The textbox will now be 50% the height of #someColumn */
}
HTML:
<body>
<div id="wrapper">
<div id="someColumn">
<textarea></textarea>
</div>
</div>
</body>
Here's a jsFiddle to see what it looks like

Disable the body scroll, but keep it on individual div elements which are greater in height than the browser

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}​
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}

Categories

Resources