Interactive Writing & Design

A Details Solution

Here’s the CSS -only solution for <details> and <summary>:

This solution replaces the <details> and <summary> elements on the page, for ALL browsers. You don’t want that; you only want a solution for Firefox.

I put all of the relevant CSS from the above CodePen into a standalone CSS file, ‘details.css,’ and put it in my project folder.

Then, to dynamically load a resource only in Firefox:
if(navigator.userAgent.toLowerCase().indexOf(‘firefox’) > -1){

// alert(“firefox!”);
$(‘head’).append( $(‘<link rel=”stylesheet” type=”text/css” />’).attr(‘href’, ‘details.css’) );

}

Posted in Uncategorized | Comments Off on A Details Solution

Some Modernizr Solutions

//always run this stuff in a document ready function

$(document).ready(function() {

var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );

// test for ios

if( ios ) {

if ( !standalone && safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘browser’;

} else if ( standalone && !safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘standalone’;

} else if ( !standalone && !safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘uiwebview’;

};

} else {

alert(“not ios”);

};

// test for android

if( /Android/i.test(navigator.userAgent) ) {

alert(“android”);
// some code..

}

//test for firefox
if(navigator.userAgent.toLowerCase().indexOf(‘firefox’) > -1){

// alert(“firefox!”);

 

// dynamically load a resource only in FF
$(‘head’).append( $(‘<link rel=”stylesheet” type=”text/css” />’).attr(‘href’, ‘details.css’) );

}
// detect chrome
if(navigator.userAgent.toLowerCase().indexOf(‘chrome’) > -1){

// alert(“chrome!”);
$(‘header’).css(“position”, “fixed”);
$(‘header’).css(“z-index”, “9”);

}
});

Posted in Uncategorized | Comments Off on Some Modernizr Solutions

Modernizr Rubric

As a reminder, this assignment does not require that you rely on Modernizr to solve any or all of the browser compatibility issues – your challenge is to make the page’s features work in every browser. That’s all I’ll be checking.

There are 11 features on the page that are not fully supported by all browsers. By using Modernizr, polyfills, and creativity, try to solve as many as you can. (We covered how to solve one of these in class, so that’s your ‘gimme.’)

You will be graded on a scale of 1 (problem solved!), 2 (problem partially solved) and 3 (problem not solved at all).

Here’s a list of the features detected by Modernizr:

https://www.browserleaks.com/features

Here are some popular polyfills, although I can’t attest that any / all of these will work for our assignment:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

WHAT YOU CAN NOT DO

Do not edit the HTML and CSS to no longer use the features described – you can add data-attributes, classes and IDs to the HTML, but that’s all.

WHAT TO TEST IN

  • Edge 14
  • Firefox 50
  • Chrome 54
  • Safari 10
  • iOS 10
  • Android 53

Good Luck!

Posted in Uncategorized | Comments Off on Modernizr Rubric

Parallax Rubric

I would like everyone to make a website that uses a JS/JQ plugin which changes the appearance of your page upon either scrolling, mouse position, keyboard commands, or something similar. Examples include:

For any of the above plugins, I’d like you to control the narrative, to try to tell a ‘story,’ in a very loose sense. If there is a progression of ideas as the user scrolls, for instance, that’d be great. Remember Jess & Russ?

Alternately, you are more than welcome to design your personal portfolio as a parallax website (I guess that tells your story?). If you do not have all of your desired content for an online portfolio, you can substitute dummy content / ipsum.

Posted in Uncategorized | Comments Off on Parallax Rubric

Scroll Magic

If you’re looking for a parallax plugin to use, consider using Scroll Magic – it can really do anything. Here’s a demo page that helps you learn to do different things on scroll, including (but not limited to) parallax:

http://janpaepke.github.io/ScrollMagic/examples/

Posted in Uncategorized | Comments Off on Scroll Magic

Parallax Resources

A Stellar.js tutorial, pretty good:

https://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs–webdesign-7307

Some amazing parallax examples:

http://www.intacto10years.com/index_start.php

http://www.loisjeans.com/web2012/es

http://hobolobo.net/

How the hobolobo site was made:

http://www.creativebloq.com/javascript/building-parallax-scrolling-storytelling-framework-8112838

The stellar.js documentation:

http://markdalgleish.com/projects/stellar.js/docs/

Posted in Uncategorized | Comments Off on Parallax Resources

Student Examples: Parallax Project

Beatles:

http://student.elon.edu/ewilliams/stellar-js/indexFinished.html

Dinner:

http://student.elon.edu/tmackins/parallax/index.html

Kyrgyzstan (uses Skrollr):

http://student.elon.edu/mmcgowan5/kyrgyzstan/index.html

Holy Guacamole:

http://student.elon.edu/lbourne/parallaxProject/indexFinished.html

Big Hero 6:

http://student.elon.edu/akim6/bighero6/

Posted in Uncategorized | Comments Off on Student Examples: Parallax Project

Css Animation Rubric

This rubric is pretty short and straightforward, as this assignment is really geared toward creativity, which I do not want to restrict.

  • Create three CSS animations, on three separate HTML pages
  • Make sure your animations are different from each other, and are also different from the content we made in class and is on the server. Again, this project is all about creativity, so please don’t minimally adjust existing content.
  • Feel free to make: an interactive infographic, a lo-fi representation of the analog world, a website that relies on animated elements, or anything like what we have on the server.
  • Feel free to re-create reality, or be totally abstract. You can also re-create your favorite video game.
  • If you have a practical use for a CSS animation on a website, make it!
  • Does not have to be responsive

Some inspirational ideas:

Posted in Uncategorized | Comments Off on Css Animation Rubric

The jQuery’s Have It

vote

Posted in Uncategorized | Comments Off on The jQuery’s Have It

3d Perspective in CSS Animation

Remember that rotating, 3D cube we saw in class? It’s an animation that relies on perspective. I’ll go over perspective briefly at the start of Monday’s class, but here’s a bunch of examples and tutorials on how to use it – and how to make that cube:

perspective

https://24ways.org/2010/intro-to-css-3d-transforms/

http://callmenick.com/post/css-transitions-transforms-animations-perspective

https://desandro.github.io/3dtransforms/docs/perspective.html

 

Posted in Uncategorized | Comments Off on 3d Perspective in CSS Animation