display half of element in css - javascript

So I would like to be able to only display half of an element. Now I could do something like the following:
function half($elem,which){
//here I would get the scrolling position
//of the element $elem along with the outer
//width and outer height. Then, depending on
//what 'which' is (left,right,top,bottom), the
//function would append an element with the same
//background color as the body background in
//order to cover the correct part of the element
};
But that is just adding extra items to the DOM that would be unnecessary if, in some simple css or javascript, I can set it to simply display (or cut out) only part of an element. Is that possible? If so, how?
UPDATE:
After all of you are trying to guess, here is a fiddle that constantly appends content to a container. To answer my question, you would need to have a function that changes the css of the specific div being appended so that it only appends the specified half of the content

I mean its hard to guess based on the small amount of information you provide, but something like this should work:
.ElementContainer {
width:500px; /* example, random number */
overflow:hidden; /* important part */
}
.Element {
width:200%; /* relative to parent, so double the width of parent */
}
And then just something like this:
<div class="ElementContainer">
<img src="whatever.jpg" alt="" class="Element" />
</div>
That should only show the first half, from the left. If you want to do like ... the middle half or something, you'll need to use positioning:
.ElementContainer {
position:relative; /* must declare position of parent */
width:500px;
height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */
overflow:hidden;
}
.Element {
width:200%;
position:absolute;
top:0; /* always declare both X & Y */
left:-25%; /* can be any negative % you want, this is just an example */
}
This will do this kind of centered appearance ... you can run with it from here, should give you an idea of options.

It's very easy to cut off after a specific pixel height in CSS, assuming you want to cut vertically, substitute width if you want to cut horizontally:
.restricted {overflow: hidden; height: 45px; }
See this jsfiddle: http://jsfiddle.net/jrvf7/
Cutting off after precisely half of an element, if you don't know the height of the element beforehand, will require some javascript. See other submitted answers for that. I'd suggest you go my CSS route if possible, however.

It's kind of vague exactly what you want to be cut in half, but I'd start with
background-size:cover;

Related

How to use innerHeight for div on both window load & resize?

I am trying to determine the top/bottom padding of a div (.content) based on it's height, and to recalculate it based on load AND resize of the window. This is supposed to align nicely centered next to another div (.character) beside it.
I've tried using CSS calc, but in this case it doesn't do exactly what I want it to do since the syntax doesn't support operators and I have a few media queries that change the size of the font based on the viewfinder, so the height of the .content div is somewhat dynamic.
Below is the JS portion, but here is the JSFiddle of what I've done so far: https://jsfiddle.net/inochiishtal/a9z13fb2/62/
$(function(){
$.w = $(window);
$.w.on('load resize', res);
res();
});
function res() {
$('.content').css('height',($.w.innerHeight()/2)+'px');
}
Any help or suggestions are appreciated. I'm not 100% dedicated to using innerHTML if there is a better solution.
It's a little unclear exactly how you want the items aligned, but based on what you said it seems like you want the .content and the .character to be vertically center aligned with each other.
In your snippet you have both of them absolutely positioned. If that's the way you want to go, you can just ignore their margins and JavaScript in general with this little vertical centering trick applied to both:
top: 50%;
transform: translateY( -50% );
The first line says "Put the top of this element 50% of the way down the element that it's positioned based on." Since it goes by the top, the second line says "Scoot me back up 50% of my height." That's just the way those CSS properties work -- the "top" % is about its parent, and the translateY % is about itself.
Since both of your elements would be vertically centered in their parent, they'd be aligned.
https://jsfiddle.net/qowxezpy/
HOWEVER if you don't need the elements to overlap like they do in this example (which I think looks nice and modern) there's a much easier way, using flex.
The parent would get:
display: flex;
align-items: center;
And the two children get:
flex-basis: 50%; //just to give them some width, since one is empty

How to adjust height of a HTML element to cover all free spaces of it's parent?

