Mick Redman: drop

Showing posts with label drop. Show all posts

Thursday, 11 July 2013

Cross browser box shadows (yet again)

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);
}

Wednesday, 15 September 2010

Drop down menu using jQuery

This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});

$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Friday, 3 September 2010

jQuery Drag and Drop

The example below is based largely on a demonstration at : http://jqueryui.com/demos/droppable/
I've just tidied it up, and added a couple of things which make it possible for you to copy and paste. It's so simple, even I understood it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#draggable, #droppable
{
border:1px solid #CCCCCC;
padding:0.5em;
float:left;
}
#draggable
{
width:100px;
height:100px;
margin:10px 10px 10px 0;
}
#droppable
{
width:150px;
height:150px;
margin: 10px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$(function()
{
$("#draggable").draggable();
$("#droppable").droppable(
{
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
},
over: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Over!');
},
out: function(event, ui)
{
$(this).addClass('ui-state-highlight').find('p').html('Out!');
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
</body>
</html>