I really wanted that functionality so I tinkered with the code for a while and then one night after a long tinkering session I must’ve saved over my original working code and now I have a broken RQM!!!
I’ve looked over the code for what feels like an age and can’t see why it won’t return to the original functionality, so I humbly request your assistance in finding the source of my pain and anguish.
Wow that’s the first time I’ve heard of crossorigin.me, very useful!
That’s working now I appreciate your help. Now I just need to figure out how to fade in and out!
@MARKJ78 yes that’s what I was trying to achieve originally. The issue is getting the “New Quote” button to fade out the current quote and also fade in a new quote. I can get one or the other but never both it seems.
I moved the click button functions out of the init function and then removed the init - because you dont need to call a function, to call a function to load the page - you can just skip straight to getQuote() call.
I changed the div you’re trying to “append” to. I changed it to html and quotebox. this ensures the animation works for fade out and in. nb - you will have to change your css to style the quote, by styling #quotebox p{styles}, not #quoteConetent. You can get rid of the <p> out of the quotebox div.
You dont need the removeQuote function. You only needed that because you were appending, rather than inserting with html.
I wrapped the whole page in a doc ready function like this to ensure the page runs through the script on load: (i’m not entirely sure if this is strictly required as it works without, but i think its good practice).
I removed the crossorigin.me (it was creating a lot of delay and is unnecessary if you use codepen and supply the project link as http.
I put an animation before your jquery fill order (is that even the right term!) call to allow the fade in/out. I used the animate method to change the opacity instead of fadeOut (does the same thing essentially|) for this one.
Hope that helps for next time
all you need to do now is straighten up those buttons on smaller screens
$(document).ready(function() {
//Function to obtain JSON data in the form of quote content from the Forismatic API and fade in
var getQuote = function() { $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?', function(json) {
$("#quotebox").animate({
opacity: 0
}, 375, function() {
$(this).animate({
opacity: 1
}, 750); $("#quotebox").html("<i class = 'fa fa-quote-left fa-2x quote-mark'></i>" + json.quoteText + "<br>" + "<h3>" + json.quoteAuthor + "</h3>");
});
});
};
//Function to run when page is loaded
//Ensures there is a quote when page is loaded initially
getQuote();
//Enable sharing of quote via Twitter using Tweet button
var tweetQuote = function() {
window.open("https://twitter.com/intent/tweet?text=" + $("#quoteContent").text());
};
$('#shareBtn').on('click', tweetQuote);
$('#newQuoteBtn').on('click', getQuote);
});
@MARKJ78 Thanks so much! I have a lot to learn especially when it comes to jQuery so I appreciate your patience and understanding. And yes the next step is making it responsive!