Please help me tweak my Random Quote Machine!

Please help me tweak my Random Quote Machine!
0

#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.


#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!


#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.


#7

If it bothers you to have the the “Click Me” button shifting up and down as the box grows in size as it does for the longer quotes, why not move it towards the top of bubble. Then if the bubble grows it does not shift the button. I personally would rather see the same size font used for all the quotes instead of it constantly changing size (i.e. sometimes it is too small to read on a mobile device).

Also, if you are going to stick with resizing the font for the different quote lengths, maybe slow down the fade in/out a little more so that when it changes sizes, it is not so abrupt.

Just my opinion in a sea of opinions…


#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!