Creating a shrink-nav... - Page 3 -...

User 122279 Photo


Senior Advisor
14,650 posts
Online Now

Eric, those tweaks you have done seem to work very well! ;) I'd like to lay my hands of the .rsd file to see what changes you have made. I think I have discovered some of them already...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Here is a simplied version of just collapsing the container based off of the codepen. (I took out everything else out that is regular css that can be handled by RSD). I added two classes to the js-header called "larger" and "smaller" (toggled by jscript). I greyed "smaller" class and set "larger" height to 10em. I then greyed out "larger" and set the "smaller" height to 75 px.

I had to add a remove class "smaller" in the jscript so on page load it starts in the uncollaspsed position.

No css cheating......just js :D
Attachments:
Bootstrap 5 CSS Grid.
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Inger wrote:
Eric, those tweaks you have done seem to work very well! ;) I'd like to lay my hands of the .rsd file to see what changes you have made. I think I have discovered some of them already...

I altered the inline css that you already had after export.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

:(One small issue) Since we are only adding the "smaller" class to the parent "js-header" the common way of css coding the children elements such as the "logo" will not work with the current javascript code. I have run into this before with a hover picture effect with multiple elements to animate. I now think though that using a unique class name assigned to each element you want to toggle may work. Instead of using getelementbyId we now would want to getelementsbyclassname in order to add the "smaller" class to each one which would be a major gold strike for other project coding situations. working......on it.:rolleyes:
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,650 posts
Online Now

Twinstream and Eric, thanks for pointing me in a good direction - one each, as it seems. ;)

I have literally been at this for a week, trying 6 or 7 different menus as the model, and in all the CC responsive site builders, and where I came short, was what to do with those 'smaller' classes. Well, there might have been more shortcomings...
And also, I guess I was too much hung up in the contents of the header, which were done with floats and inline-block, and those two don't seem to be possible to combine in the 'R' apps.

I'm not js savvy, I seem to have something blocking my brains against it. I'm glad that you and some others here know your way around it.

Thanks, Twinstream, for posting the .rsd file, and Eric, I'm actually a bit exhausted after all this struggling, so could you pretty please do the same?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

If I could get this script to work it would finalize this project.

It should search for all elements with the class "larger" and add or remove the "smaller" class. This would allow us to target multiple elements like the header, logo, and the nav links.

not having it though yet....
Attachments:
Bootstrap 5 CSS Grid.
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Here's your script.;)
<script>
$(".larger").removeClass("smaller");
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200;
if (distanceY > shrinkOn) {
$(".larger").each(function() {
$(this).addClass("smaller");
});
} else {
$(".larger").each(function() {
$(this).removeClass("smaller");
});
}
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Inger, I added this to the front of your css selectors.
header#js-header[class*="coffee-span-"]

and then altered a few lines with minor adjustments for margin and line height.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,650 posts
Online Now

Thanks, I'll take a look at it later today, when the bees have been provided for. :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Eric Rohloff wrote:
Here's your script.;)
<script>
$(".larger").removeClass("smaller");
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 200;
if (distanceY > shrinkOn) {
$(".larger").each(function() {
$(this).addClass("smaller");
});
} else {
$(".larger").each(function() {
$(this).removeClass("smaller");
});
}
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>


Yes, thanks Eric that works perfectly ! I will share when project is updated with those changes....
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.