I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>
Related
I am new to html & javascript and have been following along with an online course regarding a leaflet webmap application.
I have a drop down menu in my sidebar which enables the user to filter the locations by category, and a function that does a refresh of the sidebar and dropdown menu after every filter selection and is called at the beginning when the web application starts as well.
When I run my index.html code in Chrome locally, the console states an error with the html header tag in my refreshCCP function ("Uncaught SyntaxError: Invalid or unexpected token"), but cannot see a problem with it:
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
The above line of code is found at the bottom of the script area in the refreshCCP function
All HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.0/dist/leaflet.css">
<link rel="shortcut icon" href="">
<link rel="shortcut icon" href="#">
<script src="https://unpkg.com/leaflet#1.9.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#header {
height: 85px;
background-color:darkgoldenrod;
}
#mapdiv {
height: 650px;
background-color:salmon;
}
#side_panel {
height: 650px;
background-color:beige;
}
#footer {
height: 85px;
background-color:darkgrey;
}
</style>
</head>
<body>
<div id="header" class="col-md-12">
<h1 class="text-center">CCP Finder</h1>
</div>
<div id="side_panel" class="col-md-3"> //
<h1 class="text-center">Search Panel</h1>
<!-- dropdown filter box -->
<select id = "filter" class="form-control">
<option value="All">All CCP</option>
<option value="ex1">ex1 CCP</option>
<option value="ex2">ex2 CCP</option>
</select>
</div>
<div id="mapdiv" class="col-md-9"></div>
<div id="footer" class="col-md-12">
<h4 id="map_coords" class="text-center">Latitude:53.4 Longitude: -113.7 Zoom Level: 10.5</h4>
<h4 class="text-center">©2022 xxxx
</h4>
</div>
<script>
var mymap = L.map('mapdiv')
mymap.setView([53.4, -113.7], 10.5);
var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');
mymap.addLayer(backgroundLayer);
var lyrCCP;
<!-- Refresh sidepanel and filter dropdown function -->
refreshCCP();
mymap.on('mousemove', function(e){
var str = "Latititude: "+e.latlng.lat.toFixed(5)+" Longitude: "+e.latlng.lng.toFixed(5)+" Zoom Level: "+mymap.getZoom();
$("#map_coords").html(str);
});
<!-- Refresh sidepanel and filter dropdown function -->
function refreshCCP(){
$.ajax({
url:'load_ccp.php',
type: 'POST',
data:{filter:$("#filter").val()},
success:function(response){
if (lyrCCP) {
mymap.removeLayer(lyrCCP);
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>");
};
lyrCCP=L.geoJSON(JSON.parse(response), {pointToLayer: function(feature,latlng) {
var str = "<hr>CCP Number:<h4>"+feature.properties.cp_no+"</h4>";
str += "<hr>River Name: <h4>"+feature.properties.river+"</h4>";
str += "<img src='img/"+feature.properties.tactic+"' width = '200px'></img>";
return L.circleMarker(latlng).bindPopup(str);
}});
lyrCCP.addTo(mymap);
mymap.fitBounds(lyrCCP.getBounds());
}});
$("#filter").change(function(){
refreshCCP();
});
</script>
</body>
</html>
In order to get it to work, you need to send a template literal instead of a string by using the grave character:
$("#side_panel").html(
`<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>`);
So I created a mock up of my problem. I am using Select Picker to create my multi-select drop-down. On page reload I want to save the options selected via sessionStorage.
My session Storage works successfully. It grabs the value of my options and stores them on my browser, however it won't be displayed visually to the user.
Is there a way to select the options in the drop-down menu using Javascript/jquery?
Also worth mentioning my logic might seem overkill, but I am using $(this) to grab each name attribute because I will be using this on multiple forms.
Thanks!
jsfiddle : https://jsfiddle.net/7Lhwbzs2/3/
<!--Importing CSS stylesheets-->
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<div>
<select class="selectpicker" name="Food" data-none-selected-text="Select Option(s)..." multiple>
<option value="Pizza">Pizza</option>
<option value="Wings">Wings</option>
<option value="Veggies">Veggies</option>
<option value="Rice">Rice</option>
<option value="Pasta">Pasta</option>
</select>
</div>
<script>
$('select').selectpicker({
actionsBox: true,
});
$('select').each(function( index ) {
var previousSelection = window.sessionStorage.getItem(`${$(this).attr('name')}`) ? JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
console.log(previousSelection)
});
$('select').on("change", function (e){
window.sessionStorage.setItem(`${$(this).attr('name')}`, JSON.stringify($(this).val()) );
});
</script>
You can just use selectpicker like this:
$('.selectpicker').selectpicker('val', previousSelection);
Just replace your javaScript code with this. I tested it and it works just fine:
var previousSelection
$('select').selectpicker({
actionsBox: true,
});
$('select').each(function( index ) {
previousSelection =
window.sessionStorage.getItem(`${$(this).attr('name')}`) ?
JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
console.log(previousSelection)
});
$('select').on("change", function (e){
window.sessionStorage.setItem(`${$(this).attr('name')}`,
JSON.stringify($(this).val()) );
});
$('.selectpicker').selectpicker('val', previousSelection);
I'm trying to figure out why I can't get the close event triggered when a bootstrap-select is closed.
$(function() {
$('.selectpicker').on('hide.bs.dropdown', function () {
alert('hide.bs.dropdown');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>
<select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
The hide.bs.dropdownevent is tied to the parent of the selectpicker, instead of the selectpicker itself, so you will need to :
$(function() {
$('#selectpicker-container').on('hide.bs.dropdown', function () {
alert('hide.bs.dropdown');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>
<div id="selectpicker-container">
<select class="selectpicker" multiple="true" data-done-button="true" data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
the bootstrap-select plugin has different events to the standard bootstrap dropdown. see Here.
rendered.bs.select, refreshed.bs.select, change.bs.select,
hide.bs.select, hidden.bs.select, show.bs.select, shown.bs.select
hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select
all have a relatedTarget property, whose value is the toggling anchor
element.
changed.bs.select passes through event, clickedIndex, newValue,
oldValue. true if selected and false if not selected.
So, try:-
$(function() {
$('.selectpicker').on('hide.bs.select', function () {
alert('hide.bs.select');
});
});
When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script
I am having trouble getting a jquery plugin called ui multiselect to show up properly inside a modal (using jqmodal). I actually have tried another modal called simplemodal and a different multiselect plugin as well with no luck. From what I can gather, it appears the CSS of the for uimultiselect is not being applied because the multiselect resides inside the modal div, which has display: none at page load. I have tried a number of different things suggested by others having this issue and none have worked. Perhaps I am doing it wrong.
In my code, I displayed the multiselect inside and outside of the modal. It works perfectly fine outside.
here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/multiselect/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/multiselect/ui.multiselect.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/jqModalForm.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/jqModal.css" />
<script type="text/javascript" src="js/multiselect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/multiselect/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" language="javascript" src="js/jqModal.js"></script>
<script type="text/javascript" language="javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>
</head>
<body>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" />
<div id="wrapper">
<div id="content">
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
Add
<script type="text/javascript" src="js/multiselect/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect();
$('#switcher').themeswitcher();
});
</script>
<div id="addShortCodes" class="jqmDialog">
<div class="jqmdTL">
<div class="jqmdTR">
<div class="jqmdTC jqDrag">Add Short Codes</div>
</div>
</div>
<div class="jqmdBL">
<div class="jqmdBR">
<div class="jqmdBC">
<form id="addMonitor" action="addMonitor.do" method="post">
<div class="leftBox1">
Short Codes:
<textarea name="shortCodes" cols="20" rows="8"></textarea>
</div>
<div class="rightBox1">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
</div>
<input type="hidden" name="requestId" value="${monitorRequest.requestId}" />
<div class="centerBox1">
<input type="submit" value="Add" />
</div>
</form>
</div>
</div>
</div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All / Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li>Michael Aufreiter</li>
<li>Yanick Rochon</li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Elsewhere</h2>
<ul>
<li>DONUT? - Radial Navigator <small style="color: red;">NEW!</small></li>
</ul>
</div>
<div id="footer">
<p class="left">A Quasipartikel Production</p>
<p class="right">Template adopted from orderedlist.com</p>
<br class="clear"/>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10368067-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
please try to place your jquery code before </body> and after the target selector...
so jquery code after target selector can fire it up .
because jquery need to be manipulation the target after.
All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
You might be using syntax that is not recommended, try this:
$(document).ready(function() {
instead of this
$().ready(function() {
I resolved the issue. I had to apply the mutiselect js in the callback from jqmodal
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var myOpen=function(hash){
hash.w.css('opacity',1).show();
$(".multiselect").multiselect();
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
};
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay',
onShow:myOpen
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>