Kendo UI for jquery drawer side not forwarding to href - javascript

<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide">
<div id="toolbar"></div>
<div id="drawer">
<div id="drawer-content">
<div id="Inbox">
</div>
<div id="Notifications" class="hidden">
<ul>
<li>Monday meeting</li>
<li>Regarding org chart changes</li>
<li>Meeting with Cliff</li>
<li>Global Marketing Meeting</li>
<li>Out tonight with collegues?</li>
</ul>
</div>
<div id="Calendar" class="hidden">
<ul>
<li>
<h6>11/5 Monday</h6>
<p>Martha Birthday</p>
</li>
<li>
<h6>15/6 Sunday</h6>
<p>Job interview for internal position</p>
</li>
</ul>
</div>
<div id="Attachments" class="hidden">
<ul>
<li>Build enterprise apps</li>
<li>Fw: Regarding Multiline textbox</li>
<li>Away next week</li>
<li>Fw: Your Costume is ready</li>
<li>Update completed</li>
</ul>
</div>
<div id="Favourites" class="hidden">
<ul>
<li>90% Discount!</li>
<li>90% Discount!</li>
<li>One time offer!</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#drawer").kendoDrawer({
template: "<ul> \
<li data-role='drawer-item' class='k-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text' data-id='Inbox'>Inbox</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li> \
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li> \
<li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li> \
</ul>",
mode: "push",
mini: true,
itemClick: function (e) {
if(!e.item.hasClass("k-drawer-separator")){
e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
}
},
position: 'left',
minHeight: 330,
swipeToOpen: true
});
});
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
if(drawerContainer.hasClass("k-drawer-expanded")) {
drawerInstance.hide();
} else {
drawerInstance.show();
}
}
$("#toolbar").kendoToolBar({
items: [
{ type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer},
{ template: "<h3 style='margin-left: 20px;'>Mail Box</h3>" }
]
});
</script>
<style>
#drawer-content li {
font-size: 1.2em;
padding-left: .89em;
background: 0 0;
border-radius: 0;
border-width: 0 0 1px;
border-color: rgba(33, 37, 41, 0.125);
border-style: solid;
line-height: 1.5em;
padding: 1.09em .84em 1.23em .84em;
}
#drawer-content li:last-child {
border: 0;
}
.hidden {
display: none;
}
#example .demo-section {
max-width: 640px;
}
.k-toolbar .k-icon {
font-size: 18px;
}
</style>
</div>
</body>
</html>
<div id="Inbox">
</div>
This block here ^^
I'm trying to forward the menu item onclick to a link
Why does this href not forward the page to google.com on click of the menu item?
Seems like this should be a simple fix, we are not using router. I also tried adding onclick="location.href='requisitions'"
It looks like your post is mostly code; please add some more details. Not sure how many more details I can add.

It is because the link is rendered to the right of the Inbox icon. The element has no content though so you can't see it. Change it to something like this and you'll see what I mean:
Go to mailbox
To do what you want, add more code to your itemClick() event handler to determine if the Inbox item was clicked and open a new tab or redirect the page from there.

#NigelK is correct on both counts. Perhaps you didn't understand his explanation. I'll supplement the "add more code to your itemClick() event bit. With this solution, you won't need inside the div Inbox.
On the event handler, you check if the Inbox was clicked by finding the CSS class and if it was open the URL. Like so:
itemClick: function (e) {
if(!e.item.hasClass("k-drawer-separator")){
e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
let $li = $(e.item[0]);
let $inbox = $li.find(".k-i-inbox");
if ($inbox.length > 0) {
window.open("https://google.com", "_self");
}
}
},

Related

Rearrange Bootstrap page into three columns and items under each other

