I have a drop down with two options 'yes' and 'no' in relation to the question 'Was there a Witness to the Incident?' if option 'yes' is selected then two more questions appear and the option value is then saved in a php value and if 'no' then the two questions are hidden. Which loads fine when the page is refreshed or the form is submitted however if the option is set to 'yes' then two questions load as hidden, and can only be visible if the drop down is set to 'no' and then 'yes' again. What I'm looking for is if it was set to 'yes' then the form is submitted when the page reloads the drop down is still set to 'yes' (which I already have working) and the two questions are visible as well.
Thanks guys,
Matt.
$(window).on("load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
var witness = '<?php echo $A18 ?>';
});
p {
margin: 0;
font-size: 16px;
}
textarea {
overflow: hidden;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: 40px;
width: 98%;
margin: 0;
background: #fff;
}
.dropDown {
width: 99.5%;
height: 46px;
margin: 0;
border: none;
background: none;
}
#irMain {
background-color: #ddebf7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
}
#irMainWitness {
background-color: #ddebf7;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
display: none;
}
#irQMainWitness {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
display: none;
}
#irBottomWitness {
background-color: #FFF;
border: 2px solid #000;
height: 50px;
margin: 0;
display: none;
}
#irQMainDD {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
<p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMainDD">
<select name="a18" class="dropDown">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="irMainWitness">
<p>Name of Witness:</p>
</div>
<div id="irQMainWitness">
<textarea name="a19" cols="1" rows="2">
</textarea>
</div>
<div id="irMainWitness">
<p>Contact Number of Witness:</p>
</div>
<div id="irBottomWitness">
<textarea name="a20" cols="1" rows="2">
</textarea>
</div>
UPDATE 1:
The variable 'witness' is set to the option value on form submit. (Still not working)
Code:
<script>
$( window ).on( "load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "<?php echo $savedA18 ;?>";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});
</script>
Output:
$( window ).on( "load", function() {
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
witness = "Yes";
if (witness == "Yes"){
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
}
});
You can manually trigger the change event after the code where you have set the value to Yes.
$('select[name="a18"]').triggerHandler("change");
$(window).on("load", function() {
$('select[name="a18"]').val("Yes");
$(function() {
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
});
var witness = '<?php echo $A18 ?>';
// set the value on onload
$('select[name="a18"]').val("Yes");
$('select[name="a18"]').triggerHandler("change");
});
p {
margin: 0;
font-size: 16px;
}
textarea {
overflow: hidden;
resize: none;
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
height: 40px;
width: 98%;
margin: 0;
background: #fff;
}
.dropDown {
width: 99.5%;
height: 46px;
margin: 0;
border: none;
background: none;
}
#irMain {
background-color: #ddebf7;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
}
#irMainWitness {
background-color: #ddebf7;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 30px;
display: none;
}
#irQMainWitness {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
display: none;
}
#irBottomWitness {
background-color: #FFF;
border: 2px solid #000;
height: 50px;
margin: 0;
display: none;
}
#irQMainDD {
background-color: #FFF;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
font-weight: bold;
margin: 0;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
<p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMainDD">
<select name="a18" class="dropDown">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div id="irMainWitness">
<p>Name of Witness:</p>
</div>
<div id="irQMainWitness">
<textarea name="a19" cols="1" rows="2">
</textarea>
</div>
<div id="irMainWitness">
<p>Contact Number of Witness:</p>
</div>
<div id="irBottomWitness">
<textarea name="a20" cols="1" rows="2">
</textarea>
</div>
You can change this:
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes');
});
to this:
$('select[name="a18"]').change(function(e) {
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle();
});
Because the first one only hides and does not show these back.
Do something like below, create a function to toggle question divs and call it on page load and call it whenever drop down changes.
$(document).ready(function(){
var witness = '<?php echo $A18 ?>';
$.toggleQuestions = function(drpDown){
$("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(drpDown.val() == 'Yes');
};
$('select[name="a18"]').on("change", function(e) {
$.toggleQuestions($(this));
});
$(window).on("load", function() {
$.toggleQuestions($('select[name="a18"]'));
});
});
Related
How can I get the "select" element to open and show its option elements when I click inside "div" element?
In other words, I want to trigger the "select" element when I click to green zone.
HTML
<div>
<h3>Cities</h3>
<select>
<option>Berlin</option>
<option>Paris</option>
<option>London</option>
</select>
</div>
SCSS
body{
background-color: lightgray;
margin: 100px;
div{
display: inline-block;
padding: 50px;
background-color: green;
select{
width:300px;
&:focus{
outline: none;
}
}
}
}
https://codepen.io/mehmetguduk/pen/vYWVGPK
I would not recommend doing such thing but here you go:
$select-width: 400px;
$top-spacing: 100px;
$bottom-spacing: 50px;
$left-spacing: 30px;
body {
background-color: lightgray;
margin: 100px;
div {
display: inline-block;
background-color: green;
position: relative;
padding: $top-spacing 0 $bottom-spacing;
h3 {
left: $left-spacing;
position: absolute;
top: 40px;
}
select {
border-top: $top-spacing solid green;
border-bottom: $top-spacing solid green;
border-left: $left-spacing solid green;
border-right: $left-spacing solid green;
margin: -$top-spacing 0 (-$bottom-spacing);
cursor: pointer;
width: $select-width;
&:focus {
outline: none;
border-top: $top-spacing solid green;
// border has to stay 0 in order to keep options still
border-width: 0px;
width: $select-width - (2 * $left-spacing);
margin: -$top-spacing $left-spacing $bottom-spacing;
}
}
}
}
https://codepen.io/Gotzi/pen/LYejZJq
I know that the Wix doesn't support Jquery yet so the only option I have is to run it in their HTML editor. So I got the HTML, Jquery and CSS code running perfectly here on jsfiddle.
But when I try to run all these codes in their Edit code window, Jquery doesn't work and play/pause audio players loses its transition.
Here's what I tried to do:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
</script>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
<span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
<span class="right"></span>
</div>
<style type="text/css">
.control {
border: 2.0px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
content: "";
height: 112px;
}
.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}
.control.pause .left {
border-right: 22.4px solid transparent;
}
.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}
.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}
.control:hover {
border-color: #000;
}
.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
</head>
</html>
What am I doing wrong?
I'm a beginner so any help would be appreciated. Thanks in advance :)
Actually I think what you need to understand is that Wix Code is essentially its own jQuery. Wix Code is a javascript API into Wix's own DOM extrapolation framework and does similar things to jQuery.
Elements are created in the Wix Editor and then you interact with them using the Wix DOM using the $w() scope selector and element IDs.
To use raw HTML like this you would need to add an iframe to your Wix Page and then run your code, sandboxed, in the iframe. Check out this article for more information:
https://support.wix.com/en/article/guidelines-and-limitations-of-the-html-code-and-embed-a-site-elements
Cheers
I know this is an old question but i just saw it :)
The format of your code is wrong. You have your html layout in the head section instead of the body. Another issue is that you have your functional script before the html layout is rendered so it probably wont' work. (jsfiddle adds the javascript section on the bottom of the body by default)
Check out this approach:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.control {
border: 2.0px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
content: "";
height: 112px;
}
.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}
.control.pause .left {
border-right: 22.4px solid transparent;
}
.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}
.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}
.control:hover {
border-color: #000;
}
.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
</head>
<body>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
<span class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
<span class="right"></span>
</div>
<script>
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
</script>
</body>
</html>
Here is my code:
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
As you see, the hover of tabs which aren't active changes their position a bit. How can I keep them fix forever?
You should apply your borders to non-active tabs as well. You can either match a background color or make them transparent. This way there's no shifting in the elements height.
I've added the following lines to .sort_box_items a.
border: 1px solid transparent;
border-top-width: 3px;
From there it's a matter of adjusting the colors of the borders, no need to re-declare the width and style.
.sort_box {
padding: 25px 0px;
direction: rtl;
font-family: BYekan, 'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title {
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a {
display: inline-block;
margin-bottom: -1px;
font-size: 14px;
padding: 10px 20px;
border: 1px solid transparent;
border-top-width: 3px;
}
.sort_box_items a:hover {
color: black;
text-decoration: none;
background-color: rgba(132, 141, 149, 0.05);
border-color: rgba(228, 230, 232, 0.25);
}
.sort_box_items .sort_active {
border-color: #ccc;
border-top-color: orange;
border-bottom-color: white;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-color: #ccc;
border-top-color: #f48024;
border-bottom-color: white;
}
a {
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
adding border is causing that:
remove following unless you really need it.
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
remove border: 1px solid rgba(228,230,232,0.25); from .sort_box_items a:hover
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!
var volumeslider;
volumeslider = document.getElementById("volumeslider");
// Add Event Handling
volumeslider.addEventListener("mousemove", setvolume);
// Functions
function setvolume(){
audio.volume = volumeslider.value / 100;
}
input[type=range] {
-webkit-appearance: none;
display: inline-block;
vertical-align: top;
width: 60%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #666666;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #666666;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">
Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.
JS:
volumeslider.addEventListener("mousemove", checkMute);
//check for mute each time the slider is dragged.
function checkMute(){
if (audio.volume == 0){
$( ".speaker" ).attr("src", "images/speaker.png");
}else{
$( ".speaker" ).attr("src", "images/speakermute.png");
}
}
I'm in the middle of creating a custom select box. What I want is when not the custom select box (the element that has a class of selectbox_ui) and its children is clicked then slideUp else if custom select box (the element that has a class of selectbox_ui) and its children is clicked then slideDown. Below is my code snippet yet the function that supposed to bring the select box options up and down is sadly not working. Any help, suggestion, recommendation, clues and ideas is greatly appreciated. Thank you!
$(document).ready(function () {
$(".thehide").hide();
$(".selectbox_ui").click(function (e) {
var current_event = $(this);
if ($(".selectbox_ui_dp", this).is(":visible")) {
$(".selectbox_ui_dp", this).slideUp();
} else {
$(".selectbox_ui_dp", this).slideDown();
}
e.preventDefault();
});
$(document).on("click", function (e) {
if ($(this).attr("class") !== "selectbox_ui") {
$(".selectbox_ui_dp").slideUp();
}
});
});
.selectbox_ui {
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
height: 30px;
background: none;
}
.selectbox_ui .selectbox_ui_label {
color: #5a5a5a;
font: normal 15px 'mpregular', sans-serif;
padding: 0px;
margin: 0px;
position: absolute;
text-transform: uppercase;
width: 93%;
}
.selectbox_ui .selectbox_ui_label span {
display: block;
}
.selectbox_ui_dp {
width: 94%;
position: absolute;
z-index: 9999;
background: #fff;
padding: 7px;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
text-decoration: none;
list-style: none;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}
.selectbox_ui_dp li {
text-decoration: none;
clear: both;
float: none;
list-style: none;
}
.selectbox_ui_dp li a {
font: normal 15px 'mplight', sans-serif;
color: #5a5a5a;
text-decoration: none;
display: block;
}
.dodong_ui .input_wrapper {
margin: 5px 0px;
display: block;
}
.dodong_ui .input_wrapper label {
color: #5a5a5a;
font: normal 15px 'mpregular', sans-serif;
padding: 0px;
margin: 0px;
position: absolute;
text-transform: uppercase;
}
.dodong_ui .input_wrapper select {
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.dodong_ui .input_wrapper input, .dodong_ui .input_wrapper textarea {
background: none;
width: 100%;
padding: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #cccccc;
margin: 0px;
font: normal 15px 'mplight', sans-serif;
height: 26px;
overflow: hidden;
}
.dodong_ui .input_wrapper input:focus, .dodong_ui .input_wrapper input:active, .dodong_ui .input_wrapper input:hover, .dodong_ui .input_wrapper textarea:active, .dodong_ui .input_wrapper textarea:focus {
outline: none;
}
.dodong_ui button {
display: table;
margin: 0 auto;
padding: 8px 11px 3px 11px;
color: #fff;
font: normal 'mpregular', sans-serif;
text-transform: uppercase;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row daselect clear extend dodong_ui">
<form class="ajaxform extend clear">
<input type="hidden" name="ticket_sender" value="ebdul kerem muhemmed abubeker" />
<fieldset>
<div class="input_wrapper extend clear">
<!-- <select class="extend clear" name="urgency" required="">
<option value="normal">Normal</option>
<option value="medium">Medium</option>
<option value="urgent">Urgent</option>
</select> -->
<div class="extend clear selectbox_ui">
<div class="selectbox_ui_label extend clear"><span class="extend align_left">Urgency Level</span><span class="ion-ios-arrow-down align_right"></span></div>
<ul class=" thehide selectbox_ui_dp extend clear">
<li>Normal</li>
<li>Medium</li>
<li>Urgent</li>
</ul>
</div>
</div>
<div class="input_wrapper extend clear">
<label class="extend clear">attachment</label>
<input class="extend clear" type="text" class="extend clear attachment" value="" required />
</div>
<div class="input_wrapper extend clear">
<label class="extend clear">Message</label>
<textarea class="extend clear" name="message"></textarea>
</div>
<div class="input_wrapper extend clear">
<button class="extend clear">Submit</button>
</div>
</fieldset>
</form>
</div>
Here is the solution that you need. You can use stopPropagation instead of preventdefault. Also use target to find the attr.
$(document).ready(function(){
$(".thehide").hide();
$(".selectbox_ui").click(function(e){
var current_event = $(this);
if($(".selectbox_ui_dp", this).is(":visible")){
$(".selectbox_ui_dp", this).slideUp();
}else{
$(".selectbox_ui_dp", this).slideDown();
}
e.stopPropagation();
});
$(document).on("click", function(e){
if(!($(e.target).hasClass("selectbox_ui"))){
$(".selectbox_ui_dp").slideUp();
}
});
});