Immigration History Glossary
Since I came back this semester I’ve been focusing most of my time on Immigration History. More specifically, I’ve been putting some work into the Glossary that the client asked for us to make. This has been a very interesting project so far and I’ll quickly take you through all the steps it took for me to make it.
First of all, I had to find a way to identify our glossary words on any given page of the site. Originally I thought that JS methods such as innerHTML and regex functionality would make it very simple but I quickly found out otherwise. Apparently if you try to select and replace words that way all your HTML will flatten when you replace, this means any links or buttons will turn into just text. I found a more complicated approach to identify these words using Nodes. Using a recursive function I can traverse the nodes in a page one by one, calling it again on elements and replacing on pure text nodes. This took me a couple of shifts to code and debug, but when my red links finally appeared on the page I was so happy.
After that I made some HTML to insert next to the link, which would be the pop-up definition for a word. The looks were pretty rough since I didn’t have a mock-up but they fulfilled their purpose. Whenever the user clicks on a link, the display attribute on the divs changes and therefore the definition appears.
This approach was good but several things could be improved. Ideally, only one definition will be on the page at once. Also, they should never overlap. I fixed this by using focus instead of clicks to display the pop-ups. Finally, the looks could be better. Jac took some time to mock-up a better design, which I implemented.
I also notices that the positioning of the pop-ups was not working very well. For links too close to the right or left edge of the page, the pop-up would be cut off. Also, for links inside the timeline portion of the page, the pop-up would be covered by other elements.
At this point, I had to change my approach. Instead of inserting the pop-up HTML when I find the corresponding word, I needed to create it dynamically when the link was clicked. This way I can append it to the body and then absolute position it by doing some calculations so that it will always be visible.
I think these look really good, they work on small screens and on mobile.
Some next steps for this project: All this time I’ve been focusing on the pop-ups and neglecting to make the actual Glossary page, which will include all the words in alphabetical order. Ideally, the big blue titles on each pop-up will link to that big glossary and scroll down to that specific word.