so as the title says i need to float my div with absolute position to the left while keeping left: 100px or whatever it's set to, for example let's say i have these rules:
.myDiv{
position:absolute;
left:100px;
top:100px;
width:50px;
height:50px;
}
Now how can i float it to the left side which would be left:0px without using this left command, i need something similar to float:left also javascript is totaly acceptable.
And if any one is wondering why i need this quite strange thing is because i want to keep this object offset so later i could bring it back to it's original position.
You cannot do this. Absolutely positioned objects can only be moved by changing one or more of left, top, bottom, right (or relocating them inside the DOM tree).
If you want to be able to move the element to a previous position, save the value of left somewhere so that you can restore it when the time comes. It's easy to do and will be by itself enough to accomplish almost anything you will want it to.
Related
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
Basically what I want is a CSS Triangle that is vertically aligned in the center of my content, positioned at the right of my content with a slight padding without using explicit measurements based on the triangle's border-width.
The wrapper should expand to contain the CSS Triangle if the triangle is huge like in this example and the CSS Triangle should always be vertically aligned in the middle of the wrapper. If there is a large amount of text, the CSS Triangle should just overlap the text if they cross.
This seems perfectly reasonable, but I ran into some problems; check out this JsFiddle for where I'm at now.
If I assign a min-height, I can get to 1. below. The problem with 1. is that I have to choose an arbitrary height. Moreover, if content grows, it won't be perfectly vertically centered because of the top: 25% which doesn't truly put it in the middle. To allow multiple different sizes of arrows easily, I really don't want to assign a min-height or any height for that matter, I just want it to calculate its size on its own.
I also had to use an overflow: hidden to prevent the scrollbar from appearing because doing a right: -45px will push the "right side" of the CSS Triangle box, so I can't use an overflow: visible anywhere too.
If I remove the fixed height, then I end up with 2.
Is this possible to do without using an explicit height and other explicit measurements; how would you go about correctly vertically aligning it? If you have ideas using jQuery to grab widths and so forth, that's fine too - I've tagged it.
Here is some jQuery to get rid of the hard-coded heights after assigning an arrowBox class to your div:
$(document).ready(function(){
$(".arrowBox").each(function(){
var border = $(this).height()/4;
var right = "-"+(border-5)+"px";
$(this).find(".arrow").css("border-width",border).css("right",right);
});
});
http://jsfiddle.net/wzzRC/1/
That said, the difficulty with any pure CSS solution is that you can't specify border-width in %. So with pure CSS, use one of the other solutions to force the box to grow to accommodate the arrow. If you want a working arrow in smaller boxes, you need JS.
Set position: relative; on the white box container.
Set position: absolute; on the triangle with a top of 50% and margin-top: of half the height of the triangle.
That will make sure that the triangle is always in the middle.
Change the triangle css to have:
top: 50%;
margin-top: -50px;
http://jsfiddle.net/QuwEc/4/
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;
I'm trying to come up with a way to ensure that a specific left-floated element isn't the last in a row, and drops to a new line if that would be the case.
The best way to handle this I figure would be to detect whether or not there were enough space between the element and the right side of the window for another element to fit (a known distance, 160px say), and if not, to drop this element to the next line. Is this possible with CSS? JS would be okay but if I could do this with CSS that would be preferred.
Thanks!
To some extent this is a solution to your problem - jsfiddle.net/avrelian/Dh86D/
#special {
background-color:green;
margin:0 170px 5px 0;
}
#special + .left-float {
background-color:blue;
margin-left: -165px;
}
It fails if your wrapper element has the width less than the double width of your floating elements, since the floating element next to your special element will not be shown.
I have got a form with long list of fields. So I want to see Submit allways on the bottom. And it should be there till I scroll to its original position.
I've tried to do a sample:
http://jsfiddle.net/kSpjh/2/
But the code is ugly and ther is an issue that gray panel should be 100% till scrolling
Example: http://jsfiddle.net/kSpjh/4/
using left: 10px; right: 10px; for #sticker
Not sure what you think is so ugly about the code. I didn't look at it in depth, but it's pretty short, so I can't imagine it's that poorly constructed.
Beyond that, is the only other issue that you want the background of #sticker to extend across the full length of the screen? In that case, just give it a width:100% in the CSS:
http://jsfiddle.net/ebiewener/kSpjh/5/
But you also said that it "should be 100% till scrolling", so does that mean you want it to contract to the smaller size once scrolling begins? If so, you should put the width:100% in the $(document).ready() function, so that you can then remove it as a result of the .scroll() event:
http://jsfiddle.net/ebiewener/kSpjh/7/