jQuery Slideshow


Creating an Interactive Slideshow with Captions Using jQuery

This week’s jQuery lessons in Codecademy were a breath of fresh air! I really felt quite lost last week with JS, but things started to click for me this week with jQuery. CA still had some kinks this week (also no option to “Get Code”!!!), but with some help from Google, I finally got the hang of it about a quarter of the way into the lessons – and it was pretty breezy from there on.

I followed Greg’s instruction and added my images, captions, and dots(buttons) to my index.html file I created a few weeks ago for our homepage assignment, and linked to my new script.js file. As I moved through the lessons, I went back and forth to my JS file to begin building out my slideshow for my homepage. When I got stuck, w3schools tutorial was immensely useful – it really helped to see how all the pieces fit together: HTML, CSS, and JS/jQuery. Once I felt like I was in a good place, aka. the slideshow worked (yay!), I then played around with and added to my stye.css file for my homepage.

One area I am stuck on is how my slideshow first displays (or doesn’t display) in Chrome and Safari. On Chrome, all four images initially stack on top of each other, until I click on a button, at which point they become a slideshow. Also, the slide numbers, captions, and buttons are not ON the pictures (but above and below.) It doesn’t seem to be reading the CSS which styled the font size, color, etc… either. I’ve searched Google endlessly, but I don’t think I’m using the right terms.

The jQuery is working great in Safari, except that the images do not initially display at all – I have to first click a button and then the slideshow can begin. Again, Google hasn’t solved this one for me yet either. Any ideas class? Anyone else have either of these issues?

On a separate note, I am looking forward to our midterm project. I will be profiling a coworker’s husband who is a web developer for Discovery. Prior to joining Discovery a couple years back, he was a developer for a PR agency. I chose him because he has an interesting story about how and why he got into web development that I think the class will enjoy reading.


jQuery: Seemingly Simple but Kind of Overwhelming


For my midterm, I plan on speaking with Wes Lindamood. He is a senior interaction designer at NPR and works on creating digital stories and projects for the organization. I interned in NPR’s Marketing, Branding, and Communications department last semester and met Wes briefly, although we did not work together.

This week’s assignment: 

One of the most challenging things about this week’s assignment was just figuring out how to begin. The Codecademy lessons were simple enough (although some of the functions, like .apend(), still confuse me in terms of what they actually do) but I struggled extremely with creating the gallery. It’s hard to know where to begin when there seem to be so many different ways you can go about creating something in JavaScript and jQuery. I looked through various tutorials in preparation, and each of them suggested a slightly different approach. Not having a clear, formulaic set of steps threw me for a loop (no pun intended). Most of the work I did this week felt like just trial and error: changing different parts of the code to see what, if any, effect it would have and if it brought me closer to the end goal.

In terms of how far I got, I was able to load the images on to the HTML page and set up my ‘divs’ easily enough – the real problem was writing the actual JavaScript code. No matter which approach I tried, I could not get the images to actually appear in the semblance of a slideshow. Either all of the pictures stayed on the page or all of them disappeared and I could not figure out where my mistake was – whether I was screwing up the way I was writing the CSS, the HTML, or the JavaScript. I also struggled with linking the JavaScript file to the HTML and am still not sure if I did it correctly. In the end, I tried to modify the JavaScript presented in the W3 Schools tutorial by playing around with some of the jQuery events like the .click or .dblclick, but none of them seemed to have any effect.

I will keep working on my code and, hopefully, before Wednesday, I’ll produce a slideshow that actually slides!

Link to GitHub work: 


jQuery: A Lesson in Persistence

As I was working through this week’s Codecademy lessons on jQuery, I felt a minor sense of relief because I seemed to be understanding the concepts more easily, especially when compared to last week’s JavaScript disaster. Applying the jQuery concepts, however, has been a different story.

