Month: August 2009

Categories
JavaScript Tips & Tutorials PHP Tips & Tutorials

PHP, JavaScript: Stop and prevent others from framing your site or web page

Though it does increase traffic and the pageviews, it doesn’t feel quite good with someone who’s loading your website or page as a part of theirs in the form of a <frame> or <iframe>, leeching your content as part of theirs. To prevent them from loading your pages this way, and make the visitor browser to load the entire window with your site on the "_top" level, you need some javascript:

<script type="text/javascript">
<!--
	if (self.location.href != top.location.href) {
		top.location.href = self.location.href;
	}
// -->
</script>

Basically, this snippet checks if the URL location of this frame is the same with that of the top frame that is the browser window, if negative, meaning your site or page is being framed from another site, the entire window is then loading your site as the only page.

On the other hand, you can also do this by the help of PHP or a combination of both. Just check the global variable $_SERVER[‘HTTP_REFERER’] against the URL of a particular leeching site, if it’s a match, stop serving the content and redirect the visitors to a warning page so that they know they can come to your website directly instead of from a frame or iframe:

if (strpos($_SERVER['HTTP_REFERER'], 'leechsite.com') !== false) { // if a match
	header("Location: /warning.html"); // redirect to /warning.html
	exit();
}

Pretty much the simplest solution to this.

Interesting: Make sure you give a read to this Q&A thread at Stack Overflow.

Categories
CSS & HTML Tips

CSS: How to align HTML input checkbox and radio with text on the same line?

The common HTML form input controls of checkbox (<input type=”checkbox”>) and radio (<input type=”radio”>) can be tricky to be aligned correctly in the same line with the text or image across all modern browsers. Without any CSS styling, they usually place themselves 3 or more pixels above or below the normal text flow which look anything but nice.

Setting margin or padding won’t help, the whole line would be shifted either downward or upward. So what can be done to align the stubborn input controls nicely with the texts? You can take one of the 3 approaches to achieve this.

  1. Float the checkbox or radio to the left.
  2. Using vertical-align:middle to align the checkbox and radio in the middle with the rest of the text. It’d look much better after you have vertically aligned the controls in the middle by this, but sometimes it also helps with 1px or 2 margin manipulation.
  3. Relatively position the input tags of checkboxes and radios 1 or 2 pixels above or below its original position with
    position:relative;
    top:1px; /* or bottom:1px; */
    Which would move the control 1px downward.

Generally, the 2nd is the best of the 3 approaches.

Categories
CSS & HTML Tips Web Design Tips and Insights

Please, by all means, don’t use overflow:hidden for content!

No matter how fairy or pretty your design / template is, never use overflow:hidden for content containers.

Content comes a thousand times more important than any design or layout. I don’t care how much you hold proud your artistic work and how you think accommodating the content in any way possible would ruin the holy sweet layout, when an image or a table with indispensable content that the readers / visitors are ultimately concerned about expands across the content areas and messing up with your fucking design, using overflow:hidden to restrict them is just plain STUPID and ANNOYING.

Please by all means, DO NOT use overflow:hidden for content containers! What really matters is the idea / content the design is trying to convey rather than the design itself.

Categories
CSS & HTML Tips

CSS: Set width on inline elements with inline-block

With display:block elements we can freely set the hard width of them. However for inline elements, width:200px simply won’t work at all. One approach is to float the element which usually causes other problems and isn’t handy at all.

So how to set width to inline elements without floating them in CSS?

The answer is to use this to the CSS rule:

display:inline-block;

Now you can set a width to the inline-ly displayed element and it will extend to the specified width with blank space filling the extra length.

Categories
CSS & HTML Tips

CSS: Curved or Rounded Corner Boxes and Images Using border-radius

In CSS3, border-radius is the rule you would use to achieve curved corner borderlines, but for now, IE and Opera doesn’t support this trick. With a little script help in the form of a .htc, you can make a cross browser compatible rounded corner box such as a <div> or an <img>.

-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;

The above CSS rules set bends all 4 corners of any box, but only in FF, Chrome and Safari. To make it work in IE, you have to refer to this trick by Remiz.

Categories
Linux Server Administration Tips

Linux: How to find all the files containing a particular text string?

At Linux command line, to find a particular text string in all the files from the current directory recursively (that is, including all those files from the child or grandchild directories), use something like this via SSH:

find . -exec grep -l "needle" {} \;

This command searches through all directories from the current directory recursively for the files that contain the string “needle”.

To search only .php files:

find *.php -exec grep -l "needle" {} \;

To search a specific directory:

find dirname -exec grep -l "needle" {} \;

To find all .php files that contain “needle” in all the directories under “somedir”:

find somedir -name *.php -exec grep -l "needle" {} \;

Categories
CSS & HTML Tips

How to make IE6 to style HTML 5 tags?

HTML 5 comes with a bunch of new tags that IE6 cries that it doesn’t know them, thus refusing to style them according to the CSS. To baby-sit this stupid browser one last time, adding these JavaScript lines in the <head> of your web page that utilizes HTML 5 tags:

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>

Will make IE6 *know* these tags and style them correctly by CSS.

Categories
CSS & HTML Tips

New Tags of HTML 5 (A New Features Tutorial)

Firefox 3.5 has been released with full support for the current stage of HTML 5. Although the rest of the browsers haven’t explicitly adopted the new tags and new features of HTML 5 yet, you can safely use HTML 5 tags in your web page and style them in CSS just as if they are a traditional HTML 4 tag, no problem.

