Mick Redman: button

Showing posts with label button. Show all posts

Monday, 17 June 2013

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>

Wednesday, 2 March 2011

Nice CSS button

This demonstration relies upon css3pie in order to work in IE. You can get it at http://css3pie.com/
I have tried to use gradients and box shadow to a cool effect.
It seems like a lot of code for a button, but as it's a class, you can create many buttons on the same page with it.
Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoM KI Box</title>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{

});
</script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
.greenButton
{
float:left;
margin:1em;
}
.greenButton .outer, .greenButton .inner, .greenButton .outer:hover, .greenButton .inner:hover
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.greenButton .outer, .greenButton .outer:hover
{
width:8em;
height:8em;
padding-top:0.2em;
padding-left:0.2em;
}
.greenButton .inner, .greenButton .inner:hover
{
border-radius:0.5em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
width:7.8em;
height:5.8em;
padding-top:2em;
text-align:center;
}
.greenButton .outer, .greenButton .outer:hover
{
box-shadow:0 0 0.8em #CCCCCC;
-moz-box-shadow:0 0 0.8em #CCCCCC;
-webkit-box-shadow:0 0 0.8em #CCCCCC;
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
}
.greenButton .outer
{
background-image:-moz-linear-gradient(90deg, #64cc00, #8DE639);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#64cc00), to(#8DE639));
-pie-background:linear-gradient(90deg, #8DE639, #64cc00);
}
.greenButton .inner
{
background-image:-moz-linear-gradient(90deg, #8DE639, #64cc00);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DE639), to(#64cc00));
-pie-background:linear-gradient(90deg, #64cc00, #8DE639);
}
.greenButton .outer:hover
{
background-image:-moz-linear-gradient(90deg, #C80043, #E33972);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#C80043), to(#E33972));
-pie-background:linear-gradient(90deg, #E33972, #C80043);
}
.greenButton .inner:hover
{
background-image:-moz-linear-gradient(90deg, #E33972, #C80043);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E33972), to(#C80043));
-pie-background:linear-gradient(90deg, #C80043, #E33972);
}
.greenButton a, .greenButton a:link, .greenButton a:hover, .greenButton a:visited, .greenButton a:active
{
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<section id="mainContent">
<figure class="greenButton">
<section class="outer">
<section class="inner">
<a href="getPageContext.php">Get<br />Page<br />Context</a>
</section>
</section>
</figure>
</section>
</body>
</html>

Monday, 10 January 2011

jQuery Radio Buttons

Happy New Year!
It took me about 20 minutes to work out how to use radio buttons with jQuery. The examples I found were a bit rubbish, so I thought I would share this code with you to save everyone the time.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Radio Buttons</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>
$(function ()
{
$("input[name='radioTest']").change(
function()
{
if($(this).val()=='yes')
{
alert('Yes');
}
else
{
alert('No');
}
});
});
</script>
</head>
<body>
Try this radio button<br />
Yes<input name="radioTest" type="radio" value="yes">
No<input name="radioTest" type="radio" value="no">
</body>
</html>