I have a problem reading out the correct height of a DIV with jQuery in Safari. I am using jQuery("#x").height() to read out the height of the element. In the real situation, I use the result later on in the page. It works well in Chrome, Firefox and IE, but not in Safari.
Here is some code that I have extracted from my page that demonstrates the problem:
The CSS:
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: 40vw;
height: auto;
max-width: 330px;
padding: 10px 3.1vw 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: 100%;
height: auto;
}
(some parameters seem superfluous or strange, but I need them in my context and it doesn't change the problem if I leave them out)
HTML:
<div id="x">
<h2>Header</h2>
<div class="y">
<img src="https://placehold.it/330" alt="my image">
</div>
<p class="z"><span>Some text</span><br>Some more text...</p>
</div>
Now, with this jQuery code I am getting different results depending on the browser:
console.log(jQuery("#x").height());
I put all this into a codepen: http://codepen.io/anon/pen/MyELJV?editors=1111
If you load it in Firefox, the console output is 469. If you load it in Safari, it's 154. (addition: in both Chrome/MacOS and in IE11/Win7 the value is 466). Some small part of the difference is due to different default styles, but the main problem is that Safari doesn't take the image into account when getting the height.
If tried different things (that didn't solve the problem):
I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).
I added width=330 heigth=330 as attributes to the img tag, it works in the codepen, but not in my real situation (with another image). Apart from that, the whole thing is responsive, so I'd like to omit these attributes anyway.
By the way: The original images are all 330x330px (i.e. all have aspect ratio 1:1), but they are scaled down on smaller screens.
I'd be very grateful for a solution...
I changed your css so that safari doesn't change height of image.
#x {
position: absolute;
top: 0px;
margin-top: 80px;
right: 54%;
width: auto;
height: auto;
/* max-width: 330px; */
padding: 10px 43px 16px;
background: #ddd;
}
.y {
position: relative;
width: 100%;
max-width: 330px;
height: auto;
max-height: 330px;
}
.y img {
width: auto;
height: auto;
}
Also use load function to fetch exact height of #x.
$(window).load(function(){
console.log($("#x").height());
});
You can refer the changed code here.
I fought a lot with this issue. Safari have a lot of troubles getting the height of an element but I found a javascript method that return the correct height of a specific element.
Here I give you the link and the support confirmation. Actually I used that in a project where I was needing to control an animation depending of an element height.
I hope that it could help someone in my same situation.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Use the getBoundingClientRect and access to the height attribute like this:
element.getBoundingClientRect().height
Related
I'm having trouble with re-sizing my search input bar. I've managed to make it re-size when the browser window gets smaller using width:100%;. But I can't get the starting width to be 300px without making it always 300px and then it's goes out of the parent div on resize. For some reason it's 185px;
Here's the jsfiddle of my set-up.
You are embeding your input into a span by calling $('.search2').typeahead. This span has the css-class twitter-typeahead wich is not set to width: 100%;
Add this to your CSS:
.twitter-typeahead {width: 100%;}
Then you need to change your div container css to this (width: 100%; max-width: 300px;):
.div2 {
float: left;
width: 100%;
max-width: 300px;
padding-left: 20px;
}
Leaving width: 100%; on your input is fine!
See the working code: http://jsfiddle.net/utg4mh6z/1/
Just remove all the float: left; and it works. It seems they are not required anyway. At least you don't state it anywhere and floating for 100% width elements makes no sense from my point of view.
I am working with ionic and am trying to fill the entire ion-content with a div. Within this div, I want to center a text horizontally & vertically.
I have achieved something, but this seems to only work within the browser, as soon as I upload the APK to my android device, it doesn't work anymore. I believe this is due to this line (please see the codepen I made) :
height: calc(100vh - 120px);
I wish I could use something else to get the full height of the container.
I would try including the -webkit prefix. Both calc() and viewport units should work in Android.
height: -webkit-calc(100vh - 120px);
height: calc(100vh - 120px);
Ok so I have found the solution, I am not sure why I did not find that during my previous searches. So I am basically using that :
myDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 10px;
text-align: center;
background-color:red;
}
http://codepen.io/bokboki2002/pen/rVyMgE
Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6e1vg58L/
The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?
For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?
$(document).on("scroll", function(){
if($(window).scrollTop() > 0)
{
$("#nav-content").css("position","fixed");
}
else
{
$("#nav-content").css("position","relative");
$("#nav-content").css("top",0);
}
});
vs
#nav-content {
position: fixed;
}
At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.
Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.
fixed
Do not leave space for the element. Instead, position it at a
specified position
so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.
the changes to fix could defining the initial widths in % relative to each other.
#content {
position: relative;
background-color: #eee;
width: 70%;
max-width: 1300px;
min-width: 450px;
height: auto;
}
and then the same for navigation
#navigation {
width: 30%;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/vemtyyox/
another way to keep the navigation at 300px could be to use calc to define the width of the content
#content {
position: relative;
background-color: #eee;
width: calc(100% - 300px);
max-width: 1300px;
min-width: 450px;
height: auto;
}
#navigation {
width: 300px;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/9db77jvp/
Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.
After spending 16 hours and having sacrificed critters to various gods I must regretfully say that I'm on the verge of mental meltdown.
I am writing an PhoneGap 2.8 application for Android (in the future will port to iOS). As main frameworks I use jQuery (with many plugins), Require, Underscore and Backbone.
On one fatal morning I got a task that header menu of my application must "imitate" the way facebook app's header does (follow the scroll).
Initially I believed that adding "position:fixed" attribute to the header div would would be simple enough- have I never been more wrong. As it turns out, position:fixed css attribute doesn't work properly in WebView and the issue has endured for years now.
This issue has been discussed in length in various forums and articles and various "solutions" have been proposed- none are working in my case.
I have tried to set header's position to fixed when scrolling and to absolute when scrolling is done. Theoretically it works, but it is laggy.
Having tried that I looked into different plugins or frameworks that could help in the case.
iScroll - Forces a specified structure to html and severe lack of documentation threw me away from it.
jQueryMobile - Since it is a whole framework, integrating it to my project would mean changing alot of stuff. As I understand, it wont provide a persistent header.
I have heard of Bartender and GloveBox but neither of them have documentation and they aren't in constant development (last commits are > year old ).
Using jsHybugger I inspected the header when it is in position: fixed an I have noticed that Blue box that overlays a div being selected in inspector is staying where click area is for the header. So if I scroll, the header moves with viewport but hitarea stays in place. It got me wondering, if there is a way to force WebView to recalculate the click area?
All and any help is very much appreciated.
So, inspired by this link, I made a quick fiddle on how this could work without position:fixed. Note that the fiddle is not the same as the code here, it just illustrates how this is supposed to work.
HTML
<div class="page-wrapper">
<div class="header"><h3>header</h3></div>
<div class="content-wrapper">
<div class="content">
<!-- Your content goes here -->
</div>
</div>
</div>
CSS
body {
height: 100%;
padding: 0;
margin: 0;
}
.page-wrapper {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.header {
position: absolute;
top:0;
left:0;
right:0;
padding: 3px 0;
color: #FFF;
background: #000;
text-align: center;
}
.content-wrapper {
position: absolute;
padding:0;
top: 65px;
left: 0;
right: 0;
bottom:0;
background: #CCC;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
padding: 15px;
}
Its not the problem of phonegap. Actually position: fixed doesnt work in android version lesser than 4.0
There is a quick css fix for it:
<div class="header"> this is fixed positioned div<div>
Css:
.header{ position:fixed ; -webkit-backface-visibility: hidden; top:0; left:0; width: 100px; height:30px; background: red; }
I came across after inheriting a project which was using the positioning system. Most people would probably know not to go down this road now but just in case someone does end up here looking for a solution...
It's possible to achieve the above with flexbox layouts.
In this way the css was as follows:
.pageWrapper {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
display: flex;
flex-direction: column;
}
.screen-content-wrapper {
padding:0;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
I didn't edit my content css so only used the above to achieve what i was after.
Hopefully someone will find this helpful.
I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob