Please help me tweak my Random Quote Machine!

1

Hi all, I need help with two things I’m trying to achieve with my quote machine. Codepen link attached at the bottom of this post. Here’s what I’m trying to fix:

  1. My Javascript includes an animation that fires on click, and fades the text out and in as the user calls a new quote. The script technically works since the quote updates on click as intended, but I want to fix the visuals - the string updates immediately, and then the fadeOut()empty()append()fadeIn() happens shortly after. I only want to see the animation.

  2. I have found a function on StackOverflow that will allow me to resize the quote’s font based on string length - this is a feature I want as I would like to prevent the container from resizing too drastically for longer strings, and I also don’t want to give the container a forced height. The code isn’t working at the moment… anyone who could take a look at that for me, or even suggest a better way for me to approach writing a function to achieve this, you’d be doing me a massive favour.

Here’s the codepen. The site has been down for a bit today so I’m hoping you can take a look before it’s down again. http://codepen.io/newplasticideas/pen/WjebyQ?editors=0110

2

The signature for fadeOut() is .fadeOut( [duration ] [, complete ] ). Where complete is a callabck function. In other words, instead of chaining your funtions like fadeOut().empty().append(). try using a callback function. the function would fire after fade() is done. is would look like this…

$( "#quotething" ).fadeOut( "slow", function() {
    $( "#quotething" ).append(randomNumber.quote).fadeIn();
  });
3

This is a huge help. I wasn’t aware of how callback functions worked, I’ve managed to fix this code to work for me now. I really appreciate your time, thanks very much.

1 Like
4

A bit of topic but of interest. Found out you can use CSS to develop animations. There’s some premade classes which you can click-add on codepen.io - animated.css (https://daneden.github.io/animate.css/ to have a look). If you want to get more nitty gritty, there’s a “transition” property that you can use for your base class that enables animation like behaviour for transitions between states that you bind to different events.

5

Thanks for that, got the link bookmarked. Will come in handy down the line I’m sure!

1 Like
6

I’ve played around with this to change css with JavaScript:

var maximumLength = 50;
	if (randomNumber.quote.length > maximumLength) {
		document.getElementById("quotehere").style.cssText = 'font-size: 10px;';
	}

But by the time I was done it looked like you fixed it.

8

Great ideas. I’m also gonna go with a different font, which will probably aid readability! This was just a google font I had in my clipboard at the time from another activity. Thanks!

9

I think I might keep this one handy - it’s more concise than what I ended up using. Thanks for sharing anyway!

1 Like