div doesn't position horizontally - javascript

Im not getting my form element to position horizontaly in the center here is my code
$('.form')
.css('top', window.screen.availHeight / 2 - $('.form').height() / 2)

First, make sure it's position: absolute; as #Douglas points out. Past that, you're fetching the screen height, as in the entire monitor, not the browser window. Instead of window.screen.availHeight, you likely just want $(window).height(), like this:
$('.form').css('top', $(window).height() / 2 - $('.form').height() / 2);
You can test it out here.

Setting the top property with css won't affect the horizontal position of the element.
Setting top (or left for horizontal positioning) will not have an effect if the position of the element is set to static, which is the default.
Try position absolute instead:
.form {
position: absolute;
top: 100px;
}

Related

CSS `Position: Fixed` Not Moving On Scroll

I tried to put a position: fixed on the div ".ais-search-header", but it does not move while on scroll. I also try to drag it out from the parent div, but still did not work.
URL: https://kickegg0.myshopify.com/search.searchdata?q=q
Pass: tweast
There is a bug in Chrome and Firefox where position: fixed does not position relative to the screen when there is an ancestor element with the transform or backface-visibility attributes (or their webkit equivalents) set.
Move the element you want absolutely positioned above the elements with those attributes.
A position: fixed element has no dependency to its parent container. Its position actually depends on the browser window. That means it won't move or scroll on page scroll. It will be on top of the page. But those under that element will scroll according to the page. If you want to move the container according to scroll, give it position: absolute like:-
#parent {
position: relative;
}
#container {
position: absolute;
}
So that it will be inside the container and will move on page scroll.
Position 'fixed' positioning is based on your browser window so not move with scrolling. if you want to move with scrolling use position 'absolute'

Zurb Foundation 6 reveal modal adds vertical spacing on mobile devices

