There are quite a few useful pseudo selectors in CSS, but they don't all work in IE. You can overcome this problem using jQuery. Below are a few examples of how.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectors using jQuery</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
font-size:1em;
line-height:1.5em;
padding:1em;
}
h1, h2
{
margin-bottom:0.5em;
}
h1
{
font-size:2em;
}
h2
{
margin-top:0.5em;
font-size:1.5em;
}
#nth-child ul, #only-child ul, #last-child ul, #empty ul, #checked, #enabled, #disabled
{
width:30%;
border-bottom:0.2em dotted #CCCCCC;
}
#nth-child span, #only-child span, #last-child span, #empty span, #checked span, #not span
{
color:blue;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#nth-child ul li:nth-child(2)").append("<span> - 2nd!</span>");
$("#only-child ul li:only-child").append("<span> - only child</span>");
$("#last-child ul li:last-child").append("<span> - last child</span>");
$("#empty ul li:empty").append("<span>Empty</span>");
$("#checked form input:checked").append("<span> - checked</span>");
$("#enabled form input:enabled").val("I am enabled");
$("#disabled form input:disabled").val("I am disabled");
$("#not form input:not(:checked)").append("<span> - not checked</span>");
});
</script>
</head>
<body>
<h1>Selector test</h1>
<h2>nth-child</h2>
<section id="nth-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>only-child</h2>
<section id="only-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>last-child</h2>
<section id="last-child">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Sam</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>empty</h2>
<section id="empty">
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
<li>David</li>
</ul>
</section>
<h2>checked</h2>
<section id="checked">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
<h2>enabled</h2>
<section id="enabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>disabled</h2>
<section id="disabled">
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
<br />
</section>
<h2>not</h2>
<section id="not">
<form>
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" checked="checked" value="female" />Female
<input type="radio" name="sex" value="na" />Goodness knows
</form>
<br />
</section>
</body>
</html>
Friday 13 May 2011
Wednesday 11 May 2011
Lessons from the coal face
I've been having a few problems with css3pie lately, but it's not their fault. I really should have read the issues page. All I can say is, despite sizing using em everywhere else, use pixels with items using css3pie.
And on to improving my HTML template. There is an excellent template at http://html5boilerplate.com, but it's a bit too big for me and I also like to get as many updates as I can without physically going to get them.
It does however, contain this line of code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
And on to improving my HTML template. There is an excellent template at http://html5boilerplate.com, but it's a bit too big for me and I also like to get as many updates as I can without physically going to get them.
It does however, contain this line of code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It forces Internet Explorer to get the latest rendering engine, thus make your pages work more reliably in the terrible browser. Of course, if you asked most people which browser they use, they'll say Google or Facebook. That's where we are, so there's no point in being upset about them not using Chrome or Firefox.
And so here is my new standard HTML page. As soon as Google start hosting version 3 of Yui, I'll include that, but I can't be bothered to chase the version numbers at this stage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
});
</script>
</head>
<body>
<header><h1>Header 1</h1></header>
<section id="mainContent">
<p>Hello World!</p>
</section>
<footer>Footer</footer>
</body>
</html>
Tuesday 10 May 2011
How to add the .htc mime type to your Apache website
I have been updating my blog to include demo versions of the pages. A number of my blog entries include the use of css3pie which uses a file called PIE.htc to render css3 content in IE. Having stuck the demo pages on Effective Web Designs, I discovered that PIE.htc was not delivering the goods as it normally does.
After a bit of surfing, I found that it may be to do with not serving the .htc mime type. After a bit more surfing, I discovered that this could be achieved by setting the mime type within your .htaccess file, if you are using the only web server which matters (Apache).
This is the line you need for your .htaccess file.
AddType text/x-component .htc
I hope this also opens up all sorts of mime type possibilities to you.
After a bit of surfing, I found that it may be to do with not serving the .htc mime type. After a bit more surfing, I discovered that this could be achieved by setting the mime type within your .htaccess file, if you are using the only web server which matters (Apache).
This is the line you need for your .htaccess file.
AddType text/x-component .htc
I hope this also opens up all sorts of mime type possibilities to you.
Tuesday 3 May 2011
Rulers, Guides, Eye Dropper and Color Chrome extension
Back from our fabulous family holiday today. I have also been reading a little about design. It's proved quite interesting and I think I will continue and you will probably see some entries containing this new knowledge.
I have also made some progress with my own website, http://www.effectivewebdesigns.co.uk, including a mobile version which I am still perfecting. I haven't been able to develop the site for a while, but now I'm also going to use it to host some demo sites of the blog entries, so you will see them appearing first in older posts. then I'll gradually catch up.
I use Google Chrome most of the time. Then I test on IE and Opera. I came across this useful extension for Chrome, I hope you like it too.
I have also made some progress with my own website, http://www.effectivewebdesigns.co.uk, including a mobile version which I am still perfecting. I haven't been able to develop the site for a while, but now I'm also going to use it to host some demo sites of the blog entries, so you will see them appearing first in older posts. then I'll gradually catch up.
I use Google Chrome most of the time. Then I test on IE and Opera. I came across this useful extension for Chrome, I hope you like it too.
Monday 11 April 2011
YUI 3 Grids with HTML5
Here is a simple example of how to combine HTML5 layout tags with the YUI 3 Grid library (which is still in beta). It works cross-browser.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
margin: auto; /* center in viewport */
width: 960px;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
}
section p, footer p, img, hgroup
{
margin:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section class="yui3-u-1-2">
<p>Your image here</p>
</section>
<section class="yui3-u-1-2">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<footer class="yui3-u-1"><p>Your text here</p></footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
margin: auto; /* center in viewport */
width: 960px;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
}
section p, footer p, img, hgroup
{
margin:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section class="yui3-u-1-2">
<p>Your image here</p>
</section>
<section class="yui3-u-1-2">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<footer class="yui3-u-1"><p>Your text here</p></footer>
</body>
</html>
Wednesday 6 April 2011
Using YQL with PHP
I've just started to look into YQL. It looks very powerful but some of the videos an tutorials are a bit dry. There are some missing links which I'm hoping to expose in how to implement with PHP. It should be possible to use YQL for your applications very easily, but at the moment I'm finding my way around it. Part of the problem seems to be around not knowing the structure of the returned JSON before you have to present it. We'll see. Below is an example of calling some YQL on a single web page and displaying the paragraphs within it. I call a very simple PHP GET using CURL. Then I loop through the resulting JSON object until I reach the paragraphs.
Good luck!
<?php
$api = 'http://query.yahooapis.com/v1/public/yql?q=';
$query = 'select * from html where url="http://www.stream-idc.net/"';
$params = '&format=json';
$session = curl_init($api.urlencode($query).$params);
curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
$json = curl_exec($session);
curl_close($session);
$yqlObj = json_decode($json);
if(!is_null($yqlObj->query->results))
{
foreach($yqlObj->query->results->body->p as $bodyContent)
{
echo $bodyContent->{'content'};
}
}
?>
Good luck!
<?php
$api = 'http://query.yahooapis.com/v1/public/yql?q=';
$query = 'select * from html where url="http://www.stream-idc.net/"';
$params = '&format=json';
$session = curl_init($api.urlencode($query).$params);
curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
$json = curl_exec($session);
curl_close($session);
$yqlObj = json_decode($json);
if(!is_null($yqlObj->query->results))
{
foreach($yqlObj->query->results->body->p as $bodyContent)
{
echo $bodyContent->{'content'};
}
}
?>
Monday 4 April 2011
Hello jQuery Mobile
I've been a bit quiet on the blog front over the last week because I've been knee deep in stuff. One of the things I've been working with is jQuery Mobile. A real solution for me. I didn't want to re-learn Java to create Android apps. I certainly didn't want to learn Objective-C for iPhone apps. I do want to use all my existing web and PHP skills to develop apps for mobile devices. jQuery Mobile suits this perfectly.
It's only really in alpha at the moment and be prepared to reconfigure everything you're done as each version changes, but it's already looking very good.
Below is my Hello World! page using jQuery Mobile.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page">
Hello jQuery Mobile
</div>
</body>
</html>
It's only really in alpha at the moment and be prepared to reconfigure everything you're done as each version changes, but it's already looking very good.
Below is my Hello World! page using jQuery Mobile.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page">
Hello jQuery Mobile
</div>
</body>
</html>
Subscribe to:
Posts (Atom)