All Javascript of Imgename
I tried to explain everything so that someone who doesn't know JS at all could use the code without having to understand it. I hope it's useful.
For the Main Page (Index)
function showclicked(clickedtopic) {
var allcontent = document.getElementsByClassName('main-wrapper');
for (var i = 0; i < allcontent.length; i ++) {
allcontent[i].style.display = 'none';
}
var clickedcontent = document.getElementById(clickedtopic);
clickedcontent.style.display = 'flex';
}
This is how the menu works. You put all the sections you have under one class (here it's 'main-wrapper') and you give them all IDs. There has to be a loop when you want to change the style of all divs in a class. You can also use forEach.
<button onclick="showclicked('mainguides')">
GUIDES & RESOURCES
</button>
For your menu, the input of the function is the id of the section it opens, in single quotes.
If the sections you use are scrollable you might notice that if you scroll to the bottom of one and open another section, it will show up scrolled all the way down as well. In order to fix this, add this code into the previous function:
...clickedcontent.style.display = 'flex';
const vertical = window.pageYOffset;
clickedcontent.scrollIntoView();
document.getElementById("scroll").scrollTo(0,0);
document.documentElement.scrollTo(0, vertical);
}
For the GALLERY
It would take ages for the site to load if we loaded all the images, but I didn't want to seperate the gallery onto like 50 sites. So what we do is call an image as needed. Here the input of the function will be the location of the image we want to show in single quotes. I recommend you use relative path instead of absolute, so your code works whichever host you put it.
function callimage(imagesource) {
let img = document.createElement("IMG");
img.src = imagesource;
img.setAttribute('id', 'displayed-image');
document.getElementById('image-view').appendChild(img);
let imageview = document.getElementById('image-view');
imageview.style.display = 'flex';
}
We need some CSS to make the displayed image take up the screen. As you can see, we have created this child with the ID 'display image'
inside a div with the ID 'image-view'. We'll style them both.
#image-view {
display: none;
position: fixed;
height: 100vh;
width: 100vw;
z-index: 1;
background-color: #00000081;
justify-content: center;
}
#displayed-image {
max-width: 100vw;
object-fit: contain;
caret-color: rgba(0, 0, 0, 0);
border: none;
}
Next we will get rid of the image when the user clicks it.
function removeimage() {
let elementRemoved = document.getElementById('displayed-image');
elementRemoved.parentNode.removeChild(elementRemoved);
let imageview = document.getElementById('image-view');
imageview.style.display = 'none';
}
The image-view div is not getting removed, this is just toggling if its displayed or not. What you will do is put it
on top of the body like this:
<div id="image-view" onclick="removeimage()"></div>
Lastly, we'll decide how to show our image. I show the images when people click on the thumbnails, so we need to add an onclick event to the thumbnails. It helps if the illustration and the thumbnail have the same name. Here is how the code for my gallery looks:
The filtering system
It's a very simple one that can handle only one class at a time. You will each filtering tag its own class which you will apply to the thumbnails. Note that this does not work if you gallery page has img in it that aren't thumbnails. If you have images as visual elements and still want to use this code, you'll have to turn them into divs and set the images as the background instead of using ><img>. With that out of the way, this is pretty similar to what we did before with the sections in index. Copy this code,
function showtagged(clickedtag) {
var allcontent = document.getElementById('image-gallery').getElementsByTagName("img");
for (var i = 0; i < allcontent.length; i ++) {
allcontent[i].style.display = 'none';
}
var wantedcontent = document.getElementsByClassName(clickedtag);
for (var i = 0; i < wantedcontent.length; i ++) {
wantedcontent[i].style.display = 'block';
}
var yearbanner = document.getElementsByClassName('year-banner');
for (var i = 0; i < yearbanner.length; i ++) {
yearbanner[i].style.display = 'none';
}
}
function showall() {
let allcontent = document.getElementById('image-gallery').getElementsByTagName("img");
for (var i = 0; i < allcontent.length; i ++) {
allcontent[i].style.display = 'block';
}
let yearbanner = document.getElementsByClassName('year-banner');
for (var i = 0; i < yearbanner.length; i ++) {
yearbanner[i].style.display = 'block';
}
}
and create buttons for each tag. If you don't have banners showing the year like I do you can just delete that part of the code from both functions.
<button onclick="showtagged('oc')"></button>
<button onclick="showall()"></button>
The first is a tag button, the other is for removing the filter.
For the Archives
Changing date order is easier than you would think, we just use flex and change the direction to reverse and voilà! The older posts are on top now. CSS does most of the work.
function changeOrder() {
let divorder = document.getElementById('feed');
if (divorder.style.flexDirection == 'column-reverse') {
divorder.style.flexDirection = "column";
}
else {
divorder.style.flexDirection = "column-reverse";
}
}
Collapse/Expanding your <details> elements is pretty simple as well. We toggle the open attribute, which JS can do for us. You can use toggle() for boolean attributes for easier coding, since they don't have values. They're either true or false.
function toggleDetailsOpen() {
let posts = document.getElementsByClassName('post');
for (var i = 0; i < posts.length; i ++) {
posts[i].toggleAttribute('open');
}
let button = document.getElementById('toggle-open');
let txt = button.innerHTML;
button.innerHTML = txt == 'Collapse' ? 'Expand' : 'Collapse';
}
The button's ID is 'toggle-open' and the class name for the details elements is 'post', change them as you would like. The latter part of this code isn't mine, I got the shorthand from Mohammad on Stack Overflow.
For the Guides
Lastly we have the readmore button I have for the guide pages. Misc guides doesn't have it though since this is the only guide here. It would be a bit redundant...
function readmore(id, buttonid) {
let post = document.getElementById(id);
post.style.height = 'max-content';
let button = document.getElementById(buttonid);
button.style.display = 'none';
}
On your readmore button, you'll add an onclick event like this:
<button id="legendarybtn" onclick="readmore('legendary', 'legendarybtn')">
Keep Reading
</button>
The input of the function will be the id of the article, a comma and the id of the button. The ids will be in single quotes.
Oh, and, if you want to have the fade out effect I use, you'll have to add a transparent to background color linear gradient div on top of the articles (inside it but on top). Normally this sort of thing would be done with ::after but I don't know how to change those with JS... If you want to have that as well make a div with the class 'gradient' and add this to the readmore function:
...button.style.display = 'none';
let gradient = post.getElementsByClassName('gradient');
for (var i = 0; i < gradient.length; i ++) {
gradient[i].style.display = 'none';
}
}
And this is the CSS for the gradient:
.gradient {
content: '';
position: absolute;
inset: 0 0 0 0;
background-image: linear-gradient(#00000000 80%, your background color here );
caret-color: #ffffff00;
}
And that is all! The theme switcher I use in a few spots isn't by me. It's by Solaria. You can see the guide here.
If you have any questions, feel free to ask them on my Neocities profile ^_^