Jump to Content

About Flush

Flush cleanses the mind and scoops up any crappy (as well as those genuinely good) graphic design ideas, notes, and thoughts.

Posts Tagged “javascript”

On this page:

/Flush/2009/05/16

Experiments Layout Update 4

Gonna skip the screenshot today since it looks relatively the same as before.

  • The secondary pages are laid out so they don’t look randomly crammed. Also coded the templates so things appear where they’re supposed to appear and don’t when not. They include:
  • The width of the page is now determined through JavaScript by the number of “posts”. (If JS is disabled, the widest possible width defaults from the CSS)

The basic redesign is more or less done. Just gonna get the background image in, and start designing the individual pages specific to the medium and fill with real content.

Flush.

Posted

16 May 2009

Tags:

, , , , ,

Comments:

No Comments Yet »

/Flush/2009/05/15

Experiments Layout Update 3

  • The link to the Experiments page is now moved to the permanent link: http://www.ivanwlam.com/experiments instead of including a /wordpress directory.
  • The RSS Feeds now work, but you probably shouldn’t subscribe to them yet as I will probably make a couple more dummy posts to test the blog. (But you can surely subscribe to the feeds for this blog!)
  • The “category strips” that move along the posts now link to the correct “Pages.”
  • The width of the page is now adjusted by JavaScript based on the size of your window. It currently assumes that there are ten posts, so there’s extra space, but I’ll fix that.
  • The footer is now at the end of the page (the far right).

This screenshot looks like the previous one, so it might be a bit redundant. But it’s actually of the Photo category page. With the category pages, I plan on having each category page be different from the main Experiments page and specific to the medium, but I’m developing a default one for new categories that I would not have custom-designed yet.

Flush.

Posted

15 May 2009

Tags:

, , , , , ,

Comments:

No Comments Yet »

/Flush/2008/10/16

Lot of Progress with the Portfolio Section

Made a lot of progress in the past week.

I tried to make the portfolio section available to both JavaScript-enabled and disabled browsers. With JS-disabled browsers, visitors will have to refresh the page. But for JS-enabled browsers, visitors can click on different projects and pieces without needing to refresh. Initially, I thought I needed Ajax to make it refresh-less, but it wasn’t as accessible as I would like it. Fortunately, my new friend PHP allows me to solve my problem.

It’s not all done, yet. But once I get the navigation down, I can start to populate it with real images and text.

The path is portfolio/index.php.

Flush.

Posted

16 October 2008

Tags:

, , , , ,

Comments:

No Comments Yet »

/Flush/2008/09/15

Cookies Basics

Portfolio section, Show/Hide Panels button

I can now write cookies. I had been avoiding it for a while because I knew it would be a little more complex than basic JavaScript, and that I don’t like how cookies are used for “evil” sometimes. Cookies have a bad rap of taking personal information and whatnot, and I want to avoid that for my sites as much and as long as possible. And now I’m using it only to enhance visitor experience and it does not collect personal information.

I created an experiment with cookies in my Experiments section. It involves taking a name and storing it into the browser cookies, and then also created a switch button that just makes a setting go on and off. I did it for my portfolio section, where I want the visitor to have the option to show the “panels” of navigation within the portfolio section or to hide them, and not have to keep setting it every time the visitor returns to the site.

It’s a basic function, and it’s non-intrusive, and it still works without the function or JavaScript. In fact, if the browser disables JavaScript, the button disappears! You can test it yourself with your browser. And like I said before, the portfolio page exists; follow my site’s navigation format and you’ll get there.

Flush.

Posted

15 September 2008

Tags:

, , , ,

Comments:

No Comments Yet »

/Flush/2008/02/25

Flash Experiments Portal: Auto Rounding Width et al

Flash Portal Screenshot

I’ve been taking care of other aspects of my life for the past week or so, and today I was able to spend some time to continue building my Flash Experiments Portal. Honestly, I did not expect something that looks this simple to take so long. But I think that it’s a design worth pursuing, partly because in the process, I’ve learned some stuff in JavaScript that it made me realize that I have a love-hate relationship with JavaScript, just like with ActionScript and Kinko’s.

The image above may not look that different from the one before, but I’ve added many features, all of which are exclusively in JavaScript and would still function like before if JavaScript is turned off or is not available in the browser.

First, I made all the “frames” fit to the length of the text but also rounded them up to the next frame. If I had just left it at auto, the frames would not end at the grid lines, which defeats the purpose of having the grid.

Then, I added up all the lengths of the frames in each row and determine the minimum page width I need to display all the frames in their own row. If I didn’t specify the page width, the frames would actually start floating/stacking under the layer names. That doesn’t happen in Flash, of course; I just used the float trick to make it look like Flash, but it certain doesn’t behave it like it.

Finally, I made the boxes where the layer names go have a fixed position so that as you scroll to the right for more frames (if the row of frames goes longer than the page width), the left side stays there like in Flash.

I spent a good chunk of the day working on this locally, and it seemed to work fine in Firefox and Opera, with a little bit of glitch in Opera that I fixed relatively quickly. But when I uploaded it to the site, Opera seemed to have completely ignored my JS, so now I have to figure out what’s happening there. And IE has the same situation as last time. Inconsistencies with paddings, margins, and border widths among browsers are a pain.

Nonetheless, I made real progress today, especially in my JavaScript skills. I’ve become more comfortable with arrays and for loops now. Scripting is so powerful; I can’t wait to learn all the other kinds.

Flush.

Posted

25 February 2008

Tags:

, , , , , ,

Comments:

No Comments Yet »

/Flush/2008/02/03

Background Change By Time

Been a few days since posting an update on the web site. Before you make snap judgments on the image below, hear me out. That’s not how the site is going to look, exactly. Think of the idea, the concept behind it. Concept, concept, concept.

The point is that I figured out how to control color using time, as well as brightness and saturation control just like the HSB panel in Photoshop and the like. This might be a sarcastic BFD for geeky programmers, but I’m still proud that I figured this out in one night, part of it without power because of some storm.

Background Change By Time

Three versions of the beta site with a different background color at different time of day.

I may or may not continue applying a time-based background color on the home page. This is actually the same saturation and brightness as the original dull blue background color, but I guess it’s just too bright and saturated-looking in other hues.

Shaun Inman

The idea for this came from Shaun Inman’s site, which I heard about from a (relatively) recent BADG podcast interviewing Shaun Inman. His site has a changing background that repeats every year, and on top of that, his older articles fade to white as a metaphor that writings on web programming and such get outdated very quickly over time, even stuff written in 2002.

I will continue to play around with the background color; I’ll probably make it darker and muted if I was to keep the script on the home page, because frankly, I don’t really have a strong concept and reason like Shaun’s to have the script on the home page.

The process of writing the script is documented under Experiments > Web > JavaScript.

Flush.

Posted

03 February 2008

Tags:

, , , , , , , , ,

Comments:

No Comments Yet »

/FLUSH/TAG/javascript