I'm trying to position my div with the class .content-window so that they all align from the same point, which is the top left corner of the first section element.
This is the first time I've encountered this problem and I've tried everything, from pure CSS to JQUERY.
Here's the JSFiddle for the project : http://jsfiddle.net/smpte11/SahM8/
Bootstrap is setting your <section>s to position: relative. You'll need to manually override that and position the rest of your elements accordingly.
Here's one way to do it: http://jsfiddle.net/SahM8/1/
Related
In my example I need to fix button .lot-item .bid-now to the bottom of .lot-item as in jsFiddle example bellow. I know most popular way is to make position: relative then of the child element position: absolute then bottom 0. But in this case all my items will loose weight property and will be ugly. Because my buttons most wide elements in the parent element. Also I am not able to make fixed wide weight for .lot-item. If there are any different solution for my case? jQuery solution is will be good one too
https://jsfiddle.net/z7Lgme5s/
I passed columns to FlexBox, and the results change, I send you the same code in fiddle
The parents .lots are passed to display: flex and flex-wrap: wrap to fall in another line
[https://jsfiddle.net/r0bin/0m13h5fk/1/][1]
So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.
Is it possible to keep the top row moving like we move the first column in a table using jQuery?
The code I used to keep the first column moving during scroll is something like this.
$('#table-name').scroll(function () {
var _left = $(this).scrollLeft();
$('.firstTd').css('left', _left);
});
when I use the same technique to top property to a table row...through the CSS gets applied it is not honored by the browsers.
P.S: I used left property on td element and want to apply the same technique to a tr tag
Demo here: https://jsfiddle.net/8w4qac30/7/
EDIT
Oops, understood the question bad. I'll keep the info below, but actually my answer is this.
As trs are quite picky, the only thing I can think of is to select all the tds and move them, like you do with the first one, like this: https://jsfiddle.net/8w4qac30/9/
Old answer
left, top, right and bottom are positioning attributes, and for them to work you should set the position attribute too.
position attributes come in different flavors:
relative means to position the element relative to itself, so if you add, for example, left: 20px to a relative positioned element, it simply will shift its position 20 pixels to the left.
absolute means to position the element relative to the first parent that is also relative or absolute positioned.
fixed means to position the element relative to the browser window and will keep fixed during scrolls without additional code. I think that you should go this way.
Check this:
Check the positions here: https://www.w3schools.com/cssref/pr_class_position.asp
I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!
The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.
I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.
At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview