I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>
Related
I need to upload different text files each containing some popups.
I am using JQM 1.4.5 and I'm pretty sure I don't make any syntax errors.
My main program has a menu and the user can choose the text.
At this point, I have to upload the text file and the popup file related to that text.
All the attempts I've made using the '.load' function work for text but not for popups.
Can you give me some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Tooltip</title>
<link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel = "stylesheet" href="style/style.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#t1").click (function(){
$("#corpus").load("text1/text1.html");
$("#pp").load("text1/popup1.html #popupBasic").enhanceWithin();
});
$("#t2").click (function(){
$("#corpus").load("text2/text2.html");
$("#pp").load("text2/popup2.html");
});
});
</script>
<style type="text/css">
a:link {color:red;
font-weight:bold;
text-decoration: none;
font-size:100%;
}
#tableMax{
border: 1px solid white;
margin:0 auto;
border-collapse:collapse;
}
#tableMax tr {border-bottom: 1px solid brown;
}
#tableMax td {padding: 18px 25px 18px 20px;
font-family: "Didot";
font-size: 20px;
background-color: antiquewhite;
color:black;
}
#tableMax td:nth-child(1) {
color:brown;
font-size:100%;
text-align:center;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="menu" style="display:block;">
<button class="ui-btn ui-btn-b ui-btn-inline" id="t1">text 1</button>
<br>
<button class="ui-btn ui-btn-b ui-btn-inline" id="t2">text 2</button>
</div>
<div id="corpus"></div>
<div data-role="popup" id="pp"></div>
</div> <!-- chiude content -->
</div>
</body>
</html>
<!-- text1.html> -->
<table id="tableMax">
<tr><td>1a</td>
<td>This text contains a popup
</td></tr>
<tr><td>1b</td>
<td>This text also contains a popup
</td></tr>
</table>
<!-- popup1.html -->
<p id="popup_1" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1a.</p>
<p id="popup_2" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1b.</p>
Here are some suggestions to achieve what You want:
Basically, IMHO it is better not to create and destroy again and
again a JQM widget. If possible, create just at the beginning all
needed widgets and change the content, i.e. text and images
when You need it.
In my example I will show You both: dynamic destroying and instancing
a JQM table and dynamic changing the content of one existing popup.
Please, note that for a JQM table the thead and th tags are mandatory.
In Your example, You may need to show some data related to a table
row, but in my example I will attach the popup data to a single cell.
I believe, this is a more flexible approach.
The simplest way to create such a relation is to set a custom
data-attribute. You can call it whatever You want. Just for instance,
data-info: popup
After that, the popup content will be retrieved from the clicked
anchor, just before the popup will be open.
For the menu, instead of push-buttons I am using radio-buttons,
so the code will be much simpler, using just one event handler.
Moreover, it will be nice if You tell the user that something is
going on, by using a spinner and a visual feedback after the table
data has been downloaded (table fade-in).
Here is the most relevant code:
$(document)
.ready(function () {
$('input[name=files]').on('change', function (e) {
var path = e.target.id, $table = $("#tableMax").hide().table("destroy");
$.mobile.loading("show");
$.when($.get(path + '/popup.html'), $.get(path + '/text.html')).done(
function (popupData, tableData) {
$.mobile.loading("hide");
/* each data[0] will contain the response text */
$table.html(tableData[0]).table({create: function() {
var allPopups = $('<div></div>').append(popupData[0]);
$(this).fadeIn("slow").data("mobile-table").allHeaders.each(function() {
$(this).data("cells").each(function(){
$(this).find("a[href='#pp']").each(function () {
var popupLink = $(this).attr("data-info"),
popupContent = $(allPopups).find(popupLink);
$(this).data("popup-content", popupContent);
});
});
});
}
});
});
});
})
.on('pagebeforechange', function (e, ui) {
var link = ui.options.link, ctx = link && link.context, hash = ctx && ctx.hash;
if (hash == '#pp') $(hash).empty().html($(ctx).data('popup-content'));
});
Here is a full workng DEMO: https://plnkr.co/edit/3IXDqQJMVn2QYOed?open=lib%2Fscript.js
I have a bunch of divs inside a display:flex parent div. The parent div is sortable with jquery-ui's sortable function.
As well as allowing the user to sort, I would like to add some buttons that do an animated sort.
For example, with this HTML:
<div class="sortable">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
I would like a button that when pressed would animate moving div1 to be between div4 and div5, moving smoothly (in fact, a little erratically as if it were being moved by hand would be even better) and shifting all the divs it passes, so it looks as if it were being moved by hand.
Is this possible using jquery-ui's sortable(), or am I better off building a custom solution?
Consider the following example.
$(function() {
function arrange(obj, pre) {
obj = $(obj);
var t = $("[id^='div']:eq(" + pre + ")");
obj.animate({
top: t.position().top + "px"
}, {
duration: 1000,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: t,
});
},
complete: function() {
obj.detach().css("top", "").insertAfter(t);
}
});
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrange($("#div1"), 3);
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button>
Built from https://css-tricks.com/jquery-ui-position-function/
Update
$(function() {
function swap(a, b, ms) {
console.log("Swap:", a.attr("id"), "with", b.attr("id"));
a.animate({
top: b.position().top + "px"
}, {
duration: ms,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: b,
});
},
complete: function() {
a.detach().css("top", "").insertAfter(b);
}
});
}
function arrangeAfter(a, b) {
var n = a.next();
for (var c = parseInt(n.attr("id").slice(-1)); n.index() <= b.index(); c++) {
swap(a, n, 400);
n = $("#div" + (c + 1));
}
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrangeAfter($("#div1"), $("#div4"));
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button> <button class="btn" id="reset">Reset</button>
When I click on the pop up link it turns blue but nothing popup. I would like to know what I am doing wrong. Do I need to refresh the navbar? I know that jquery mobile events need to be refreshed. Should I use the listview('refresh') ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customer Chooses Beer Quantity</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script>
$(document).on('pagebeforeshow','#index', function(){
start_beer_quantity_from_0();
//hide the ui loader
$("#index").loader().loader("option", "disabled", true );
//ajax call to beers
function start_beer_quantity_from_0(){
//form variables
var beer_count = 0;
var formData = {beer_count:beer_count};
ajax_update_content_when_page_is_loaded_beer_quantity(formData);
}
function ajax_update_content_when_page_is_loaded_beer_quantity(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
//alert($.trim(data));
$('.display_beer_count').html(data);
},
error: function (jqXHR, textStatus, errorThrown){
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
$(document).on('click','.beers', function (event){
var beer_quantity = $(this).find(".beer_quantity").val();
var beer = $(this).find(".beer").val();
//form variables
var formData = {
beer_quantity:beer_quantity,beer:beer
};
submit_ajax_form_add_beer(formData);
event.preventDefault();
function submit_ajax_form_add_beer(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
// alert("Beer posted");
$('.display_beer_count').html($.trim(data));
},
error: function (jqXHR, textStatus, errorThrown){
alert("There is not internet connection. Please check your internet connection");
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
</script>
</head>
<body >
<div data-role="page" id="index" >
<div data-role="popup" id="settings_popup_beer_quantity" data-position="right">
<ul data-inset="true" data-role="listview" data-theme="a" data-divider-theme="b" style="min-width:210px;">
<li data-role="list-divider">Settings</li>
<li data-icon="false"><?php echo anchor('login/logout/','Logout', array('title'=>"Logout", "rel" =>"external"));?></li>
<li data-icon="false"><?php echo anchor('customer_settings/','Settings',array('title'=>"Settings","rel" =>"external"));?></li></ul></div>
<div style="float:left;">
<img class="small_logo" border="0" src="<?php echo $this->config->base_url();?>images/small_logo.png" alt="cup Bar Express" />
</div>
<div data-role="header" style="width:100px;float:right;" data-position="right">
<div class="settings_button_quantity" data-role="navbar">
<ul>
<li>Settings</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div role="main" class="ui-content" id="index">
<div class="background_image">
<div class="ui-grid-solo" id="title">QUANTITY</div>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<?php
if(isset($beer_quantity_button)){
echo $beer_quantity_button;
}
?>
</ul>
</div>
</div>
<style type="text/css">
.ui-listview>li h1, .ui-listview>li h2, .ui-listview>li h3, .ui-listview>li h4, .ui-listview>li h5, .ui-listview>li h6{
font-family:'RNS Camelia';
text-shadow: none;
color : black !important;
font-weight: 700;
font-size : 33px;
}
li h1 .display_beer_count{
color:white;
}
.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn{
padding-right:18px;
padding-left :18px;
text-align :center;
background :transparent !important;
}
button.ui-btn.beer_quantity_button{
border :none;
color : black !important;
background: #D6DE23 !important;
}
.ui-listview>li h1.add_beer_to_cart_letters {
color:white !important;
}
button.add_beer_to_cart {
background: transparent !important;
}
#font-face {
font-family:'RNS Camelia';
font-style : normal;
font-weight: 900;
src : local('RNS Camelia'), url(<?php echo $this->config->base_url();?>fonts/RNS_Camelia.otf);
}
#font-face{
font-family:'Simply City Light';
font-style : normal;
font-weight: normal;
src : local('Simply City Light'), url(<?php echo $this->config->base_url();?>fonts/siml023.ttf);
}
.settings_button_quantity{
width :100px;
height :22px;
float :right;
}
a .settings_popup_link_quantity{
height:22px;
}
.ui-content .ui-listview-inset, .ui-panel-inner>.ui-listview-inset{
margin:0;
}
#title{
text-shadow : none!important;
margin-bottom: 11px;
width : 100%;
font-size : 52px !important;
font-family :'RNS Camelia' !important;
color : #D6DE23 !important;
padding-left : 5%;
}
.background_image{
width :100% !important;
padding-bottom:160px !important;
margin-left :auto !important;
margin-right :auto !important;
display :block;
background :url(<?php echo $this->config->base_url();?>images/beer_cup.png) no-repeat;
z-index :-21;
}
.ui-page{
background-image :url('<?php echo $this->config->base_url();?>images/background.png') !important;
width :100%;
background-size :100% 100%;
background-repeat:no-repeat;
}
.small_logo{
padding-top: 4px;
width : 138px;
height : 52px;
}
#settings_popup_beer_quantity li a,#settings_popup_beer_quantity,.ui-navbar li:last-child .ui-btn {
color :black !important;
font-family:'Simply City Light'!important;
}
#settings_popup_beer_quantity .ui-li-divider{
background:black!important;
}
</style>
</div>
</body>
</html>
I copied your code into a fiddle here and it appears to be working for me. at least the popup shows up when I click the link.
https://jsfiddle.net/2y9ouhzb/
<div data-role="page" id="index">
<div data-role="popup" id="settings_popup_beer_quantity" data-position="right">
<ul data-inset="true" data-role="listview" data-theme="a" data-divider-theme="b" style="min-width:210px;">
<li data-role="list-divider">Settings</li>
<li data-icon="false">
<?php echo anchor( 'login/logout/', 'Logout', array( 'title'=>"Logout", "rel" =>"external"));?></li>
<li data-icon="false">
<?php echo anchor( 'customer_settings/', 'Settings',array( 'title'=>"Settings","rel" =>"external"));?></li>
</ul>
</div>
<div style="float:left;">
<img class="small_logo" border="0" src="<?php echo $this->config->base_url();?>images/small_logo.png" alt="cup Bar Express" />
</div>
<div data-role="header" style="width:100px;float:right;" data-position="right">
<div class="settings_button_quantity" data-role="navbar">
<ul>
<li>Settings
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div role="main" class="ui-content" id="index">
<div class="background_image">
<div class="ui-grid-solo" id="title">QUANTITY</div>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<?php if(isset($beer_quantity_button)){ echo $beer_quantity_button; } ?>
</ul>
</div>
</div>
</div>
<!-- /page -->
I'm using jQuery-UI v1.11.2 in order to create some draggable and droppable divs, and Boostrap 3.1.1 as well.
I'd like to know why a Boostrap column class is interfering with the draggable "hint".
In other words, as I drag an image from my Gallery div to my Dashboard div, the Dashboard div comes in FRONT of the image hint. Then once I DROP my image on the Dashboard div, the image re-appears.
If I remove the col-md-8 class from the Dashboard div, this problem goes away.
Here are two screen shots to demonstrate:
1) WITHOUT the Bootstrap column class on the right div (image hint looks good)
2) With the Bootstrap column class on the right div (image hint disappears)
Here's the HTML code :
<section id="gadgets-view" class="mainbar" data-ng-controller="gadgets">
<div class="container-fluid">
<div class="row-fluid">
<!-- based on http://jqueryui.com/droppable/#photo-manager -->
<div class="ui-widget ui-helper-clearfix col-md-4"> <-- GALLERY OF WIDGETS -->
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Tree Grid</h5>
<img src="images/treegrid.jpg" alt="Hierarchy Grid" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Area Chart</h5>
<img src="images/chart_area.jpg" alt="Area Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Bar Chart</h5>
<img src="images/chart_bar.png" alt="Bar Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Column Chart</h5>
<img src="images/chart_column.png" alt="Column Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Line Chart</h5>
<img src="images/chart_line.png" alt="Line Chart" width="96" height="72">
</li>
</ul>
</div>
<div class="col-md-8">
<div id="dashboard" class="ui-widget-content ui-state-default "> <-- DROPPABLE DASHBOARD -->
<h4 class=""><span class="ui-icon ui-icon-image"></span>Dashboard</h4>
</div>
<div>
</div>
</div>
</section>
The CSS :
<style>
.ui-widget-header{
font-size: 65%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
.ui-state-highlight {
border: 2px dashed #d3d3d3; /* override to show dashed border when dragging */
}
#gallery {
float: left;
width: 75%;
min-height: 12em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
list-style: none;
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5 {
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a {
float: right;
}
.gallery li a.ui-icon-zoomin {
float: left;
}
.gallery li img {
width: 100%;
cursor: move;
}
#dashboard {
float: left;
width: 45%;
height:500px;
padding: 1%;
}
#dashboard h4 {
line-height: 25px;
margin: 0 0 0.4em;
}
#dashboard h4 .ui-icon {
float: left;
}
#dashboard .gallery h5 {
display: none;
}
The JavaScript to create drag/drop areas :
<script>
$(function () {
// there's the gallery and the dashboard
var $gallery = $("#gallery"),
$dashboard = $("#dashboard");
// let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the dashboard be droppable, accepting the gallery items
$dashboard.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
debugger;
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the dashboard
$gallery.droppable({
accept: "#dashboard li",
activeClass: "custom-state-active",
drop: function (event, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Remove gadget' class='ui-icon ui-icon-minus'></a>";
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $dashboard).length ?
$("ul", $dashboard) :
$("<ul class='gallery ui-helper-reset'/>").appendTo($dashboard);
//$item.find("a.ui-icon-dashboard").remove(); // DO NOT REMOVE ORIGINAL WIDGET ICON - 11/19/2014 BM:
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
//$item.animate({ width: "48px" }).find("img").animate({ height: "36px" });
$item.animate().find("img").animate();
});
});
}
// image recycle function
var dashboard_icon = "<a href='link/to/dashboard/script/when/we/have/js/off' title='Add this gadget' class='ui-icon ui-icon-plus'</a>";
function recycleImage($item) {
$item.fadeOut(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "96px")
.append(dashboard_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-dashboard")) {
deleteImage($item);
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
recycleImage($item);
}
return false;
});
});
I found the problem you describe (but i did not found a relation with the Bootstrap Grid Classes).
For my the problem seems to be related to the z-index and can be solved by adding the following style rules at the end of your CSS code:
.ui-draggable-handle {
z-index: 1;
}
When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}