Skip to main content

Load more button

 As an optional add on, I told students they could add infinite scrolling, pagination, or load more buttons to their index page. I've seen one student work on implementing pagination so far. Most of them skip the add on. Django has an inbuilt paginator class which I hope to try using on my pet project one day soon. Today, however, a student wanted to use a load more button but was struggling to get it to work. I've briefly looked into it in the past and I knew it involved Javascript, but that was about the extent of my knowledge.

I pulled his branch and ran the project. First, I opened up chrome developer tools and I saw a few errors were showing up in the console. And they pointed to the Javascript. Turns out he was using jQuery, but had not included it from a CDN or downloaded it. First problem discovered. Off to a good start. 

Next, errors were no longer showing up but nothing was working. All items were visible on the page, which means  a) there wasn't need for a "load more" button because b) nothing was hidden and needed to be loaded. This was obviously not what he wanted. He was using the following code from this codepen  and it looked like it was time for me to go line by line to figure out what the problem was. 

The first line says to show the first 4 <div> but wait! Everything was already visible! So it turns out that jQuery needed to be used in conjunction with some CSS. He needed to use the property display:none and apply it to the elements so that everything was hidden. jQuery was then responsible for showing those elements bit by bit, whenever the "load more" button was clicked.

I'm not particularly strong at Javascript, but it certainly felt good to figure this out. Hooray for small victories! :)

Labels:

Comments

Post a Comment

Popular posts from this blog

Snakes and ladders

I've started on my Python course. So far, the code has been familiar because the first few basic codes are similar to Javascript. And then modules happened. Confusion and despair! What is the world is 'if __name__ == "__main__": ' and why must I reach this section of my course on a public holiday when none of the instructors are in :( Stack overflow to the rescue, providing me a lifeline while I was drowning in a pit of serpents. I feel eternally indebted to a particular Mr Fooz.  Picture from  here From my understanding, when the Python interpreter reads a source file, it first sets the variable __name__ and then it executes all the code in the file. If that particular file that you are running(i.e. your module) is the main program, the interpreter will assign '__name__ = "__main__" '. Thereafter, any code in the aforementioned 'if' statement is run. If you have, instead, imported a module, the interpreter assigns '__name__ ...
Post a Comment
Read more

I gotta feeling...

I've been helping a colleague with his portfolio site. He's making it retro video game themed at my suggestion. He found an interesting pixelated font called arcade classic  and used it for the headings on his page. Unfortunately, some of the letters almost overlapped, making it not quite readable. Before letter spacing I looked into typography ages ago and learnt about letter and word spacing and wondered if that was something that I could fiddle with using CSS. Turns out it is a property you can customise. I opened up Chrome Dev tools and added 3 pixels of letter spacing and it looked so much better. And there's letter spacing too, so that's pretty neat.  After letter spacing Can't say CSS is my favourite thing ever but it's always nice to learn something new in unexpected ways.
Post a Comment
Read more

Fizzbuzz

I was today years old when I found out what fizzbuzz was. Yes, I'm late to the party. I was in an interview where the interviewer mentioned that ordinarily they would ask interviewees in for a round of fizzbuzz challenges, as I know. Actually sir, no, I don't know 👀 But he sounded so certain that I must surely know what it is that I was afraid to say anything so I did what I always do when I panic. Look right back saying not a word. I googled this mysterious fizzbuzz problem:  It looks pretty easy. I don't think he meant this actual problem, but problems like this. Because this problem is way too easy to be an actual problem someone asks in an interview. I decided to work on it for fun:  Yup. Super easy. I wish this is all I were asked in an interview 😄 
Post a Comment
Read more