So basically I have a jqxSplitter as a container with fixed sizes. On the left side should be 2 jqxExpanders of which the lower one should contain a jqxTree.
This works so far except:
As I set the Height of the second expander to 100% it expands above the borders of the Splitter. I cant use auto for its size since then the Tree won't show.
So, how can I make the second expander use all the remaining space, without going off borders?
Heres my code so far, its quite long, but only because I gave the tree a lot of items to check scrollbar behavior, i figure I just let it in if you want to try it.
<html>
<head>
<link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../jqwidgets/scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxSplitter
$("#jqxSplitter").jqxSplitter({
width: 1000,
height: 500
});
// Create jqxExpanders
$("#jqxexpander1").jqxExpander({
width: 'auto',
height: 'auto'
});
$("#jqxexpander2").jqxExpander({
width: '100%',
height: '100%',
initContent: function () {
// Create jqxTree
$('#jqxTree').jqxTree({
width: '99%',
height: '99%'
});
}
});
});
</script>
</head>
<body>
<div id='jqxSplitter'>
<div>
<div id='jqxexpander1'>
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
Content
</div>
</div>
<div id='jqxexpander2' style="bottom: 0px">
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
<div id='jqxTree' style="border-style: none">
<ul>
<li>User
<ul>
<li>Info
<ul>
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li>Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
</ul>
</li>
<li>More Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 3</li>
<li>Document 4</li>
<li>Document 5</li>
<li>Document 6</li>
<li>Document 7</li>
<li>Document 8</li>
<li>Document 9</li>
<li>Document 10</li>
<li>Document 11</li>
<li>Document 12</li>
<li>Document 13</li>
<li>Document 14</li>
<li>Document 15</li>
<li>Document 16</li>
<li>Document 17</li>
<li>Document 18</li>
<li>Document 19</li>
<li>Document 20</li>
<li>Document 21</li>
<li>Document 22</li>
<li>Document 23</li>
<li>end</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
Related
Right now, I have a tab structure that looks like the following:
As you can see, when the tabs reach the end of the line they wrap to the next line. I know how to hide the additional tabs; however, I want to introduce an arrow system to navigate to the additional tabs when the tabs overflow. Something that looks like below depending on the screen resolution:
I only want to have the arrows appear if there are additional tabs that are being hidden, this leads me to my question: How do I detect when the tabs wrap and insert the arrows?
I need this to work with responsive layouts.
Here is the code I am using to create the tabs (note: it includes hard-coded list items for the arrows):
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer requested:
window.addEventListener('load', initTabs);
function initTabs() {
var listContainer = document.getElementById('tabs');
var buttonWidthCounter = 0;
var totalContainerWidth = listContainer.offsetWidth;
for (var i = 0; i < listContainer.children.length; i++) {
if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
//button overflow...add tab buttons
console.log('there is overflow...add tab arrow buttons...');
}
buttonWidthCounter += listContainer.children[i].offsetWidth;
}
}
li {
display: inline-block;
}
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer I suggest:
Scrollbars are much easier to implement and are arguably better.
li{
display:inline-block;
}
ul{
white-space:nowrap;
}
html,body{
margin:0;
padding:0;
}
#container{
width:100vw;
overflow:scroll;
}
<div id="container">
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
</div>
I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>
You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>
Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>
I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer
Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/
Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});
I'm trying to add a scroll to a bootstrap dropdown menu. It's a vertical scroll and the code looks like below. First I have a dropdown that works but when I add the scroll like the second dropdown everything falls apart. How do I properly add a scroll to a dropdown the correct way. I want to use the plugin in my example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
<ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
<li>Menu item 6</li>
<li>Menu item 7</li>
<li>Menu item 8</li>
<li>Menu item 9</li>
<li>Menu item 10</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#myscrollid").mCustomScrollbar({
setHeight:"100px",
scrollbarPosition: "inside",
});
});
</script>
</body>
</html>
Download the source and specify the path to your plugin.
You should invoke jQuery as shown.
This worked for me.
Hope this helps
I using isotope to filter data.
Currently, I have an HTML with the struct like:
jQuery('.container-filter-cate').isotope({
itemSelector: '.list-posts',
filter: ':nth-child(-n+3)'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<ul>
<li>All Item</li>
<li>Sport</li>
<li>Cinema</li>
<li>Music</li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>
I want it should be filtered with <li> tag instead of ul like current.
I tried to with:
filter: 'ul.list-posts li:nth-child(-n+2)'
but it's not working.
Edited: my fiddle at here
My purpose is using filter to limit item to show.
You can change values of filter: ':nth-child(-n+3)' to see more information.
When I change to values of filter: ':nth-child(-n+2)' the result will be shown: first and second ul.
If first ul contain 5 items, second ul contain 40 items, it also shows 45 items.
Will fail because I only want 2 item to appear, not all items of two ul.
Check this,
HTML CODE,
<ul id='oiso'>
<li>All Item</li>
<li>sport</li>
<li>cinema</li>
<li>music</li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>
JS CODE
$(document).ready(function() {
var $container = $('.list-posts');
$container.isotope({});
$('#oiso li a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: $(selector).find("li")
});
return false;
});
})
For more details once visit jsfiddle link