Since Webflow isn’t a CMS, I made it act like one. sorta. Just using data-* attributes and jquery.
custom code:
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var cs = getParameterByName('cs');
/* Quotes */
var quote=new Array()
var author=new Array()
quote[0] = "When I reach for the edge of the universe, I do it knowing that along some paths of cosmic discovery, there are times when, at least for now, one must be content to love the questions themselves."
author[0] = "- Neil deGrasse Tyson"
quote[1] = "Simplicity is the ultimate sophistication."
author[1] = "- Leonardo da Vinci"
quote[2] = "Design is not just what it looks like and feels like. Design is how it works."
author[2] = "- Steve Jobs"
quote[3] = "A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
author[3] = "- Antoine de Saint-Exupery"
quote[4] = "Dude, suckin' at something is the first step towards being sorta good at something."
author[4] = "- Jake the dog"
quote[5] = "Do the things to be such future."
author[5] = "- Nelson Abalos Jr"
quote[6] = "We are in the universe and the universe is in us."
author[6] = "- Neil deGrasse Tyson"
function loadQuote(){
Q = quote.length;
RQ =Math.round(Math.random()*(Q-1));
$('.quote p').text(quote[RQ])
$('.quote-author').text(author[RQ])
}
loadQuote();
$('.item').click(function(){
$('.quote').fadeOut()
$('.showing').removeClass('showing').fadeOut()
$('.youtube iframe').attr('src','')
itemCat = $(this).attr('data-category')
itemLink = $(this).attr('data-link')
if(itemCat == 'speaking'){
$('.wrapper-speaking').addClass('showing').fadeIn()
}
if(itemCat == 'focus' || itemCat == 'redesign' || itemCat == 'tips'){
$('.youtube iframe').attr('src','http://cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2F' + itemLink + '%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D' + itemLink + '&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2F' + itemLink + '%2Fhqdefault.jpg&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=youtube')
$('.youtube').addClass('showing').fadeIn()
}
if(itemCat == 'article'){
articleTitle = $(this).attr('data-title')
$('.embedly-card').attr('href', itemLink).text(articleTitle)
$('.article').addClass('showing').fadeIn()
}
})
$('.navlink').click(function(e){
e.preventDefault()
navCategory = $(this).attr('data-category')
$('.item:not([data-category='+navCategory+'])').fadeOut()
$('.item[data-category='+navCategory+']').fadeIn()
$('.col-list h2').text(navCategory)
})
$('.logo').click(function(e){
e.preventDefault()
$('.showing').removeClass('showing').fadeOut()
$('.col-list h2').text('latest')
$('.item').fadeIn()
$('.quote').fadeIn()
loadQuote();
})