• Forum
  • Lounge
  • Homepage - now with Rubik's Cube solutio

 
Homepage - now with Rubik's Cube solution

Pages: 12
Well, it has been a while since I've had access to the web space I'm paying for, but I finally figured out how to fix it (since Comcast CS only ever gave me BS).

Here is my glorious home page:
http://home.comcast.net/~michaelthomasgreer/
If that isn't cool enough for you, go ahead and unmaximize your browser window and play around with the window dimensions. Honest. You won't be disappointed. :O)

In any case, I am in the process of updating my (massive) links page, and since I find it annoying to have to scroll around so much, I tried something new. I've only been migrating links for a short bit into the new format, so the page is nowhere near finished, but let me know what you think about the design. Did I miss anything obvious?

http://home.comcast.net/~michaelthomasgreer/links.html

The HTML is itself somewhat flawed, I know, and I have yet to run it through the HTML and CSS validators, but any hints on what I am doing wrong the better.

In particular, how do you like the way the Scheme, Tcl, and Python sections work? Originally I had them all open if one was open, but then I wondered if I shouldn't just have one open at a time?

Oh, also, before I forget, I plan to modify that search bar a bit too... Answers.com changed (and I can't stand it now), plus there are a couple of other services I want to hook into.

Anyway, thanks for looking. XD
Last edited on
Looks pretty cool :D

Duoas wrote:
In particular, how do you like the way the Scheme, Tcl, and Python sections work?

That was nice. You could do that with the 'Signing Time' and 'Shopping, Selling, Banking' sections, too. Or you could leave them as they are. Diversity is a good thing.

I was disappointed to see that the artwork and programming pages are not ready yet, though :( It was as if I was carefreely browsing a porn site, noticed a thumbnail showing a pretty damn good looking ass, and clicked on it with eagerness, only to realize a couple of seconds later that it's gay porn (no offense to gay people). Actually, it was as if I did that twice in a row... Please, get them up and working as soon as possible!
Last edited on
Your email address doesn't resize/move correctly.
By instance, with an height of ~500 the text doesn't change until the width is about the same. And because the font size remains constant, the address gets trimmed

In the links page, there is a vertical scroll bar for nothing.
Also the search bar doesn't resize with the window, giving an unnecessary horizontal bar.
Intellicast.com and Millville overlap

The vertical panel has fixed size, but the content has dynamic.
So it takes too much space in a medium window, making the text unreadable.

I kind of hate those interfaces (they move too much). Prefer to have a page that just show the links that I'm interested on.
Check your private messages, Duoas.
m4ster r0shi wrote:
You could do that with the 'Signing Time' and 'Shopping, Selling, Banking' sections, too.
That's one of the things that I'm not sure about. There is no icon on the left for Shopping,etc, but all the things under it that we normally click are actually have direct link icons on the left...

I was disappointed to see that the artwork and programming pages are not ready yet, though...
Alas, that will take some time -- particularly since my HDs crashed and I lost everything -- until I can afford data recovery I am missing a lot of stuff. In any case, I don't have a lot of time to mess with it at the moment, alas, but I am focusing on the links, because I use them constantly.

ne555 wrote:
Your email address doesn't resize/move correctly.

Yes, I know. If you know how to fix that, I'm all ears, but I don't think it is a very huge issue. The page is not designed to work smaller than 640 by 480 browser.

In the links page, there is a vertical scroll bar for nothing.

I don't know enough CSS to fix that. The right side of the page would shrink too small if I didn't set the min-height to 100% -- which produces the scrollbar. As I said, this is only the start of my links (I have very many), so the scrollbar must be available at some point.

The vertical panel has fixed size, but the content has dynamic.
So it takes too much space in a medium window, making the text unreadable.
I'm not sure I follow you there... it works fine on my kid's iPod (besides the random font size rendering errors iPods have).

Prefer to have a page that just show the links that I'm interested on.
Er, that's the whole point. I have so many links that my current links page has a very, very tiny scroll handle on the right side of the screen. I'd rather have to click twice to get the exact content I want right at the top than to have to click or page down a whole lot of times to find the content. Unless I am misunderstanding you somehow?

xander337 wrote:
Check your private messages
Thanks. See your PM too...

Thank you all for your feedback...
Hi there,

ne555 wrote:
Your email address doesn't resize/move correctly.

Yes, I know. If you know how to fix that, I'm all ears, but I don't think it is a very huge issue. The page is not designed to work smaller than 640 by 480 browser.


My first idea would be to use the onresize() event (http://www.w3schools.com/jsref/event_onresize.asp) and have it execute a function that sets the font-size to a percentage of it's parent container.

In the links page, there is a vertical scroll bar for nothing.

I don't know enough CSS to fix that. The right side of the page would shrink too small if I didn't set the min-height to 100% -- which produces the scrollbar. As I said, this is only the start of my links (I have very many), so the scrollbar must be available at some point.


This css fixes it:

1
2
3
4
5
6
7
8
9
10
#links-pages {
    background-color: #EEFFFF;
    left: 185px;
    margin: 0;
    min-height: 90%;  /*min-height 100% was mostly causing the problem*/
    padding: 10px;
    position: absolute;
    right: 0;
    top: 0;
}


Hope that helps.

All the best,
NwN
Last edited on
NwN wrote:
My first idea would be to use the onresize() event (http://www.w3schools.com/jsref/event_onresize.asp) and have it execute a function that sets the font-size to a percentage of it's parent container.
Hmm, I feel like a dunce missing that... (My original page design eschewed js, and I forgot I'd let it in)

This css fixes it:
No it doesn't. The "100%" is supposed to mean exactly 100% of your browser's render window. I've discovered that different browsers get thrown off different ways, but I still don't know how to tell it that the height of that div should stretch to the bottom of the window, and no less. In any case, the scrollbar isn't such a big deal, as by the time I am done I'm sure that uncollapsing something will cause the other titles to create a longer page than the edit window.

Sorry my CSS is hard to look at ATM... I leave a lot of stuff un-optimized while I am still messing around with it. When I finally finish I'll fix it up nice and tight.
Last edited on
Ah right - forgot to test in other browser - apologies!
The padding is actually what's causing the scrollbar - it calculates 100% of the screen + 20 px padding top and bottom.

I would do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* removed padding */
#links-pages {
    background-color: #EEFFFF;
    left: 185px;
    margin: 0;
    min-height: 100%
    position: absolute;
    right: 0;
    top: 0;
}

/* HTML:  remove style=margin-top: 0px */
<div class="link-page-header">

/* this already has a top-margin of 0.4em set, adjust as needed */
.link-page-header {
    color: black;
    font-family: "Teen Bold","Vera Sans Bold","Bitstream Vera Sans",Verdana,Helvetica,Arial,sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 0.4em;
}


Hope that helps :)

All the best,
NwN
Ah, I forgot about that! Thanks!

I've updated the links page somewhat.
http://home.comcast.net/~michaelthomasgreer/links.html
The CSS still needs to be tightened-up, but I think I've got it closer to what I'd like to see. I think I may have fixed something that ne555 was referring to also... the links don't move horizontally anymore.

I am still unsure how to fix the horizontal alignment right now so that it it relative to the link tab header, but I think playing with the tables so that the td content overflows... if I can make it do it.

Also, I can't stand IE. There is a line between the tab header and tab body that I don't know how to get rid of. And it doesn't like web fonts?

Anyway, thanks all!
Last edited on
Nice
http://postimage.org/image/k7jeym681/ that's half size of my screen. The text is one word per column, so it's hard to see that "theForger's Win32 API Tutorial" is actually one link.
However, if you kill the panel...

me wrote:
Prefer to have a page that just show the links that I'm interested on
I was referring to one page that only shows the python's links and a 'go up'.
Just that.
But as you fixed the movement it doesn't look bad. (However you get all the links in links, xP)
HU-rah! The fonts look really big for half your screen... You aren't zoomed in any, are you?

Re: theForger's tutorial
Yeah, one of the 'features' of internet text links: wrapping. Does it not all underline if you hover the mouse over it? (What browser are you using, if I may ask?)

Re: Go up & Just that
Heh, I was thinking of that at one point, but I'm trying to keep it to a two-click minimum for links, and so I chose the one mode over the other, as the icons on the left don't necessarily have any correspondence with the tabs on the right. (For example, "Shopping, etc" has no icon on the left.)


Also, pictures with scrollbars always seem to mess me up. I kept trying to grab the vertical one and scroll down. :->
Just a side-note, it seems a bit silly to link to sites like facebook and Google unless you're linking to specific pages. I'm fairly sure the vast majority of people can find those sites by themselves.
The vast majority of people have CNN or MSDN or Google as their homepage. I have a searchbar for all the engines I use on my homepage.

Also, don't use paprika when making goulash with premade salsa instead of tomato sauce and tomato chunks.
looks awesome! i really spent like 10 minutes clicking on the programming and about buttons thinking my browser wasnt loading the page correctly, until i realized it wasnt ready yet and got super bummed! really cool webpage you have there.
Alright, I think I've made some significant progress here.

I managed to fix the reload loop on IE for the homepage, and it properly renders the "Teen" font with full EOT or WOFF (as your IE takes), so that it looks gorgeous. It won't do the fancy resize trick though, since I had to use some curlish hackery to get IE to not have the onResize event attached.

If anyone knows how to fix IE to reload a finite number of times onResize please tell me! please please please please please...
http://home.comcast.net/~michaelthomasgreer/


Also, as I am stuck working off of my kid's PC with a horrific factory-color profile on his monitor, I only recently noticed that the links page had a greenish hue to it -- not what I wanted. So I fixed it with a hopfully neutral gray.
http://home.comcast.net/~michaelthomasgreer/links.html

Again, IE is giving me some odd issues still. IE9 seems to work OK, IE7 acts weird. Since I've lost my PC I don't have access to IE6 anymore... I'll have to go to one of those sites that renders your page with different browsers and sends you pictures... but as it is a DHTML experience I'm not sure I'll learn anything.

Well, thank you again for looking and correcting me. I'm off to visit the HTML/CSS validators and see if I've made any obvious mistakes.
Last edited on
Hi there,

Duoas wrote:
If anyone knows how to fix IE to reload a finite number of times onResize please tell me! please please please please please...
http://home.comcast.net/~michaelthomasgreer/


Well since you are already using jquery for the links page, you might as well us its full capabilities.
http://api.jquery.com/resize/
For browser detection: http://api.jquery.com/jQuery.support/

Duoas wrote:
I am still unsure how to fix the horizontal alignment right now so that it it relative to the link tab header, but I think playing with the tables so that the td content overflows... if I can make it do it.

Jquery will easily allow you to do something like:

1
2
3
4
5
$('python-link').bind('click', function() {
    // you could also use $(this).parent().find() possibly to make it more dynamic.
    $('whats-at-the-left-of-python-link').show().css("visibility", "hidden");
    $(this).show();
});


Show(), will set css "display: block", but "visibility: hidden" you could say sets alpha to 0, making it invisible.
This has the effect that what's left of the python link will still occupy the space it would take, but it remains invisible.
I'm not saying that's an optimal solution, you may need to play around with widths and heights to get it exactly as you want, but it should give you an idea of how to go about it.

On a small sidenote, some people recommend serving jquery from google's site. This supposedly has the benfit that it decreases bandwidth for your site as well as that when users already visited a website that serves jquery through google, it may still be cached in the browser. A quick google gives you the urls.

Hope that helps,

All the best,
NwN
Last edited on
I already messed with jQuery's resize() -- and the results were unfortunately disappointing in terms of performance. I don't really care to play around with animate() either -- I don't actually plan to spend a lot of time resizing my page. It is only meant to look presentable when first loaded, which it does. I'm playing with the no javascript fallback stuff right now, and that does OK also. IE seems to be pretty smart about making the resized PNG look nice.

I'll play with the jQuery alignment trick. Thanks!
Rubik's Cube update!
http://home.comcast.net/~michaelthomasgreer/rubiks.html

This tutorial is "the" basic algorithm for solving any Rubik's Cube, including custom picture cubes. (Perhaps I should add a section on non 3x3x3 cubes?)

There's also a one-page printable PDF for helping you when you are working on learning the method.

Hope you like!
I like the new tutorial, but I feel like the first layer section is a little lacking. You said that you need too just figure out the first layer by yourself, but that's not really true. There are some clear and easy steps to follow that make it easy too solve, and I feel like neglecting them could make a lot of beginners waste their time.
OK, good criticism, but what steps exactly should I add?
Pages: 12