Blog: A Conversational approach to AI (More Posts)
Introduction
I thought it was time to do a little revamp to my GitHub Landing Page. Nothing too drastic compared to how it worked initially, just a couple of minor tweaks to the navigation, so its position remains fixed on scroll, and to highlight the relevant section, again based on scroll position.
I decided to do this with AI again but this time to try and use AI as if it was someone in the room with me who might be collaborating with me. These are the prompts I used with a discussion of the brief and the approach AI took with me.
Prompt One
use scrollStory to animate the nav element with the class of mainnav-container so that the highlighted anchor element changes according to the scroll positionIn order to do this I provided the HTML code as a starting point.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JGDM: Landing Page</title>
</head>
<body>
<nav class="mainnav-container">
<ul class="main">
<li><a href="#jgdm">JGDM</a></li>
<li><a href="#who">Who</a></li>
<li><a href="#why">Why</a></li>
<li><a href="#more">More</a></li>
</ul>
</nav>
<header> . . . </header>
<main> . . . </main>
<footer> . . . </footer>
</body>
</html>That gave me in return, code that connects to the jQuery library via a CDN, a CSS selector for the browser to select when the browser has scrolled to the correct element. And then a script tag containing the relevant jQuery.
&.active-link {
color: $col-nav-hvr;/* Change the color to your desired highlight color */
font-weight: bold; /* Make it bold */
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
. . .
}
And this is the script that was returned. Incidentally, it says it uses a Bootstrap plugin called scrollspy, although in my solution there’s no Bootstrap in the project per se. There’s only a link to jQuery as a CDN.
<script>
$(document).ready(function () {
// Cache the navigation links
var $navigationLinks = $(".mainnav-container a");
// Cache (in reversed order) the sections
var $sections = $("h2[id]"); // Select all <h2 elements with an "id" attribute
// Add scrollspy to elements
$(window).on("scroll", function () {
var scroll = $(window).scrollTop();
var cur = $sections.map(function () {
if ($(this).offset().top < scroll + 100) return this;
});
// Get the ID of the current section
cur = cur[cur.length - 1];
var id = cur && cur.id ? cur.id : "";
// Set/remove active class
$navigationLinks
.removeClass("active-link")
.filter("[href='#" + id + "']")
.addClass("active-link");
});
});
</script>Adding this my code did not produce the required behavior. That’s a good thing though as it provides an incentive to look closely at the code I’ve already written compared to what I was given.
Looking into the browser console I determined that whatever the scripting was doing it was not attaching the class to the appropriate elements.
var $sections = $($("main").find("h2").get().reverse());It seems to be an issue with the above line of code code. I put the above back into ChatGPT in the form of a question.
Prompt Two:
I'm struggling to get the active link class to appear on the navigation links. Any ideas as to why they're not showing up?I asked it that way because essentially I could only see one reason why it might be. I could only assume that the selector being applied in the script was not matching up. But I couldn’t work out what the selector was meant to be. As far as I could work out it was the right one.
“I see the issue with your code…”, the AI said.
I see the issue in your code. The problem is that you are trying to map the sections based on <h2> elements, but your sections are actually wrapped in <main> tags with IDs like "jgdm," "who," "why," and "more." To fix this, you should map the sections based on the <main> tags' IDs. Additionally, you should ensure that the "scroll" event is fired correctly. Here's the corrected code:Well… I only put in the code, I was given, but that’s by the by. That’s why this is a collaboration ;). As a result of my second prompt, ChatGPT gave me an amended version of the script.
Now, I think where I initially went wrong is that most of my links were initially mapped to h2 elements as child elements 2 levels down to the main element. Like this…
<main id="jgdm">
<article class="container">
<h2 class="lead" id="who">Who am I, and what do I do?</h2>
<h2 class="lead" id="why">Why Choose Jonnie Grieve Digital Media?</h2>
<h2 class="lead" id="more">Do you want to know more </h2>A rewrite of the markup was necessary to bring all the ID attributes to the same level in the DOM – in other words, taking the id="jgdm" out of the main container and into a 4th <h2> element.
<main id="main-container">
<article class="container">
<h2 class="first-lead" id="jgdm"> . . . </h2>
<h2 class="lead" id="who"> . . . </h2>
<h2 class="lead" id="why"> . . . </h2>
<h2 class="lead" id="more"> . . . </h2>
</article>
</main>Now we can map the ID attributes accordingly, and the active class will successfully attach class attributes to the appropriate <h2> element.
// Cache (in reversed order) the sections
var $sections = $("h2[id]"); // Select all <h2 elements with an "id" attribute<a href="#jgdm" class="active-link">JGDM</a>My solution requires me to use the h2 so the browser knows these are the elements we need to attach the classes to.
// Cache (in reversed order) the sections
var $sections = $("h2[id]"); // Select all <h2 elements with an "id" attributeFinally, I went ahead and asked about making the sticky header
Prompt Three:
Finally, it's no good if the navigation menu isnt visible at all times is it? Please put a sticky/fixed property on the nav element so we can see the effect as we scrollA question was asked and an instruction was made. Maybe the question is ultimately unnecessary but it’s about learning how prompts can be used to find solutions to problems. In this case, the position property of sticky was applied.
There are 2 properties that do the same thing i.e. fixing an element in the same space in the browser. And these are sticky and fixed. The first keyword sets the element in a fixed position but keeps it as part of the document tree and acts more like a block-level element; taking up the space that it should. Fixed, however, takes the element out of normal document flow. So it was a good thing in my case that the AI gave me a sticky property when I used those terms interchangeably.
nav.mainnav-container {
position: sticky;
top: 0;
z-index: 100;
}Smooth scrolling – explain
With all that sorted out, I made a couple of additions of my own. Firstly, I added smooth scrolling to the links so that there’s a more graceful transition in the browser from one part of the document to the other rather than an instant jump.
html {
scroll-behavior: smooth;
}Finally, I had to apply some top padding so the browser could show us the H2 element and its text. which completes the effect.
h2.lead {
padding-top: 57px;
}This post has been assigned to the following categories
-
Uncategorised