Playing around with Drew Wilson's atvImg = 'AppleTV Image'

[drone4four]

Check out Drew Wilson’s GitHub entry for a nifty little hack which I discovered on my favourite subreddit the other day:
https://github.com/drewwilson/atvImg

Here is Drew Wilson’s default live demo: http://kloc.pm/

I successfully copied over Drew Wilson’s html, css and javascript into a codepen, here: http://codepen.io/anon/pen/EVRyxp
It renders and functions perfectly as it should, the way it does on his website.

I’m trying to adapt it for my personal website. Here is my adapted codepen: http://codepen.io/anon/pen/NGMbYr
It functions fine but renders like crap. I changed the image source from Wilson’s image to images that I will be using. My image links are sourced from my webserver. The problem is not permissions because it renders perfeclty with a direct link. See here: http://angeles4four.info/drewwilson-atvImg_homepage_exp/
This leads me to question #1 for you guys is: Why do my green icon images render fine on my website but not when referenced in my codepen?

Question #2: How do I hyper link the ‘Enter’ button? I tried adding Enter within the h1 element’. But this doesn’t make the button a hyper link.

Question #3: How do I align my button and content vertically so it fits exactly 50% from the top and bottom, as it already does to the right and left?

Thanks for your attention.

[michaellee]

I’m not quite sure what you meant by “render fine” for me the images didn’t show up at all. By adding http:// which was missing from the src, I got the images to load correctly from your server

http://codepen.io/michaellee/pen/JYaRXq

Q2: So h1 doesn’t create a link. All it does is create a text header. Instead you want to use an anchor tag <a href="http://google.com">Text</a>. I’d wrap it around all the divs marked for layers. See pen above for reference.

Q3. I personally like this solution.

Cheers!

[drone4four]

Thank-you @michaellee!

Adding http:// to my src links loads the images in my pen.

Now when I click the Enter button, it takes me to some where else on the interwebz. In my production environment, now clicking “Enter” descends a directory featuring more content.

I do thank-you michaellee for giving me a clue for my most important question (#3) instead of fixing it for me because I learn more this way. So I shuffled the centerer class element from your pen to underneath my inner-wrap class element. I immediately noticed that thhe top and left values of 50% don’t center the Enter box and welcome message very nicely. I experimented with different values and settled with top:30% and left: 20%. This works OK. If you pinch the browser window size to emulate smaller screens like mobile devices, the spacing between the Enter button is off slightly. I remedied this spacing inadequacy by adding two line breaks above my h2 element in my markup. This is just a quick fix. I suppose there is probably a more elegant solution to be had with css. What would you recommend? Could you or someone else provide another helpful hint or nudge in the right direction?

Here is my pen with all my changes: http://codepen.io/Angeles4four/pen/YyJxxz

[michaellee]

Hey @drone4four looking good so far.

So with the centerer, you’re missing the transform. The top and left will off set the element by 50% on both x and y axis. But you need to compensate for the width and height of the element. So you add in transform: translate(-50%, -50%); which will do just that.

If you’re not seeing the results, it may be because of missing vendor prefixes.

-webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

One other observation that I made was that you put the “Enter” element into the header element. Any reason for this?

[drone4four]

Yeah, I deliberately left out the transform because in playing around with it initially right after you made your suggestion, I could have sworn it made the button and the words disappear. But moments ago I just tried adding the transform property again with your translation value and it looks great in my pen and in the html and css on my test-case website. So yeah, the box is now perfectly centered from the top and from the sides. Thank-you @michaellee for your suggestions.

The Enter element is in the header, as you noticed and I am not sure why. I didn’t write most of this html. I borrowed it from Drew Wilson’s GitHub page. He would probably have a really good answer. What do you think of keeping it in the header? Would it be better to re-arrange the elements out of the header and into the subsequent dividers in accordance with best practices?

Here is my pen with the latest changes: http://codepen.io/Angeles4four/pen/YyJxxz

 If you pinch the browser window size to emulate smaller screens like mobile devices, notice how the spacing between the Enter button is off slightly? The paragraph text is way too close to the Enter button sometimes. This can be remedied by adding two line breaks above my h2 element in my markup. This is just a quick fix though. I suppose there is probably a more elegant solution to be had with css. What would you recommend, michaellee?

By the way, I’d like to reverse the orientation of the button and text so that the text appears on the right and enter appears on the left at wider browser sizes. Further more, at narrower browser sizes, I’d like to have the button appear below the text rather than above (as is the case right now). In my text editor I actually replaced all the instances of ‘right’ with ‘left’ and vice versa. That didn’t achieve what I set out to do. Is achieving this as simple as flipping or adding a few key properties or changing some values?

[drone4four]

Anyone? What would the merits be of re-arranging the elements out of the header and into the subsequent dividers in accordance with best practices? Whats the deal with best practices and headers in this case?

[Author]

Posts