Suppose we have a DIV element like this:
<div id='parent'>
<!-- The childs will come here -->
<div id='footer'>This is footer</div>
</div>
and this function that create HTML elements dynamically and inserts them into the div#parent
function addChild(name)
{
$("<div></div>").text(name).prependTo( $("div#parent") );
}
CSS:
div#parent
{
height:400px;
background-color:yellow;
}
div#footer
{
/* height: ??? */
background-color:red;
}
Now I want, the element div#footer covers whole available/remaining height of the element div#parent, How I can do this by CSS or Javascript?
Thanks
Another solution using CSS. The solution here is using display:table and display:table-row
div#parent
{
display:table;
height:400px;
width:100%;
background-color:yellow;
}
div{
display:table-row;
height:20px;
}
div#footer
{
/* height: ??? */
background-color:red;
height:auto;
}
http://jsfiddle.net/aawbE/
If you simply want the footer to always be at the bottom of the page, then I would suggest checking out http://www.cssstickyfooter.com/. They have a great concept for making sure that the footer will either be at the end of the content, or touch the bottom of the page.
Example
If you want the footer to cover the entire bottom portion of the screen (beginning where the content ends and ending at the bottom of the screen) then you do need to know the total height being used by all of the elements inside of the "container" element as well as the height of the "container" element.
An easy way to do this is to put all child elements into a different div (the height of which you can easily track.
//find the difference in height between the
//"parent" div (minimum of 100% of page height) and
//the "main" div (the total height of its child elements)
height = document.getElementById('parent').offsetHeight -
document.getElementById('main').offsetHeight;
//Set the top margin of footer to minus the height
//(make footer go up 'height' number of pixels
document.getElementById('footer').style.marginTop = -height+'px';
//Set the height of the footer to 'height'
document.getElementById('footer').style.height = height+'px';
It's important to note that these calculations are based off of the cssStickyFooter code. This makes sure that the bottom of the footer remains at the bottom of the screen (unless it passes the bottom of the screen).
Example
For this example I added a green border around the 'main' div so that you can see where it ends. I also make sure to change the footer whenever the page is re-sized in case the child elements move around (re-size the page to see this happen). I also added a min-height to the footer so there will still be a footer even if #main.height >= #parent.height.
I hope this helps.

My webpages div doesnt set dynamic width correctly

I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>​
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.

How to make a div of fixed height and width scroll horizontally when childs are not more visible?

I need to create a sort of cart, where I store elements created by the user.
I've created a simple scheme to help you understand my needs:
.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements (#scroller). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px.
I think the size of any #scroller child <li> will be ~100px.
There's a button (not present in the scheme) that allows the user to store in #scroller an item.
Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right).
I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.
Do you think this is a good solution?
If not, what do you suggest? What CSS rules could help me to do it?
Thanks in advance.
you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.
like this:
html:
<div id="scroller">
<div id="inner">
(your items)
</div>
</div>
css:
#scroller {
width: 900px;
overflow: hidden;
}
#inner {
width: 90000px;
}
P.S. now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.

Resize div that's inside another div

I have a div that is the body of my site, inside that div I put a div on the left side (to have a vertical menu)
http://www.freeimagehosting.net/uploads/117f79fa0e.png
http://www.freeimagehosting.net/uploads/4569a5f550.jpg
My question is, how can I make the menu div follow up to the bottom of the body div so that it doesn't look like it was cut, because of the color the menu div has...I've played around with properties like position, margins, float, yet I can't seem to get it to work...
I've included two pics so that you can see the divs!
Sorry pics don't appear because i'm a new user!! i've included links though...
The first picture is the inital page, and the second is after content was added and the body div expanded to make that content fit!
Any help appreciated!
This technique has always worked for me.
See http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
The background is actually on the wrapper of the two columns though.
This is really something best approached with CSS.
Say this is your structure:
<body>
<div id="main">
<div id="leftSide"></div>
</div>
I think what you'd want to do is give the left side a height of 100% in your CSS:
#main {
height:500px; /*this can be whatever height you want for your main div*/
width:700px; /*same with this, for its width*/
background-color:#F00; /*just to show you the effect*/
}
#leftSide {
float:left; /*THIS is where the magic happens, to "pull" it to the left*/
height:100%; /*This makes sure it reaches all the way to the bottom*/
background-color:#00F; /*or any color you'd like (which is a great song btw)*/
width:200px; /*or whatever height you'd like*/
}
This all assumes of course that you don't have extra margins and padding on your divs or other elements. You also might want to consider a "CSS Reset" like this one

Categories