On Hover .li-hover not showing .sub-cat-1 - javascript

On Over on the .li-hover it suppose to show a .sub-cat-1 which it is not showing. I tried several ways to make it displayed but it is not simple not showing anything in and according to css property a white box should be displayed.
Tried this html CSS
categ-list
{
width: 400px;
height: 755px;
padding: 10px 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.li-hover i
{
float: right;
margin-right: 25px;
}
.li-hover
{
list-style: none;
position: relative;
display: block;
padding: 7px 0px 7px 21px;
max-height: 38px;
min-height: 21px;
}
.li-hover a
{
text-decoration: none;
color: #646464;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.li-hover a:hover
{
color: #FF6A00;
}
.li-hover:hover
{
width: 378px;
max-height: 38px;
min-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
-moz-box-shadow: -2px 1px 5px transparent;
-webkit-box-shadow: -2px 1px 5px transparent;
box-shadow: -2px 1px 5px #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
box-sizing: content-box;
}
.li-hover:hover i
{
color: #FF6A00;
float: right;
margin-right: 20px;
}
.li-hover-all a
{
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
padding-top : 10px;
padding-right : 0px;
padding-bottom : 5px;
padding-left : 21px;
}
.sc-hd-categories:hover .categ-content
{
display: block;
}
.sub-cat-1
{
width: 600px;
height: 755px;
margin-top: -2px;
margin-left: 395px;
border: 1px solid #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(220, 222, 227);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
position: absolute;
top: 50px;
left: 0;
margin-top: -1px;
z-index: 1;
}
.li-hover .sub-cat-1
{
display: none;
z-index: 1;
}
.categ-list .li-hover:hover .sub-cat-1
{
display: block;
position: absolute;
z-index: 1;
}
<div class="categ-list">
<ul>
<div class="li-hover">
<li>Machinery / Vehicles & Accessories<i class="fa fa-angle-right"></i>
<div class="sub-cat-1">
</div>
</li>
</div>
<div class="li-hover">
<li>Consumer Electronics / Home Appliances<i class="fa fa-angle-right"></i></li>
</div>
</ul>
</div>


The problem is that you have your .li-hover class which has an overflow: hidden property. This meanse that everything outside the specified height and width of .li-hover will be overflowing the box and will not be shown.
Your .sub-cat-1 element is trying to position itself in a bunch of ways. It has a position: absolute so it is relative to the flow of the closest relative parent. But it's the positioning with margin-left: 395px that makes this element jump all the way to the right and outside of the box of the .li-hover element.
So in conclusion. Your code actually worked, but you were hiding it from yourself.
categ-list {
width: 400px;
height: 755px;
padding: 10px 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.li-hover i {
float: right;
margin-right: 25px;
}
.li-hover {
list-style: none;
position: relative;
display: block;
padding: 7px 0px 7px 21px;
max-height: 38px;
min-height: 21px;
}
.li-hover a {
text-decoration: none;
color: #646464;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.li-hover a:hover {
color: #FF6A00;
}
.li-hover:hover {
width: 378px;
max-height: 38px;
min-height: 21px;
text-overflow: ellipsis;
background: #fff;
-moz-box-shadow: -2px 1px 5px transparent;
-webkit-box-shadow: -2px 1px 5px transparent;
box-shadow: -2px 1px 5px #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: white;
box-sizing: content-box;
}
.li-hover:hover i {
color: #FF6A00;
float: right;
margin-right: 20px;
}
.li-hover-all a {
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 21px;
}
.sc-hd-categories:hover .categ-content {
display: block;
}
.sub-cat-1 {
padding: 5px;
border: 1px solid #DCDEE3;
border-top-color: rgb(220, 222, 227);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(220, 222, 227);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(220, 222, 227);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(220, 222, 227);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
left: 0;
z-index: 1;
}
.li-hover .sub-cat-1 {
display: none;
z-index: 1;
}
.li-hover:hover .sub-cat-1 {
display: block;
position: relative;
z-index: 1;
}
<div class="categ-list">
<ul>
<li class="li-hover">
Machinery
<span> / </span>
Vehicles & Accessories
<i class="fa fa-angle-right"></i>
<span class="sub-cat-1">Tools</span>
</li>
<li class="li-hover">
Consumer Electronics
<span> / </span>
Home Appliances
<i class="fa fa-angle-right"></i>
</li>
</ul>
</div>
Also, make sure that your HTML is valid. <li> elements should always be a child of either <ul> or <ol>.
This is invalid HTML:
<ul>
<div>
<li></li>
</div>
<div>
<li></li>
</div>
</ul>
This is valid HTML:
<ul>
<li></li>
<li></li>
</ul>
You also seem to use a lot of oldschool techniques, like float: right. Not that there is anything wrong with it, but nowadays we have much more powerful (and predictable) tools like Flexbox and CSS Grid to make great layouts. Just a tip for you to help you get further.

Related

JQuery onclick change z-index

Main Goal:
"a page's z-index to move to the most front once clicked and the most front to be behind the clicked one."
My approach: onclick change the clicked class z-index to the most front and subtract the current most front z-index by one
//vars
var firstPage = $('.page-hub');
//check what class is clicked
$('div').click(function() {
var theClass = this.className;
alert(theClass);
if(theClass == 'page page-1' && theClass.css('z-index') != firstPage){
alert ('move me to front!');//most front z-index -= 1 and the clicked class page to z-index of 4
theClass.css('z-index', '4');
firstPage.css('z-index', '-=1');
firstPage = theClass;
}
//and now the firstPage var is supposedly be the new clicked class which is page .page-1
});
ps: This is what I came up with but I'm not sure how to write it or this approach may be wrong entirely.
and I'm not sure whats the best approach to this is. I'm down to basically rewrite everything really. I'm very desperate at this point, Thank you in advance.
css:
margin-left: 0px;
transition: margin-left .6s;
}
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
html:
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<ul class="roulette-title">
<li class="roulette-title-text" style="color: rgb(255, 253, 149);">R</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">O</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">U</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">L</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">E</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 253, 149)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">E</li>
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
</div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2">
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>

If i have understood your problem ....
I suggest you instead to swap the z-index, to swap the classes, because classes are linked to z-index.. If you really want to swap z-index this is one solution..if you prefer to use classes uncomment the code with swapping classeS...In anyway you have a good start to analyse my code.
$('div .page').on('click', function(event){
event.stopPropagation();
var z_clicked = $(this).css('z-index');
var class_clicked = $(this).attr('class');
alert('clicked on z-index =' + z_clicked +' classes=' + class_clicked);
if(z_clicked == 4) return false;
//trap the div which has z-index = 4
var z4 = $('div .page').filter(function(){
return $(this).css('z-index') == 4;
});
// uncomment if you want to swap the classes instead z-index
//swap the classes betwwen div clicked and div on topFront
//var class_toBack = z4.attr('class');
//z4.toggleClass(class_toBack).toggleClass(class_clicked);
//$(this).toggleClass(class_clicked).toggleClass(class_toBack);
//swap the z-index
alert('z4 classes=' + z4.attr('class'));
z4.css('z-index', $(this).css('z-index'));
$(this).css('z-index', 4);
// alert(z4.css('z-index'));
});
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2"> </div>
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>

Html button works well, but css button doesn't

I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>

Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>

Mozilla FireFox hover works differently than in Chrome

I have custom dropdown. Mostly all work is done using css. This dropdown is open/close by adding removing ui-dropdown-expanded class
Here is all my code
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});
.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>
In snippet, it's a bit different than in jsFiddle (don't know why cause code the same)
So problem - in FF especially there is some space between dropdown button and dropdown list, that make dropdown closed, cause user lost :hover:
On images, there are pointers where user can see dropdown list and not...
Is this issue because of margin, padding or what?
Thanks.

