I made another thing (work in progress)

http://cspace.io/

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();
})
1 Like