I have a small tool for scrum teams to track people in the meeting. Now we are more people, one team is added and right now it seems more logical to re-arrange the elements.
Now if you click on team1/team2/team3 button, the names are sorted in 3 columns and next to each other. I want to change this, to 3 columns, but every team will have it's own column. So, team1 names will fill up the first column and the names in this team will come under each other. After that if I click on team2, the names of team2 will fill up the second column and the team3 will fill up the third column. I assume on every team button click the script should create one column and fill up this column, on the second team button click it will again create one column next to the first also on the third time. Is this possible? Thank you very much.
This is the one page working version, all names are randomly generated, completely anonym:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Team Members</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
.alert.member-clicked {
text-decoration-line: line-through;
background-color: #ddd;
border-color: #ddd;
}
.alert.member-absent {
text-decoration-line: line-through;
background-color: #f8d7da;
border-color: #f8d7da;
}
.copyright {
margin-top: 10px;
margin-right: 10px;
text-align: right;
}
.form-inline.form-members .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline.form-members .input-group .input-group-btn {
width: auto;
}
h2 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div class="container">
<h2 class="text text-success text-center">My Team Members</h2>
<div id="memberlist" class="row"></div>
</div>
<footer class="footer">
<div class="container">
<!-- Input for members -->
<div class="form-inline form-members">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add member" id="text" value="Alasdair Mckee">
<div class="input-group-btn">
<button class="btn btn-success btn-addmember"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
<button class="btn btn-success" data-team="team1"><i class="glyphicon glyphicon-plus"></i> Team1</button>
<button class="btn btn-success" data-team="team2"><i class="glyphicon glyphicon-plus"></i> Team2</button>
<button class="btn btn-success" data-team="team3"><i class="glyphicon glyphicon-plus"></i> Team3</button>
</div>
<div class="form-group hidden">
<label for="exampleFormControlTextarea1">Team1</label>
<textarea class="form-control" id="team1" rows="9">
Bentley Parrish
Hunter Pineda
Ammar Burks
Tanya Vang
Aimie Ewing
Anabella Chan
Amayah Sparks
Priyanka Cooke
Boyd Pacheco
Mai Lynch
</textarea>
<label for="exampleFormControlTextarea1">Team2</label>
<textarea class="form-control" id="team2" rows="9">
Alan Rangel
Ikra Knowles
Chelsea Avalos
Aysha Glenn
Margaret Couch
Effie Corbett
Yassin Arias
Caspian Rice
</textarea>
<label for="exampleFormControlTextarea1">Team3</label>
<textarea class="form-control" id="team3" rows="9">
Armani Curran
Monica Kemp
Nur Davis
Hashir Dodson
Ty Hagan
Aariz Rowley
</textarea>
</div>
</div>
<p class="copyright">Created by: Me • me#me.com • ver 1.5</p>
</footer>
</center>
<script>
$(document).ready(function() {
var memberList = $("#memberlist");
memberList.on("click", ".alert", function () {
$(this).toggleClass("member-clicked");
});
memberList.on("click", ".close", function () {
var memberColumn = $(this).parent().parent();
memberColumn.fadeOut();
});
$(".btn-addmember").click(function () {
var newMember = $("#text").val().trim();
if (newMember) {
addMember(newMember);
} else {
alert("Please, enter the name of the member");
}
$("#text").val("");
});
$(".btn[data-team]").click(function () {
addTeam($(this).data("team"));
});
function addMember(member) {
member = member.trim();
if (member) {
memberList.append(
`<div class="col-xs-6 col-sm-4"><div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div></div>`
);
}
}
function addTeam(id) {
var team = $("#" + id)
.val()
.trim();
if (team) {
var members = team.split("\n");
console.log(members);
for (var i = 0; i < members.length; i++) {
addMember(members[i]);
}
}
}
$(document).on('dblclick', '.alert', function() {
$(this).toggleClass("member-absent");
});
});
</script>
</body>
</html>
I think you need to use 3 member lists instead of one.
var memberList1 = $("#listteam1");
var memberList2 = $("#listteam2");
var memberList3 = $("#listteam3");
that means the layout will change:
<div class="row">
<div class="col-xs-6 col-sm-4">
<h3>Team 1</h3>
<div class="column" id="listteam1">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 2</h3>
<div class="column" id="listteam2">
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3>Team 3</h3>
<div class="column" id="listteam3">
</div>
</div>
</div>
also, addMember needs to take the list name as an argument
function addMember(member, list) {
member = member.trim();
if (member) {
$("#list" + list).append(
`<div class="alert alert-success">` +
`<span class="close" aria-label="close">×</span><b>` +
member +
`</b></div>`
);
}
}
please find the whole script here: https://pastebin.com/VQEVKCaF

