Posts Tagged ‘html’

Php generate html select options from array

Tuesday, November 8th, 2011

Here’s a super obvious php snippet that generates a list of options for a “select” html form tag on the fly:


<select id="tf_select" name="tf_select"
onchange="update(this,document.getElementById('tf'));">
  <option value="">Select...</option>
  <?php
$a = array("New Haven","Rochester","New York","Washington D.C.","Seattle","Zurich");
foreach($a as $e)
{
  echo "<option value='".$e."'>".$e."</option>";
}
  ?>
  <option value="Other...">Other...</option>
</select>

Combined with the javascript from an earlier post, it should be very easy to generate selectors for php based forms.

Set up virtual host on mac os x

Tuesday, September 6th, 2011

We’re using SVN to version control our group’s webpage which is all php scripts. If everything were html files then making edits on a locally checked out copy would be easy since I can just open the files in a browser and check my edits. But, being PHP scripts, to properly see the sites I need a php server running which can host the local copy of the site and I can see the edits I make live. Then finally when I’m sure everything looks and executes correctly I can check in the edited version and update the version on the real server. Here’s how I constructed my local setup.

Check out svn to some directory, from now on referred to as “path/to/htdocs-igl”:


svn co https://private.svn.server.com/trunk/htdocs-igl path/to/htdocs-igl

Be sure that no apache servers are not running. The following in order should to do that:


sudo apachectl stop

Use ps and grep to determine if they really stopped. This should return nothing:


ps -ef | grep httpd | grep -v grep

If it returns some lines, then kill each replacing [PID] with each row’s process ID:


sudo kill [PID]

If the process didn’t really die then try:


sudo kill -9 [PID]

And after you think you’ve done enough killing, issuing this again for good measure:


sudo apachectl stop

Now that we’re sure no apache servers are running. Start one:


sudo apachectl start

To check that it’s working browse to http://localhost/. You should see something fully load other than “Not found, blah blah”.

Now, add the following as a new line at the bottom of the file /etc/hosts:


127.0.0.1       localigl

Now you should be able to go to http://localigl/ and see the same thing as you did with http://localhost/.

To have http://localigl/ point to your checked out version of the website, you need to edit the file /etc/apache2/users/[your mac username].conf:


NameVirtualHost *:80

<Directory "/Users/[your mac username]/Sites/">
    Options Indexes MultiViews Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /Users/[your mac username]/Sites/
</VirtualHost>

<Directory "/absolute/path/to/htdocs-igl/">
    Options Indexes MultiViews Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

<VirtualHost *:80>
    ServerName localigl
    DocumentRoot /absolute/path/to/htdocs-igl
</VirtualHost>

Replacing, in the file name and the file contents, [your mac username] with, uh, your mac username.

You must give execute access to parent directory and the root directory of the checked out website:


chmod 755 path/to/htdocs-igl/..
chmod 755 path/to/htdocs-igl

Finally, restart the server with:


sudo apachectl graceful

If you now go to http://localigl/ you should see a listing of the checked out website’s root directory contents (or if you’re using index.html, you’ll see that rendered file). Since we’re using PHP for everything we must enable php scripts.

Uncomment the following line in /etc/apache2/httpd.conf to look like this:


LoadModule php5_module        libexec/apache2/libphp5.so

And again restart the server:


sudo apachectl graceful

Now when you go to http://localigl/ you should see your php scripts executed and rendered.

Source This document is well written but did not enough stress that you must stop all servers (that you may have accidentally started when fooling around) before starting the steps. And it’s nice to repeat his steps with exact names closer to my current set up.

Fullscreen, blank homepage

Saturday, September 3rd, 2011

I usually use a blank or empty page as my homepage. This makes for quick browser start up and minimal waiting when making new tabs/windows.

