advanced code snippet search

Posted By

ryarwood on 06/09/11


Tagged

javascript forms jquery styling


Versions (?)

jNice pulldown example

 / Published in: jQuery
 

URL: http://www.lyoncommunities.com

jNice from http://plugins.jquery.com/project/jNice

Expand | Embed | Plain Text 
  1. <style type="text/css">
  2. /* -------------
  3.  * Selects
  4.  * ------------- */
  5. .jNiceWrapper select {border:none;margin:0;padding:0;}
  6.  
  7. .jNiceSelectWrapper {
  8. 	width: 179px !important;
  9. 	height: 30px  !important;
  10. 	left:0px;
  11. 	top:0px;
  12. 	z-index:3;
  13. 	position:absolute;
  14. 	background: url(http://70.32.85.132/images/elements/pulldown.gif) no-repeat left top;
  15. 	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  16.   font-size: 12px;/* Resize Font*/
  17. 	padding-left: 5px;
  18. }
  19.  
  20. .jNiceWrapper iframe {position:absolute;z-index:1;width:100%;left:0px;top:0px;}
  21.  
  22. .jNiceSelectWrapper .jNiceSelectText {
  23. 	height: 30px;
  24. 	line-height: 30px;
  25. 	padding: 0px 0px 0px 0px;
  26. 	overflow:hidden;float:none;position:absolute;z-index:100;
  27. }
  28.  
  29. .jNiceSelectWrapper ul {
  30. 	top: 30px;
  31. 	background-color: #FFF;
  32. 	border: solid 1px #CCC;
  33. 	height: 135px;
  34. 	position:absolute;
  35. 	left:0px;
  36. 	list-style:none;
  37. 	display: none;
  38. 	margin:0;
  39. 	padding:0;
  40. 	overflow-y:auto;
  41. 	z-index:100;
  42. 	width: 184px;
  43. }
  44.  
  45. .jNiceSelectWrapper li, .jNiceSelectWrapper ul {
  46. 	list-style: none;
  47. 	background-image: none;
  48. 	margin: 0px 0px 0px 0px;
  49. 	padding: 0px 0px 0px 0px;
  50. }
  51.  
  52. .jNiceSelectWrapper ul a {
  53. 	color:#716965;
  54. 	background-color: #FFF;
  55. 	font-size: 12px;
  56. 	font-family: Arial, Helvetica, sans-serif;
  57. 	display:block;padding:3px;text-decoration:none;
  58. }
  59.  
  60. .jNiceSelectWrapper ul a:hover { background:#e2e2e2; }
  61. .jNiceSelectWrapper ul a.selected {background: #e2e2e2;}
  62.  
  63. .jNiceFocus { border: dotted 1px #666666; }
  64.  
  65. .jNiceHidden {opacity:0;z-index:-1;position:relative;}
  66. .jNiceWrapper {position:relative;vertical-align:top;}
  67. .jNiceWrapper input {outline:none;moz-outline:none;}
  68. </style>
  69. <script type="text/javascript" src="/includes/js/jquery.jNice.js"></script>
  70.  
  71.  
  72. <form action="void.php" method="post" name="communityForm" id="communityForm" class="jNice">
  73.   <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  74.     <select name="communityPull" id="communityPull" style="width: 184px;">
  75.       <option value="http://www.lyoncommunities.com/communities/">Select A Community</option>
  76.       <option value="http://www.lyoncommunities.com/communities/welcome/1900-ocean">1900 Ocean</option>
  77.       <option value="http://www.lyoncommunities.com/communities/welcome/the-arbors">The Arbors</option>
  78.       <option value="http://www.lyoncommunities.com/communities/welcome/autumn-chase">Autumn Chase</option>
  79.       <option value="http://www.lyoncommunities.com/communities/welcome/aviare">Aviare</option>
  80.       <option value="http://www.lyoncommunities.com/communities/welcome/bay-tree">Bay Tree</option>
  81.       <option value="http://www.lyoncommunities.com/communities/welcome/brentwood">Brentwood</option>
  82.       <option value="http://www.lyoncommunities.com/communities/welcome/capistrano-pointe">Capistrano Pointe</option>
  83.       <option value="http://www.lyoncommunities.com/communities/welcome/el-paradero">El Paradero</option>
  84.       <option value="http://www.lyoncommunities.com/communities/welcome/forest-glen">Forest Glen</option>
  85.       <option value="http://www.lyoncommunities.com/communities/welcome/the-fountains-at-sandy-springs">Fountains at Sandy Springs</option>
  86.       <option value="http://www.lyoncommunities.com/communities/welcome/gallery421">gallery421</option>
  87.       <option value="http://www.lyoncommunities.com/communities/welcome/haver-hill">Haver Hill</option>
  88.       <option value="http://www.lyoncommunities.com/communities/welcome/huntington-continental">Huntington Continental</option>
  89.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-holcomb-bridge">Jasmine at Holcomb Bridge</option>
  90.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-marietta-crossing">Jasmine at Marietta Crossing</option>
  91.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-sandy-springs">Jasmine at Sandy Springs</option>
  92.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-the-galleria">Jasmine at the Galleria</option>
  93.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-at-winters-chapel">Jasmine at Winters Chapel</option>
  94.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-village">Jasmine Village</option>
  95.       <option value="http://www.lyoncommunities.com/communities/welcome/jasmine-woodlands">Jasmine Woodlands</option>
  96.       <option value="http://www.lyoncommunities.com/communities/welcome/kimberly-woods">Kimberly Woods</option>
  97.       <option value="http://www.lyoncommunities.com/communities/welcome/las-palmas">Las Palmas</option>
  98.       <option value="http://www.lyoncommunities.com/communities/welcome/levanto">Levanto</option>
  99.       <option value="http://www.lyoncommunities.com/communities/welcome/the-lofts-at-promenade">The Lofts at Promenade</option>
  100.       <option value="http://www.lyoncommunities.com/communities/welcome/maplewood">Maplewood</option>
  101.       <option value="http://www.lyoncommunities.com/communities/welcome/monarch-coast">Monarch Coast</option>
  102.       <option value="http://www.lyoncommunities.com/communities/welcome/oak-creek">Oak Creek</option>
  103.       <option value="http://www.lyoncommunities.com/communities/welcome/ocean-club">Ocean Club</option>
  104.       <option value="http://www.lyoncommunities.com/communities/welcome/pacific-pointe">Pacific Pointe</option>
  105.       <option value="http://www.lyoncommunities.com/communities/welcome/pebble-creek">Pebble Creek</option>
  106.       <option value="http://www.lyoncommunities.com/communities/welcome/pruneyard-west">Pruneyard West</option>
  107.       <option value="http://www.lyoncommunities.com/communities/welcome/renaissance">Renaissance</option>
  108.       <option value="http://www.lyoncommunities.com/communities/welcome/sedona">Sedona</option>
  109.       <option value="http://www.lyoncommunities.com/communities/welcome/serrano">Serrano</option>
  110.       <option value="http://www.lyoncommunities.com/communities/welcome/shadowcreek">ShadowCreek</option>
  111.       <option value="http://www.lyoncommunities.com/communities/welcome/st-claire">St. Claire</option>
  112.       <option value="http://www.lyoncommunities.com/communities/welcome/stoneridge">Stoneridge</option>
  113.       <option value="http://www.lyoncommunities.com/communities/welcome/trabuco-highlands">Trabuco Highlands</option>
  114.       <option value="http://www.lyoncommunities.com/communities/welcome/villa-venetia">Villa Venetia</option>
  115.       <option value="http://www.lyoncommunities.com/communities/welcome/the-vineyards">The Vineyards</option>
  116.       <option value="http://www.lyoncommunities.com/communities/welcome/water-terrace">Water Terrace</option>
  117.     </select>
  118.   </div>
  119.   <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  120.     <select name="statePull" id="statePull" style="width: 184px;">
  121.       <option value="http://www.lyoncommunities.com/communities/">Select A Region</option>
  122.       <option value="http://www.lyoncommunities.com/communities/socal-orangecounty">So. Cal. - Orange County</option>
  123.       <option value="http://www.lyoncommunities.com/communities/socal-losangeles/">So. Cal. - Los Angeles</option>
  124.       <option value="http://www.lyoncommunities.com/communities/socal-sandiego/">So. Cal. - San Diego</option>
  125.       <option value="http://www.lyoncommunities.com/communities/central-california/">Central California - Coastal</option>
  126.       <option value="http://www.lyoncommunities.com/communities/nocal-east-bay/">No. Cal. - East Bay</option>
  127.       <option value="http://www.lyoncommunities.com/communities/nocal-sacramento/">No. Cal. - Sacramento County</option>
  128.       <option value="http://www.lyoncommunities.com/communities/nocal-santa-clara/">No. Cal. - Santa Clara County</option>
  129.       <option value="http://www.lyoncommunities.com/communities/nocal-sonoma/">No. Cal. - Sonoma County</option>
  130.       <option value="http://www.lyoncommunities.com/communities/colorado/">Colorado</option>
  131.       <option value="http://www.lyoncommunities.com/communities/florida/">Florida</option>
  132.       <option value="http://www.lyoncommunities.com/communities/georgia/">Georgia</option>
  133.     </select>
  134.   </div>
  135. </form>

Report this snippet  

You need to login to post a comment.