After completing the Codecademy jQuery exercises and working on some further tweaking of my existing homepage HTML and CSS code on Friday evening, I decided to get away from my apartment and head to Georgetown’s main campus on Saturday afternoon, hoping that the jQuery gods would help me complete the slideshow assignment. Five hours later, I felt like I had little to show for my efforts. Numerous Google searches and perusing the pages of more than 10 different sites only left me even more confused. I reached out to Greg for assistance. His response to write out the required steps in the slideshow using code comments was helpful, but I guess I’m just unsure of where to go from here. I found what I thought was a useful source for building a jQuery slideshow, but even modeling my code after this example has not worked. I then proceeded to create an account on Stack Overflow and asked the same question there–how do I get started on creating a jQuery slideshow with captions that show/hide? I received a detailed response, and tried altering my code, but it still did not work. My GitHub repo for this assignment is here. If anyone has figured out the jQuery code, I’d love to chat!

I’m not one to give up on an assignment. It’s currently after 9:00 on Sunday evening, and with a full-time 8-5 job and then a 6-9:35 pm class to attend on Monday, I’m unable to dedicate any additional time to this before the 10:00 deadline on Monday night. You win [for now], jQuery. I will try to work on the slideshow again on Tuesday evening to get it working before Wednesday’s class. I’m hoping this week’s class will shed some light on the steps we should follow to make a slideshow. I think what would be most helpful for me would be to see a template of sorts that shows the correct code to use in order to get all images (except for the current one) to hide, to click through to the next image using a button, and to add the caption text that also shows and hides.

I’m excited to work on the developer profile midterm assignment. After working so hard to figure out the jQuery assignment and still reaching a dead end, I’m grateful for the opportunity to work on a written piece that is more straightforward. The developer I’m profiling is named Dave. He’s asked me to withhold his last name for privacy reasons due to the work he does as a government contractor. Dave is a developer and programmer who does front-end design for applications that provide analytics as well as freelance marketing and landing page-type work. I got in touch with Dave through my colleague who works on social media and analytics for my department at Georgetown. As I was discussing this assignment with her, she offered to put me in touch with Dave, who is a friend of her tech app startup-owner boyfriend. I’ve already spoken with Dave and have received answers to the questions I posed, so I’m looking forward to working his answers into the midterm assignment. I reviewed the developer profile examples from the 2013 class, and am wondering what exactly is expected for this assignment. Some people provided a brief overview of the person they profiled, and then simply listed out the questions and answers. A few others worked the questions and answers into an actual story (I’m assuming these were the journalism students). Do you have a preference, Greg, for how we approach this assignment?

jQuery Fumbles

I felt particularly overwhelmed this week. The fact that I started some of the Codecademy lessons for jQuery last week instead of this week might have something to do with it. I’m finding the process extremely frustrating. I’ve been having a lot of problems with Codecademy itself. More often than not I had to go into the Q&A Forum for help. (Which, honestly, was encouraging, because a lot of people were having similar issues to me. For example, having correct code that simply wouldn’t go through.) I understand and appreciate the necessity of Codecademy, but when you’re spending hours upon hours (literally) working on it, it gets frustrating.

The project was… okay. Until I got to the jQuery part. I spent a lot of time on the W3 Schools site, and just googling around in general, but it wasn’t particularly fruitful. As you know, it took me forever. There was a point in class where you said that we might not even need to use variables in our code, and unfortunately I spent a lot of time hung up on that. I’m hoping that I will understand it better once we’re in class. I wish it were possible to do an only jQuery practice before jumping into the whole slideshow. I got the pictures up, the text up, and the buttons up. You just can’t see it all. (I’m also glad to know after reading the other blogposts that my fellow coders in this class are feeling similarly to me.)

For my midterm, I was going to interview the coders behind the “North” piece that I showed you. Unfortunately, that fell through as of two days ago. So. On the prowl again. There are a couple of interactive pieces that I really enjoy and would be interested to speak with the people who produced them, so I am currently trying to get in contact with them.

jQuery – Easy(ish) in Theory Hard in Practice

This week’s lesson left me feeling similar to last week in that many of the steps were logical and easy to understand abstractly, but a bit more complex when put into practice, especially when the examples disappeared. One the one hand, I liked that the project made you set up the jQuery each time you ran an assignment, I now have the $(“document”).ready(function(){   }); permanently ingrained in my head as the starting point for any jQuery work, which is great! However, I thought at other points the lack of guidance with the jQuery lesson as compared to past lessons was frustrating and, frankly, wasted time.

