-
Notifications
You must be signed in to change notification settings - Fork 0
/
untitleds.html
119 lines (97 loc) · 5.49 KB
/
untitleds.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Reinventing drop down with CSS and jQuery - demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
select {display: none;}
.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:160px; padding:5px;}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
var $dd = jQuery.noConflict();
$dd(document).ready(function() {
createDropDown();
$dd(".selectwrap .dropdown dt a").click(function() {
//inside select wrapper only toggle ul inside wrapper
$dd(this).parent().parent().find("dd ul").toggle();
});
$dd(document).bind('click', function(e) {
var $ddclicked = $dd(e.target);
//if you click and the parent does not have dropdown then
if (! $ddclicked.parents().hasClass("dropdown"))
$dd(".dropdown dd ul").hide();
});
$dd(".dropdown dd ul li a").click(function() {
var text = $dd(this).html();
var selfie = $dd(this).closest(".dropdown").attr('class').split(' ')[1];
$dd('.dropdown.' + selfie + ' dt a').html(text);
$dd('.dropdown.' + selfie + ' dd ul').hide();
var source = $dd('select#' + selfie);
source.val($dd(this).find("span.value").html())
});
});
function createDropDown(){
$dd("select").each(function() {
var source = $dd(this);
var selected = source.find("option[selected]");
var options = $dd("option", source);
var self = $dd(this).attr('id');
$dd(this).wrap( '<div class="selectwrap ' + self + '"></div>')
$dd(this).after('<dl class="dropdown ' + self + '"></dl>')
$dd('.dropdown.' + self).append('<dt><a href="#">' + selected.text() +
'<span class="value">' + selected.val() +
'</span></a></dt>')
$dd('.dropdown.' + self).append('<dd><ul></ul></dd>')
options.each(function(){
$dd('.dropdown.' + self + ' dd ul').append('<li><a href="#">' +
$dd(this).text() + '<span class="value">' +
$dd(this).val() + '</span></a></li>');
});
});
}
</script>
</head>
<body>
<h1>JankoAtWarpSpeed demos</h1>
<h3>Demo no 2 for tutorial: <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx">Reinventing drop down with CSS and jQuery</a></h3>
<p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally .</p>
<select id="color">
<option value="BR">Brasil</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
<option selected="selected" value="JP">Japan</option>
<option value="RS">Serbia</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
</select>
<select id="weight">
<option selected="selected" value="BR">Brasil</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
<option value="JP">Japan</option>
<option value="RS">Serbia</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
</select>
<object type="application/x-shockwave-flash" style="outline:none;" data="fish.swf?up_fishName=Fish&up_backgroundColor=000000&up_backgroundRepeat=repeat&up_foodColor=FFAC12&up_fishColor=ffffff&up_numFish=20&up_fishColor1=ffffff&up_fishColor2=333333&up_fishColor3=333333&up_fishColor4=333333&up_fishColor5=333333&up_fishColor6=333333&up_fishColor7=333333&up_fishColor8=333333&up_fishColor9=333333&up_fishColor10=333333" width="100%" height="593"><param name="movie" value="fish.swf?up_fishName=Fish&up_backgroundColor=000000
</body>
</html>