SOLVED Dynamic logo resizing on scrolling
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Hi
I am referencing this thread on the subject.
www.rockettheme.com/forum/gantry-solved-...ing?start=20#1339381
In the thread Luke was having problems loading getting the js to work.
Mark wrote and gave the solution
You had added the JS items as particle defaults for the custom CSS/JS atom within the "home" outline. But you had not added the atom to the atom section in the page settings tab. But in any case this is the wrong approach. So, I added the scripts as assets in the base outline on the page settings tab (so it gets inherited by all outlines), then I remove your particle defaults for custom css/js atom from the "home" outline.
I have added a JS file as an asset in the base outline as susggested.
But it doesn't seem to be getting loaded.
I have put the JS file in a custom JS folder for the theme.
Best
Andrew - Last Edit: 8 years 2 months ago by safeworld4women.
- My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
This message contains only secure information that is visible to safeworld4women, moderators and administrators
- My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Hi RT Team
I was looking how to delete this thread because if I am honest it is not a Rocket Theme issue.
Getting the JS to show is an issue.
But - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
Hey -
When you reply to your own thread it takes it out of our "No Reply" bucket... so sorry no one got back to your sooner.
Getting JS to "load" is a 2 step process IMO... 1) getting the script in the right place on your page layout and 2) getting it to actually fire/load/do what it's supposed to do
so, for Step 1... take a screen shot of your Admin as to where you're "loading" it in Gantry and how... do you see it actually load on the frontend of your site/page when you inspect the code/view the source in your browser? Provide the exact name of the JS file and path that you're loading and I'll take a peek as well. - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Hi Matt
Thanks for replying
I take a deep breath!
Back to the beginning..
The Resize Header script and instructions are from here
http://callmenick.com/post/animated-resizing-header-on-scroll
(see my private note re the website I am working on)
What I have done is to create a JS file called resizeheader and added it to my themes custom/js folder
I am a little stuck though because the JS in the tutorial is thisfunction init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 300, header = document.querySelector("header"); if (distanceY > shrinkOn) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init();
But we are using the g-navigation position in the theme.
So I tried writing the script with #g-navigation instead of "header"
So it looks like thisNow I don't know if that is right!function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 300, header = document.querySelector("#g-navigation"); if (distanceY > shrinkOn) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init();
Then I rewrote the css in the tutorial and changed header to #g-navigation and the logo and menu accordingly
The header is now sticky and the logo is being selected in the CSS
So now I loaded the JS into the backend in the Base Outline Assets section.
When I checked - the JS file is loaded in the header.
So my guess is it's the JS file that's wrong?
Now just to add to this - I got the Headroom' script to work - I have disabled it for now
www.inspiretheme.com/documentation/gantr...articles/headroom-js
Also the WOW script
www.inspiretheme.com/documentation/gantry5-particles/wow-js
But these both have Twig and Yaml files so I didn't have to do anything!
Best
Andrew - Last Edit: 8 years 2 months ago by safeworld4women.
- My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
header = document.querySelector("header");
in your example HTML... the "header" bit... is it a CSS class or ID?
<div class="header"> --?
If it's a class... don't try and replace it with an ID... instead, add a custom css class to you Navigation Section via the cog in the upper right of the Section in the Layout Manager...
like "my-custom-header"
then
header = document.querySelector("my-custom-header");
should work...
I'm no JS dev by any stretch... but when you're targetting based on ID it's usually like:
document.getElementById("g-navigation");
... I supose you could try "g-navigation" without the hashtag too... but if you're copying example HTML with your script, and they're using a class as opposed to an id then best to also use a class I would think
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Hi Matt
Thanks for the input.
So I managed to crack it..
The simple answer is that #g-navigation needs to be added to the JS and to all places in the css where it says Navigation
Here is the JS
function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 300, header = document.querySelector("#g-navigation"); if (distanceY > shrinkOn) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init();
Also I loaded Classie.js and Resizeheader.js into assets as in the image (actually I changed the order so Classie was on the top)
I targeted the logo in CSS like this
#g-navigation a.g-logo img { } #g-navigation.smaller a.g-logo img { }
However to get the whole thing really slick needs a lot of playing about - because we all have menus how we want them. Also logos are of course different sizes etc. The actual tutorial works with Text as a logo - so in some ways that is easier because the text is easier to shrink to fit and look good - whereas playing with a logo is a little harder.
So mission accomplished - sort of!
Thanks for answering!
A - Last Edit: 8 years 2 months ago by safeworld4women.
- My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
Thanks for posting your solution and glad you got there
If you're looking for super clean text as an image check out .svg files
-
The following users have thanked you: safeworld4women
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Thanks Matt
Interesting thought re SVG's
Will definitely look further
Thanks
Andrew - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
-
-
- safeworld4women
- Elite Rocketeer
- Posts: 634
- Thanks: 26
- Website designer and Administrator
-
Matt
Your suggestion re using an .SVG was spot on.
Works perfectly..
Thanks so much!
A - My wife and I design, build and maintain websites - for non-profit organisations, therapists, artists, local community groups and small businesses.
-
Time to create page: 0.087 seconds