Just a bunch of code » template http://www.bunchacode.com Sun, 11 Sep 2011 19:56:09 +0000 en hourly 1 http://wordpress.org/?v=3.3 Cakephp custom dropdown menu/select element http://www.bunchacode.com/design/cakephp-custom-dropdown-menu-element/ http://www.bunchacode.com/design/cakephp-custom-dropdown-menu-element/#comments Tue, 07 Jul 2009 20:52:42 +0000 Funky Dude http://www.bunchacode.com/?p=107 [UPDATED to allow multiple instances]
[UPDATED bug fix]

Hello everyone. The select tag that comes with html is pretty useful, but once in a while, one of your clients complains that it’s fugly. So you need to make  a custom one. And that’s what i just did. Damned clients!

Requirements:

  • jquery

To do this you need to create a file called customSelect.ctp in your app/views/elements folder(Of course you don’t NEED cakephp to use this.).

And the content said file would be(This example is for a category select menu.):

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

<div class="customSelect">
<div class="selectLeft">
<div class="selectOptions" style="display:none;">$name){ ?></div>
<input class="selectInput" name="<?php echo $inputName;?>" type="hidden" /></div>
<div class="selectRight">
<div class="selectDropDownArrow"><img src="img/dropDownArrow.jpg" alt=">>" /></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[

$(document).ready(function(){
	//set the default item to show

	setSelectedOption('');
});
// ]]></script>

the javascript file, customSelect.js

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

$(document).ready(function(){
//capture clicks anywhere and hide dropdown menu

$(this).click(function(){
$('.selectOptions').slideUp('fast');
});

//click on the selected item div to toggle menu

$('.selectedCategoryDiv').click(function(e)
{
$(this).siblings('.selectOptions').slideToggle('fast');
e.stopPropagation();
return false;
});

//click on the down arrow to toggle menu

$('.selectDropDownArrow').click(function(e){
$(this).parent('.selectRight').siblings('.selectLeft').children('.selectOptions').slideToggle('fast');
e.stopPropagation();
return false;
});

//hover on menu item to change color

$('.selectOptions').children('div').hover(
function(){
$(this).addClass('hoverItem');
},
function(){
$(this).removeClass('hoverItem');
}
);

//click on menu item to select

$('.selectOptions').children('div').click(function(e){
$(this).parent('.selectOptions').siblings('.selectInput').val($(this).attr('value'));
$(this).parent('.selectOptions').slideUp('fast');
$(this).parent('.selectOptions').siblings('.selectedCategoryDiv').html($(this).html());
e.stopPropagation();
return false;
});
});
function setSelectedOption(id)
{
if(id != '')
{
$('.selectOptions').each(function(){
$(this).children('div').each(function(){
if($(this).attr('value') == id)
$(this).click();
});
});
}
}

the css file, customSelect.css

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

.customSelect
{
padding:0 4px;
}
.selectedCategoryDiv
{
background-color:#FFFFFF;

padding:4px 5px;
font-weight:bold;
font-size:16px;
width:215px;
cursor:pointer;
}
.selectLeft
{
float:left;
border-top:1px solid #93a8ad;

border-bottom:1px solid #FFFFFF;

border-left:1px solid #bac8cb;

border-right:1px dotted #93a8ad;

position:relative;
}
.selectOptions
{
position:absolute;
top:29px;
left:0px;
background-color:#FFFFFF;

width:225px;
padding:0;
}
.selectOptions div
{
padding:2px 7px;
cursor:pointer;
font-size:16px;
}
.selectRight
{
float:left;
background-color:#FFFFFF;

border-top:1px solid #93a8ad;

border-bottom:1px solid #FFFFFF;

border-left:none;
border-right:1px solid #FFFFFF;

}
.selectDropDownArrow
{
padding:7px 8px 6px 8px;
cursor:pointer;
border:none;
margin:0;
}
.hoverItem
{
color:#ef3e36;

}

and the image
dropDownArrow

You need to include the javascript and js files in your layout file.
And to call the element from your view files, you can do this

1
2
3
4
5
6
7

//input name is the name of original select

//datais an array of menu items, how you structure is up to you

//selected is the value of the selected menu item

echo $this-&gt;element('customSelect',array('inputName'=&gt;'data[category]','data'=&gt;$categories,'selected'=&gt;''));
]]> http://www.bunchacode.com/design/cakephp-custom-dropdown-menu-element/feed/ 1 Useful sites for web development http://www.bunchacode.com/design/useful-sites-for-web-development/ http://www.bunchacode.com/design/useful-sites-for-web-development/#comments Mon, 06 Jul 2009 22:00:07 +0000 Funky Dude http://www.bunchacode.com/?p=100 There comes a time where you just want to build a site really quick and not have to worry too much about the design aspect of your project. But you still want your site to look good with wonderful graphics. These sites might come in handy someday.

1. http://www.stripegenerator.com/

You can use this site to generate a background image.

2. http://www.ajaxload.info/

Need a loading gif for the ajax component of your site. Look no further. http://www.ajaxload.info/ has everything you need.

3. http://cooltext.com/

Need a quick image button, but don’t wanna open photoshop. Check this site out.

4. http://www.freewebsitetemplates.com/

This site is for those programmers out there that have absolutely no design talent at all like myself.

]]> http://www.bunchacode.com/design/useful-sites-for-web-development/feed/ 0