Image in horizontal scroll are stretched - javascript

I have a gallery of images in a horizontal scroll.
The scroll got a fixed height and the image should take 100% of the scroll height.
Images got variable width but should keep his aspect ratio when they are in the scroll.
I made it simple in codepen but it was working without the toggle. Then I tested with my real spec:
First, it's hidden
Then on a user click on a button, the gallery becomes visible
Here is the codepen: https://codepen.io/Liroo/pen/zYYgGWz
The website where is the bug: http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton
This simple (s)css:
&__gallery {
border-bottom: solid 1px white;
height: 32vw;
&__image {
height: 100%;
}
}
may work (because sometimes it's not) in the codepen but if you check the website link, it is always buggy.
You can update it with playing with the off class of the #toggle div and you will see this weird behavior.
I already made a javascript version of this bug but I would like to know if there is any CSS solution. (here my previous solution: http://jensingvarsson.studio-push.com/)
EDIT:
Here you can find the bug in the gallery: http://framepictures.studio-push.com/photographie/making-of/#louis-vuitton
Sometimes it stretch, sometimes, just images are cut because the parent div is less wide.

Related

How to prevent background-image from zooming on mobile browser when adding elements vertically?

I have a ReactJS app in which I add elements vertically from up to down when I press on button "Post".
When I add the elements, they are well displayed on mobile and desktop browser.
BUT, on the mobile browser, the background image keeps zooming every time I add an element.
I chose to use Jquery in my public/index.html because I need it to change randomly my background image thanks to a function I have (I cannot call a js function inside the url() for background-image in a CSS file).
I have the following as well for my desktop version and it works, so I know I have to modify my CSS here:
$(document).ready(function() {
const randomImage = chooseBackground();
if ($(window).width() < 650) //mobile browser
{
$('html, body').css('background-image', `url(${randomImage})`);
$('html, body').css('background-repeat', 'no-repeat');
$('html, body').css('background-attachment', 'fixed');
$('html, body').css('background-size', 'cover');
$('html, body').css('background-position', 'center');
}
});
My objective is to have the background image fixed without moving and zooming on Mobile, and be able to scroll down to see all the elements I added.
background-size: cover will use either the vertical or horizontal box limits to fit the image perfectly inside the container. When adding elements, your body grows vertically, which means it'll have to fit the image in a "higher" container than before, thus it looks like zooming.
If you set a max-height: 100vh to the body and overflow: auto, it should work, see this fiddle.
Despite that, you should consider using React for handling the background image as well, since mixing frameworks usually is not a good choice.
Update
I tried it on my phone now and it appears this is related to the body scaling anyways on Safari mobile. If you wrap your page in <div class="wrapper"> or similar and apply the style to this container, it will keep the background image size, since the wrapper's size can be restricted.
Please note, that due to Safari's spring scrolling, this might yield to subpar scrolling experience, see this codepen on your phone.
IMO, the easiest solution would be, to use a <div class="background"> container, which is position: fixed and has a low z-index, like in this codepen.
.background {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background-image: url(http://placehold.it/300x300);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
This works on my phone (try opening the result view on your phone).
I believe it has to do with this line $('html, body').css('background-size', 'cover');
Try a different value for background-size. You can read more about it here.
The value cover resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

How to make my image gallery width responsive to div below it?

I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!
Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here

How to position div element to exact point on the background

I'm looking for a solution how to position a div to exact position on background. I have a background image ( http://www.jewelryplatform.com/coming-soon.jpg ) and I need to position whole div with form, etc. on the center of the image where you can see the box for that. Second problem that the image will be resizing with windows size. Is there any easy way how to do that?
do you have much experience with css and media queries?
You can add breakpoints in your css and then assign specific style to an element at that breakpoint.
#formDiv{ position: absolute; left 50%; top:50%}
#media only screen and (max-width: 995px) {
#formDiv{ position: absolute; left 25%; top:25%}
}
I've created a fiddle that will keep a form over the center of a div.
The key is to do left: 50% for the form that will center it, and then negatively margin-left half its width to keep it center. The same applies for the top: 50%. Because everything is positioned using percentages it will move when you resize the box.
As mentioned in the previous response, you can also use media queries to resize the size of the form at different resolutions as well.
UPDATE
Also you can consider resizing the background image when the screen size changes. This can be achieved by setting the background-size property with again 100%. Here is a great resource for how to use it

DIV element cursor behaves inconsistenly

I have a DIV element on a JSP page whose behavior is defined in the following CSS class:
.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}
span.toolbarRight .export {
background-image: url('/images/excel.gif');
}
So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.
Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):
Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):
Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):
If I have three grids (two horizontal and one vertical) the problem does not occur:
Anybody know what the reason for this is?
Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.
The other answers might be right, but you might also have a float issue here.
You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.
Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.
It is your
position:relative;
top:6px;
combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image

css margin issue with jquery slider

I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.

Categories