Work This Week – Week 3

FI Bootstrap Collapsibles Divs

Our Focused Inquiry people are building an online resource for first-year students. One of the things they wanted to do was to put a bunch of concepts in collapsible divs and be able to use a URL to link to a particular expanded div. The initial plugin they were using for collapsible divs didn’t allow/create IDs but moving to the Bootstraps 3 Shortcodes plugin go the IDs we needed. After that it was just a matter of adding a bit of jQuery to a plugin. I gave myself a head start with this post on Stackoverflow.

I hadn’t known about the location.hash option previously. It is worth noting that if you don’t lead with window it will work in Chrome but not in FireFox or Safari.

You can get the URL to trigger the div by copying/pasting the URL when you hover over the title on the completed element on the published post/page.

https://AURL.COM/ficoursecontent/faq/#custom-collapse-0-1

The first number represents the particular group of collapsible divs and the second number represents the specific div. Both counts start at 0.

 jQuery(document).ready(function() {
        if(window.location.hash != null && window.location.hash != ""){
        jQuery('.collapse').removeClass('in');
        jQuery(window.location.hash + '.collapse').collapse('show');
    	}
   });

FI Bootstrap Collapsibles Divs – Second Try

There are always little things waiting for you. In this case, having auto generated div IDs results in issues if the order of the elements changes. The stuff still works, it just links to a different item. This would have been a bad thing to figure out further down the road so I’m glad it came up early. There is something to be said for working prototypes.

The end result is I’m just going to write a small plugin that’ll allow us to manually set the ID. It maybe that this whole thing becomes a more structured process using custom fields of some sort.

Random Post from WordPress JSON API (v2)

This URL https://bionicteaching.com/wp-json/wp/v2/posts/?filter[orderby]=rand&per_page=1 gets you one random post via the WP JSON Rest API v 2. It is not the most well documented thing so this might help someone.
Here is a gist that’ll take that and display it.

Digital History Course Site

screen-shot-2016-12-04-at-10-44-29-pm

I’m going to be co-teaching a digital humanities class and I started playing with the theme a bit.

I thought it’d be fun if I could show a random map area in the header on each page load. I wanted to play around with Leaflet js as well because it has a number of interesting options.

The javascript to generate the map ends up looking like this.

//random lat/log coordinates between the given ranges 
var lat = randomIntFromInterval(0,60);
var long = randomIntFromInterval(-40,60);

var mymap = L.map('header-image').setView([lat, long], 6);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=****your****KEY***here***', {
	maxZoom: 18,
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
		'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
		'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'mapbox.streets'
}).addTo(mymap);

//this gives me the random number function 
function randomIntFromInterval(min,max)
                {
                    return Math.floor(Math.random()*(max-min+1)+min);
                }

The header portion for the theme is just a full-width bootstrap div with the id ‘header-image’.

VA LEND

screen-shot-2016-12-04-at-10-47-11-pm
I did a quick makeover/customization for a VA LEND site.

I adjusted the title, dropped in a background image, and added posts to the static front page.

I also ended up writing a little plugin to load the VCU brand bar. The new bar is a dramatic improvement although I remain puzzled by the power branding people have over everyone in the university.


#page {
	background-image: url('http://rampages.us/virginialend1/wp-content/uploads/sites/20769/2016/12/Screen-Shot-2016-11-30-at-10.45.06-PM.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top center;
	background-size: contain;
}

.site-branding {
	background-color: rgba(248,248,248,1);
}

.listing-item {
	margin: 10px;
	padding: 8px;
	border: 1px solid #efefef;
	display: inline-block;
}

#content {
	background-color: #fff;
	padding-top: 25px;
}

.site-description {
	color: #424242;
	font-weight: 200;
	font-size: 20px;
}

I added the Facebook page embed. I’m actually not sure how this is supposed to be done as I don’t spend much time in FB land. Whichever path I chose seemed way too high powered for what it was worth and involved my API access . . .

Animation CSS

I found a css animation library a while back that I’d been meaning to try out.1

I added the CSS to my personal site on the front page and to the Digital History page. It was super easy and did what I wanted.

All you do is add animated and the animation of your choice to an element and you’re up and running.

Even if it’s played out . . . I still like it and my next attempt will be to adjust the animation a bit so that multiple elements load in a staggered fashion.

WP Font Awesome Icons Mobile View

This was harder to do initially than I thought it would be. It’ll end up with a full post when I finish it all up.

Life Lesson

I was briefly trapped in a scenario where one person was relaying their opinion about a website through another person. This is a bad scenario.

It is made even worse when done over email.

Almost inevitably it will be an absent supervisor and the person they have bestowed the website duties upon. With faculty, it will be a GA or other student worker but it happens in other areas as well.

It is a recipe for slow progress, many re-do’s, and general unhappiness for all involved.

Resist involvement in this scenario whenever possible.


1 The creator’s homepage trips me out although I thought he could be kinder in his source view.

2 thoughts on “Work This Week – Week 3

Comments are closed.