Why is title jumping to the left while dragging it up and down and how to prevent this?
I tried this solution - doesn't work for me.
$(".act").sortable({
containment: "parent",
axis: "y",
helper: "clone",
tolerance: "pointer"
});
.parent{
position:fixed;
left:5px;
top:9px;
width:50%;
display:grid;
grid-template-columns:1fr 1fr;
overflow:hidden;
grid-gap:5px;
}
.parent div{
background:gold;
}
.title{
cursor:cell;
position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='parent'>
<div></div>
<div class='act'>
<div class='title'>lorem</div>
<div class='title'>ipsum</div>
<div class='title'>dolor</div>
<div class='title'>sit</div>
</div>
</div>
Related
we are creating a table structure using html div, inside that we need to drag and drag and drop the columns and rows , but the row head should be fixed. ie, Drag and drop Div columns and Div rows without moving row head
anybody knows how to solve this.
I need to create this using JQuery , html and css.
$(function() {
$("#tblcols").sortable({
items: '.rtab:not(.rtab:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
ui.item.addClass("selected");
},
stop: function(e, ui) {
ui.item.removeClass("selected");
$(this).find(".rtab").each(function(index) {
if (index > 0) {
$(this).find(".ctab").eq(2).html(index);
}
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
I'm a little unsure what you mean. I hope I captured the main idea, that you want the first cell in each row to remain in order after items are sorted. Here is an example that might work for you.
$(function() {
$(".Table .Heading").sortable({
items: '> .htab:not(:eq(0))',
cursor: 'pointer',
axis: 'x',
dropOnEmpty: false,
placeholder: "htab placeholder",
start: function(e, ui) {
var ind = ui.item.index();
$(".Table .rtab").each(function() {
$(".ctab", this).eq(ind).css("opacity", "0.25");
});
ui.item.data("orig-index", ind);
},
stop: function() {
$(".Table .rtab .ctab").css("opacity", "");
},
update: function(e, ui) {
var oInd = ui.item.data("orig-index");
var cInd = ui.item.index();
var cols = $(".Table .htab").length;
$(".Table .rtab").each(function() {
var cell = $(".ctab", this).eq(oInd).detach();
if (cInd < (cols - 1)) {
// Mid Col
cell.insertBefore($(".ctab", this).eq(cInd));
} else {
// Last Col
$(this).append(cell);
}
})
}
});
$(".Table").sortable({
items: '> .rtab',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
$(".ctab", ui.item).eq(0).html(" ");
},
stop: function(e, ui) {
$(".Table .rtab").each(function(ind, el) {
$(".ctab", el).eq(0).html((ind + 1));
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab.placeholder {
background: #ccc;
width: 20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
For the Header, we can sort the header items and then move the cells that correspond with it. Due to the relationship of the elements in Rows, there is not an element that contains all the column items. It effectively does what is needed, yet looks a little weird in doing it. With items we can exclude the first header.
When using Sortable for the Rows, you want to target the parent and then using items option, you can target the rows that you want to sort and those you want to exclude. Since we're sorting the rows and not the items inside, there is not a good way to exclude an item in the row.
When Sort starts, cell 0 is change to so it does not shrink too much. Once sort is stopped, it re-indexes the rows back into order. If we use update it will only fire when a change is performed. So if the user grabs a row and doesn't move it, there is not update. To address this, we can use stop to re-index.
Hope that helps.
$('.wrapca, .wrapcb').sortable({
containment: "parent",
connectWith: ".wrapca, .wrapcb",
axis: "x",
tolerance: "pointer"
});
.wrapca, .wrapcb{
width:30%;
display:inline-grid;
grid-template-columns:repeat(2, 1fr);
grid-gap:5px;
}
.inside{
cursor:cell;
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>
Why connectWith doesn't work here?
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.
$(function() {
$('.wrap').sortable({
containment: $(".wrap").parent(),
connectWith: ".wrap",
//axis: "x",
tolerance: "pointer"
});
});
.wrapca,
.wrapcb {
width: 30%;
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
.inside {
cursor: cell;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>
I suspect you were being too aggressive in your code. Also, the containment was too strict.
I have a set of 2 very basic pages in jQuery Mobile:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header 1
</div>
<div data-role="content">
Content 1
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
<div data-role="page2" id="page">
<div data-role="header">
Header 2
</div>
<div data-role="content">
Content 2
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
On buttonclick I do a page-transition to the other page:
$("#page1 button").on("click", function(){
$.mobile.changePage($("#page2"), {transition: "slide", reverse: false, changeHash: false});
});
$("#page2 button").on("click", function(){
$.mobile.changePage($("#page1"), {transition: "slide", reverse: false, changeHash: false});
});
But while the transition is running, the footer jumps out of position and moves almost out of the page at the bottom of the page.
How can I avoid that sideeffect?
Beside your typo here: <div data-role="page2" id="page"> which shall be <div data-role="page" id="page2">, i think your question is interesting, because i believe you would like to explore the features of the fixed external toolbars of JQM 1.4.5:
From JQM documentation here Fixed external toolbars:
External toolbars are outside of the page they are not effected by
transition
Here is a simple example of navigation with an external toolbar, with just one header, one footer and one navigation button where the navigation link and page title are set dynamically:
$(function(){
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
});
$(document).on('click', '#btn-next', function () {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pages = {"page2": "#page1", "page1": "#page2"};
$(":mobile-pagecontainer").pagecontainer("change", pages[pageId], {
transition: "slide",
reverse: false,
changeHash: false
});
});
$(document).on("pagecontainerchange", function() {
$("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});
.footer-button-left {
position: absolute !important;
margin: 0 !important;
top: auto !important;
bottom: 0.24em !important;
left: 0.4em !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="page" data-title="Header 1" id="page1">
<div data-role="content">
Content 1
</div>
</div>
<div data-role="page" data-title="Header 2" id="page2">
<div data-role="content">
Content 2
</div>
</div>
<div data-role="footer">
<h2>Footer</h2>
<button id="btn-next" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left">next</button>
</div>
</body>
</html>
Please note, initial text in header & footer is required as placeholder, as well a bit of custom styling for the button inside the footer.
I am trying to add javascript from partial view to layout.cshtml head section by calling
#RenderSection("scripts", required: false) but failing. Please view my partialview page code.
#{
Layout = null;
}
<div id="modal-login" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" title="Insert Student">
#using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "form-login" }))
{
<div style="width:320px; height:320px; padding:0px 15px 15px 15px; border:solid 1px silver">
<div style="width:310px; height:30px; padding-bottom:0px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<div id="loading" style="height:15px; width:120px">
</div>
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbEmailAddress" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbPassword" typeof="password" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:320px; height:20px; padding-top:5px; padding-bottom:15px; border:solid 0px red; font-size:9px;">
<div style="width:310px; height:30px; float:left;">
<input id="btnLogin" class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Submit" style="border:1px solid gray; width:80px; height:25px ">
</div>
<div style="width:140px; height:30px; float:left;">
</div>
</div>
</div>
}
</div>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#modal-login").dialog({
show: "slide",
modal: true,
autoOpen: false,
});
$("#btnLogin").click(function () {
$("#modal-login").dialog("open");
return false;
});
});
</script>
}
And below is layout.chtml head section where iam calling #RenderSection("scripts", required: false) in the second last line of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/jqueryui")*#
<link href="~/Content/themes/base/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
#*<script src="~/Scripts/jquery-1.10.2.js"></script>*#
<script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>
#RenderSection("scripts", required: false)
</head>
Please view my code and suggest if i missed anything? thanks.
the order #section scripts don't work in partialView, erase that and your script work.
but why you try to put the script in the head??
You call JQuery in the head the Script in the partial view works isn't necesary up in the head.
But if I understand your code you make a login form in a partial View for insert in the layout for use in entire web site?
well is more easy if you write the script directly in the head in layout, but better is create a script file with all custom script, mix this with the others scripts in one bundle and finally call this bundle in the head, with this way your site will more faster.
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>