I was recently asked to help on a website which had been designed using the foundation framework. Naturally, I had to sift through lots of code to find how the site actually worked, but it's not a bad framework. One of the requirements was to create a message alert only when a text string had been passed to the page.
Below is an example of how I did it using PHP. There are 2 elements highlighted in red. Crucial code which was not highlighted in the online documentation. Code which I have added to do the job.
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" ><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation test</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div id="myModal" class="reveal-modal">
<h2>Alert!</h2>
<?php
echo '<p>'.urldecode($_GET['message']).'</p>';
?>
<a class="close-reveal-modal">×</a>
</div>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
<?php
if(isset($_GET['message']))
{
?>
$('#myModal').foundation('reveal', 'open');
<?php
}
?>
</script>
</body>
</html>
Showing posts with label onload. Show all posts
Showing posts with label onload. Show all posts
Wednesday, 3 July 2013
Subscribe to:
Posts (Atom)