javascript - CSS/js z-index(zIndex) drop down menu -
i have been working on page has started give me trouble hope can me out with. problem explained rather simple, , hope answer same. :)
i have css drop down menu @ top of page , right below have js video player. problem drop down menu appearing behind video player , have no idea why. using boostrap dropdown menu , z-index set 1000. can tell me why player ontop?
i know there zindex option js hoping fix problem, not afraid admit have no js skills ever.
css:
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
js:
function changechannel(url, chanid) { var player = document.getelementbyid("videoplayer"); var video = document.getelementbyid('video'); if (video != null) { video.src = url; video.load(); video.play(); } else if (player != null) { player.close(); player.open(url, false); } if(chanid != 0) { update(chanid); } else { tvclear(); } } function update(channelid) { $.getjson('api.php', function(data) { console.log(data[channelid][0]); $('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>"); $('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>"); }); } function tvclear() { $('.now').html("no data"); $('.next').html("no data"); }
thanks thoughts.
did try set lower z-index html element contains player ?
Comments
Post a Comment