#aesop tries javascript

[aesopcodes]

Someone mentioned in the Jcink Community Corner discord if you can replace the postlinks but keep a link for the topic. I took a stab at it and this is where I’ve landed RE: removing the track this topic / email / print/ etc and replacing it with a link. You can probably place the html elsewhere? One option is to place it in postlinks and simply use .postlinksbar strong {display: none;} since all the track/email/print links are within the strong tag. Etc Etc. Just a random fun activity tbh.

CSS: <style>.postlinksbar {display: none;}.newtrack {display: block;}</style>

JS: (below board block)

<script>// Add subscription code by Aesopcodes // https://aesopcodes.tumblr.com

var postlinks = document.querySelector(".topic-desc");

postlinks.insertAdjacentHTML("beforeend", "<div class='newtrack'><a href='/index.php?act=Track&f=<!-- |input_f| -->&t=<!-- |input_t| -->'>Subscribe to this topic</a></div>");

</script>

print url = /index.php?act=Print&client=printer&f=<!-- |input_f| -->&t=<!-- |input_t| -->'

Info re: inserting html (afterbegin, afterend, beforebegin, beforeend). I’ve tested this on different sites and due to some css ‘issues’, I’ve had to use afterbegin on one and before end on another. Just fiddle.

[aesopcodes]

DWR skin updates.

Memberlist, Directory (Multi-Section with Isotope for: face claims, searches, city, general), and ‘online list’ with images. 

I haven’t styled any of it fully but I’ll probably later. I figured out how to style based on sections so I just have to figure out what I want. I included the ‘online list’ because it’s tied to a script i’ve been messing with to retrieve info/etc. I used it to retrieve simplify the actual template members have to fill out for the directory. 

I'm super proud of this because it took FOREVER to figure out how to use the different isotope features: combination, button, search, hash, AND function. I wanted to make it so that I can include a link to a user's character list that would lead to a pre-filtered page. This can be done now for other details, not just users (ie, plots, locations). On the plus side I learned a heap about javascript and jquery.

Plus JCINK'S 'Display' function is super useful if you want an organized but thorough memberdirectory.

[aesopcodes]

Simple snippet of DWR: normal stats + stats on other pages

The original snippet was shown in the memberlist / directory update that I posted earlier. I use a script that basically grabs the ID and takes from the uploaded avatar. It’s the basic framework for fun scripts that I use for subforum, subaccounts, online list, etc. I plan on showing the effect in my Skinathon skins. BTW I used W3schools’ Javascript (HTML DOM) tutorials to figure it out.

[aesopcodes]

Random Bar Chart Thing

JS Bar Chart for user ratios. Fun mathy time.

I know this is such a tiny clip, but it’s from the site I’m working on. It’s been ongoing for a long time now and it’ll probably be teased at the end of this year if I’m lucky.... it’s a lot. The site is essentially a huge, futuristic, multi-planet/colony rp that incorporates androids, intergalactic war, hackers, space pirates, bounty hunters, etc etc etc. I’ve done more on the skin that I’ve done on the content :/

Anyway, as to WHAT this clip is... it’s pretty much a stat bar chart. I’m sure it might seem like a tedious thing for some folks, but I implement random features for my self due to masochism. It’s my first time making my own javascript code. All you do is plug in the number of members in each group. The code then does the calculations for you.

1. Group 1 + Group 2 + Group 3 = total number of playing CHARACTERS

2. Site Total = Number of accounts (the jcink variable)

So the code creates a percentage for each group out of the total playable (ie, the total playing characters is 100% rather than the site’s total users). The purple is all the non-playing characters. It was really fun to make this. Originally I made scripts for each group but I was finally able to figure out how to condense it all. Now, I only have to add in 3 numbers just once, and then boom, the chart does its magic.