If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.
[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]
Recently, I needed to search all URLs in a document in Dreamweaver and wrap them with <a> tags to turn them into links. The URLs themselves would be the text to click on. In Dreamweaver, you can use regular expressions and capture matches for use in replacements as follows:
[cc lang=”html”]SEARCH: ((https?|ftp|file)://S+)
REPLACE: $1[/cc]
Notice I wrapped the SEARCH regex with parentheses ( ) to capture that match and use it in the REPLACE using $1. If I had more parentheses to capture other matches, I could use them in the REPLACE using $2, $3, and so on.
Make sure you have “Regular Expressions” checked when you do this.
I’ve begun to start using console.log() to display variable values in Firebug’s console window to help with debugging. After everything was working in Firefox and Chrome, I noticed my javascript wasnt’ working at all in IE. Turns out IE doesn’t support console.log().
Reminder to self: Comment out all “console.log()” references before deploying.
This is the 2nd time I’ve come across this. Hopefully I won’t have to five more times before it sticks.
If you’d like to specify your own list bullets using images or special characters, here’s one way to do it. In your CSS, add the following code which removes the default list style, adds a small black right-pointing triangle and a space before your list content, and colors lists items.
[cc lang=”css”]ol,ul{
list-style:none;
}
ul li:before {
content:”25B8 020″;
}
ul li {
color:#0066cc;
}[/cc] Continue reading Custom CSS List Bullets Using :before and content
If you’d like to use a font in your website that isn’t already included on most computers, you can import them using @font-face in your CSS. In the following example, I’m importing the Lucida Grande font. The first block is for the normal font weight and the second is for bold. If a visitor already has the Lucida Grande font on their computer, the website will automatically use it instead of download the fonts from ../fonts into their browser’s cache. This is done by specifying the “local” commands. Continue reading Importing / Using Non-Standard Fonts in a Website
Sometimes, when you’re adding text to a web page, especially in a foreign language line French, you may encounter a bunch of accented characters that will show up as garbage in your browser unless you convert them to HTML character entities.
For example, the word Iñtërnâtiônàlizætiøn would be converted to Iñtërnâtiônàlizætiøn for safe display in all browsers.
Here are some web based tools that can automate this process for you.
Here’s a quick and simple way to minify all your website’s code on-demand to improve website performance. Pass all of your website’s code into a function that strips out unnecessary stuff as follows:
[cc lang=”php”]/* remove all single line javascript comments */
/* replace all white spaces with a single space */
/* remove all multiline javascript and css comments */
/* remove all HTML comments */
$pattern = array(‘/s+//[[:print:]]+/’, ‘/s+/’, ‘//*.*?*//’, ‘/<!–.*?–>/’);
$replacement = array(”, ‘ ‘, ”, ”);
$minifiedcode = preg_replace($pattern, $replacement, $unminifiedcode);
[/cc]
WARNING: If your javascript is not well-coded (e.g. missing semi-colons), then you may get an error until you fix them.
When styling hyperlinks, there are some rules you need to follow:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When creating a new website from a Photoshop design, you may find yourself needing to convert between pt to px. Here’s a formula for making the conversion:
font size in pixels / font size in points = browser dpi (96) / Photoshop image resolution (ppi or points per inch)
So, if you have a Photoshop image with 13pt font at 72 ppi, the corresponding font size in pixels for display in a web browser is Continue reading Convert Photoshop Font Point (Pt) to Pixels (Px)
Sometimes, you may start to see a PHP error complaining about headers already being sent so headers can’t be modified. This usually happens when you echo content and then called the header() function. While those are easy to fix, some others arent, like when PHP complains about output already being sent on LINE 1 when you know there’s nothing on line 1 except “<?php”. Following is an example error
[cc lang=”html”]====================================
PHP WARNING
====================================
PHP Warning: Cannot modify header information – headers already sent by (output started at /home/www/abcde.php:1) in /home/www/def.php on line 90[/cc]
Continue reading FIX: PHP Cannot modify header information – headers already sent (line:1)
