Tag Archive for xhtml

XHTML válido para adicionar Flash

<object id="" type="application/x-shockwave-flash" data="file.swf" width="300" height="250">
<param name="movie" value="file.swf" />
<param name="wmode" value="transparent" />
</object>

source

jQuery External Link Snippet for XHTML Strict 1.0

<script type="text/javascript">
	$(document).ready(function(){
		$('a[rel="external"]').click(function(){ // When a link with rel="external"is clicked ...
			window.open( $(this).attr('href') ); // ... open a new window using the link's href attribute ...
					
			return false; // ... and prevent the default browser functionality (opening the link in the same window).
		})
	})
</script>

source

jQuery Plugin to Truncate text based on width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">" >http://www.w3.org/1999/xhtml"></a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Truncate by Width Plugin</title>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"" >http://code.jquery.com/jquery-latest.min.js"</a> type="text/javascript"></script>
<script type="text/javascript">

//////////////////////////// this part is the plugin, copy into a seperate document if you wish ////////////////////////////////
(function($){
 $.fn.extend({
 
 	widthTruncate: function(options) {
		var defaults = {
			width: 'auto',
			after: '...'
		};
		
	  var options = $.extend(defaults, options);
	  
	  return this.each(function() {
	  if(options.width=='auto'){ truncateWidth=$(this).width()-8; }else{ truncateWidth = options.width}
			 if($(this).width()>truncateWidth){		 
			 var smaller_text = $(this).text();
			 $(this).html('<span id="truncateWrapper" style="display:inline;">'+options.after+'</div>');
			 		i=1;
			         while ($('#truncateWrapper').width() < truncateWidth) {
						$('#truncateWrapper').html(smaller_text.substr(0, i) + options.after);
						i++;
					}
					$(this).html($('#truncateWrapper').html());
			}
		
	  });
	  
	}

 });
})(jQuery);
//////////////////////////// end plugin ////////////////////////////////

//////////////////////////// initiate the plugin ////////////////////////////////
$(document).ready(function(){
	$('.autoTruncate').widthTruncate(); //by default, it will truncate to its initial width
	$('.truncateMe').widthTruncate({width:400}); // you can override by passing in your own width
});
</script>

<style type="text/css">
	/*some example styling... you can remove this*/
	body{ font:22px Arial, Helvetica, sans-serif;}
	#myParagraphs{width:700px; padding:28px; background-color:#99CCFF; }
</style>
	
</head>

<body>
<div id="myParagraphs">

<p class="autoTruncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

<p class="truncateMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

</div>

</body>
</html>

source

Cross-Browser Self-Clearing Float Containers using CSS

.container{ zoom:1; overflow:auto; }

source

HTML 携帯 Docomo XHTML 1.0 ヘッダ Table不可インラインのみ

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"" >http://www.w3.org/1999/xhtml"</a> xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>docomo css</title>
</head>

source

Quick PHP Menu

1a. Make a folder for your new project (like php_menu or something) We will be making master.css, index.php, and body.php

;[FOLDER TREE]:

[HOST FOLDER]
-->inc [
--->body.php
]
-->css [
--->master.css
--->reset.css
]
-> index.php

2. Open your IDE, I'm using PHP Designer, but you can definitely use notepad, or some IDE like notepad++.

3. Create a new PHP Document, save it as index.php


[PHP for step 3]

[index.php]
<?php
require_once "inc/body.php";
?>


4. Create a new XHTML 1.01 transitional document. Enter the code from below


[HTML for step 4]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xht......dtd">" >http://www.w3.org/TR/xhtml1/DTD/xht......dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">" >http://www.w3.org/1999/xhtml"></a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Menu</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Header Start --><div id="header">
<h1>xTraCD: Quick PHP / XHTML / CSS Menu</h1>
<!-- Navbar Start --><ul id="navbar">

<?php
/** We will put code here next */
?>
<!-- Navbar Start --></ul>
<!-- Header Start --></div>
</body>
</html>



save it as body.php

5. The PHP code needed (goes in body.php in the <?php ?> tags

[PHP for step 5]

<?php
$menu_items = array("home", "about", "art", "gallery", "contact"); // Menu items array

// Now we make the menu constructor
// with a foreach loop

foreach ($menu_items as $menu_listing) // for each menu_item, call it menu_listing
{
echo "<li><a href='$menu_listing.php'>$menu_listing</a></li> 
";
// put out a list tag, with a link tag going to the "menu item".php, end it
// and then make a new line.
};

// Loop ends here

?>



6. Now go to <a href="http://yourtestingaddress/php_menu" >http://yourtestingaddress/php_menu</a>
(ie. Mine is <a href="http://localhost/teaching_projects/php_menu)" >http://localhost/teaching_projects/php_menu)</a>

you should see a list like this:
(# signs are bullet marks)
# home
# about
# art
# gallery
# contact

if not, check your code.

7. Styling the list.

Make a new CSS Document. Enter in the following code:

[css for step 6]

@charset "utf-8";
/* PHP List style */

body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:10pt;
}

#header {
height:105px;
width:1000px;
margin:0 auto;
border:1px solid #c0c0c0;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}
#header h1 {
padding-top:30px;
padding-left:15px;
}

#navbar {
display:block;
position:relative;
width:1000px;
height:40px;
margin:0 auto;
margin-top:18px;
margin-left:-1px;
padding:0;
background-color:#eaeaea;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border:1px solid #c0c0c0;
text-align:center;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#navbar li a {
margin-left:80px;
display:block;
height:26px;
width:100px;
float:left;
background-color:#ccc;
margin:5px;
padding-top:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
border:1px solid #c0c0c0;
color:#333;
font-size:10pt;
text-decoration:none;
}

