So I have some tiles that are arranged using a list of UL and then several LI tags.
I want to have a button inside one of the LI tags that will hide the whole tile when pressed.
Not sure how to go about it. Something like - this.('li').hide() but i know thats wrong lol.
Many thanks.
<ul class="sortable grid">
<li>Item 1</li><button onclick="hidePane()">Dismiss</button>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script>
function hidePane(){
this.hide();
}
</script>
I want it to be dynamic. The intended use for this is to have a loop pulling in many tiles. So id like it to have a dismiss button on each and when clicked it will just hide tiles as you scroll.
Do not put elements outside li. In ul, first level elements inside should always be just li, so then inside the li you can put your button:
$('.sortable button').on('click', function() {
$(this).parent('li').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
<li>Item 1<button>Dismiss</button></li>
<li>Item 2<button>Dismiss</button></li>
<li>Item 3<button>Dismiss</button></li>
</ul>
A solution based on your code, using only JavaScript would imply to use event.target to get the current clicked button and its parent using parentElement and you would also use style.display = none; because there is no hide() method in pure JavaScript:
function hidePane(event) {
event.target.parentElement.style.display = 'none';
}
<ul class="sortable grid">
<li>Item 1<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 2<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 3<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 4<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 5<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 6<button onclick="hidePane(event)">Dismiss</button></li>
</ul>
You can try this:
Html code:
<ul class="sortable grid">
<li>Item 1 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 2 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 3 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 4 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 5 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 6 <br /><input type="submit" onclick="hidePane(this);"></li>
</ul>
JS code:
function hidePane(ref) {
$(ref).parent().hide()
}
It would be better if you do it by JQuery
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<ul class="sortable grid">
<li>Item 1<button class="dismiss"> Dismiss</button></li>
<li>Item 2<button class="dismiss"> Dismiss</button></li>
<li>Item 3<button class="dismiss"> Dismiss</button></li>
<li>Item 4<button class="dismiss"> Dismiss</button></li>
<li>Item 5<button class="dismiss"> Dismiss</button></li>
<li>Item 6<button class="dismiss"> Dismiss</button></li>
</ul>
Here is your JS
$(".dismiss").click(function () {
$(this).parent().hide();
});
I would recommend you to not to use html onclick() since it was considered a bad practice
[Why is using onClick() in HTML a bad practice?
You have to use jQuery: select the item by the id and then use the hide method.
$('#id_of_li').hide();
Try this code. It allows you to hide the li containing the button.
$("#hide").on('click',function(){
hidePane($(this).parent());
});
function hidePane(parent){
parent.hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
<li>Item 1 <button id="hide">Dismiss</button></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
Related
I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass
How to wrap all ul elements in div with JQuery automatically?
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
But what I want:
<div id="my_uls">
<div>
<ul>
<li>Item one</li>
<li>Item two
<div>
<ul>
<li>Item one of two</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
You need to use .wrap():
$(function() {
$("ul").wrap("<div />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
Just use wrap function for this
<scrpt>
$(document).ready(function(){
var myuls = $("#my_uls").find("ul");
for(var i=0;i<myuls.length;i++){
$(myuls[i]).wrap("<div></div>");
}
});
</script>
$('#my_uls ul'), This will refer all your ul inside the div.
if you need the 1st ul only
$('#my_uls ul:not(#my_uls ul ul)').
Maybe am overlooking this, but I can't figure why this is not working.
I'm creating a draggable list in jquery-ui, using the draggable widged from jquery-ui, but I can't seem to be able to make the li draggables, what am doing wrong?
HTML:
<section>
<ul id="sortable1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</section>
jQuery:
$('#sortable1 li').draggable({
containment: 'section',
cursor: 'move',
revert: true
});
Thanks a lot!
Just add following code to script.
$( "ul, li" ).disableSelection();
Example
You need jQuery-ui.js (https://code.jquery.com/ui/1.11.4/jquery-ui.js)
Check this:
$(function() {
$('#sortable1 li').draggable({
containment: 'section',
cursor: 'move',
revert: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section>
<ul id="sortable1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</section>
Seems like the mistake is somewhere else in my project, I created a test project and it works, apologies, my mistake.
I have a long unordered list that I'd like to hide all but the first 3 on load, and then expand to all on click.
Here's my jQuery so far:
$('#myList').find('li:gt(3)').addClass('togglr').hide().end().append(
$('<li class="show_more_btn">Read more ยป</li>').click(function(){
$(this).siblings('.togglr').toggle();
if ($(this).hasClass('expanded')){
$(this).text('View All');
$(this).removeClass('expanded');
} else{
$(this).text('View Less');
$(this).addClass('expanded');
}
});
And my html:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
Here's a jsFiddle: http://jsfiddle.net/t2jrZ/
Where am I going wrong?
You were almost there! Maybe just thinking too much ;)
The prob with your current code is the last }); at the end of your current script, replace that with }));
HTML
<ul id="info">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<button type="button" onclick="showAll();">Show All</button>
Javascript:
var limit = 3;
$('#info li:lt(' + limit + ')').show();
$('button').click(function(){
$('#info li').show();
});
http://jsfiddle.net/t2jrZ/2/
I have here a JSfiddle demonstrating my problem.
http://jsfiddle.net/J6uM5/4/
<div id="list-A" style="height:50px; overflow-y:scroll; border:1px solid red">
<ul class="sortable">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
</ul>
<div id="list-B">
<ul class="sortable">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
And here is the JS
$(function() {
$('.sortable').sortable({
connectWith: ".sortable",
scroll:false,
}).disableSelection();
});
The issue is that sortable1 (although hidden by the div) still extends to sortable2 in the dom. In order to successfully drag an item from list1 to list2, you must be scrolled to the bottom of list1 or if you are scrolled down far enough that list1 isnt overlapping list2. Any work around would be appreciated.
By setting the height/overflow on the actual sortable list (ul) instead of the wrapper, it seems to work.
#sortable1 {
height:25px;
overflow-y:scroll;
padding-bottom:35px;
}
See here:
http://jsfiddle.net/J6uM5/8/
Is that what you were looking for?