A Pen by Boost New Media

Developer
Boost New Media
Size
5,594 Kb
Views
54,648
  1. A Pen by Boost New Media Previews
  2. A Pen by Boost New Media HTML Codes
  3. A Pen by Boost New Media CSS Codes
  4. A Pen by Boost New Media JS Codes

How do I make an a pen by boost new media?

What is a a pen by boost new media? How do you make a a pen by boost new media? This script and codes were developed by Boost New Media on 12 June 2022, Sunday.

A Pen by Boost New Media Previews
IQ Test

A Pen by Boost New Media - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Boost New Media</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cf" id="hd">
<h1><a href="/">boost.co.nz</a></h1>
<!-- / Desktop Navigation -->
<ul class="cf" id="main-nav"> <li class="active"><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Boost New Media - Script Codes CSS Codes

body { background: #333; color: #333; height: 1000px; display: block;
}
/* C. General List Styles === */
ul, ol { padding: 0px;
}
/* Prefered List Item basic style */
li { margin-bottom: 12px; color: #333; list-style: none; padding-left: 15px; position: relative;
}
nav li { display: inline;
}
.animated.slideUp { -webkit-transition: 0.25s; -o-transition: 0.25s; -moz-transition: 0.25s; -ms-transition: 0.25s; transition: 0.25s;
}
.animated.slideUp { -webkit-transform: translateY(-60px); -o-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px);
}
.animated.slideDown { -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;
}
#hd { padding: 0; position: fixed; width: 100%; margin: 0px; z-index: 2; background: white; /* User name */
}
#hd h1 { float: left; margin: 0px; font-size: 24px; line-height: 60px; height: 60px; position: relative; padding-left: 20px; width: auto;
}
#hd h1 a { text-decoration: none; font-size: inherit; color: inherit; display: inline; border-bottom: none;
}
#hd h1 a:hover { border-bottom: 1px solid #555;
}
@media (min-width: 850px) { #hd h1 a:before { left: 0px; }
}
#main-nav { margin: 0; display: block; float: right; width: auto;
}
#main-nav li { padding: 0px; margin-bottom: 0px; float: left;
}
#main-nav li:first-child { border: none;
}
#main-nav li a { line-height: 60px; padding: 0px 20px; height: 60px; border-bottom: none; display: block; text-decoration: none;
}
#main-nav li a:hover { background: #E9E9E9; color: black;
}
#main-nav .active { background: #333;
}
#main-nav .active a { border-bottom: none; color: white;
}
#main-nav .active a:hover { background: #333; color: white;
}

A Pen by Boost New Media - Script Codes JS Codes

