Dancing Bear Music

[Joss]

This is the second site for my music production company using ProcessWire - the first was over a year and a half ago.

http://dancingbear.co.uk

Very simple site incorporating a version of jplayer - the player is loaded via ajax and is actually incorporated into the page using Hanna Code.

Site runs with ProCache and cloudflare.

It is not the most awe inspiring site out, but then, audio is not known for having a lot of pictures associated with it!

The logo is based on one that a friend drew for me 20 years ago. I have decided to reuse it and redraw it.

Slight issue in that the contact form that worked fine on my development server but I am not getting any mails from the production server.

I have opened that up as an issue at: https://processwire.com/talk/topic/7685-not-receiving-mail-from-form/

NOTE: I have turned off procache for the moment while I check on a couple of issues. Back on now, as is cloudflare ... is that overkill?

Edit - note for anyone using cloudflare (who are very good, mostly). They are not appropriate for streaming audio or video sites. Their advice is to create a subdomain and to put audio files in there, then make sure that subdomain is NOT being cached by cloudflare. Or you can put it on a CDN somewhere.  That way the main domain is properly served by cloudflare while the media is brought in from elsewhere.

[adrian]

Hey Joss,

I thought you might appreciate this:

http://www.dancingbearmusicfest.com/

And here is a photo of the "Dancing Bear", white patch, right in the middle of the Stawamus Chief:

http://3.bp.blogspot.com/-BGfk41qTmrw/TmlOZo2bq_I/AAAAAAAAAB0/AuWMKVgn8H4/s1600/Chief.jpg

[diogo]

Looks great Joss!

I noticed some things you can improve:

• The mouth appears later than everything else.
   
• On the home page, when the first player is open and I click to open the second, the movement doesn't feel natural because it's not obvious that the first player closes before the second opens happening—on a 13" laptop all i see is the site going up and down. I think there isn't the need to close the open player to open the other and would just leave it open, but if you want to close it, try doing it at the same time, it will be smoother.
   
• The "eject" buttons is a link and ruins all the experience by sending me to #. There are 3 possible fixes that I can remember:
    1. remove the href from the link (faster but dirty)
    2. stop the event with jquery by adding "return: false" or "event.preventDefault()" inside the click (ok to do)
    3. replace the <a> tag by a <button> tag and correct the styling to match what you have (more work but also more correct)

EDIT: ah! also, when I clicked the first "listen now" on my small laptop, I didn't notice that something had changed under the fold. Only after scrolling down I noticed it. 

[Joss]

I think I need to change the way the mouth works. 

Currently it uses the foundation interchange script and that might be causing the delay. It wasn't a problem on my little local box.

[diogo]

It's such a small image, I would serve the large version to everyone.

[Joss]

I need to change the size depending on the viewport

[diogo]

Use a media query and change the width in the stylesheet.

[Joss]

Okay, I have turned the logo into a background.

I have messed with the jquery for opening the player too - it now scrolls to the open player so you know what is going on.

I still cant get the contact form to work. I have no idea what is going on there at all. So for the moment, I have removed it.

[diogo]

I get it, you are bringing the player above the fold while it opens. Maybe you can take the bottom of the player and the bottom of the window as the reference for the automatic scrolling. I think if you fine tune what you're doing now it will end up working well. 

[Joss]

okay, erm... how do I do that?

The bit of codey-wodey I added to my script is:

						$('html, body').animate({
						    scrollTop: ($playerdiv.offset().top)
						},500);

[diogo]

Hm, not that easy to calculate the exact place because the player is closed before the animation starts, and we would need it's height to subtract to the browser window height. All we can do is hardcode the approximate height of the player. I prepared a small example:

What you have: http://codepen.io/diogo-ed/pen/HJaxn

How I think it should be: http://codepen.io/diogo-ed/pen/jbueD

[Joss]

haha!

okay, that is going to take some serious messing. One for tomorrow me thinks!

(Lunch is beckoning)

[diogo]

No messing

var scrollTo = $(window).height() - 250; // eyeball this number
$('html, body').animate({
   scrollTop: ($playerdiv.offset().top - scrollTo)
},500);

[Joss]

I meant that the height will change hugely with viewport. On a iPhone, the player is tall and thin! (unlike me)

[diogo]

You can change that number depending on $(window).width()

[Joss]

Yes, I will need to come up with some ifs and maybes 

I seem to spend my life doing that. Maybe there should be an international law that says all devices for viewing the internet have to exactly the same size!

[OLSA]

Congratulations Joss!

I like content - "Content is king"... especially instrumental at "7" o'clock (.../instrumental-show-reel) with harmonica.

[Joss]

Thanks!

Yes, I like playing the harp - though I need new ones. Mine are going out of tune.