#navbar li a:hover {
background-color:#aaa;
color:#111;
}

source

XHTML 1 Strict Complete Starter Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml"" >http://www.w3.org/1999/xhtml"</a> xml:lang="en" lang="en">
<head>
<title>SITENAME</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="SITENAME Updates" href="" />
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>" >http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></a>
<script type="text/javascript" src=""></script>
<script type="text/javascript" charset="utf-8">
$(function(){
});
</script>
</head>
<body>
<div id="wrapper">
  <h1>SITENAME</h1>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "<a href="https://ssl."" >https://ssl."</a> : "<a href="http://www.");" >http://www.");</a>
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("YOUR-UA-GOES-HERE");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

source

Clean / Indent XHTML Document

function clean_xhtml($string, $keep_tags = null) {

	if (!$keep_tags) {
		$keep_regexp = '~<script[^>]*>.*?</script>|<pre[^>]*>.*?</pre>|<textarea[^>]*>.*?</textarea>~s';
	}

	// replace 
 with 

	$string = preg_replace('~
~m', "
", $string);

	// replace 
 with 

	$string = preg_replace('~
~m', "
", $string);
	
	// remove whitespace from the beginnig
	$string = preg_replace('~^s+~s', '', $string);

	// remove whitespace from the end
	$string = preg_replace('~s+$~s', '', $string);

	// store all tag which should remain the same
	preg_match_all($keep_regexp, $string, $original_tags);

	// remove whitespace from the beginning of each line
	$string = preg_replace('~^s+~m', '', $string);

	// remove whitespace from the end of each line
	$string = preg_replace('~s+$~m', '', $string);

	// removes empty lines
	$string = preg_replace('~
s*
~ms', "
", $string);

	// removes line breaks inside normal text
	$string = preg_replace('~([^>s])(ss+|
)([^<s])~m', '$1 $3', $string);

	// correct indention
	$indent = 0;
	$string = explode("
", $string);
	foreach ($string as &$line) {
		$correction = intval(substr($line, 0, 2) == '</'); // correct indention, if line starts with closing tag
		$line = str_repeat("	", $indent - $correction).$line;
		$indent += substr_count($line, '<'); // indent every tag
		$indent -= substr_count($line, '<!'); // subtract doctype declaration
		$indent -= substr_count($line, '<?'); // subtract processing instructions
		$indent -= substr_count($line, '/>'); // subtract self closing tags
		$indent -= substr_count($line, '</') * 2; // subtract closing tags
	}
	$string = implode("
", $string);

	// fetch all tag which could been changed
	preg_match_all($keep_regexp, $string, $current_tags);

	// restore all stored tags
	foreach ($current_tags[0] as $key => $match) {
		$string = str_replace($match, $original_tags[0][$key], $string);
	}

	return $string;

}

source

XHTML 1.0 Template content footer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a>
<html xmlns="<a href="http://www.w3.org/1999/xhtml"" >http://www.w3.org/1999/xhtml"</a> xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="reset.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

	<div id="wrapper">
	
		<div id="header">
			
			<div id="nav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</div>
			
		</div><!-- END header -->
	
	
		<div id="contentWrapper">
		
			<div id="content">
				<h1>Here goes the title<h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat pretium congue. Etiam tincidunt, arcu ut tempus molestie, massa felis molestie ipsum, eu dictum nibh tellus id mauris. Nunc ac enim augue. Vestibulum aliquet viverra arcu in vehicula. Integer convallis metus nec augue commodo porta tristique sapien malesuada. Aenean molestie ornare consequat. Ut lacinia nisi ut leo ultrices eu adipiscing nibh interdum. Ut ac diam id lorem tempor sollicitudin. Nulla et ligula at tortor mattis scelerisque. Maecenas eget neque eget leo viverra pulvinar. Maecenas ut justo enim, ac suscipit mi. Nam vel eros sit amet orci laoreet fringilla. Nunc posuere urna eu libero ultrices varius. Integer ultricies suscipit tristique. Mauris consequat fringilla nibh eget tristique.</p>
			</div><!-- END content -->
			
			<div id="modules">
				
				<div class="moduleWrapper">
					<div id="moduleHeader">
						<h2>Module Title</h2>
					</div><!-- END moduleHeader -->
					<div id="moduleContent">
					
						<!-- #### MODULE CONTENT HERE #### -->
						
					</div><!-- END MODULECONTENT -->
				</div><!-- END moduleWrapper -->
				
			</div><!-- END modules -->
			
		</div><!-- END CONTENTWRAPPER -->
	
	
		<div id="footerWrapper">
			<div id="footer">
			</div><!-- END FOOTER -->
		</div><!-- END FOOTERWRAPPER -->
		
	</div><!-- END WRAPPER -->

</body>
</html>

source

Pound Sign in XSLT

<xsl:text disable-output-escaping="yes"><![CDATA[&#163;]]></xsl:text>

source