Below is a list of the new tags introduced in HTML 5 which are subject to change in future, especially after the official recommendation release of HTML 5.

  1. <article> – intended for the content section of the web page, can be seen as <div class=”article> or <div class=”content”> or something.
  2. <aside> – for content aside from the primary content stream such as a flyover or a sidebar.
  3. <audio> – including audio files in the web page as an element. 
    <audio src="audiofile.wav">
<p>Your browser doesn’t support audio playback.</p>
</audio>
  4. <bb> – tag to indicate browser commands.
  5. <canvas> – tag containing graphic information to for browsers to render vector images in real-time after loading the canvas data, much like SVG.
  6. <command> – definition of a specific action the user can invoke via the interface controls such as a push button or clickable link.
  7. <datagrid> – used to define a datagrid which is just a representation of tree, list or tabular data that is interactive. Basically, a behavioral structural data container.
  8. <datalist> – specifies a pre-entered list of options that can be used as an autocomplete feature of your form. For example, when the visitor enters something in the text field, the browser tries to guess and create an autocomplete dropdown from the datalist you have provided.
  9. <details> – containing extra information that can be shown or hidden upon user demand.
  10. <dialog> – HTML tag specifically designed for dialog content between several entities such as people.
  11. <eventsource> – representing a target for events generated by the remote server.
  12. <figure> – used mainly for illustrative content such as a diagram, a graph, a photo or other forms of annotations.
  13. <footer> – semantic tag specifically designed for the page footer, can be seen as something like <div id=”footer”>.
  14. <header> – much like the <footer> tag, it lives as the the header section of the web page.
  15. <mark> – used to emphasize, mark or highlight content such as a string of text for reference purposes.
  16. <meter> – intended for measurable numeric results: 
    <meter>3.14159</meter>
<meter>77.1%</meter>
<meter>1/3</meter>
  17. <nav> – semantic tag for the navigational section of a web page such as a menu.
  18. <output> – representing the output part of something such as a script, a programming function or a calculation.
  19. <progress> – semantic tag for the representation of progress of a task, for example, in the form of a progress bar.
  20. <section> – semantic representation of section of the content. For instance, an <article> can contain a <header> and can be divided into several <section>s. A full example of an article: 
    <section>
   <section>
      <article>
         <header>
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </article>
      <aside>
         <header>
            <h1>Tangential Information</h1>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </aside>
   </section>
</section>
  21. <source> – used to specify the source of various media types for either <audio> or <video>. 
    <audio>
<source src="mediafile.wma" type="audio/x-ms-wma">
<source src="mediafile.mp3" type="audio/mpeg">
…
  22. <time> – containing the date or time information in the web page.
  23. <video> – just like <audio>, it represents a video in the HTML page.

For a full example of a HTML 5 web page using all HTML 5 tags, come here.

You can also pre-order these 3 books being released near the end of 2009 for more serious coverage of the new web markup language, HTML 5:

  1. Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Including HTML 5 Preliminary Coverage (6th Edition)
  2. Sams Teach Yourself HTML and CSS in 24 Hours (Includes New HTML 5 Coverage) (8th Edition)
  3. HTML & XHTML Pocket Reference
Categories
CSS & HTML Tips Web Design Tips and Insights

HTML Tags Design for Template / Theme Creation

There are in total nearly a hundred HTML tags with good ones as well as bad ones in terms of XHTML. In the creation of a template or theme, after designing for the overall layout, artistic feel as well as the entire set of visual elements, the designer will be preparing the ready-to-use styles needed for common content tags such as the headings <h1>, <h2>, <h3> and <blockquote> and so forth, even though they may not have been used yet in the design. This article tries to be a rough guide on what tags to be styled before hand.

Here’s a shortened list for the most common scenario:

  1. <a>, the hyperlink, of course.
  2. <acronym>, usually for acronyms and abbreviations such as HTML. Industry standard is to style it with a dotted border at the bottom. However, <acronym> tag has fallen out of favor of HTML5, use <abbr> instead.
  3. <cite>, author, <q>, inline quotations, <blockquote>, large paragraphs of quoting which is one of the most necessary tags that need to be styled before hand.
  4. <button>, you may or may not prescribe a global visual style for all button tags across the template
  5. <caption>, table caption / title, centered and bold by default, come out with a better one in case the content contains a lot of tables. <table>, <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, … for table styles
  6. <code>, for templates dealing with code samples.
  7. <dfn>, for definition terms, frequently used with a lot of inline terms and definitions.
  8. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, content headings.
  9. <img>, content image styles.
  10. <fieldset>, form fieldsets. <legend>, form fieldset title.
  11. <form>, forms.
  12. <input type=”text”>, <input type=”checkbox”>, <input type=”radio”>, <input type=”file”>, <input type=”password”>, <textarea>, input controls of forms.
  13. <label>, form field labels.
  14. <li>, <ol>, <ul>, ordered list styles and unordered list styles.
  15. <p>, paragraph styles.
  16. <select>, <option>, <optgroup>, select list styles.
Categories
CSS & HTML Tips

How to use the HTML cite tag and the cite attribute?

There are at the same time a <cite> tag and a cite attribute in HTML. How does one correctly use them?

<q> is for inline quotations, such as when you need to quote a few words, half a sentence or a phrase from someone.

<blockquote> is for large chunks of text quotations, usually displayed as a block in CSS.

<cite>, doesn’t contain any quoted content but the quote author. For example,

<p>According to <cite>Einstein</cite>, <q>space can be bent</q>.</p>

Yep, that’s the correct use of the cite tag.

The cite attribute or property for <q> and <blockquote>, as in,

<blockquote cite="https://www.kavoir.com/">
<p><cite>, doesn’t contain any quoted content but the quote author.</p>
</blockquote>

Is for listing the source of the citation.