A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect. This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.
.container
{
margin-top:20px;
box-shadow:3px 3px 10px 5px #666666;
-moz-box-shadow:3px 3px 10px 5px #666666;
-webkit-box-shadow:3px 3px 10px 5px #666666;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}
Thursday 11 July 2013
Wednesday 3 July 2013
Onload alerts with foundation.js
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>
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>
Wednesday 26 June 2013
At last the HTML5 main element
For those of us who've been using HTML5 for a long time, it's been a bit frustrating to step back to those old divs. Now we finally have the element we've been waiting for <main>. Now look at our page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1>This is the header</h1>
</header>
<main>
<p>The main content</p>
</main>
<footer>Copyright mine</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1>This is the header</h1>
</header>
<main>
<p>The main content</p>
</main>
<footer>Copyright mine</footer>
</body>
</html>
Monday 17 June 2013
Your first jQuery plugin
Here is a quick tutorial in how to create a jQuery plugin. Below is my basic page with a call to:
A file called 'first.plugin.js' containing the plugin (in red).
A call to a method called 'changetored' within that plugin (in blue).
<!DOCTYPE html>
<html lang="en">
<head>
<title>First jquery plugin test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
<!-- Call the plugin -->
<script src="first.plugin.js"></script>
<script>
(function()
{
/*
* changetored is a method declared in first.plugin.js
*/
$('p').changetored();
})();
</script>
</html>
Now for the plugin. Here is the file 'first.plugin.js'.
(function($)
{
$.fn.changetored = function()
{
/*
* In the context of a call like $('p').changetored();
* $(this) would become all paragraphs
*/
$(this).addClass('red');
};
})(jQuery);
A file called 'first.plugin.js' containing the plugin (in red).
A call to a method called 'changetored' within that plugin (in blue).
<!DOCTYPE html>
<html lang="en">
<head>
<title>First jquery plugin test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
<!-- Call the plugin -->
<script src="first.plugin.js"></script>
<script>
(function()
{
/*
* changetored is a method declared in first.plugin.js
*/
$('p').changetored();
})();
</script>
</html>
Now for the plugin. Here is the file 'first.plugin.js'.
(function($)
{
$.fn.changetored = function()
{
/*
* In the context of a call like $('p').changetored();
* $(this) would become all paragraphs
*/
$(this).addClass('red');
};
})(jQuery);
Catching browser buttons
I was recently putting together an application. My test user did something I wasn't expecting. Rather than using the buttons within the application, he went for the browser buttons. It prompted me to provide a warning for the user that the application wouldn't work so well if he did this. See code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;
$('a').click(function()
{
catchBrowser = false;
});
$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;
$('a').click(function()
{
catchBrowser = false;
});
$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>
Wednesday 12 June 2013
Removing Twitter Bootstrap modal link outlines
Developers who use Twitter Bootstrap may have noticed a problem when they use the navigation controls to launch a modal. This could be a link at the top which launches a contact form for example. The problem is, that an outline to the link is left behind. I've seen a few 'solutions' to this on the web. None of which worked for me, because they were CSS solutions and the outline is created using JavaScript. So, here's what a link required to launch a modal looks like:
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:
<div id="myModal" class="modal hide fade" role="dialog">
<p>Hello</p>
<button class="btn btn-primary">Save</button>
</div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:
(function()
{
$('a').data('toggle','modal').click(function()
{
$(this).css(
{
'outline':'none'
});
});
})();
Good luck.
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:
<div id="myModal" class="modal hide fade" role="dialog">
<p>Hello</p>
<button class="btn btn-primary">Save</button>
</div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:
(function()
{
$('a').data('toggle','modal').click(function()
{
$(this).css(
{
'outline':'none'
});
});
})();
Good luck.
Wednesday 22 May 2013
Two lines of PHP code which will save your sessions
So you develop PHP applications and use sessions to move data from page to page. You may then also have the problem that session data is not retained, especially if you use a line of code like this:
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:
session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.
session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:
session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.
session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();
Subscribe to:
Posts (Atom)