html snippets

How to create a mixed 2 to 3 column layout with footer and header

Tagged golden ratio, vertical flow, design, css, html  Languages html

This is a draft, and an experiment with composing to a vertical flow and the golden ratio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 column</title>
<style type="text/css">

/** Reset styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  margin:0;
  padding:0;
} 

/** 3 column layout */

#container{
  background-color:#9cc;
  width: 69em;
  margin: 0 auto;
}

#content{
  float: left;
  width: 41em;
}

#sidebar{
  float: right;
  width: 23em;
}

#column1{
  float: left;
  width:23em;
}

#column2{
  float: left;
  width:23em;
}

#column3{
  float: left;
  width:23em;
}


/* Vertical flow */

body {
  font-size: 75%;
}
  
html>body {
  font-size: 14px;
}
  
p {
  line-height 1.5em;
}


/* Temp styles */
#column1, #column2, #column3, #content, #sidebar {
#  background: blue;
  #  border: 1px solid black;
}

/** */
body{
  font-family: Palatino,"Palatino Linotype",Georgia,serif;
}

</style>
</head>
<body>

  <div id="header">
    <div id="container">
      <div id="column1">Header 1</div>
      <div id="column2">Header 2</div>
      <div id="column3">Header 3</div>
    </div>
  </div>

  <div id="container">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
  </div>

  <div id="footer">
    <div id="container">
      <div id="column1">Footer 1</div>
      <div id="column2">Footer 2</div>
      <div id="column3">Footer 3</div>
    </div>
  </div>

</body>
</html>

How to send both HTML and text emails with PHP and PHPMailer

Tagged send, email, smtp, php, phpmailer, html  Languages php

This is an example on how to use PHPMailer to send an HTML email. It also shows how to include a text only version of the same email for clients, such as mutt, that don't support HTML emails.

$mail = new PHPMailer();

$mail->IsHTML(true);
$mail->CharSet = "text/html; charset=UTF-8;";
$mail->IsSMTP();

$mail->WordWrap = 80;
$mail->Host = "smtp.thehost.com"; 
$mail->SMTPAuth = false;

$mail->From = $from;
$mail->FromName = $from; // First name, last name
$mail->AddAddress($to, "First name last name");
#$mail->AddReplyTo("reply@thehost.com", "Reply to address");

$mail->Subject =  $subject;
$mail->Body =  $htmlMessage; 
$mail->AltBody  =  $textMessage;    # This automatically sets the email to multipart/alternative. This body can be read by mail clients that do not have HTML email capability such as mutt.

if(!$mail->Send())
{
  throw new Exception("Mailer Error: " . $mail->ErrorInfo);
}

How to make rounded buttons with the button element

Tagged button, element, css, html, rounded  Languages html

25 pixel high buttons at your service:

button { 
    border: 0; 
    padding: 0;
    font-variant: small-caps;
    height:25px;
    background: transparent url('../images/button-background-left.png') no-repeat;
    cursor: pointer;
    text-align: center; 
}

button span { 
    font-family: georgia,serif;
    line-height: 25px;
    background: transparent url('../images/button-background.png') no-repeat top right;
    position:relative; 
    display:block; 
    white-space:nowrap; 
    margin-top: -2px;
    padding:0 15px; 
}

HTML:

<button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

References

How to remove text between a tag from XML or HTML with SED

Tagged sed, html, xml, xmlstarlet  Languages bash

This will remove the users tag and everything in between the users tag:

sed -i .bak '/<users type="array">/,/<\/users>/d' users.xml

A backup will be created named users.xml.bak.

If you want to select only specific tags use this:

sed -n -e '/<private-parts>/,/<\/private-parts>/p' e users.xml

For more advanced XML processing use: * XMLStarlet * xml-coreutiles * xml2/2xml * Your imagination.

How to edit HTML inline in Google Chrome

Tagged html, edit, chrome  Languages 

How to edit HTML inline in Google Chrome:

# open the Chrome console # click on the Elements pane # select the html or body element # click on the Console pane # execute this snippet in the Console pane

$0.contentEditable = true

Congratulations, you can now edit the text by first clicking on it.

Validating HTML with validator.w3.org and Ruby

Tagged ruby, w3, validate, html  Languages ruby
require "net/http"

def validate(html)
  response = Net::HTTP.start("validator.w3.org") do |r|
    query = "output=json&fragment=" + CGI.escape(html)
    r.post2("/check", query)
  end
  if "Invalid" == response["x-w3c-validator-status"]
    File.open('/tmp/html-validation.html', 'w') { |f| f << html }
    JSON.parse(response.body)
  end
end

# List all validation errors
html = File.read('/tmp/html-validation.html')
if errors = validate(html)
  puts errors
end

How to draw centered text on an HTML canvas

Tagged html, canvas, centered, pixelratio  Languages javascript

Draw centered text on an HTML canvas:

canvas = ...
// Device dependent pixel ratio, also changes when zooming
pixelRatio = window.devicePixelRatio || 1
// Centered text
ctx.textAlign = "center"
ctx.textBaseline = "middle"
// Font size
fontSize = 20
// Adaptive bold font
ctx.font = 'bold ' + Math.round(fontSize/pixelRatio) + 'px Oswald'
// Measure text width
textRect = ctx.measureText(text)
// Figure out where to position the text
x = (canvas.width / 2) / pixelRatio
y = ((canvas.height / 2) - (fontSize*2)) / pixelRatio
// Draw the text
ctx.fillText("Hello world" , x, y)

The code adapts the font size and text position to fit the selected zoom level (e.g. 200%) and the current device (e.g. mobile).

Unescaping HTML entities in Ruby

Tagged html, entities, unescape  Languages ruby

Example of how to unescape HTML entities and convert them to text with Nokogiri:

Nokogiri::HTML.fragment(’&copy;&nbsp;&auml;&ouml;') => © äö

There's also the html-entities ruby gem.

How to fix 80% of IE browser issues

Tagged bug, html, ie, internet explorer, compatibility  Languages 

Tell IE to use standards mode, not quirks mode

Define your doctype in your HTML:

<!DOCTYPE> element

See: https://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

Tell IE to not use compatibility mode

This prevents, for example, IE 11 from using IE 7 rendering mode which can happen for many reasons.

If you can’t add an HTTP header, then add this to your HTML and pray that it helps:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE is using a compatibility mode if you see “compatible; MSIE” in the user agent header:

"Mozilla/4.0 (compatible; MSIE 7.0;"

See:

Validate your HTML and CSS

https://validator.w3.org/

Use an IE hack

Try “zoom” or “!important”.