Skip to content

Instantly share code, notes, and snippets.

Avatar

Nathan Allen nallenanderson

  • ZeroFOX
  • Santiago, Chile
View GitHub Profile
View keybase.md

Keybase proof

I hereby claim:

  • I am nallenanderson on github.
  • I am nallan (https://keybase.io/nallan) on keybase.
  • I have a public key ASDgkWk2icTpkKjGJ1RaYd5Wtzpva9Puqf77AFkmDeOe2Ao

To claim this, I am signing this object:

View Dropdown Menu
<div id="main-menu" class="mm-wrapper collapsed">
<!-- ... from above -->
<!-- Site navigation drop-down -->
<div class="nav-account">
<div class="account-dropdown dropdown open">
<a href="#" class="account-dropdown-btn" data-toggle="dropdown">
<i class="mdi mdi-chevron-down"></i> Modyo Cloud
</a>
@nallenanderson
nallenanderson / Logo Navbar
Created Aug 26, 2016
This is for the Logo Navbar
View Logo Navbar
<div id="main-menu" class="mm-wrapper collapsed">
<!-- This is the Modyo Logo -->
<div class="nav-brand">
</div>
</div>
@nallenanderson
nallenanderson / Main Menu
Last active Aug 26, 2016
This is the #main-menu example.
View Main Menu
<div id="main-menu" class="mm-wrapper collapsed">
<!-- This is the Modyo Logo -->
<div class="nav-brand">
</div>
<!-- This is the site navigation -->
<div class="nav-account">
<div class="account-dropdown dropdown">
<ul class="dropdown-menu">
View react.jsx
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
@nallenanderson
nallenanderson / tooltipster.html
Last active Aug 2, 2016
Great tooltips with jQuery
View tooltipster.html
<head>
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>
<body>
<div class="container">
// Putting a tooltip on an image:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
View bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
View main05.js
// This needs to be placed within the final .then() block
const imagesDiv = document.querySelector('#images');
imagesDiv.innerHTML = showImages;
View main04.js
// Chain this onto the end of the AJAX request.
.then( () => {
// Create an array of <div>s and then map over each element to create a div with image and title.
const showImages = `
${jsonData.map( card => {
return `
<div class="col-md-6">
<div class="card">
<img src=${card.covers[0]} class="img-responsive" />
View main03.js
// After the first JSON is returned, we are going to convert the URL string by mapping over the array of objects and replacing the default cover image size.
.then( data => {
data.media.map( media => {
if(media.covers[0]){
// Check if original image is one being served.
if(!media.covers[0].includes('original')){
// Replace the cover image size with "original" image size.
media.covers[0] = media.covers[0].replace('R320x240', 'original');