I find myself often opening a new browser window resizing it to fill the whole screen and then browsing. This goes against how apple wants me to use my mac. The little green plus sign button on the top left corner of the screen is supposed to be smart enough to always maximize the current window only as much as it needs to/should. But what is the correct maximization of a blank page? Apparently its a full height window with some arbitrary width. Why not make it a full height and full width window. To do this for my browsers (Safari, Firefox, Chrom(e|ium)) I made a little html file that displays a blank, fullscreen-able page. Save the following in a file on your computer called fullscreen-homepage.html:


<html>
  <head>
    <title>Fullscreen Homepage</title>
  </head>
  <body style="min-width:10000px;overflow:hidden">
  </body>
</html>

Open the file with your browser and copy the address at the top (starting with file:// to your browser’s preferences as your homepage for new tabs and windows. Here’s what to change in the Safari preferences:
safari preferences local fullscreen homepage

Getting Safari to play a short audio clip with HTML5′s audio tag

Friday, August 19th, 2011

I had a really annoying time trying to get Safari to load and play a small audio clip (mp3) I’d posted. The clip is only 2 seconds. Here’s the HTML I was using


<audio src="audio.mp3" autoplay preload="auto" controls loop>

But this resulting in nothing. Upon closer inspection I found out the the “onstalled” even was being fired so I added an “onstalled” even handler to try to load the clip again:


<audio onstalled="this.load();" src="audio.mp3" autoplay preload="auto" controls loop>

But this was to no avail, the “onstalled” event just fired each time recursively.

In the end I gave up on Safari’s ability to play/load small mp3 files. I’m not sure what the problem is since quicktime played the file fine. Also if my html and audio.mp3 files lived locally, Safari played it correctly.

I instead made use of HTML5 ability to specify fallback sources. For this I converted my mp3 file to a m4a:

First convert to wav with mplayer:


mplayer -quiet -vo null -vc dummy -ao pcm:waveheader:file="audio.wav" "audio.mp3"

Then convert to m4a with faac:


faac -o audio.m4a audio.wav

Finally use the .m4a file as a fallback source in the audio tag:


<audio autoplay preload="auto" controls loop>
<source src="audio.mp3" >
<source src="audio.m4a" >
<audio>

Making http://alecjacobson.com/blog == http://alecjacobson.com/weblog

Wednesday, July 13th, 2011

At some point youtube wasn’t letting me link to http://alecjacobson.com/weblog. I guess because it was too long. So I made a symbolic link on my server:


ln -s weblog blog

This worked OK, until my friend realized that when you accessed my blog through http://alecjacobson.com/blog all the links wordpress made were getting screwed up.

At first when I tried to tackle this with .htaccess Apache directives, I came up with:


RewriteEngine on
RewriteBase /
RewriteRule blog/(.*) weblog/$1

But then wordpress was still constructing the urls wrong (sometimes putting weblog/blog/… instead of just weblog/… in links), so I had to have:


RewriteEngine on
RewriteBase /
RewriteRule blog/(.*) weblog/$1
RewriteRule weblog/blog/(.*) weblog/$1

But then this is annoying, although the page works, you could have every page with weblog/blog/… instead of just weblog/… It’s kind of ugly. So, I found this very simple solution instead:


Redirect /blog /weblog

Now blog/something just redirects to weblog/something. The redirect costs the view an extra network back and forth but oh well.

Horizontal and vertical centering using html, css without knowing container size

Friday, June 17th, 2011

This is an especially elusive problem when designing a simple webpage in html. There are many non solutions on the web that require knowing the size of the container element. The solution I found was straight forward and did not require knowing anything about the container. It does not require javascript (though the original code uses javascript to show off the fact that it stays centered).

A page with horizontal and vertical centering

Original source

Ignore nytimes paywall with simple client-side javascript, or applescript

Thursday, April 21st, 2011

Today was my first experience with the New York Times paywall. It manifested as an html overlay on top of the article I wanted to read. The article seemed to have fully loaded which made me think that if I could just get rid of the overlay I’d be able to read it.

This turned out to be the exactly case. I just zapped the div containing the overly (properly labeled id='overlay' and restored the overflow of the main page (to get scrolling back).

ignore nytimes paywall

This is easily accomplished with three lines of client side javascript:


document.getElementById('overlay').parentNode.innerHTML = '';
document.body.style['overflow-x'] = 'auto';
document.body.style['overflow-y'] = 'auto';

There are many ways of issuing your own javascript on pages opened in your browser, whatever that might be.

For me on a mac with safari, wrapping the above into a little applescript is easiest. I save this in a file called Ignore-nytimes-paywall.scpt:


tell application "Safari"
	try
		set doc to front document
		do JavaScript "document.getElementById('overlay').parentNode.innerHTML = '';" in doc
		do JavaScript "document.body.style['overflow-x'] = 'auto';" in doc
		do JavaScript "document.body.style['overflow-y'] = 'auto';" in doc
	on error errText number errNum
	end try
end tell

It seems that coming up with your own hack for knocking down the nytimes paywall is the trend these days. We’re all blowing our technological Joshua trumpets ;-) .

Update: I’m now more convinced that nytimes is just using this paywall as an experiment. Ignoring the paywall is even easier than I thought:

Readers need only remove “?gwh=numbers” from the URL. They can also clear their browser caches, or switch browsers as soon as they see the subscription prompt. All three of these simple fixes will let them continue reading.

Source

Update:
Seems the paywall organization has changed a little bit and now the client side javascript should be:


document.getElementById('regiwallBackground').style.display = 'none';
document.getElementById('regiwallOverlay').style.display = 'none';
document.body.parentElement.style.overflow = 'scroll';

Automatically reformat any annoying/badly laid out image gallery on the web

Sunday, March 13th, 2011

Often I come across very annoying javascript image galleries on the web. Like this one, where when you click on a thumbnail a full size image slowly unveils somewhere down the page. You actually have to scroll down to get to it.

So I’m presenting an automatic re-gallery-izing web application.

Turn this …

bad gallery screen capture

into this…

auto gallery dump

There are many other examples. Facebook’s was pretty bad for a while, though I think it’s a little better now. Jezebel and the other Gawker sites have a notoriously bad image gallery. But for me, the most common is artists’ pages. Artists’ image galleries are rarely easy to flip through and that’s usually exactly what I want to do: quickly see a lot of images and occasionally make one bigger and look at it in detail.

I’ve tried to do this with my own galleries. So you can tell me if I’ve got a big stick in my eye.

In any case here’s a proof of concept to hopefully relieve some of this. Just enter the URL of the gallery index page (it needs to be a page that links to all of the images in the gallery, so this won’t work with flash galleries), and I automatically generate a page that simply lists the images so you can quickly view all of them and click on the ones you want to see full size.

Right now the regallery is more or less a raw dump of the images into an html page. There’s no reason it couldn’t be spiced up a little bit, but that’s where all the trouble began in the first place.

Bathroom wall, html5 canvas app

Friday, March 11th, 2011

bathroom wall canvas app

I made a small experiment with the canvas tag. The bulk of the code is in javascript but I have a server-side php script which is used to remember anything that’s written on the wall. I still have to come up with the right amount of persistence. But for now, after a while older scrawls start to disappear.

How to write on the bathroom wall:

DRAG the mouse to write.
HOLD SHIFT and DRAG the mouse to change pens.

Adding html doctype ruins fullscreen canvas

Friday, March 11th, 2011

Recently I experienced a very minor but annoying problem. I made a fullscreen canvas like this one:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    html,body
    {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #F54;
    }
    canvas#full
    {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #4F5;
    }
    </style>
    <title>Properly fullscreen canvas, but no doctype</title>
  </head>
  <body>
    <canvas id="full">
    </canvas>
  </body>
</html>

which you can see for yourself.

Then all I did was add to the top:

<!DOCTYPE HTML>

and you can see on the right a scroll bar now appears and there are 3 pixels below my canvas showing the background. This is a minor but very annoying problem.

I fixed this by adjusting the CSS style of the fullscreen canvas to:

    canvas#full
    {
      display: block;
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #4F5;
    } 

The result validates and looks right.