Centering image with Javascript dosn't work in javascript - javascript

i have i little problem my portfolio has a picture of me on it that keep 100% height and i want to center it with margin: 0 auto; in javascript. This works in IE (for once) but dosn't work in webkit browser.
my portfolio can be found on www.koenvrij.nl

1) Your image needs to be display: block; for margin: 0 auto; to work.
2) You have an inline style with margin-left: 0px;. That's gonna cause problems
3) You have a bunch of other crap in the image's parent container, so it's going to center it in the remaining, unfilled area (not the entire area).

Related

Resizing image size and text position with browser window in html

I am developing a webpage for Siemens PLC, for displaying where on production line is a potential "traffic jam". My plan is to insert a .jpg image of production line into the webpage and then place red circles onto each machine of a production line. Then I would change color with javascript and jquery.
I already figured it out, how to change color of css circles with jquery and javascript, according to the PLC variables. The main problem is, I want my image of a production line, to resize with browser window like in this example:
jfiddle
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
So now my question is, how to position my circle indicators on the image, so the indicator would keep its position on the picture even when the browser window is resized?
You should better to use svg image or canvas for this achievement. You can use Javascript to position elements easily.

Set div to cover all window size, minus menu bar height, without scrollbars

I'm trying to build a slider plugin from scratch because I need it to have some specific behavior that is hard to find in other plugins. Anyway, one of the requirements is that it takes all the space available in the page, minus the menu bar height.
This is an example I set up: https://jsfiddle.net/5ujqw94n/
To set the size of the size I call this function:
adjustSizes: function(that) {
var w = document.body.parentNode.clientWidth;
var h = $(window).height() - $('header').height();
console.log('window inner w', $(window).innerWidth());
that.$elem.width(w);
that.$elem.height(h);
console.log('window inner w', $(window).innerWidth());
console.log('document client w', document.body.parentNode.clientWidth);
}
I also call the function when resizing the window. What happens is that when the page is loaded, it shows the scrollbars, but resizing the window makes them disappear.
In the function I put some console.log to track the window width and noticed that there's a 15px difference after the resizing is applied. I thought this could have had something to do with the scrollbars and searching arouns seems this is the case.
I'm not sure how to solve it. Putting overflow: hidden kind of works, but I was hoping for another approach because this feels like a workaround.
For example, in this other page everything seems to work as I want to and there's no overflow: hidden in the body.
Any suggestion?
I found a solution that's (kind of) working at least in chromium.
Remove borders from .page-container and modify .slider-container
.slider-container {
border: 0px solid yellow;
left: 0;
right: 0;
height: 100%;
max-width: 960px;
margin: auto;
overflow: hidden;
position: absolute;
}
Now pour some body { margin: 0; } on top of it and serve refreshed.
What baffles me however is why the borders are causing the horizontal scroll bars even with box-sizing: border-box; stated... hope it helps anyways.

Gallery images overflow to left

I am working on a carousel - gallery viewer for my website and I have problems with the elements in it.
The images at the bottom are overflowing but only to the left. I have set the overflow property to hidden but it does not seem to work in this side.
In addition, the images are not affected by the property margin-right for some reason, only by margin left.
Here is a demo of the image viewer: http://codepen.io/anon/pen/XbgdWo
This is the code I am using for the image items. I use margin-right to show it is not working properly.
.slider-item img {
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
#include transition('all .2s ease-in-out'); }
.slider-item:hover {
img { #include transform(scale(1.1)); } }
I would really appreciate if you could have a look at it. I have no idea what to do to fix it.
Thanks in advance.
You don't need to have the overflow:hidden on the image itself, just the containing element - which you have.
The effect you are after works fine, you just have an issue with margin - you have put it on the img when it should but on the parent (.slick-slide).
I have forked your codepen here and fixed the issue, I added a red background to the img container so you can see the changes, the code is still messy but it gets the job done. I will continue to refine the code in the same pen.
Your body has 80 percent of width.
First of all, add the following CSS to the body to make it appear properly.
body {
width: 80%;
margin: 0 auto;
}

Limited scrolling for an Image

I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.

How to get a website's position setup in a way that an image is centred?

That title may not be the best, here's an example of what I'm looking for: http://www.teslamotors.com/en_CA/models
Notice how the image stays in the middle, and gets "shrunk" or reduced from both sides evenly, up to a certain width, and then the website stops shrinking.
I've tried my best, but can only achieve this in javascript using the window.onresize event call, and was wondering if there was a CSS way to do this.
You will need to apply a percentage width, along with a fixed min-width, and margin: 0 auto to keep it centered
.content {
width: 70%;
min-width: 400px;
margin: 0 auto;
}
http://jsbin.com/isohAQe/1

Categories

Resources