Amassment Message Board

Sometimes we wonder if we can code something in a way that's easier than what we're trying to do or just have a small question but don't want to flood the forums all the time.

This topic is the solution for those who get stuck [and believe me, we all do] and everyone else can come in with the solutions.

Thank you for making this thread Camy :D

WELCOME TO THE DEN OF THE NICE CODE NINJAS. HOW CAN WE HELP YOU.

*politely dings helpdesk bell*

I've been tinkering with my Bootstrapified layout archive, but I haven't uploaded any changes yet because of a few problems. Here's a screenshot of the newish design thus far:


(apologies if it's too big for the forum /o\ )

1: I want to use a flyout info panel on the left side of the page (where the black bar is right now), a la Feedly and this tutorial, but I'm afraid it won't be mobile accessible anymore if I do that (i.e., "clicks" and "hovers" don't usually work on mobile quite like they do on regular computers, or the flyout panel might cover the whole site).

2: I want to make it easy to go between pages of the site without hard-coding in the URLs for "previous" and "next" at the bottom of each page. Is that possible with the non-CMS setup I have right now?

3: I want to have my site title, "Disguises," display in text that is turned 90 degrees to the left on the flyout panel before somebody clicks it. I've made this text into an image for the purposes of this mockup, but it's not an ideal solution. (Also, how to align said text so that it falls in the vertical middle of the window at any resolution? I tried doing margin-top: 50%, margin: auto, AND padding-top: 50% last night, to no avail.)

(also if anything doesn't make sense, I apologize for that too--I still don't know some of the terms for "freakin amazing thing this website over here does" xD)

1. Try https://mango.github.io/slideout/ ?

3. Try http://www.css3maker.com/css3-transform.html ?

@Camy: OOOOOOO I hadn't seen the Slideout.js one before. I like that it has touch features--COOL! 8D And I will definitely read up on the CSS3 transform thingy and try to implement it :)

Yeah I would have said the same things as Camy :D

Robin, could you explain point 2 again? I *might* know an answer but I'm not sure if I am understanding the question.

@dubs: No problem! :D

I have a separate page for each layout version on my archive, like v1.php, v2.php, and so forth. I want to have navigation like "previous version | next version" at the bottom of each page, which would lead the user naturally from, say, version 12 forward to version 13, or back to version 11.

My question is, since I'm not currently running a CMS on my layout archive, would there be a way to automatically select the previous and next versions for this bottom-of-the-page navigation, instead of having to write this
then copypaste it to all my site pages, then go back in and manually change the URLs for every page that's not version 12?

(I don't know of a way to do this without a CMS installed, but if there is, I would LOVE to learn it, because intra-site navigation is love. :D)

Background positioning is a topic that's come up with several people lately, so I decided to write a little tutorial about it. I hope these examples are useful. I have a lot of notes at AzureLight.net though they are very summarized, let me know if you want to see more little tutorials like this that focus on a particular CSS code.

Mikari wrote:Background positioning is a topic that's come up with several people lately, so I decided to write a little tutorial about it. I hope these examples are useful. I have a lot of notes at AzureLight.net though they are very summarized, let me know if you want to see more little tutorials like this that focus on a particular CSS code.

ARE YOU SERIOUS. THAT'S HOW THAT WORKS?

I've known how to use background-position for years (as in I abuse the hell out of it) but I NEVER KNEW you could use pixels in conjuction with top/left/right/bottom. Holy bleep Mikari you are the best.

Awesome tutorial, Mikari!! I was actually having a problem with that on my Kyo shrine. :) I ended up using "center 8px" and then fixing the pattern in my image instead. xD I was getting close but just got frustrated and gave up. Your tutorial helped me understand the values a lot better, thank you!!