I can't take credit for this. Credit must go to Soh Tanaka for this blog post
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 1</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 2</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
Wednesday, 13 October 2010
Tuesday, 12 October 2010
Put external web content into your page using jQuery and PHP
I looked into using the jQuery .load and .get methods to do this, but it only seemed to work with content on my server. I knew that PHP had a really good function called file_get_contents, so I thought, I'll use that, but jQuery is still good for putting the contents into your page. Here is an example of how they work together to achieve the goal.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
Monday, 11 October 2010
jQuery Functions and Toggle
Below are a few examples of how to create functions in jQuery. Th real beauty lies in the fact that you can create your own library of functions in an external file. You should try and make them as flexible as possible.
See demo.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>jQuery Functions</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myToggleClass
{
background:#FF0000;
font-size:2em;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
/* Functions are declared here */
$.fn.firstWithoutParameters = function()
{
alert('Without parameters');
}
$.fn.secondWithParameters = function(param)
{
alert('With parameter of '+param);
}
$.fn.grow = function()
{
return $(this).css('font-size','2em');
}
$.fn.growSlowly = function()
{
return $(this).animate(
{
fontSize:'2em'
}, 1500 );
}
$.fn.doTheToggle = function()
{
return $(this).toggleClass('myToggleClass');
}
/* Functions are called here */
$(document).ready(function()
{
$('#first').click(function()
{
$(this).firstWithoutParameters();
});
$('#second').click(function()
{
$(this).secondWithParameters('Jimmy');
});
$('#third').click(function()
{
$(this).grow();
});
$('#fourth').click(function()
{
$(this).growSlowly();
});
$('#fifth').click(function()
{
$(this).doTheToggle();
});
});
</script>
</head>
<body>
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
<p id="fourth">fourth</p>
<p id="fifth">fifth</p>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>jQuery Functions</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myToggleClass
{
background:#FF0000;
font-size:2em;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
/* Functions are declared here */
$.fn.firstWithoutParameters = function()
{
alert('Without parameters');
}
$.fn.secondWithParameters = function(param)
{
alert('With parameter of '+param);
}
$.fn.grow = function()
{
return $(this).css('font-size','2em');
}
$.fn.growSlowly = function()
{
return $(this).animate(
{
fontSize:'2em'
}, 1500 );
}
$.fn.doTheToggle = function()
{
return $(this).toggleClass('myToggleClass');
}
/* Functions are called here */
$(document).ready(function()
{
$('#first').click(function()
{
$(this).firstWithoutParameters();
});
$('#second').click(function()
{
$(this).secondWithParameters('Jimmy');
});
$('#third').click(function()
{
$(this).grow();
});
$('#fourth').click(function()
{
$(this).growSlowly();
});
$('#fifth').click(function()
{
$(this).doTheToggle();
});
});
</script>
</head>
<body>
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
<p id="fourth">fourth</p>
<p id="fifth">fifth</p>
</body>
</html>
Friday, 1 October 2010
Send a file attachment and send as an e-mail in PHP
This is not the full story. First you need a form to collect the data and put it in a field (in this case) called myValue.
This piece of code takes the field contents, creates a text file and sends it.
<?php
$filetitle = "testFile.txt";
$data = $_POST["myValue"]);
$to = 'jimmy@googlemail.com';
$subject = 'My subject';
$filetype = "text/plain";
$email_from = "jammy@googlemail.com";
$headers = "From: ".$email_from;
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$headers .= "\nMIME-Version: 1.0\n" .
"Content-Type: multipart/mixed;\n" .
" boundary=\"{$mime_boundary}\"";
$email_message .= "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type:text/html; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$email_message . "\n\n";
$data = chunk_split(base64_encode($data));
$email_message .= "--{$mime_boundary}\n" .
"Content-Type: {$filetype};\n" .
" name=\"{$filetitle}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n" .
"--{$mime_boundary}--\n";
$ok = @mail($to, $subject, $email_message, $headers);
if($ok)
{
echo "It worked";
}
else
{
die("It failed");
}
?>
<?php
$filetitle = "testFile.txt";
$data = $_POST["myValue"]);
$to = 'jimmy@googlemail.com';
$subject = 'My subject';
$filetype = "text/plain";
$email_from = "jammy@googlemail.com";
$headers = "From: ".$email_from;
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$headers .= "\nMIME-Version: 1.0\n" .
"Content-Type: multipart/mixed;\n" .
" boundary=\"{$mime_boundary}\"";
$email_message .= "This is a multi-part message in MIME format.\n\n" .
"--{$mime_boundary}\n" .
"Content-Type:text/html; charset=\"iso-8859-1\"\n" .
"Content-Transfer-Encoding: 7bit\n\n" .
$email_message . "\n\n";
$data = chunk_split(base64_encode($data));
$email_message .= "--{$mime_boundary}\n" .
"Content-Type: {$filetype};\n" .
" name=\"{$filetitle}\"\n" .
"Content-Transfer-Encoding: base64\n\n" .
$data . "\n\n" .
"--{$mime_boundary}--\n";
$ok = @mail($to, $subject, $email_message, $headers);
if($ok)
{
echo "It worked";
}
else
{
die("It failed");
}
?>
Send Form information to PHP through jQuery
"Why would I do this?", I hear you ask. The answer is simple, by sending information through jQuery you open yourself up to losing browser refresh and a better UI. There are 2 files in this example:
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.
See demo.
Let's start with the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</title>
<style type="text/css">
html, body
{
font-family:sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#sendTheData').click(function()
{
$.post("sendThedata.php",
{
myValue:$('#lname').val()
}, function(data)
{
alert(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>
Now for the PHP file:
<?php
echo 'Got '.$_POST['myValue'];
?>
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.
See demo.
Let's start with the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</title>
<style type="text/css">
html, body
{
font-family:sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#sendTheData').click(function()
{
$.post("sendThedata.php",
{
myValue:$('#lname').val()
}, function(data)
{
alert(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>
Now for the PHP file:
<?php
echo 'Got '.$_POST['myValue'];
?>
Wednesday, 29 September 2010
Using jQuery Dialog as a lightbox
Your first thought may be "Why?".
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.
Also, like many of my examples, the code is now easily transferable.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.
Also, like many of my examples, the code is now easily transferable.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>
Tuesday, 28 September 2010
Panel Slider
The example below uses the excellent Coda-Slider by Niall Doherty at http://www.ndoherty.biz/tag/coda-slider/
All I have done is simplified the implementation, making it easy to begin using the code.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{
overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
All I have done is simplified the implementation, making it easy to begin using the code.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{
overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Subscribe to:
Comments (Atom)