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 :

How to change content of image elements?

How do I change content of image elements similarly to changing content in p (HTML paragraph) elements? (refer to: http://www.w3schools.com/jquery/html_html.asp)
I would like to have a scatter+sort effect button next to a default carousel view of images that when clicked, will, as you might have already guessed, scatter and sort itself in a stationery template.
Also, having the button change when clicked to flip between "Scatter+Sort" and "Carousel" views.
Here is what I have so far:
Carousel view - https://gyazo.com/18e67f7347de3310d155c0b8624b3716
Stationary view - https://imgur.com/a/coreG
What I intend on doing is following a similar approach to Jennifer Dewalt's a project a day for 180 days, except I am doing 100 projects in an indefinite time period.
Update: I got a button to bring up an image, but the container of images (carousel) is still on the page and does not vanish upon button click. Also, the image is shown as not available on the top left of screen before button click.
Update 2: Something I am looking into: https://www.w3schools.com/css/css3_animations.asp . Animation iteration count of 1. I'm thinking maybe, if it's possible, to rewrite the container class (carousel) in css then pulling the code in an html file, so that way I can manipulate the elements within the container.

document.getElementById("myImg").setAttribute("src", "my-new-image-source.jpg");
http://www.w3schools.com/jsref/met_element_setattribute.asp

How do you put multiple animations in one render loop?

How do you put multiple animations in one render loop?
Using Jquery, if you have multiple elements to animate, and want:
to give each element it's own discrete value (such as a unique left for each)
to put all elements inside a single master timer, and
the movement steps should be based on the collective, not any individual in the collection
each render loop should update all positions without releasing control to the browser between elements for a given step. (but it should release between steps)
How do you do that?
Example:
Let C represent a list of divs displayed as columns, positioned with absolute positioning and unique left values equal to the sum of the width of all columns to it's left.
CCCCCCCCCCCCCCCCCCCCCCCCC
Let ^P represent the user's mouse, dragging an element, P over the list of columns:
CCCCCCCCCCCCCCCCCCCCCCCCC
^P
The columns, C should split apart the width of ^P at the location of ^P to make room. Like:
CCCCCCCCCCCCCCC CCCCCCCCCCC
^P
The column split should be animated, but the mousemove event should not allow the column animations to break, where one column moves to the next step but other have not.
Problem
Given an object oPos that contains the correct new left values for each column after the animation is complete:
oPos[Index] = {
Left:120,
Right:300,
Center:75,
Width:150,
$Element:$(ACachedSelector),
}
Assigning an animation using the animate() method:
for(var i in oPos){
oPos[i].$Element.stop().animate({
left:oPos[i].Left,
},{
duration: 500,
queue:false,
});
}
... Does not work correctly, because each of the elements is animated using it's own animation loop and tries to move independently. This has horrible performance and looks awful.
The desired effect is to have all columns to the right of the insert point slide to the right as one unit and as part of one animation. For example, try opening multiple tabs in Firefox and dragging a tab around to reorder the tabs. A gap opens up for you using an animation.
So, how do you put multiple animations in one render loop with Jquery?

I have a project that support combination of animations, it may help you.
https://github.com/emn178/jquery-animations

JavaScript (w/jQuery) - grow an element to fill container on hover, when surrounded by other elements

I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!

The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.

How to create a re sizable only vertically div? (alike SO form)

What we need is simple - 3 divs whose width is static - not changable
one on top (of page) - resizable ONLY vertically
one draggable - "separator" in the middle (of page) (not resizable)
one div just above that "separator". It shall move but not resize while the "separator" is beeng dragged.
we need them to be divs - not text fields because I plan to host in resizable a flash object. jQuery can be used. How to create such thing?

Here's an example, only tested in Chrome. Hopefully it will get you on your way.
http://jsfiddle.net/tZQx7/2/
Edit: fixed jsfiddle link, was point to an older version