We Keep Coding

How can I make a slider like in the image? Scrollable and with text and images

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v

I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html

If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :

adjust heights of div's - based on resolutions and items count

I've a requirement where I have 3 panels(Chats, Groups, Channels) in the left side panel and I need to adjust their heights based on the resolutions and also the items in that panels.
I will make api calls and get the items for that panels and bind them through angular bindings.
Please check the JSFiddle I've prepared for a clear understanding.In this, I've also wrote some additional media queries and adjusted the max-heights for the resolutions.
Now, My actual requirement is :
1) If there are no items at all in all the 3 panels, then all panels should collapse which is already working.
2) If all the 3 panels has items more than its size, then scroll should appear as the output screen which is already working.
3) If only one panel has items, then it should automatically expand its size like shown in the image in the
and same should apply to other panels as well.
4) Finally, if only few items are available in the 2 panels and more items are present in the 3rd panel, then it should show in the following way.
Actually, I thought of writing some jquery after the api calls based on the items count but that's kind of getting hard because I need to check the resolutions as well and also the items count in all the panels.
Is there any css way of achieving this?
at least, is there any article or something where I can follow and do this?
is jquery, the only way of doing this?

You could standardise it at 33.33333vh height then modify it using jQuery after the fact. It could get a little complex depending on how many exceptions you want to cater for but this unit will take care of the resolution differences and is supported by modern browsers.
In your jQuery you could work out the number of items in each panel as a percentage of the total and give each panel an appropriate height in vh - the label.
$(function() {
var totalNumItems = $('.panel div').length;
$('.panel').each(function() {
setPanelHeight($(this));
});
function setPanelHeight(panel) {
var numItems = panel.find('div').length,
heightPercentage = (numItems / totalNumItems) * 100;
/* calc -1.5em takes the label height into account */
panel.css('height', 'calc(' + heightPercentage + 'vh - 1.5em)');
panel.niceScroll();
}
});
If there were no items in a panel, it would calculate its vh as 0 and as such collapse it.
Edit: jsfiddle: https://jsfiddle.net/mattBBP/8vvcub3c/
This doesn't quite work because the area it's being displayed is not 100% of the viewport but this could be modified/offset / would not be a problem out of the fiddle.

CSS scale and translate issues. How do they do it properly?

This is all mobile browser related, not desktop.
I'm trying to make a certain div to maintain its dimensions relative to device screen.
So when the user zoom in/out, the DIV and its content (image) will stay the same, nor blurry, not pixelated.
It's very hard to do it XBrowser. I thought that I was almost there but then I saw it on iPhone 5S and every time I used my method, it came out blurry.
I wish it could look like they did it on this website. Please try it on mobile and wait for the footer splash to appear.
They made it so well, no matter which device you have, the splash in the footer remains the same.
Could you please help me on establishing a similar splash behavior?
I am this close to give up :(
Here's what I tried so far. A bit of code and pseudo code:
I get the current viewport width and height
I get the scaleW and scaleH by dividing the vpWidth and vpHeight by screen.availWidht and screen.acailheight accordingly.
I have a problem on choosing which scale to put in the CSS so if it's portrait, i use the scaleW or else, scaleH (Is this a good method?).
I calculate the left and top of the element in this way:
left = (vpWidth-width*scale)/2; top = (vpHeight-height*scale)/2; where width and height are the div's width and height
I calculate the 'translate' like this: translate = -((1 - scale) / 2) * 100; I saw it in the website that I talked about and frankly, it makes sense.
I then apply this code to the div style: -webkit-transform:translate(<%= translate + '%' + ',' + translate + '%' %>) scale(<%= scale %>) translateZ(0px); and of course add the left and top properties.
I'm pretty novice in CSS :( so i learn from code and examples. Not novice in coding at all.

Unordered list containing list items with dynamic widths - horizontal menu

I need help trying to space my horizontal menu the width of its parent <div>.
The problem is that the list items in the <ul> are dynamic, so there are a number of combinations varying depending on whether or not you are logged, whether or not you have joined the page, and whether or not you are an Admin.
I have set the <ul> to be 100% of the parent <div>. This works fine. Currently my <li>s are all just left aligned, you can see this on http://www.daddyleagues.com/OzeSportsCFM (it's the section with home coaches stats etc)
The problem is that I am only editing this by using CSS overrides and JS (adding classes etc) through a CMS. I can't adjust the widths as the list is determined.
So I am wondering if there is any magical way to make the <li>s calculate their own %
I'm thinking I may just have to create some JavaScript function which adds the widths in % depending on what items appear. This is a last resort, hoping someone has some easier way.

You can use css3 flexbox.
ul{
display:flex;
justify-content: space-around;
}
Read more about flexbox # css-tricks
Flexbox browser support #caniuse

get your list parent element (ul), lets call it "menu" for the sake of an answer.
var menu = document.getElementById('menu'),
width = 100 / menu.length;
Array.prototype.slice.call(menu.children).forEach(function(li) {
li.setAttribute('style', 'width:' + width + '%;');
});

Javascript mobile - calculate element dimensions in pixels based on screen dimensions

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.