I am using YUI layout and autocomplete in the same page. The problem is that autocomplete field dropdown goes behind the layout.
I think the problem is with z-order but couldn't find it after a bit of research.
Here is the simplified piece of code I have, just copy it to html file and it should work (enter letter a for example to see the problem):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/layout.css">
<link rel="stylesheet" type="text/css" href="main.css"></link>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/autocomplete/autocomplete-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="header" >
<div class="header2">
<span class="right-float topPad4px" id="myAutoComplete">
<input class="searchInput" id="searchInput" type="text" size="25" value=""/>
<div id="results"></div>
<input id="myHidden" type="hidden">
</span>
</div>
</div>
<div class="mainArea">
<div id="tree" class="tree" style="margin-left :20px">
</div>
<div id="center" class="centerDiv">
</div>
</div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 40, body: 'header', gutter: '0px'},
{ position: 'left', width: 280, resize: true, body: 'tree', scroll: true, animate: false },
{ position: 'center', body: 'center', scroll: true }
]
});
layout.render();
Event.on('tLeft', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('left').toggle();
});
});
})();
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
var ac = new YAHOO.widget.AutoComplete("searchInput", "results", ds);
</script>
</body>
</html>
my question is - what do I need to modify for the autocomplete dropdown to appear on top of layout?
Ok, found the answer on yui forum, basically I need to add bold items:
{ position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 },
see http://developer.yahoo.com/yui/examples/layout/menu_layout.html for more details in the "Fixing the hidden Menus" section.
Related
I am trying to plot historical flot chart between two custom date range, user will select date range and based on selection I will retrieve data from my database and going to plot flot chart. Retrieving data from database based on selection is completed but plotting that data in flot chart is not resulting result. Below is my code I am trying to plot
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), [data], {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), data, {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height:300px;"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
I am trying to create a pie chart using wijmo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Data Source</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="%description%" />
<meta name="keywords" content="" />
<meta name="author" content="ComponentOne" />
<link href="../Scripts/Wijmo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Wijmo/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/raphael-min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/globalize.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijchartcore.js"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijpiechart.js"></script>
<style type="text/css">
#wijpiechart
{
width: 756px;
height: 475px;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
debugger;
var data = [{
Device: 'MacBook Pro',
Percent: 46.78,
Offset: 15
}, {
Device: 'iMac',
Percent: 23.18
}, {
Device: 'MacBook',
Percent: 20.25
}, {
Device: 'Mac Pro',
Percent: 5.41
}, {
Device: 'Mac mini',
Percent: 3.44
}];
$('#wijpiechart').wijpiechart({
dataSource: data,
data: {
label: { bind: "Device" },
value: { bind: "Percent" },
offset: { bind: "Offset" }
},
radius: 140,
legend: { visible: true },
hint: {
content: function () {
return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
}
},
header: {
text: "Steam - Mac Hardware"
}
});
});
</script>
</head>
<body class="demo-single">
<div class="container">
<div class="header">
<h2>
DataSource</h2>
</div>
<div class="main demo">
<!-- Begin demo markup -->
<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
</div>
<!-- End demo markup -->
<div class="demo-options">
<!-- Begin options markup -->
<!-- End options markup -->
</div>
</div>
<div class="footer demo-description">
<p>
This sample shows how to create a pie chart using an array as the data source for
the chart.</p>
</div>
</div>
</body>
</html>
I am getting an object reference error ///
Microsoft JScript runtime error: Object doesn't support this property or method
You should either refer the complete js files that are available at this link:
http://wijmo.com/downloads/
or you can use AMD modules and can refer to the following link:
http://wijmo.com/docs/wijmo/#AMDwithRequireJs.html
This is part of a mvc 3 razor view. I have a few editorfor boxes on the form and wanted to add a bit of jquery to enhance the robustness of the form. However I am getting an odd error and it does not make sense to me.
First lets have a look at the view.
<link type="text/css" rel="stylesheet" href="/content/jquery-ui-1.8.16.custom.css"/>
<link type="text/css" rel="stylesheet" href="/content/site9.css"/>
<link rel="stylesheet" href="#Url.Content("~/jqwidgets/styles/jqx.base.css")" type="text/css" />
<link rel="stylesheet" href="#Url.Content("~/jqwidgets/styles/jqx.darkblue.css")" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.10.1.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxcore.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxvalidator.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/globalization/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxmaskedinput.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/jqxinput.js")" type="text/javascript"></script>
<script src="#Url.Content("~/jqwidgets/gettheme.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#date_paid').datepicker();
$("#first_name").jqxInput({ placeHolder: "First Name", width: 200, height: 25, theme: 'darkblue' });
$("#last_name").jqxInput({ placeHolder: "Last Name", width: 200, height: 25, theme: 'darkblue' });
$("#middle_initial").jqxInput({ placeHolder: "Middle Initial", width: 150, height: 25, theme: 'darkblue' });
$("#zip_code").jqxmaskedinput({ mask: '#####-####', width: 150, height: 25, theme: 'darkblue' });
});
<div class="editor-label">
<label>First Name</label>
#Html.EditorFor(Function(model) model.first_name)
#Html.ValidationMessage("first_name", "*")
<label class="small_spacing">Middle Initial</label>
#Html.EditorFor(Function(model) model.middle_initial)
#Html.ValidationMessage("middle_initial", "*")
<label class="small_spacing">Last Name</label>
#Html.EditorFor(Function(model) model.last_name)
#Html.ValidationMessage("last_name", "*")
</div>
<div class="editor-label">
<label>City</label>
#Html.EditorFor(Function(model) model.city)
#Html.ValidationMessage("city", "*")
<label class="spacing">State</label>
#Html.DropDownListFor(Function(model) model.State, New SelectList(ViewBag.states), New With {.class = "StateDrop"})
#Html.ValidationMessageFor(Function(model)model.State)
<label class="small_spacing">Zip Code</label>
#Html.EditorFor(Function(model) model.zip_code)
#Html.ValidationMessage("zip_code", "*")
</div>
All this looks great however that jqxmaskedinput is throwing the below error.
Uncaught TypeError: Object [object Object] has no method 'jqxmaskedinput'
And the jqxInput boxes are working fine. If I remove the jqxInput boxes the jqxmaskedInput works fine. I thought this was possibly a compatibility issue between the 2 but on jqWidgets I found an example that uses both jqxInput and jqxmaskedInput so there is little probability that this is a compatibility issue. Being a total nooblet in this area I am lost as to what may be the cause for this.. Any suggestions are welcomed..
Javascript is case sensitive. The call to .jqxmaskedinput should have been .jqxMaskedInput.
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
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>