In past lessons, if you try to write the code five times unsuccessfully, the system will give you the option to see the correct code. Although the goal is obviously to write the code on your own, I learn best from watching and observing the correct approach. Therefore, when I got to a piece of code I couldn’t figure out, seeing the correct code enabled me to understand what I had missed, why I had missed it, and how I needed to set the code up in the future to be successful. The jQuery lesson did not provide any code, no matter how many times you tried, which for me was extremely frustrating. I would Google the terms I thought I needed, take a break and come back, look to old lessons for clues, and eventually I did figure each section out but the process was so frustrating my “aha” moment was not very satisfying because I just wanted the practice to be done.

Similarly, although I felt (relatively) confident with the jQuery lessons of Codecademy, I struggled to test my slideshow code in JsFiddle, thus I am not sure if my jQuery is functioning properly, which is frustrating. I would update pieces of the code, refer to old lessons, read notes from class, everything would look accurate, and then when I put all of my code into JsFiddle nothing happened. I could not figure out if it was because my code was inaccurate, or if I was putting it into the system incorrectly, but either way it left me uneasy and annoyed.

As we discussed briefly in class, I think a lot of this comes with months (and years) of practice and repetition, but at this point I am continually surprised by the mental and physical toll that coding takes on my mind. After five hours of staring at five lines of code that look right but don’t work right, I have an ever-growing respect for fulltime coders.

I have a call set up tomorrow to Sarah Howe Elliott, a web developer, project/UX manager at the Chamber of Commerce (I have never worked with her directly and she does not work with my department within the Chamber). I’m excited to hear about her career and if she was equally as frustrated when she first began learning code J

JavaScript > jQuery

This week’s assignment was very difficult, and I felt quite unprepared for the task at hand, even with the jQuery Code Academy assignment under my belt. I also noticed that I was prompted with multiple notifications from Codecademy alerting me to jQuery’s lessons being updated this summer — which I’m guessing may possibly link to the fact that it seemed like the lesson was very bug-heavy.

There were multiple instances in the lessons where I struggled to find the answer, and the hints proved to be unhelpful. I hope they fix this bug soon, as it took me twice as long to complete this assignment than usual (and they took me forever to begin with!)

As for the slide show assignment, I felt as if I relied on Googling and researching the answers I’d need to make things work instead of relying on the information we have learned in previous classes. Also, I still did not feel comfortable enough to use jQuery to complete parts of the JavaScript assignments, so I stuck with JavaScript to complete it and even then I found many parts of getting the slideshow to work challenging.

Somehow, I was able to make the slides rotate through, but it was an arduous effort to try and get everything to work together…I’m still not even sure how I was able to get it. Hopefully we can work through lots of people’s work to discuss challenges that I’m sure were felt across the class!

Midterm Preview: I will be interviewing a friend of mine with a extensive developing background, who built a website for a counselor/therapist practice in the Washington, DC area.

JavaScript & jQuery: Still Having Trouble

This week has been very difficult. I still haven’t fully understood Javascript, and then being pushed into jQuery has been difficult. I feel like I am forgetting things I thought I knew about HTML and CSS since we are moving at such a quick pace. The jQuery assignments on Codecademy were much more difficult and didn’t give you the answer after a few tries so you could easily see what you did and wrong learn from it. I found this to be extremely annoying, and unhelpful.

As far as the assignment goes, I am not pleased with my performance. I spent an enormous amount of time on this assignment as well as Codecademy and still haven’t been able to get through them easily, or with understanding. I could never get my code to work completely for my slideshow, and found that very frustrating.

For future classes, I am hoping that we really go through what we need to know for assignments. I felt as though I still wasn’t able to complete this because I wasn’t completely sure of the right things to be plugging in. I understand it is a learn-as-you-go type of class, but I still think that we are going at too fast of a pace to really learn-as-you-go because of the turnaround on assignments and lengthiness of the Codecademy homework. Unfortunately with a full-time job and weekend part-time job I am unable to give this homework the attention it needs. However, when signing up for this class I didn’t realize that the “introductions” were going to be so fast paced and I would be continually spinning my wheels to try and keep up. I hope that in future classes now that we have at least kind of gone over the “basics” we will be able to move slower.

Assignment on GitHub: https://github.com/alliefoard/Gallery-