How can I....?

Everything related to the visual and coding aspects of websites.
User avatar
Camy
Administrator
Posts: 1482
Joined: Mon Jul 16, 2012 9:21 pm
Location: Texas
Contact:

How can I....?

Post by Camy »

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.
I accept your challenge, "high prince", but I am no general.
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: How can I....?

Post by dubiousdisc »

Thank you for making this thread Camy :D

WELCOME TO THE DEN OF THE NICE CODE NINJAS. HOW CAN WE HELP YOU.
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: How can I....?

Post by Robin »

*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:

Image
(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)
~ a dream is a wish your heart makes ~
withinmyworld.org
User avatar
Camy
Administrator
Posts: 1482
Joined: Mon Jul 16, 2012 9:21 pm
Location: Texas
Contact:

Re: How can I....?

Post by Camy »

I accept your challenge, "high prince", but I am no general.
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: How can I....?

Post by Robin »

@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 :)
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: How can I....?

Post by dubiousdisc »

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.
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: How can I....?

Post by Robin »

@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

Code: Select all

<a href="v11.php">previous version</a> | <a href="v13.php">next version</a>
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)
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: How can I....?

Post by Mikari »

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.
Larissa
Time Traveler
Posts: 597
Joined: Mon Jul 16, 2012 9:37 pm
Contact:

Re: How can I....?

Post by Larissa »

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.
tonight fate is the
Laura
Posts: 499
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Re: How can I....?

Post by Laura »

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!!
Post Reply