We Keep Coding

jQuery .height() wrong in Safari

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

Using JS CSS to set position causes different outcome than the same setting using pure CSS

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.

how to make my images responsive?

Hi all using twitters bootstrap: http://twitter.github.io/bootstrap/base-css.html#tables
I am wandering how I can stop this happening: http://img823.imageshack.us/img823/6606/screenshotfrom201306071.png
I want the images to resize with the window until it gets bumped up above the text from bootsrap.
Link for it: http://www.prxa.info/articles/category/1 User: test.prxa. pass: test
I NEED images to have a max of 350px here as some images people include are massive and have to be resized to not mess it all up.
Here is my custom css for the thumbnail area and the images inside:
.thumbnail
{
width: 350px;
height: 220px;
display: table-cell;
vertical-align: middle;
}
img.tagline-img
{
max-width: 350px;
max-height: 220px;
}

Not the best responsive technique but it will make it fit
Just use
img.tagline-img {
width:100%;
}
Just tested on your site

taken from bootstrap :
img{
border:0;
max-width:100%; /* Part 1:Set a maxium relative to the parent */
width:auto\9; /* IE7-8 need help adjusting responsive images */
height:auto; /* Part 2:Scale the height according to the width,
otherwise you get stretching */
-ms-interpolation-mode:bicubic
}

Blogger doesn't resize my blog to fit smaller monitors

My blog looks great on a standard 20 inch monitor or larger, but if I drag it to my laptop... I have a scroll bar and it's just large and bulky. What seems to be the problem? If I re-size the blog then it destroys it because everything; even the youtube video stays the same.
Any help would be very appreciated!
http://skepticsoup.com < - Blog

In ur css code u have mentioned width as 1500px. make it as 100%
body {
min-width: 1500px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 1500px;
max-width: 1500px;
_width: 1500px;
}
.main-inner .columns {
padding-left: 0px;
padding-right: 500px;
}

How to center and size an image to be 100% width of the screen, but only if <1024 px

OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/

Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}

if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.

You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.

Demo
I ended up opting for display:table-row ... oh well :P