.holidayclass .picture {
transform: translateX(100%);
overflow-x: hidden;
}
Hi there, quite often it happens that when I translate 100% the scroll appears, how to get rid of the horizontal scroll?
The overflow: hidden would need to be on the parent i.e. the article element.
1 Like
Hi there,
for above HTML, css is:
.holidayclass {
overflow-x: hidden;
}
.holidayclass .picture img {
transform: translateX(100vw);
}
h5 {
transition: transform 0.5s;
}
.holidayclass h5 {
transform: translateX(-100vw);
}
p {
transition: transform 0.5s;
}
.holidayclass p {
transform: translateX(-100vw);
}
The issue is article tag is still occupying the height, If I set that to display none, it damages animation, what could be the solution?
If there is difficulty in comprehension I will upload the code to the live server.
I was trying to emulate this w/o seeing their CSS or JS.
A relevant JS discussion is going on here.
In bottom there are previous next button.
You need the overflow:hidden on .commonclass not .holidayclass because that gets removed.
1 Like
The problem is something else, I think.
The vertical location of the slides article tag is changing, previous/next button is also bottom located. I think I am unable to articulate that correctly.
Maybe I have not chosen the correct HTML structure.
You will need to place the slides on top of each other or they take up space in the flow. You will also need to move the buttons out of the container.
You can create overlaps with css grid and here’s a start although I haven’t placed buttons for you.
Back in the morning now 
1 Like
Sure, Thanks and Good nite. In morning I will send original templates so that you dont have to struggle in browser.
1 Like
Hi, I have created a border on the article tag, which will explain the issue. Maybe this has a fix or the entire structural approach of HTML is flawed in that case I have to re-do it. GRID is completely new to me.
Yes that’s the issue I addressed in my codepen.
You have two articles one under the other and as I said before they need to occupy the same space. Most sliders do this with absolutely positioning each slider on top but the drawback of that approach is that you have to have a fixed height (or aspect ratio) slider and can’t have different height content in each.
In my codepen I simply used css grid and set both items to occupy the same grid slot effectively putting them on top of each other. It only needs a couple of lines of code.
section.theme-width {
display: grid;
overflow: hidden;
grid-template-areas: "onlyone";
}
.commonclass {
grid-area: onlyone;
}
Bear in mind my codepen is linking to your css file so if you change anything it will get reflected in my codepen. (I might go and grab the css in a few minutes anyway to stop it changing).
Edit:
I grabbed your css and placed in the panels so the codepen is stable now. I alos added a slide-wrap to make things easier.
1 Like
I am trying something else with slightly different HTML If I succedd I will share it online, thanks.
1 Like
Ok have fun
Just remember that the key point is that the elements must occupy the same space and that you also need to keep control of the flow of the page or you will end up using fixed heights to create space (which can be a viable if error prone approach).
I used grid in my example as it the most efficient but the demo you linked to is absolutely placing stuff on top of each other and while that works it is a rigid approach and must have the heights of content controlled.
You could also use flex or floats (or inline-block) as long as you force then to stay on the one line and not wrap but then you’d also need some trickery of negative margins to pull them back on top of each other or include that in the class change. The benefit of grid is that all the elements stack at top left of the div and you just basically have to show them as required.
1 Like
Hi there, I created one more version, and it is working.
Its vanilla JS is:
const nextClick = document.querySelector(".next");
nextClick.addEventListener('click', event => {
event.preventDefault();
var nhtraverse = nextClick.parentElement.querySelector("article div h5:not(.hholiday)");
var nhSibling = nhtraverse.nextElementSibling;
if (nhSibling.classList.contains("h")) {
nhSibling.classList.remove("hholiday");
nhtraverse.classList.add("hholiday");
}
var nptraverse = nextClick.parentElement.querySelector("article div p:not(.pholiday)");
var npSibling = nptraverse.nextElementSibling;
if (npSibling.classList.contains("p")) {
npSibling.classList.remove("pholiday");
nptraverse.classList.add("pholiday");
}
var nImgtraverse = nextClick.parentElement.querySelector("picture img:not(.imgholiday)");
var nImgSibling = nImgtraverse.nextElementSibling;
if (nImgSibling.classList.contains("img")) {
nImgSibling.classList.remove("imgholiday");
nImgtraverse.classList.add("imgholiday");
}
});
const previousClick = document.querySelector(".previous");
previousClick.addEventListener('click', event => {
event.preventDefault();
var nhtraverse = nextClick.parentElement.querySelector("article div h5:not(.hholiday)");
var nhSibling = nhtraverse.previousElementSibling;
if (nhSibling.classList.contains("h")) {
nhSibling.classList.remove("hholiday");
nhtraverse.classList.add("hholiday");
}
var pptraverse = nextClick.parentElement.querySelector("article div p:not(.pholiday)");
var ppSibling = pptraverse.previousElementSibling;
if (ppSibling.classList.contains("p")) {
ppSibling.classList.remove("pholiday");
pptraverse.classList.add("pholiday");
}
var pImgtraverse = nextClick.parentElement.querySelector("picture img:not(.imgholiday)");
var pImgSibling = pImgtraverse.previousElementSibling;
if (pImgSibling.classList.contains("img")) {
pImgSibling.classList.remove("imgholiday");
pImgtraverse.classList.add("imgholiday");
}
});
Later I realized that there was no need of the traversal from click element to parent article then to its child:
var nhtraverse = nextClick.parentElement.querySelector("article div h5:not(.hholiday)"); →
for example, this alone would have been sufficient →
var nhtraverse = document.querySelector("article div h5:not(.hholiday)");
Its HTML structure is changed →
1 Like
Congratulations on getting it working
As I indicated you would need to remove the element from the flow which you have done with absolute positioning which is fine as long as you put it back in the flow once its displayed (which you have done).
It looks to be working well so well done on getting it up and running to start with:)
However…
Sorry: Caveat to follow.
I do have a serious issue though with the html and this is not readable html (and even worse for screen readers and assistive devices or bots) .
<div class="content">
<h5 class="h">Heading #1. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<h5 class="h hholiday">Heading #2. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<h5 class="h hholiday">Heading #3. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p">Maddie Crossin, CEO #1</p>
<p class="p pholiday">Maddie Crossin, CEO #2</p>
<p class="p pholiday">Maddie Crossin, CEO #3</p>
</div>
You have a number of h5 headings in a row and then a number of p tags in a row.
Reading the html it would seem the p tags are related to the last h5 only and the other h5 headings will be seen as keyword stuffing more than anything else.
You forgot the first concept of html design and that is the mark up should make sense before you start styling it. Those slides should really be 4 separate slides each under its own h5 heading and then it makes sense to everyone.
Start with valid readable html and you can’t go wrong.
e.g.
<div class="content">
<h5 class="h">Heading #1. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p">Maddie Crossin, CEO #1</p>
<h5 class="h hholiday">Heading #2. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p pholiday">Maddie Crossin, CEO #2</p>
<h5 class="h hholiday">Heading #3. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p pholiday">Maddie Crossin, CEO #3</p>
</div>
Also the image should really be in there in each section rather than stuck at the end with no context.
Sometimes you have to massage it into position but when you start making up your own structures its time to think and take stock. If you can’t read the html and make sense of it then neither will google or a screen reader.
Don’y worry though because now that you have it working you can work out how to make it nice html once again 
2 Likes
True, I will come back to you, in case I succeed in semantic HTML, clarity and readability.
Please tell me one thing, would this be considered correct inside one div with content class:
<h5 class="h">Heading #1. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p">Maddie Crossin, CEO #1</p>
<h5 class="h hholiday">Heading #2. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p pholiday">Maddie Crossin, CEO #2</p>
<h5 class="h hholiday">Heading #3. Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<p class="p pholiday">Maddie Crossin, CEO #3</p>
I will attempt based on your input and will share it tommorow.
Yes that structure is ok.
Just imagine you were reading a book with headings and paragraphs.
1 Like
Hi there @PaulOB
I have created one more HTML structure →
Everything depends on the insertion/deletion of holidayclass. JS has also become pretty simple.
Live is uploaded here.
Absolute Positioning →
My understanding regarding absolute positioning is if its parent doesn’t have a relative position defined, it becomes absolute relative to the body, and the body becomes automatically its relative parent. All article tags can be treated as ring sitting over each othere, and their content, except one article tag, is translated X or Y.
content = h5,img, & p
I inserted a class = relative in the section tag, and the rest of the article tags becomes absolute as commonclass. is set to absolute, but
I am facing an issue:
Those anchor text arrows are position top left, despite they are now out of the section →
You would need to do what you did before and make the first one position:relative and the hidden ones position:absolute.
e.g.
.theme-width relative{position:relative;}
.commonclass{position:relative;}
.holidayclass{position:absolute;top:0;left:0;}
1 Like
Reference Points →
- https://css-tricks.com/absolute-positioning-inside-relative-positioning/
- https://codepen.io/chriscoyier/pen/bGEZONq?editors=0110
So If we narrow down to the simple version of the HTML it will be like →
<section class="relative">
<article class="commonclass relative"></article>
<article class="commonclass holidayclass"></article>
<article class="commonclass holidayclass"></article>
</section>
.relative {
position: relative;
}
.holidayclass {
position: absolute;
top:0;
left:0;
}
In the absence of setting position to relative.on common class, the design collapse.
Sir, I couldn’t understand, when all articles are absolute to relative section so when we put all articles to absolute when a section is set to relative, and put top and left 0 on all article then why is the design collapsing, in that case, would not all the 3 articles which are now absolute will rest one upon the another and then their h5, p, img tags separated through css translate?
If all articles are absolute to their relative parent then the relative parent will effectively be empty and have no height as there is no inflow content.
That’s why the trick is to make only the currently active item position:relative so that the flow of the document is maintained.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.