Jquery Ui: Selectable - possible to select two list items with one click?

I am using Jquery Ui: selectable on a list and am trying to figure out how to select two list elements with one click. I want it so that when a list item is clicked/selected, the next item in the list also gets selected.
ASPX page:
<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
<span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
&nbsp
</span>Join Sections
</button>
<div id="joinBox" class="panel-collapse collapse">
<ul id="sortableJoin-1" style="width: 98%; margin: auto;"></ul>
<div id="saveJoin">
<button type="button" class="btn btn-primary" id="join">
<span class="fa fa-save">
&nbsp
</span>Join
</button>
</div>
</div>
Jquery/Jvascript:
$("#sortableJoin-1").selectable({
selected: function(event, ui) {
var selected = $("li[class$='ui-selected']").length;
}
stop: function (e) {
var last = $("li[class$='ui-selected']:last").index();
$("li:eq(" + (last + 1) + ")").addClass("ui-selected");
},
});
$('#sortableJoin-1').click(function() {
$(this).addClass('no-hover');
})
You can select the next item of the selected item using the stop event which is triggered at the end of the select operation. Inside stop, get the index of the last element with the class ui-selected and add this class to the next element in the list.
$("#sortableJoin-1").selectable({
selected: function(event, ui) {
var selected = $("li[class$='ui-selected']").length;
},
stop: function(e) {
var last = $("li[class$='ui-selected']:last").index();
$("li:eq(" + (last + 1) + ")").addClass("ui-selected");
}
});
.ui-selected {
background: red;
color: white;
font-weight: bold;
}
<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.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<button id="joinSectionsButton" type="button" class="collapsible inactiveSequenceTitle"><span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus"> </span>Join Sections</button>
<div id="joinSectionsBox" class="panel-collapse collapse">
<ul id="sortableJoin-1" style="width: 98%; margin: auto;">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<div id="saveJoinSections">
<button type="button" class="btn btn-primary" id="joinSections"><span class="fa fa-save"> </span>Join Sections</button>
</div>
</div>

jquery number count to a target number

