Amgueddfa Cymru

Hafan

To celebrate Pride Cymru coming to Cardiff this weekend, our homepage has had a little touch of colour applied to it. If you use Safari on the Mac, you may notice another special feature - your browser's toolbar itself is emblazoned with rainbow colours.

Hafan yr Amgueddfa

If you use Safari regularly, you'll be familiar with the visual effect that sees page colours slip behind the browser toolbar as you scroll. It's a neat effect but I hadn't heard of a site actively utilising it before and I wondered if, with a bit of HTML, CSS & JavaScript, we could fix a set of colours there. The vibrant rainbow colours of Pride seemed like the perfect fit. In this blog entry, I'll describe in tedious/fascinating* (*delete as appropriate) technical detail how we achieved it.

The Technique

At first I tried setting the margin of my element to a negative value to push it into the toolbar area. Unsurprisingly, this doesn't work - it's simply not displayed. The actual solution was almost as simple itself and we were pretty pleased with the result.

To start off, all we need are two divs.

<body>
    <div id="toolbar-colours">…</div>
    <div id="content-frame">…</div>
</body>

The first div will contain the colours we want to show in our toolbar. We give this a fixed height, 150px in this example.

The second div will contain our content. We give this a fixed width and height of 100vw and 100vh. This means it will neatly and seamless fill the browser viewport area.

#rainbow_toolbar
{
	background-color: #b20034;
	height: 2px;
	display: flex; /* We actually use Sass includes for cross-browser flex-box support */
	width: 100%;
	padding: 0;
	margin: 0;
}

#rainbow_toolbar.safari_trick
{
	height: 150px;
}

#rainbow_toolbar .colour_block
{
	flex: 1;
	height: 4px;
	padding: 0;
	margin: 0;
}

#rainbow_toolbar.safari_trick .colour_block
{
	height: 130px;
}

#rainbow_toolbar .colour_block.violet { background-color: #9400d3; }
#rainbow_toolbar .colour_block.indigo { background-color: #4b0082; }
#rainbow_toolbar .colour_block.blue { background-color: #0000ff; }
#rainbow_toolbar .colour_block.green { background-color: #00ff00; }
#rainbow_toolbar .colour_block.yellow { background-color: #ffff00; }
#rainbow_toolbar .colour_block.orange { background-color: #ff7f00; }
#rainbow_toolbar .colour_block.red { background-color: #ff0000; }

Using a little JavaScript, we can make sure that we're always scrolled past the first div, making it colour the browser toolbar.

$(window).scroll(function() {

    if ($(window).scrollTop() < 150) {
        $(window).scrollTop(150);
    }
});
$(window).scrollTop(50);

The only thing remaining is to sort out our scrollbars which are giving the game away. We hide the main browser scrollbar and give our content-frame a standard-looking scrollbar instead.

::-webkit-scrollbar
{ 
    visibility: hidden; 
    display: none;
}
				
#content-frame
{
	background-color: #e4e4e4;
	height: 100vh;
	width: 100vw;
	padding: 0;
	border: 0;
	overflow-y: scroll;
}
					
#content-frame::-webkit-scrollbar
{ 
	display: initial;
	visibility: visible;
	background: #f4f4f4;
	color: #ffffff;
}
		
#content-frame::-webkit-scrollbar-track
{
	background-color: #f4f4f4;
	border-radius: 8px;
}
		
#content-frame::-webkit-scrollbar-thumb
{
	width: 4px;
	border-radius: 8px;
	background-color: #b4b4b4;
	border: 3px #f4f4f4 solid;
}

There are few more JavaScript tricks we can use to tidy up our implementation. This includes managing the up arrow and page-up keys which create a visual glitch:

// disable page up and arrow up when at top of content
window.addEventListener('keydown', function(e) {
	
	if( $('#content-frame').scrollTop() <= 0 && [33, 38].indexOf(e.keyCode) > -1 ) {
		e.preventDefault();
	}
}, false);

The Caveats

It's a neat little trick but also somewhat of a hack. Putting your content in a scrolling div carries a small but noticeable performance penalty when scrolling and when using a touchpad to scroll you may get an occasional visual glitch. Finally, it is only available to Mac-based Safari users. No other combination of OS and browser has the translucent toolbar effect for us to take advantage of. For this reason, it's not something I'd want to use for a lengthy period of time. But for one weekend only, here it is.

