Total members 11806 |It is currently Thu Nov 21, 2019 4:42 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





This code allows you to have fancy looking select element with different image per each option element, also special highlights and effects.
javascript code
<html>
<head>
<title>select dropdown using JQuery</title>

<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script>
(function($) {
$.fn.fancyDropdown = function() {
return this.each(function() {
var el = $(this);
var id = $(this).attr('id');
el.hide();
//create needed HTML
var html = '<div class="dropdown" id="'+id+'_dropdown"></div>'+
'<ul class="dropdownlist" id="'+id+'_dropdownlist">';
$('option', el).each(function() {
var realvalue = $(this).attr("value");
var img = $(this).attr("data-img");
var info = $(this).attr("data-info");
if (info == null) {
html += '<li data-realvalue="'+realvalue+'"><div class="imgholder">'+
'<img src="'+img+'" /></div><p class="no-info"><strong>'+$(this).text()+
'</strong></p><div class="clearfix"></div>';
} else {
html += '<li data-realvalue="'+realvalue+'"><div class="imgholder">'+
'<img src="'+img+'" /></div><p><strong>'+$(this).text()+'</strong><br />'
+info+'</p><div class="clearfix"></div>';
}
});
html += '</ul>';
el.after(html);
//set initial values
var initoption = $('li[data-realvalue="'+el.val()+'"]', $('#'+id+'_dropdownlist'));
initoption.attr('class', 'active');
$('#'+id+'_dropdown').attr('data-realvalue',
initoption.attr('data-realvalue')).html(initoption.html());
//bind click event
if ($("body").hasEventListener("click.customdropdown").length == 0) {
//bind the click event only once
$('body').bind('click.customdropdown', function(e) {
var elements = $(e.target).parents().andSelf();
var dropdown = elements.filter('.dropdown');
var dropdownlist = elements.filter('.dropdownlist');
if (dropdown.length == 0 && dropdownlist.length == 0) {
//not clicked on .dropdown or .dropdownlist, hide .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
} else {
if (dropdown.length != 0) {
//clicked on .dropdown
var dropdownid = $(dropdown[0]).attr('id');
if ($("#"+dropdownid).hasClass('active_dropdown')) {
//close all .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
} else {
//close all .dropdownlist
$(".dropdownlist").fadeOut('fast');
$(".dropdown").removeClass('active_dropdown');
//and open the clicked one
$("#"+dropdownid).addClass('active_dropdown');
$("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
var pos = $(dropdown[0]).position();
$("#"+dropdownid+"list").css({
top: (pos.top+$(dropdown[0]).outerHeight())+'px',
left: pos.left+'px'
}).fadeIn('fast');
}
} else {
//clicked on .dropdownlist
var dropdownid = $(dropdownlist[0]).attr('id').slice(0, -4);
var li = $(elements.filter('li')[0]);
$('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue',
li.attr('data-realvalue')).html(li.html());
li.addClass('active').siblings().removeClass('active');
$(dropdownlist[0]).fadeOut('fast');
//reflect change to original <select> element
$("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
}
}
});
}
//add hover states
$(".dropdownlist li").live('mouseover', function() {
$(this).addClass("hover").siblings().removeClass("hover");
});
$(".dropdown").live('mouseover', function() {
$(this).addClass('hover_dropdown');
}).live('mouseout', function() {
$(this).removeClass('hover_dropdown');
});
});
};
})(jQuery);

/* v.1.0.5 - Jan. 8, 2011 - Copyright (c) 2010 Sebastien P. -
http://twitter.com/_sebastienp - MIT licensed. */
(function(b,e,f){"use strict";function h(a)
{return!!(a&&typeof a==="string"&&b.trim(a))}
var k=+b.fn.jquery.slice(0,3)>1.3?"namespace":"type";
b[e]=function(a,c)
{var d=b.data(a,"events"),g=!f,i,j;if(d)if(h(c)&&(c=/^([a-z]+)(\.(.+))?$/.exec(c)))
{if(d=d[c[1]])if(i=c[3])
b.each(d,function(){if((j=this[k])&&j.split(".")[0]===i)
return!(g=f)});else g=f}else g=f;return g};
b.expr[":"][e]=function(a,c,d){return b[e](a,d[3])};
b.fn[e]=function(a){return this.filter(":"+e+(h(a)?"("+a+")":""))}})
(this.jQuery,"hasEventListener",true);
</script>

<style type="text/css">
.dropdown {
border: 1px solid #B1BDC8;
border-bottom-color: #ABB8C5;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #F0F2F3 url(dropdown_bg.png) repeat-x left top;
padding: 2px;
height: 35px;
cursor: pointer;
}

.hover_dropdown {
border-color: #f1ca58 #f4d053 #f7d84b #f4d053;
background: #F0F2F3 url(dropdownlist_hover_bg.png) repeat-x left top;
}

.active_dropdown {
border-color: #c2762b #c28838 #c29e47 #c28636;
background: #F0F2F3 url(active_dropdown_bg.png) repeat-x left top;
}

.dropdownlist {
list-style: none;
border: 1px solid #A7ABB0;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 1px;
cursor: pointer;
background-color: #FFF;
-webkit-box-shadow: 2px 2px 5px #D8D8D8;
-moz-box-shadow: 2px 2px 5px #D8D8D8;
box-shadow: 2px 2px 5px #D8D8D8;
filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=5, Direction=135, Color='#D8D8D8');
position: absolute;
top: 0;
left: 0;
display: none;
}

.dropdownlist li {
border-width: 0px;
padding: 2px;
}

.dropdownlist li.active img {
background: transparent url(dropdownlist_active_img_bg.png)
no-repeat left top;
}

.dropdownlist li.hover {
border: 1px solid white;
border-color: #f1ca58 #f4d053 #f7d84b #f4d053;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #F0F2F3 url(dropdownlist_hover_bg.png)
repeat-x left top;
padding: 1px;
}

.dropdown .imgholder, .dropdownlist .imgholder {
float: left;
width: 33px;
height: 33px;
padding: 1px;
margin-right: 2px;
}

.dropdown p, .dropdownlist p {
margin: 2px 4px 0px 2px;
color: #8A8A8A;
height: 31px;
}

.dropdown p.no-info, .dropdownlist p.no-info {
height: 23px;
padding: 8px 0 0 0;
}

.dropdown p {
background: url(arrowhead_down.png) no-repeat right 14px;
}

.dropdown p strong, .dropdown_no-info p strong, .dropdownlist p strong {
color: #262626;
}
body, html {
font-family: "Segoe UI", "Liberation Sans", "Trebuchet MS",
Helvetica, Arial, sans-serif;
font-size: 12px;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 600px;
margin: 0px auto;
}
button {
font-family: "Segoe UI", "Liberation Sans", "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 5px;
width: 80px;
cursor: pointer;
}
.clearfix {
clear: both;
}
h2 {
margin: 15px 0px;
}
p, h3 {
margin: 10px 0px 15px 0px;
}
hr {
margin-top: 15px;
}

/*Extra styling for the fancy dropdowns*/
.dropdown, .dropdown_no-info {
width: 250px;
margin-bottom: 15px;
}
.dropdownlist {
width: 252px;
}
</style>
</head>
<body>
<center><strong>Select Your City</strong>
<select name="paperFormat" id="paperFormat">
<!-- You change the image per Option -->
<option value="Cairo" data-img="SmallSmileyFace.jpg" data-info="Located in Egypt">Cairo</option>
<option value="London" data-img="SmallSmileyFace.jpg" data-info="Located in United Kingdom">London</option>
<option value="Texas" data-img="SmallSmileyFace.jpg" data-info="Located in United USA">Texas</option>
</select>
</center>

<script type="text/javascript">
$("#paperFormat").add($("#paperOrientation")).fancyDropdown();
$("#testform").submit(function() {
alert('You selected:\r\n\r\nFirst normal: '+
$("#paperFormat_normal").val()+'\r\nSecond normal: '+
$("#paperOrientation_normal").val()+'\r\n\r\nFirst fancy: '+
$("#paperFormat").val()+'\r\nSecond fancy: '+$("#paperOrientation").val());
return false;
});
</script>

</body>

</html>





Attachments:
File comment: Contains all files needed for this example
JQueryXX.rar [77.49 KiB]
Downloaded 408 times

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada
Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Good looking selection box with image per option
 how to load the form elements depending on selection option     -  
 good books of jsp and jdbc     -  
 here are 2 realy good books for sql     -  
 Good looking HeatMap example in R using ggplot2     -  
 Why is Using Gamification Good for Your Business?     -  
 How does one get good code for embeded video     -  
 project in java.....plz suggest good ones........     -  
 need a good topic for project in java     -  
 selection sort     -  
 C++ Selection Sort     -  



Topic Tags

JQuery Image






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com