I'm just trying to print back to better understand how to move around the tree traversal using console.log.
When I click on a parent I'd like to print back it's children. I thought it would be easy as
console.log($(event.target).children());
I've tried to use
console.log($(event.target).children("ul li a"));
It gives me []. I'm looking to print out the child's ID.
HTM:
<body>
<div class = "testButton">
<ul>
<li>
Parent One
<ul>
<li> P1 child </li>
</ul>
Parent Two
<ul>
<li> P2 child </li>
</ul>
Parent Three
<ul>
<li> P3 child </li>
</ul>
Parent Four
<ul>
<li> P4 child </li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.testButton ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.testButton li {
display: inline;
}
.testButton a {
display: block;
width: 6em;
text-align: center;
text-decoration: none;
margin: 0em auto .14em;
padding: .1em .5em .1em .5em;
font-size: 2.5em;
}
.upButton {
background-color: #ccc;
color: #000;
}
.overButton {
background-color: #222;
color: #fff;
}
.outButton {
background-color: #ccc;
color: #000;
}
.clickButton {
background-color: #F90;
color: #222;
}
JS:
google.load('jquery', '1.6.2');
google.setOnLoadCallback(function(){
$(".testButton a").addClass("upButton");
$(".testButton a").mouseover(function(event){
$(event.target).removeClass("outButton").addClass("overButton");
});
$(".testButton a").mouseout(function(event){
$(event.target).addClass("outButton");
});
$(".testButton a").click(function(event){
$(".testButton a").removeClass("clickButton");
$(event.target).addClass("clickButton");
$(this).blur();
console.log($(event.target));
console.log($(event.target).children());
console.log($(event.target).parent().children());
console.log($(event.target).siblings());
});
});
This should do the trick for the structure of your ul/li/a tags.
DEMO
For the demo I have just simply alerted the ids for you. You can change these to console.log if you like. So now what I did...
$('.button').click(function() {
$(this).next('ul').children().each(function() {
alert($(this).children('a').attr('id'));
});
});
I added a class 'button' to each of your parents just to make it clear. So now when any item with a class 'button' is clicked, we get the next 'ul' in your html structure - (next() gets the next element at the same hierachy level of your code). Then for each child within that 'ul' I have alerted the id of each anchor within each child (as your structure is <li><a id="..."></li>).
Related
I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.
I want to display the legends in separate like in this.
here's my code.
var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height',80);
barGraphQty = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
legend: {
display: false
},
}
});
myLegendContainer.innerHTML = barGraphQty.generateLegend();
});
HTML code
<div class="col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Legends</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="legend"></div>
</div>
</div>
</div>
CSS
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
display:block !important;
text-decoration: line-through !important;
}
[class$="-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10
please help me.
Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.
What you really need is generating custom HTML legend using legendCallback together with some CSS.
Please take a look at the following posts to see how this could be done:
https://stackoverflow.com/a/63216656/2358409
https://stackoverflow.com/a/63202664/2358409
I have a ionic app that has a page.html which im tryng to apply this sass code to my flexbox table but cant compile. I have this css to style bg color
.Rtable-cell--light {
background-color: white;
border-color: mix(white,$tableColour,80%);
}
Which i call inside my Rtable-cell with include
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%; // Default to full width
padding: 0.8em 1.2em;
overflow: hidden; // Or flex might break
list-style: none;
border: solid $bw white;
background: fade(slategrey,20%);
> h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
margin: -$bw 0 0 -$bw; //border collapse offset
#include Rtable-cell--light;
}
Why do i getting the error?
My flexbox table looks like this
<div class="Rtable Rtable--4cols">
<div class="Rtable-cell"><h3>Eddard Stark</h3></div>
<div class="Rtable-cell">Has a sword named Ice</div>
<div class="Rtable-cell">No direwolf</div>
<div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>
<div class="Rtable-cell"><h3>Jon Snow</h3></div>
<div class="Rtable-cell">Has a sword named Longclaw</div>
<div class="Rtable-cell">Direwolf: Ghost</div>
<div class="Rtable-cell"><strong>Knows nothing</strong></div>
<div class="Rtable-cell"><h3>Arya Stark</h3></div>
<div class="Rtable-cell">Has a sword named Needle</div>
<div class="Rtable-cell">Direwolf: Nymeria</div>
<div class="Rtable-cell"><strong>No one</strong></div>
</div>
</div>
You are using wrong keyword.
.Rtable-cell--light is not a mixin, but rather a selector, so instead of #include, you should use #extend, like:
#extend .Rtable-cell--light;
Doc link: http://sass-lang.com/guide#topic-7
I have two lists - the first contains a list of items the user can select, and he selects them by dragging them to the second list. I have implemented this with jQuery UI Sortable, and created a basic example on jsfiddle.
So drag an item from the first to the second list - OK. The problem occurs if you scroll down to the bottom of the second list - you are unable to drag an item from the first to the second list. It appears that all list items that overflowed beyond the end of the visible list do not have a drop target associated with them. Same happens when copying in the other direction.
As sortable appears to be aimed at lists, I suspect I am missing a trick. Any ideas?
The jsfiddle example code is:
html
<div class="listDiv">
<ul id="list1" class="connected ui-sortable">
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
<li id="d">d</li>
<li id="e">e</li>
<li id="f">f</li>
<li id="g">g</li>
<li id="h">h</li>
<li id="i">i</li>
<li id="j">j</li>
</ul>
</div>
<div class="listDiv">
<ul id="list1" class="connected ui-sortable">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
<li id="10">10</li>
<li id="11">11</li>
<li id="12">12</li>
<li id="13">13</li>
<li id="14">14</li>
<li id="15">15</li>
</ul>
</div>
js
$(function() {
$( "#list1, #list2" ).sortable({
connectWith: ".connected"
}).disableSelection();
});
css
.listDiv {
overflow:auto;
float: left;
width:400px;
border: 1px solid #999;
}
#list1, #list2 {
list-style-type: none;
height: 200px;
}
#list1 li, #list2 li {
font-size: 11px;
margin: 0 5px 5px;
padding: 5px;
width: 300px;
border: 1px solid #C5DBEC;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
outline: medium none;
}
I believe I have nailed down the version of jquery ui sortable in which the bug was introduced - 1.8.12. The following code appears to cause the error:
//We ignore calculating positions of all connected containers when we're not over them
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0])
continue;
I have reported this on jquery ui bug 4231 in the hope that they will reopen this (unfixed) bug and fix it in a future release.
So if you are struggling with this problem you can check if the bug has been fixed, or revert back to jquery ui 1.8.11, or otherwise remove the offending code mentioned above and hope for the best!
So, my problem is that I can't seem to find the next() sibling down to the following nested ul li. when set to hide. I can find it when it's not set to hide easily by:
This works when I comment out the JS and nothing is hidden:
//$(".vertNavigation li ul a").hide();
Add this to click function:
$(this).next().css("background", "yellow").slideToggle("normal");
Goal is to do the reverse, click on BUTTON ONE and slideDown nested ul and so on. What is it that I'm missing here?
HTML CODE:
</head>
<body>
<div class = "vertNavigation">
<ul>
<li>BUTTON ONE
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON TWO
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON THREE
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
<li>BUTTON FOUR
<ul>
<li>sub menu 1
<li>sub menu 2
<li>sub menu 3
<li>sub menu 4
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS CODE:
.vertNavigation ul {
list-style-type: none;
padding-left: 0;
margin-lef: 0;
}
.vertNavigation li {
display: inline;
}
.vertNavigation a { /*main menu*/
display: block;
width: 100px;
text-decoration: none;
margin: 2px 0px 2px 0px;
padding: 6px 15px 3px 15px;
background-color: #EAEAEA;
color: #333;
font-size: .8em;
}
.vertNavigation li ul a { /*sub menu*/
text-decoration: none;
border-bottom: solid 1px #333;
border-length: 50px;
margin: 2px 0px 2px 0px;
background-color: #FFF;
color: #333;
}
JS CODE:
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
$(".vertNavigation li ul a").hide();
$(".vertNavigation ul li a").click(function()
{
//$(this).next().slideToggle("normal");
$(this).next().slideDown("normal");
return false;
});
});
Try this:
$(".vertNavigation > ul > li > ul").hide();
$(".vertNavigation > ul > li > a").click(function(e){
e.preventDefault();
$(this).next('ul').slideToggle();
});
Check the live working solution
I have a menu very similar to the menu here on StackOverflow. The problem is that my menu looks right in every browser I've tested it on EXCEPT for my iPhone.
Here is a screenshot of the iPhone
Now obviously the "Add Event" button is supposed to be the same size as the rest.
Here's my Markup
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><%: Html.NavigationLink("Now", "Index", "Events")%></li>
<li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li>
<li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li>
<li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li>
<li><%: Html.NavigationLink("Users", "Index", "Users")%></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li>
</ul>
</div>
</div>
And here's my CSS
#menucontainer{position:relative; width:675px; float:right;}
ul.menu
{
padding: 0 0 2px;
position: relative;
margin: 0;
}
ul.menu li
{
display: inline;
list-style: none;
}
ul.menu li a
{
padding: 8px 18px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #666;
color: #fff;
border: 1px solid black;
text-shadow:#000 0px 1px 1px;
}
ul.menu li a.youarehere
{
background-color:#brand_color;
color: #fff;
}
ul.menu li a:hover
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li a:active
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li.selected a
{
background-color:#brand_color;
color: #000;
}
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
Unfortunately I can't figure this one out. Thanks in advance for any direction.
EDIT:
This is the final output being sent to the browser
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/">Now</a></li>
<li>Coming</li>
<li>Hot</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li>Add Event</li>
</ul>
</div>
</div>
EDIT:
Reproduction on jsbin
http://jsbin.com/akadi3/2 (note: obviously you need the iOS browser to see the problem)
Ok, so after a LOT of fiddling around, it appears as though if I add a height attribute to the menucontainer, then I'm all good.
#menucontainer
{
position:relative;
width:675px;
height:40px; /* this fixed the problem */
float:right;
font-size:80%;
}