Well, issue was because of 1px of margin.
Moving dropdown list a bit higher adding -1px; to existing margin to class ui-dropdown-expanded solve my problem.
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});
.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>

Change text color onclick

I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>

I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>

Add custom control to a Google Map that's a dropdown

I have read the Google Maps V3 API Documentation about custom map controls.
This doc shows how to create a simple button. However, what I want to do is create my own drop down menu as a custom control. I want to use this dropdown menu to let the user select a language, like French, or German.
Google provide a built-in map control, called MapType. Further, you can style this control as a dropdown menu by using the builtin style google.maps.MapTypeControlStyle.DROPDOWN_MENU.
So, by analogy, I want to create a custom control called MapLanguage, and have it use a drop down, as though we had access to something like google.maps.MapLanguageControlStyle.DROPDOWN_MENU. If there's a JQuery way to do this, then, so much the better, as I am already using JQuery elsewhere in my app.
Any pointers to examples would be great.

I needed the same thing, here's a basic working one:
.container{
width: 85px;
z-index: 1;
margin: 5px;
cursor: pointer;
text-align: left;
z-index: 0;
}
.dropDownControl{
direction: ltr;
overflow-x: hidden;
overflow-y: hidden;
text-align: left;
position: relative;
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(113, 123, 135);
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
color: rgb(0, 0, 0);
padding-left: 6px;
font-weight: bold;
background-image: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(255, 255, 255);
background-position: initial initial;
background-repeat: initial initial;
z-index: 2;
}
.dropDownArrow{
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: absolute;
right: 6px;
top: 50%;
margin-top: -2px;
width: 7px;
height: 4px;
}
.dropDownOptionsDiv{
background-color: white;
z-index: 0;
padding-top: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
border-top-width: 0px;
border-top-style: initial;
border-top-color: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
position: relative;
text-align: left;
display: none;
}
.dropDownItemDiv{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: rgb(255, 255, 255);
color: black;
}
.dropDownItemDiv:hover, .checkboxContainer:hover{
background-color: rgb(235, 235, 235);
}
.dropDownControl:hover{
background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230));
}
.separatorDiv{
margin-top: 1px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 235, 235);
}
.checkboxContainer{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 11px;
padding-top: 1px;
padding-bottom: 3px;
padding-left: 5px;
direction: ltr;
text-align: left;
background-color: rgb(255, 255, 255);
white-space: nowrap;
padding-right: 8px;
color: rgb(0, 0, 0);
}
.checkboxSpan{
box-sizing: border-box;
position: relative;
line-height: 0;
font-size: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
display: inline-block;
background-color: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
width: 13px;
height: 13px;
vertical-align: middle;
-webkit-box-shadow: none;
box-shadow: none;
border-color: rgb(198, 198, 198);
}
.blankDiv{
position: absolute;
left: 1px;
top: -2px;
width: 13px;
height: 11px;
overflow-x: hidden;
overflow-y: hidden;
display: none; /*when = block -> this is the "check" symbol*/
}
.blankImg{
position: absolute;
left: -52px;
top: -44px;
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin: 0px;
-webkit-user-drag: none;
width: 68px;
height: 67px;
}
.checkboxLabel{
vertical-align: middle;
cursor: pointer;
}
<div class="container">
<div class="dropDownControl" id="ddControl" title="A custom drop down select with mixed elements" onclick="(document.getElementById('myddOptsDiv').style.display == 'block') ? document.getElementById('myddOptsDiv').style.display = 'none' : document.getElementById('myddOptsDiv').style.display = 'block';"">
My Box
<img class="dropDownArrow" src="http://maps.gstatic.com/mapfiles/arrow-down.png"/>
</div>
<div class = "dropDownOptionsDiv" id="myddOptsDiv">
<div class = "dropDownItemDiv" id="mapOpt" title="This acts like a button or click event" onClick="alert('option1')">Option 1</div>
<div class = "dropDownItemDiv" id="satelliteOpt" title="This acts like a button or click event" onClick="alert('option2')">Option 2</div>
<div class="separatorDiv"></div>
<div class="checkboxContainer" title="This allows for multiple selection/toggling on/off" onclick="(document.getElementById('terrainCheck').style.display == 'block') ? document.getElementById('terrainCheck').style.display = 'none' : document.getElementById('terrainCheck').style.display = 'block';">
<span role="checkbox" class="checkboxSpan ">
<div class="blankDiv" id="terrainCheck">
<img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" />
</div>
</span>
<label class="checkboxLabel">On/Off</label>
</div>
</div>
</div>
You can also see a working example