In September 2016 Amgueddfa Cymru - National Museum Wales will again be participating in Open Doors, an event organised by Cadw (the Welsh Government’s historic environment service). The idea behind the event is to offer people the opportunity to visit a variety of sites important to the culture and history of Wales. The highlight of the event is the opportunity to visit places that are not normally, or are infrequently, open to the public.

The National Collections Centre, Nantgarw, is part of Amgueddfa Cymru – National Museum Wales, and houses thousands of interesting and important objects that are not on display. Although not normally open to the general public we have always offered access to researchers, and also to various groups and societies. Staff at the National Collections Centre have always seen the importance of opening up the site to allow visitors access to view some of these objects and to see the work that is carried out by staff on site.

We are always looking for new ways to get visitors on site, to encourage people to learn about what we do, and provide more access to the collections in store. Therefore we have decided to repeat last year’s success and get involved in Open Doors again. This year we will be open on two days as part of Open Doors, on Wednesday 7th September and Thursday 29th September 2016. There will be five tours on each day at 10.00, 11.00, 12.00, 2.00 and 3.00. Each tour will last about 45 minutes and visitors will be able to take a closer look at some of the collections held on site, and find out about the work of staff based here.

Booking is essential for these tours. Please ring us on 029 2057 3560 or 029 2057 3583 to book a place, or find out further information. You can also email us on industry@museumwales.ac.uk

Further details can be found on the Cadw website, as well as details of all other places open as part of Open Doors.

We hope as many people as possible will be able to enjoy the tours and be able to see some of the amazing objects preserved by Amgueddfa Cymru for the people of Wales.

Over the summer we are working with ACE Action Ely Caerau (Communities First) to put together a series of fun and accessible family workshops and activities for local families. The programme was developed ahead of time with ACE and includes sessions such as:

Traditional Toys

Wash Day with Beti Bwt

Rag Rug Making

Life in the Iron Age

Pond Dipping

Pottery

So far we have had lots of fun making rag rugs, learning about and playing with traditional toys, discovering what life was like for our ancestors living in the Iron Age and experiencing what it was like to go to school in Victorian Wales.

 

Here’s a snap shot of some of the feedback from the children and parents who have come along

“I love it here and I had fun.”

“Had a really enjoyable afternoon, learning to make rag rugs. Very interesting. Will definitely carry this on. Thank you to all concerned.”

“I really enjoyed playing with the toys.”

“I've learnt lots!”

"I thought it was very fun, but I would not want to go to school in Victoria times."

There are still lots more sessions to come so follow this blog to learn how the rest of the summer goes!

This week we have also started a new programme of exciting storytelling, reading and activity workshops with Cardiff Libraries. These are open to everyone and will be taking place on Monday’s and Wednesday’s at St Fagans until 24th August so why not come along next time!

If you are interested in taking part in other similar family activities and events at St Fagans over the summer there are lots of opportunities to get involved, just check our What’s On guide for more information.

Since the launch of the Quentin Blake exhibition our inbox has been filling up, and the phone hasn’t stopped with fellow Roald Dahl and Quentin Blake superfans wanting to know more about what's going on. Everyone wants to get involved! So I thought I’d share a little bit of what’s been happening so far.

The Exhibition

People have been coming along to draw in the gallery and already our wall is bursting with wonderful drawings.

Want to join in?  https://museum.wales/cardiff/whatson/8916/Quentin-Blake-Inside-Stories/

Activity Booklet

Our activity booklets have been flying out and the competition entries have been coming in thick and fast!

To draw your way around the museum and take part in the competition, just pop in to the Clore Discovery centre to get your very own booklet https://museum.wales/cardiff/clore/

Family Workshop 

Families have been making some really nice little storybooks of their very own.  

 

Teachers

We have a teacher's pack in both Welsh and English that will help you explore the exhibition with your class - https://museum.wales/media/38707/QB-FINAL.pdf  

Cymraeg - https://amgueddfa.cymru/media/38708/QB-FINAL-cy.pdf

If you would like to bring your class to the museum all the information you need about booking is available at - https://museum.wales/cardiff/learning/booking_information/