JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml" /> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="content-language" content="en">
    <title>Welcome to UCROO</title>
    <meta name="description" content="UCROO the Educational Social Network - Get involved and leverage the network of students around you.">
        <meta name="keywords" content="UCROO, Educational Social Network, University Network, You crew, Youcrew, Ucrew, Youcroo, U crew">

        <meta name="msvalidate.01" content="0204DF6AD434C2C14BF80F81B8BD5E71" />

         
        <meta property="fb:admins" content='571251499, 553294026' />

        <link rel="canonical" href="http://localhost.ucroo/" />
        <link href="http://localhost.ucroo/assets/images/favicon.ico" rel="shortcut icon" type="image/ico" />        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> 


                                                    <link rel="stylesheet" href="http://localhost.ucroo/assets/css/reset.css" type="text/css" media="screen" />
                            <link rel="stylesheet" href="http://localhost.ucroo/assets/css/text.css" type="text/css" media="screen" />
                            <link rel="stylesheet" href="http://localhost.ucroo/assets/css/form.css" type="text/css" media="screen" />
                            <link rel="stylesheet" href="http://localhost.ucroo/assets/css/buttons.css" type="text/css" media="screen" />
                            <link rel="stylesheet" href="http://localhost.ucroo/assets/css/grid.css" type="text/css" media="screen" />
                            <link rel="stylesheet" href="http://localhost.ucroo/assets/css/layout.css" type="text/css" media="screen"...

JavaScript

$(document).ready(function() {

    function __(a){
        console.log(a);
    }
    var listItems = $('.content_nav ul li');

    listItems.each(function(i, link){

        var $link = $(link),
            nr = $link.data('number'),
            scrolling = false
        ;

        if (nr === 0) {
            $('#public-header .logo').bind('inview', function(event, iV, vpX, vpY) {
                if ( ! scrolling) {
                    if (iV) {
                        listItems.removeClass('active');
                        $link.addClass('active');
                    }
                }
            });
        }

        $('.c' + nr).bind('inview', function(event, iV, vpX, vpY) {
            if ( ! scrolling) {
                if (vpY === 'top') {
                    listItems.removeClass('active');
                    $link.addClass('active');
                }
            }
        });

        $link.on('click', function(el){
            //remove class active
            var $this = $(this);
            // $('.content').unbind('inview');
            scrolling = true;
            listItems.removeClass('active');
            if(nr === 0) {
                $('#public-header').ScrollTo({
                    onAfter: function() {
                        scrolling = true;
                    },
                    queue: false
                });
            } else {
                $('.c' + nr).ScrollTo({
                    onAfter: function() {
                        scrolling = true;
                    },
                    queue: false
                });
            }
            $link.addClass('active');
        });
    });
});