Custom Controls allow you to put pretty much anything you want on the map - dropdown/selects, logos, buttons, whatever. I'd recommend using Material Design Lite components as they will have the Google look.
You certainly want to add your custom logos and copyrights to Google Maps via custom controls. Otherwise, they will likely not render properly especially on mobile devices.
I found the official Google Maps JavaScript API Custom Control example to be rather complicated and I can never remember the position options. So, I created a tiny 1.72 KB add-on JS on GitHub library called CONTROL-JS that enables you to simply create your custom content as a string, e.g., var html = "<h1>Hi</h1>" then pass it to an object called control where every position is a method (IDE intellisense reminds you of the possible positions).
So, just do
var html = '<p id="control-text"> a bunch of html select menu goes in here </p>'
//Global method that is fired when the API is loaded and ready
function initMap () {
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//intelleSense/Auto-complete works on IDE's
control.topCenter.add(html);
};
/*
control.js v0.1 - Add custom controls to Google Maps with ease
Created by Ron Royston, www.rack.pub
https://github.com/rhroyston/control
License: MIT
control.topCenter.add.(html)
*/
var control=function(){function o(o){this.add=function(T){var t=document.createElement("div");if(t.innerHTML=T,o)switch(o){case"TOP_CENTER":map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;case"TOP_LEFT":map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;case"TOP_RIGHT":map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;case"LEFT_TOP":map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;case"RIGHT_TOP":map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;case"LEFT_CENTER":map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;case"RIGHT_CENTER":map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;case"LEFT_BOTTOM":map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;case"RIGHT_BOTTOM":map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;case"BOTTOM_CENTER":map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;case"BOTTOM_LEFT":map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;case"BOTTOM_RIGHT":map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(t)}else console.log("err")}}var T={};return T.topCenter=new o("TOP_CENTER"),T.topLeft=new o("TOP_LEFT"),T.topRight=new o("TOP_RIGHT"),T.leftTop=new o("LEFT_TOP"),T.rightTop=new o("RIGHT_TOP"),T.leftCenter=new o("LEFT_CENTER"),T.rightCenter=new o("RIGHT_CENTER"),T.leftBottom=new o("LEFT_BOTTOM"),T.rightBottom=new o("RIGHT_BOTTOM"),T.bottomCenter=new o("BOTTOM_CENTER"),T.bottomLeft=new o("BOTTOM_LEFT"),T.bottomRight=new o("BOTTOM_RIGHT"),T}();

I do not have an example but it seems that google.maps is quite flexible and as long as you code your menu so that it is in a single div you can push it into the map control array the same way as they push their simple button.
K

Categories