My div, in the middle of my page, my div… ♫

In a hurry? Check the demo!

So… you want to nicely position a div in the middle of a page (equal distance top/bottom and left/right).

Easy-peasy.

Here we go. I’ll show you only the method based on CSS, because the table-based method is really deprecated and every time you use it, God kills a baby panda.

First, let’s create the basic page structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>labs.moldoveanu.net - My div, in the middle of my page, my div... ♫</title>
</head>

<body>
    <div id="bogus"></div>
    <div id="myCenteredContent">
        <p>Whooohoooo! I'm centered, dude!</p>
    </div>
</body>
</html>

Now, put the following block in a separate CSS file (or directly in the head tag):

		html,body {
		  height:100%; /* required */
		}

		body {
		  background-color:rgb(255,255,255); /* purely cosmetic, can be safely removed */
		  margin:0; padding:0; /* required - sticking #helper on a side */
		  text-align:center; /* centering hack for the mighty IE */
		}

		div#bogus {
		  /* background:rgb(0,0,0); */ /* remove it - only for testing */
		  float:left; /* required */
		  height:50%; /* required - */
		  margin-bottom:-75px; /* required - half of the #myCenteredContent height */
		  width:1px; /* required - */
		}		

		div#myCenteredContent {
		  border:1px solid rgb(128,128,128);/* purely cosmetic, can be safely removed */
		  clear:left; /* required */
		  height:150px; /* required - height of the visible centered content */
		  margin:0 auto; /* required */
		  padding:0; /* cosmetic */
		  position:relative; /* required */
		  text-align:center; /* cosmetic - aligning the content inside the #myCenteredContent */
		  width:600px; /* required - width of the visible centered content */
		}

Please note: if you try to center a SFWObject, please follow this page and have a look at the demo. Quick hint: you have to declare the object tag, too:

object#myYouTubeVideo {
	clear:left;
	display:block;
	margin:0 auto;
}

Posted at Dec 8th | no comments | Filed Under: How to, Web development read on

jQuery Mobile: translating the “Back” and “Loading” labels

In a hurry? Check the demo or download the support archive.

What is jQuery Mobile?

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Now, to our example.

First, let’s make a basic page (note: we will use jQuery Mobile 1.0a2 and jQuery 1.4.4):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My mobile-enabled page</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>

<div data-role="page" id="index">
    <div data-role="header">
      <h1>My App</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
            <li data-role="list-divider">Choose a page</li>
            <li><a href="#secondpage">My second page</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Footer</h4>
    </div>
</div>

<div data-role="page" id="secondpage">
    <div data-role="header">
      <h1>My App - 2nd page</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
            <li data-role="list-divider">Pick a page</li>
            <li><a href="#index">Back to the first page</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Footer</h4>
    </div>
</div>
</body>
</html>

Now, let’s change the “Loading” and “Back” labels:

<script type="text/javascript">
$(document).bind("mobileinit", function(){
    $.extend($.mobile, {
        loadingMessage: "My new loading label..."
    });
    $.mobile.page.prototype.options.backBtnText = "&laquo; Previous page";
});
</script>

Change the lines according to your language/preferences: line 4 for “loading” label, line 6 for “Back” label.

Place this Javascript block between

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

and

<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

Your head tag should be now:

<head>
    <meta charset="utf-8" />
    <title>My mobile-enabled page</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function(){
            $.extend($.mobile, {
                loadingMessage: "My new loading label..."
            });
        $.mobile.page.prototype.options.backBtnText = "&laquo; Previous page";
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>

If you want to change the “Back” label for specific pages only, use:

<div data-role="page" id="secondpage" data-back-btn-text="&laquo; Previous page">

Posted at Nov 30th | 5 comments | Filed Under: Mobile, Web development read on

Downloading an entire website using wget

wget \
--debug \
--mirror \
--timestamping \
--wait=10 \
--random-wait \
--execute robots=off \
--append-output=mywebsite.tld.log \
--user-agent="Mozilla/5.0 (X11; U; Linux i686; en; rv:1.9.3a5pre) Gecko/20100526 Firefox/3.6" \

http://www.mywebsite.tld/

The short version would be:

wget \
-m \
-N \
-w10 \
--random-wait \
-e robots=off \
-a mywebsite.tld.log \
-U "Mozilla/5.0 (X11; U; Linux i686; en; rv:1.9.3a5pre) Gecko/20100526 Firefox/3.6" \

http://www.mywebsite.tld/

and the one-liner:

wget -m -N -w10 --random-wait -e robots=off -a mywebsite.tld.log -U "Mozilla/5.0 (X11; U; Linux i686; en; rv:1.9.3a5pre) Gecko/20100526 Firefox/3.6" http://www.mywebsite.tld/

Some explanations:
-m or –mirror
Turn on options suitable for mirroring. This option turns on recursion and time-stamping, sets infinite recursion depth and keeps FTP directory listings. It is currently equivalent to -r -N -l inf –no-remove-listing.

-N or –timestamping
Turn on time-stamping.

-w seconds or –wait=seconds
Wait the specified number of seconds between the retrievals. Use of this option is recommended, as it lightens the server load by making the requests less frequent. Instead of in seconds, the time can be specified in minutes using the “m” suffix, in hours using “h” suffix, or in days using “d” suffix.

–random-wait
Some web sites may perform log analysis to identify retrieval programs such as Wget by looking for statistically significant similarities in the time between requests. This option causes the time between requests to vary between 0.5 and 1.5 * wait seconds, where wait was specified using the –wait option, in order to mask Wget’s presence from such analysis.

-e command or –execute command
Execute command (see a list of wget commands).

-a logfile or –append-output=logfile
Append to logfile. This is the same as -o, only it appends to logfile instead of overwriting the old log file. If logfile does not exist, a new file is created.

-U agent-string or –user-agent=agent-string
Identify as agent-string to the HTTP server (agent-string spoofing).

Posted at Nov 15th | no comments | Filed Under: How to, Linux read on