I am using Zurb Foundation 6.3.0 and have come across the following issue. The reveal modal receives the following inline styles when opened both in chrome both in desktop and in responsive mode.
element.style {
display: block;
top: 0px;
left: 0px;
margin: 0px;
}
However if I open the website using remote debugging for my android device the inline styles are set as the following.
element.style {
display: block;
top: 60px;
left: 0px;
margin: 0px;
}
This causes the modal to move 60px further down than it should and display the content behind the modal. What would be causing the inline styles to be set differently on android device?
This is a result of the calculation done by foundation.reveal.js:
var height = this.$element.outerHeight();
var outerHeight = $(window).height();
if (this.options.vOffset === 'auto') {
if (height > outerHeight) {
top = parseInt(Math.min(100, outerHeight / 10), 10);
} else {
top = parseInt((outerHeight - height) / 4, 10);
}
}
If the element height is greater than the window height, it sets the top property for the element to be 1/10th of the window height. If the element height is not greater than the element height then the top value is set to 1/4th of the difference between the window height and the element height.
In this case the height of the element is calculated as being greater than the window height (even though it should be set as 100vh). Therefore the position of the element is being set as ~ 1/10th of the window height.
This issue is also address in this answer: CSS3 100vh not constant in mobile browser.
In order to prevent the modal element to have a top value of greater than 0 is to add the attribute `data-v-offset="0"' to the element like this:
<div class="full reveal" data-reveal data-v-offset="0">
<!-- content -->
</div>
This forces the value of the top property to be 0 as the calculations done in the foundation.reveal.js _updatePosition function are not made if the data-v-offset is set to 0.
This and other plugin options are covered further in the Zurb Foundation docs.

jquery resize so content is always centered perfectly

I have the following right now, but its not perfect:
$(window).resize(function () {
$("#app-views").height($(window).height() - 140);
});
Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.
How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.
I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.
Here is the basic HTML:
If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:
#app-views {
position: fixed;
top: 75px;
bottom: 60px
}
You can set left and right without width to get the same effect in horizontal dimension.
You say you have specific measurements to place your content on the page
(75px from top before my content starts, and I have 60px from bottom
of the page)
Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.
To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.
I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:
#app-views {
position: absolute; /*this will allow you to position it exactly where you want it*/
left: 50%; /*this will move the left side of the container halfway across the page*/
transform: translateX(-50%); /*moves the container left by half its width,
so that the centre of the container aligns with the center of the page*/
}
You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().
If you want to use jQuery, you could try:
#('app-views').css('position', 'top');
Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:
MediaQuery CSS

JS pageX and pageY take the coordinate plus the margin of relative position div?

I have a div that I want to center so I use
margin-left: auto;
margin-right: auto;
position: relative;
That's the easiest way to center I admit, but when I want to use event.pageX and event.pageY it takes the coordinates plus the left margin and that's wrong.
Here is the fiddle. Click somewhere on the green rectangle to watch the result :
http://jsfiddle.net/FGkUq/
Any ideas how to fix so to show the square to the coordinates without the left margin ?
Take a look at the updated fiddle.
Quick solution remove positioning of canvas:
#canvasDiv {
width: 30%;
height: 400px;
cursor:crosshair;
background-color: #458B00;
/* position: relative; */
...
}
The problem is with the positioning of template. Because absolute is still "relative".
The definition of absolute positioning: An absolute position element is positioned relative to the first parent element that has a position other than static.
Therefore the position of #template will take into consideration the position of #canvasDiv unless you leave #canvasDiv with the default static positioning.
Learn more about positioning at w3schools
Positioning absolutely elements inside relatively positioned elements: here
Great example of your problem tabs 3 & 4.
Should you wish to stick with the relative positioning of canvasDiv, you have to update the script, so it takes into account the positioning of canvasDiv:
var x = event.pageX;
var y = event.pageY;
var canvasPos = $(this).offset(); // in the context of your script this refers to #canvasDiv
var styles = {
"left" : x - canvasPos.left, // remove its left offset
"top" : y - canvasPos.top // remove its top offset
};
Check out the fiddle

Place Button at top right corner of an element with position:relative

I wrote this script:
var HTML_BT = '<a class="helper" href="#"><i class="icon-wrench"></i></a>';
// Append button
$("my_selector").live('mouseenter', function(){
var
bt = $(this).find('a.helper'),
pos = $(this).position();
// Check if the button exists and creates it
if (bt.length==0){
bt = $(HTML_BT);
bt.css({
position:'absolute',
// Calculates coordinates
top:pos.top + 15 + 'px',
left:pos.left + $(this).width() - 15 + 'px'
// .. Some other css like border, bg, color and so on.
});
$(this).append(bt);
}
// Show the button
bt.show();
}).live('mouseleave', function(){
var
bt = $(this).find('a.helper');
// Show the button if exists
if (bt.length!=0){
bt.hide();
}
});
The script shows or appends a link at top/right corner, when the mouse cursor goes on a specific item.
It works fine, but I have some troubles calculating the top and right coordinates on elements placed inside containers that has specified the css position as relative, because the link coordinates are (rightly) calculated as relative of his container.
.carousel-inner{
position:relative;
}
Here I did a working example: http://jsfiddle.net/ucfKm/
Someone knows how to test if I have to use absolute / relative coordinates or how to get the right left position?
Thanks a lot, Davide.
Instead of calculating the left position to put it on the right and the top position just remember that an absolutely positioned element inside a relatively positioned element will have its 0,0 at the top left corner of the parent, so:
top:15 + 'px',
right:15 + 'px',
Will position your a element at 15 px from the top of the parent and 15px from the right of the parent.
Fiddle update: http://jsfiddle.net/ucfKm/5/
EDIT: Also, note that because you dont have to calculate the position in this case, you can assign the css directly to the class on your css file, and avoid unnecessary javascript logic.
position: relative; does not position the element relative to the parent. It positions the element relative to that element's original position.
If you want the element to be positioned 15px from the top and right of the parent (as long as the parent has position: set on itself with a value of either relative, absolute, or fixed), use:
.carousel-inner{
position: absolute;
top: 15px;
right: 15px;
}
If you want the element to be positioned 15px from the top and right of the entire page, use:
.carousel-inner{
position: fixed;
top: 15px;
right: 15px;
}
In either case, you have no need of doing javascript position calculations.

Categories

Resources