How to put dropdown menu inside jssor slider
I am trying to put a dropdown menu inside a Jssor slider, but the menu cannot dropdown when inside it.
Below is the code:
<head>
<script src="jquery.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: false };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
<style>
.form-style {
position: relative;
top:10px;
left:10px;
}
.image-style {
position: absolute;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: visible; left: 0px; top: 0px; width: 600px; height: 300px; float: right;">
<div>
<img u="image" src="1.jpg" class="image-style" />
<form class="form-style" action="index" method="post" >
Admin Mode: <select name="admin_mode">
<option value="on">on</option>
<option value="off">off</option>
</select>
</form>
</div>
<div>
<img u="image" src="2.jpg" class="image-style" />
<form class="form-style" action="index" method="post" >
Admin Mode: <select name="admin_mode">
<option value="on">on</option>
<option value="off">off</option>
</select>
</form>
</div>
</div>
</div>
</body>
Any ideas?
Any conflict that could make it impossible to drop?
Regards, ethereal1m
+3
source to share
1 answer
Now I don't know exactly why this is happening. But, figuring out what is going on, one solution might be: change the dropdown box with a radio box, e.g .:
<input type="radio" name="AdminMode" value="on">on<br>
<input type="radio" name="AdminMode" value="off">off
I am already testing it and it works. If it is not, you must change the uc (c) function included in jssor.slider.mini.js. This function runs on startup. You must change this:
function uc(c){
var b=a.nf(c).tagName;
!N && b!="INPUT" && b!="TEXTAREA" && sc() && tc(c)
}
to look like this:
function uc(c){
var b=a.nf(c).tagName;
!N && b!="TEXTAREA" && sc() && tc(c)
}
Check out this example link to see a working example.
Hope this is helpful!
+1
source to share