I have a website : my website i have built a jQuery counter to count up to a target number for the points in the team.Plz click on team tab.
problem :
1.
when I load the page,the jquery point count works fine.Lets say when you go to team section and refresh the page.But when I scroll to through the various sections and reach team section,the effect doesnot show up.It looks like normal numbers.Can it be made possible,when the user scrolls to the "team" section the number count with the effect shows up.
The code for that part :
(function($) {
$.fn.countTo = function(options) {
options = options || {};
return $(this).each(function() {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function($) {
// custom formatting example
$('#count-number').data('countToOptions', {
formatter: function(value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half {
width: 49%;
}
.col_third {
width: 32%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end {
margin-right: 0 !important;
}
/* Column Grids End */
.wrapper {
width: 980px;
margin: 30px auto;
position: relative;
}
.counter {
background-color: #808080;
padding: 10px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
}
.counter.col_fourth {
background-color: #fff;
border-radius: 10px;
}
<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<!--
-->
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><i class="fa fa-github"></i>
</li>
<!--
-->
<li><i class="fa fa-instagram"></i>
</li>
<!--
-->
<li><i class="fa fa-twitter"></i>
</li>
<!--
-->
<li><i class="fa fa-bitbucket"></i>
</li>
<!--
-->
<li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</section>
This question i have asked before,I know .jquery number count to a target number and pop display on click. As requested I have separated the question.
kindly help.
Use the jquery.appear plugin. It implements custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
The following code will give you a simple animation effect using the plugin. You need to ensure that each .timer element has a unique id attribute for it to work properly.
// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
// initialise the counters
var counters = {};
var i = 0;
if (singleRun){
// track each of the counters
$(".timer").each(function(){
counters[this.id] = $(this).data("to");
i++;
});
// animate the counters
$.each(counters, function(key, val) {
$({countVal: 0}).animate({countVal: val}, {
duration: 1500,
easing:"linear",
step: function() {
// update the display
$("#" + key).text(Math.floor(this.countVal));
}
});
});
singleRun = false;
}
});
<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<!-- Remember a timer requires a unique id value -->
<h2 class="timer count-title" id="UNIQUE-ID-HERE" data-to="10"></h2>
<p class="count-text ">points</p>
</div>
</div>

Deactive bootstrap active label click

I have several groups with a selection of three buttons. I'm trying to make it so that when someone selects the N/A button, it disables the other two buttons. When the N/A button is deselected, the other two buttons are enabled. I have it working on my machine, that the other two buttons are colored as disabled, and have the "disabled" attribute set properly. The problem is, that the buttons/labels can still be clicked on and set the label to active.
I'm having trouble getting my JSFiddle to operate the same as on my machine. It won't disable the other two buttons on the initial N/A click, but it may just be something with JSFiddle. Here is my code, if you want to try it on your own machine:
https://jsfiddle.net/trout0525/huz8macm/7/
<div id="plan-wrapper">
<div class="row plan-title-row">
<div class="col-lg-6" id="plan-title">
Loading...
</div>
<div class="col-lg-6">
<div class="pull-right" id="countdown">
Countdown
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" style="margin-bottom: 4px;">
<div class="panel-body">
<div class="row" id="master-progress">
</div>
</div>
</div>
</div>
</div>
<div id="plan-file-title" style="margin: 0 0 4px 5px;"></div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a data-toggle="tab" href="#planTeam">Team</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planResources">Resources</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planStatus">Status</a></li>
</ul>
<div class="tab-content" style="background-color: white; padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
<div id="planTeam" class="tab-pane fade in active">
</div>
<div id="planResources" class="tab-pane fade">
</div>
<div id="planStatus" class="tab-pane fade">
</div>
</div>
</div>
</div>
</div>
Any help would be great.
Got it done on JSFiddle with removal of typos and debugging through developer console, yet it's currently with Chrome, not IE:
https://jsfiddle.net/trout0525/huz8macm/9/
$(".btn-group .btn").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var $selectedButton = $(this),
$panelDefault = $selectedButton.closest('.panel-default'),
$controlPanel = $panelDefault.find('.panel-heading .pull-right'),
parent = $selectedButton.closest('.panel-default').attr('data-stepId'),
stepId = $selectedButton.closest('li').attr('id'),
spcStat = $selectedButton.attr('id').match(/^(.*?)\d+$/)[1];
var buttonIsActive = $selectedButton.hasClass('active'),
buttonIsDisabled = $selectedButton.attr('disabled');
if ( buttonIsActive || buttonIsDisabled ) {
$selectedButton.removeClass('active');
} else {
$selectedButton.addClass('active');
}
if ($selectedButton.hasClass('not-applicable')) {
var naIsActive = $selectedButton.hasClass('active'),
allButtons = $selectedButton.closest('.btn-group');
if (naIsActive) {
$selectedButton.siblings().removeClass('active');
$(allButtons)
.find('.btn_draft_complete')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
$(allButtons)
.find('.btn_done')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
} else {
$(allButtons)
.find('.btn_draft_complete')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
$(allButtons)
.find('.btn_done')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
}
}
});

jQuery UI - sortable accordion not working

I made a nested sort-able accordion, but there's something not working. In id 'accordian2', the heights of each item are too small, and a vertical scroll bar is showing. The value of the item which is '1' is getting clipped so only half of it shows.
Can someone please tell me what the problem is in my code?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3'
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
create_accordian('#accordion');
create_accordian('#accordion1');
create_accordian('#accordion2');
//create_accordian('#accordion3');
});
</script>
<style type='text/css'>
/*demo page css*/
#accordion { font: 62.5% 'Trebuchet MS', sans-serif; margin: 10px;}
</style>
<div id='accordion'>
<div class='group'>
<h3>
<a href='#'>1. blah</a>
</h3>
<div>
<div id='accordion1'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
4900bc3b-a086-4d0c-89b8-09e3724aac8e
</span>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
0d59f87e-a294-4f85-beae-a0e266ab6a7e
</span>
</div>
</div>
</div>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>2. blah</a>
</h3>
<div>
<div id='accordion2'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#omega, set autoHeight option to false in your accordion script. eg.
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3',
autoHeight: false // set this to false
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
DEMO

Categories