/*! * headroom.js v0.4.0 - Give your page some headroom. Hide your header until you need it * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js * License: MIT */
(function(window, document) { 'use strict'; /* exported features */ var features = { bind : !!(function(){}.bind), classList : 'classList' in document.documentElement, rAF : !!(window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame) }; window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; /** * Handles debouncing of events via requestAnimationFrame * @see http://www.html5rocks.com/en/tutorials/speed/animations/ * @param {Function} callback The callback to handle whichever event */ function Debouncer (callback) { this.callback = callback; this.ticking = false; } Debouncer.prototype = { constructor : Debouncer, /** * dispatches the event to the supplied callback * @private */ update : function() { this.callback && this.callback(); this.ticking = false; }, /** * ensures events don't get stacked * @private */ requestTick : function() { if(!this.ticking) { requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this))); this.ticking = true; } }, /** * Attach this as the event listeners */ handleEvent : function() { this.requestTick(); } }; /** * Helper function for extending objects */ function extend (object /*, objectN ... */) { if(arguments.length <= 0) { throw new Error('Missing arguments in extend function'); } var result = object || {}, key, i; for (i = 1; i < arguments.length; i++) { var replacement = arguments[i] || {}; for (key in replacement) { if(typeof result[key] === 'object') { result[key] = extend(result[key], replacement[key]); } else { result[key] = result[key] || replacement[key]; } } } return result; } /** * UI enhancement for fixed headers. * Hides header when scrolling down * Shows header when scrolling up * @constructor * @param {DOMElement} elem the header element * @param {Object} options options for the widget */ function Headroom (elem, options) { options = extend(options, Headroom.options); this.lastKnownScrollY = 0; this.elem = elem; this.debouncer = new Debouncer(this.update.bind(this)); this.tolerance = options.tolerance; this.classes = options.classes; this.offset = options.offset; this.initialised = false; this.onPin = options.onPin; this.onUnpin = options.onUnpin; } Headroom.prototype = { constructor : Headroom, /** * Initialises the widget */ init : function() { if(!Headroom.cutsTheMustard) { return; } this.elem.classList.add(this.classes.initial); // defer event registration to handle browser // potentially restoring previous scroll position setTimeout(this.attachEvent.bind(this), 100); return this; }, /** * Unattaches events and removes any classes that were added */ destroy : function() { var classes = this.classes; this.initialised = false; window.removeEventListener('scroll', this.debouncer, false); this.elem.classList.remove(classes.unpinned, classes.pinned, classes.initial); }, /** * Attaches the scroll event * @private */ attachEvent : function() { if(!this.initialised){ this.lastKnownScrollY = this.getScrollY(); this.initialised = true; window.addEventListener('scroll', this.debouncer, false); } }, /** * Unpins the header if it's currently pinned */ unpin : function() { var classList = this.elem.classList, classes = this.classes; if(classList.contains(classes.pinned) || !classList.contains(classes.unpinned)) { classList.add(classes.unpinned); classList.remove(classes.pinned); this.onUnpin && this.onUnpin.call(this); } }, /** * Pins the header if it's currently unpinned */ pin : function() { var classList = this.elem.classList, classes = this.classes; if(classList.contains(classes.unpinned)) { classList.remove(classes.unpinned); classList.add(classes.pinned); this.onPin && this.onPin.call(this); } }, /** * Gets the Y scroll position * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY * @return {Number} pixels the page has scrolled along the Y-axis */ getScrollY : function() { return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; }, /** * Gets the height of the viewport * @see http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript * @return {int} the height of the viewport in pixels */ getViewportHeight : function () { return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; }, /** * Gets the height of the document * @see http://james.padolsey.com/javascript/get-document-height-cross-browser/ * @return {int} the height of the document in pixels */ getDocumentHeight : function () { var body = document.body, documentElement = document.documentElement; return Math.max( body.scrollHeight, documentElement.scrollHeight, body.offsetHeight, documentElement.offsetHeight, body.clientHeight, documentElement.clientHeight ); }, /** * determines if the scroll position is outside of document boundaries * @param {int} currentScrollY the current y scroll position * @return {bool} true if out of bounds, false otherwise */ isOutOfBounds : function (currentScrollY) { var pastTop = currentScrollY < 0, pastBottom = currentScrollY + this.getViewportHeight() > this.getDocumentHeight(); return pastTop || pastBottom; }, /** * determines if the tolerance has been exceeded * @param {int} currentScrollY the current scroll y position * @return {bool} true if tolerance exceeded, false otherwise */ toleranceExceeded : function (currentScrollY) { return Math.abs(currentScrollY-this.lastKnownScrollY) >= this.tolerance; }, /** * determine if it is appropriate to unpin * @param {int} currentScrollY the current y scroll position * @param {bool} toleranceExceeded has the tolerance been exceeded? * @return {bool} true if should unpin, false otherwise */ shouldUnpin : function (currentScrollY, toleranceExceeded) { var scrollingDown = currentScrollY > this.lastKnownScrollY, pastOffset = currentScrollY >= this.offset; return scrollingDown && pastOffset && toleranceExceeded; }, /** * determine if it is appropriate to pin * @param {int} currentScrollY the current y scroll position * @param {bool} toleranceExceeded has the tolerance been exceeded? * @return {bool} true if should pin, false otherwise */ shouldPin : function (currentScrollY, toleranceExceeded) { var scrollingUp = currentScrollY < this.lastKnownScrollY, pastOffset = currentScrollY <= this.offset; return (scrollingUp && toleranceExceeded) || pastOffset; }, /** * Handles updating the state of the widget */ update : function() { var currentScrollY = this.getScrollY(), toleranceExceeded = this.toleranceExceeded(currentScrollY); if(this.isOutOfBounds(currentScrollY)) { // Ignore bouncy scrolling in OSX return; } if(this.shouldUnpin(currentScrollY, toleranceExceeded)) { this.unpin(); } else if(this.shouldPin(currentScrollY, toleranceExceeded)) { this.pin(); } this.lastKnownScrollY = currentScrollY; } }; /** * Default options * @type {Object} */ Headroom.options = { tolerance : 2, offset: 35, classes : { pinned : 'slideDown', unpinned : 'slideUp', initial : 'animated' } }; Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList; window.Headroom = Headroom;
}(window, document));
jQuery(document).ready(function(){ // grab an element var myElement = document.querySelector("#hd"); // construct an instance of Headroom, passing the element var headroom = new Headroom(myElement); // initialise headroom.init();
});
A Pen by Boost New Media - Script Codes
A Pen by Boost New Media - Script Codes
Home Page Home
Developer Boost New Media
Username boostnewmedia
Uploaded June 12, 2022
Rating 3
Size 5,594 Kb
Views 54,648
Do you need developer help for A Pen by Boost New Media?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boost New Media (boostnewmedia) Script Codes
Name
Basic - Flex with float fallback.
Test
CSS CALC
Sticky Footer
IE11 Test
Flexbox Sticky Footer
Image toggle using flex
Calc using CSS
Boost SVG Logo
Complex SVG Path Question
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!