I am using this particle slider on my page: http://particleslider.com/
It works good, but on mobile devices it is not resizing. It just centers in the middle of the screen depending on the device size. Particle slider uses image URI to convert an image into particles. If the image width is larger than the phone width, it won't scale down - it overlaps horizontally like this:
How can I make it scale down so the entire image can be shown, irrelevant of device width?
It seems to work on the Particle website. Did you mess with the width or height of the image that might be conflicting? Do you have an example of your CSS, HTML and JS?
In their CSS, they are setting the outside container of the element does not have a width but a max-width of 95% in the CSS.
Did you set a width in the JS as an option?
According to their documentation that sets a static width. Default is 800.
// Create a 100px wide ParticleSlider.
var ps = new ParticleSlider({
width: 100
});
Most likely you could use CSS to fix your issue.
First, if you are, don't put a width in the ParticleSlider() as an option.
Second, force the max-width of the container element of your slider to be something like 95%.
Their CSS shows something like this for theirs
#particle-slider {
width: 41.8em;
height: 26.3em;
margin: 0 auto;
}
If you have code, please post it.
Related
I want to do the scaling depending on only width. I don't wanna mess with height. I have a website which unfortunately I made it for a way bigger display size. I didn't know how the adobe xd artboard size was too big. I thought it was 1920px but actually the width of my website is 3554px. I want to scale it down to fit smaller screens and scale it up for bigger screens. I can only make it fit in my laptop screen but I don't know the calculation behind for how to make it work for any screen. Basically I want scale to fit width and center the page horizontally. So everything is kinda based on width. The base width is 3554px. Please help me on how to do this using plain javascript?
Please check this link. Want to do something with plain javascript but using only width and keeping it at center position.
Proportionally scale website to fit browser window
CSS
#Web_1920__1 {
position: absolute;
width: 3554px;
height: auto;
border: 0px grey solid;
background-color: rgba(255,255,255,0);
overflow: visible;
visibility: visible;
}
This is the main div that should take the whole inner width.
JAVASCRIPT
const mypage = window.innerWidth;
document.getElementById("Web_1920__1").style.transform = "scale(0.432)";
document.getElementById("Web_1920__1").style.transformOrigin = "0% 0%";
I can get the inner width but those transform properties only work for my particular screen. How can I get the transform values dynamically to fit the page on any screen and keep it at the canter? No need to do anything with the height because there will be scrollbar.
Abhay Srivastav's solution is working fine. A lot of thanks to him. The solution is like below. It's proportional scaling depending on width only. Everything will remain horizontally centered. Upscaling downscaling works for screen size. Window resize also works fine.
JAVASCRIPT
document.addEventListener('DOMContentLoaded', updateMe);
window.addEventListener('resize', updateMe);
function updateMe()
{
const mypage = window.innerWidth;
document.getElementById("Web_1920__1").style.transform = "scale("+mypage/3554+")";
document.getElementById("Web_1920__1").style.transformOrigin = "0 0";
}
This piece of code can save you from putting additional thousand lines of plugin code. Page becomes lighter, loads faster and significant performance improvements.
I'm trying to prevent all of the content on the page from moving, resizing while width page is under 1350 px. Min-width doesn't work for this and i don't know why.. so what can i do ?
Btw on my css code, for the width, height, transformation: translate, i'm using the value vmax , and not px or %. So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax, so they just adapt there size with the window size too.. :(
I tried this too, but still don't work :(
body {
min-width: 1350px;
}
The code + preview
(I'm trying to stop resizing the three white rectangle in priority when my browser width is under 1350px, but if we can tell to the page to stop resize all of the content when she is under 1350px, and only use a scrollbar to deplace the elements on the page, it will be cool !)
See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...
you are using css dimensions that are relative to the viewport. vmax vmin, vh, vw are relative to the viewport and thus react to resizing of the window. if you want fixed dimensions, you should use em or rem
edit: if you want to prevent the white boxes from resizing, you could add a min-width: 450px so they can grow but don't shrink beyond a point
vmax is not related to document size, but to actual browser size. Maybe absolute units like px, rem, em are a better solution in this case.
For contional css, based on the specific width of the window, you can use media-queries:
#media only screen and (max-width: 1350px) {
body {
background-color: lightblue;
}
}
That way, you'll be able to define sepcific rules for each resolution / rule that you want.
If I have set the width of my images to 100% how can I insert the height of the image (in my HTML as height="") as an exact pixel figure? I need the height of all my images so the rest of the page can structure the layout out correctly.
height:auto; is no good because it's as good as leaving height="" empty, it doesn't give any measurement information to the page.
I can grab the exact pixel height of the original image
style="height:<?=$image_height[1]?>px;"
But once it's been resized by the width it's no longer in proportion, so the original height value is useless as it is.
Is there any solution for this, I'm stumped.
Each image is in a container that is 20% width of the page, making 5 columns.
Just set the height (and leave width as auto) as percentage and set the container to a fixed height so your rest layout is fine. Then width of images will adjust accordingly (responsive)
Another solution is to use padding to maintain aspect-ratio of images/videos, if needed i can add this solution as well
You can use this css code for setting all images in their actual pixels.
img{
width: 100%;
height: auto;
overflow: hidden;
}
it seems to me like you need to play around with css property min-height
or you may need to dynamically calculate the height of the images with javascript as a proportion of their width , after they have been inserted into the dom.
example:
function calculateImageHeight (imageId) {
var image = document.getElementById(imageId);
// assuming you want the height to be 50% the width
return image.width * 0.5;
}
I want to calculate the dimensions of certain elements (img, ul, div, etc.) based on screen size. I can't to use percent values. I need pixel values. I also don't want to 'hardcode' everything using media queries and a new set of images for every resolution or screen size.
I thought about making this using screen size. I only need width calculation. So I add the initial width of my images and some initial space between them -> total width, and I then get scaling factor using: screenwidth / totalwidth
Now I scale all of my images and also the space between with this factor.
It's a very simple layout, only a few images and HTML elements. So this scaling should not be expensive.
It would work if the devices gave me reliable width measure for the screen. But depending of the device, I get a different meaning of this value. I'm using screen.width
In some cases screen.width is what the currently width is - in portrait it's a small value, in landscape a large one. But in other ones, width is always the same - the value which is defined as device's width.
So how do I scale my layout according to what's currently screen width in a consistent way with rotation, and without CSS % values? Is this an acceptable way to do layout scaling or am doing no-go?
Edit: I have to add more details after trying Jasper's solution. The images are used in a slider. The slider is basically an UL and each LI contains an image with float:left - so all the images are appended horizontally one after the other. With overflow hidden and stuff only the current slide is visible. Now, the official width of the UL is the sum of the width of all contained LIs. And this means, at least with my current state of knowledge, that I can't use percentage size for the LI elements, because if I did, this will be % of this total width of the UL, which is very large, and I end with immense LI elements/images.
Isn't there any reliable way to get current screen width for all devices ? I already have working code, I only need that the value of screen width is correct.
New update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011 "One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....
This is most likely accomplish-able with CSS alone (which is usually good for performance):
img {
width : 100%;
height : auto;
}
That will keep all the image's aspect ratios but re-size them to 100% width. Now that width is set based on the image's parent element(s) width. If you are using jQuery Mobile then the data-role="content" elements have a 15px padding, so to remove that you can just add a container to the image elements that removes the padding:
HTML --
<div class="remove-page-margins">
<img src="http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />
</div>
CSS --
.remove-page-margins {
margin : 0 -15px;
}
And walaa, you've got responsive images without loads of code or overhead.
Here is a demo using a container and not using a container: http://jsfiddle.net/EVF4w/
Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.
My blog posts live in a container that's 600px wide. When I have an image that's wider than 600px, I resize it via CSS (.post img {max-width: 600px})
I'd like users to be able to click on these resized images and see the full size version in a lightbox, but to do this I need to detect in Javascript which images have been thus resized (since I don't want to lightbox images that appear full size inline in the post)
You can check the image element's width property to get the rendered width of the image. If it's 600, the image is most likely to be shrinked. However, the image might originally as well be exactly 600 pixels wide.
If a browser supports the new HTML 5 naturalWidth property, you can get the original image width (in pixels) and compare that with the value of clientWidth.
I don't believe you can in the sense you are speaking as JS is going to read the image it is in the DOM. However what if you set the max-width in the JS:
Just Psuedocode
onload
{
if (img.width > 600px)
{
img.style = max-width: 600px;
img.lightbox();
}
}