jQuery newsticker add new list onclick not working properly - javascript

I'm using this plugin, Acmeticker.
It's working good. Now I tried to add more list using button .add to add Breaking News 9 at the last of ul. But it's not working as expected. It show together with another li if I click button add, and if I click button more than one it show me duplicate Breaking News 9.
$('.my-news-ticker-3').AcmeTicker({ type:'typewriter',/*horizontal/horizontal/Marquee/type*/
direction: 'right',/*up/down/left/right*/
speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
controls: {
prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
}
});
$('.add').on('click', function()
{
$(".my-news-ticker-3").append('<li>Breaking News 9</li>');
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2><div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<li>Breaking News 1</li>
<li>Breaking News 2</li>
<li>Breaking News 3</li>
<li>Breaking News 4</li>
<li>Breaking News 5</li>
<li>Breaking News 6</li>
<li>Breaking News 7</li>
<li>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>

This plugin adds style i.e :display: none; opacity: 0; to each lis dynamically so when you append new lis you can add this to your li.Also , when you use .append() this will not append lis after Breaking news 8 because position of lis are getting change so to append new lis only after last li you can use data-attr which will helps us to find last li and append new li after that .
Demo Code :
$('.my-news-ticker-3').AcmeTicker({
type: 'typewriter',
direction: 'right',
speed: 50,
controls: {
prev: $('.acme-news-ticker-prev'),
toggle: $('.acme-news-ticker-pause'),
next: $('.acme-news-ticker-next')
}
});
$('.add').on('click', function() {
var lengths = $(".my-news-ticker-3 li").length + 1 //get length of lis
//get refrence of last lis
var get_reference = $(".my-news-ticker-3 li[data-ids=" + $(".my-news-ticker-3 li").length + "]")
//insert new lis
$(`<li style="display: none; opacity: 0;" data-text="Breaking News ${lengths}" data-ids='${lengths}'>Breaking News ${lengths}</li>`).insertAfter($(get_reference))
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2>
<div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<!--added ids to keep track-->
<li data-ids='1'>Breaking News 1</li>
<li data-ids='2'>Breaking News 2</li>
<li data-ids='3'>Breaking News 3</li>
<li data-ids='4'>Breaking News 4</li>
<li data-ids='5'>Breaking News 5</li>
<li data-ids='6'>Breaking News 6</li>
<li data-ids='7'>Breaking News 7</li>
<li data-ids='8'>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>

Related

Adding a button to a list element which displays the remaining elements when clicked

I have a list with 5 list items. The second list item has a button after the text. When the button is clicked, the remaining list items should be displayed. But currently, the remaining items are displayed as a sub list, which is not what I am aiming for. I want the remaining items to be the part of the main list. This is how the list looks currently:
This is the code:
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button>
<div id="infodiv" style="display:none;">
<ul>
<li>Element 3</li>
<li>Element 4.</li>
<li>Element 5</li>
</ul>
</div>
</li>
</ul>
Any leads are appreciated.
Thanks.
Here is a way to do what you want :
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<div id="infodiv" class="list-group-item" style="display:none;">
<li>Element 3</li>
<li>Element 4.</li>
<li>Element 5</li>
</div>
</ul>
Javascript:
$('#button').on('click',function(i, el){
if($('#infodiv').is(':visible')){
$('#infodiv').hide();
}else{
$('#infodiv').show();
}
});
See JsFiddle
What we are doing is is showing or hiding your #infodiv depending on if it is currrently visible or not. We also changed your html to remove the in your sublist to not have another bullet list inside your list.
Your items are displayed as sublist because you have a ul element inside the top list. If you want all list items to be displayed as a single list then remove the 2 ul as follows:
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<li class="showhide">Element 3</li>
<li class="showhide">Element 4.</li>
<li class="showhide">Element 5</li>
</li>
</ul>
Also wrapping some li's inside a div is not great semantically. Lastly you need to an on click event handler to the button (I'm assuming you're not using any frontend framework just Vanilla Javascript):
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<li class="showhide">Element 3</li>
<li class="showhide">Element 4.</li>
<li class="showhide">Element 5</li>
</li>
</ul>
<script>
document.querySelector("button").onclick = function(event) {
const lis = document.getElementsByClassName('showhide')
for (const li of lis) {
li.style.display = li.style.display === 'none' ? 'block' : 'none'
}
}
</script>
</body>
</html>

How to fecth ID property of LI element under a div tag

I am new to CSS and JQUERY. I want to get all the ids of the LI elements in string under in a JS file to parse further.
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>
I tried below solution but its returning the object and not able to convert it into String
var columns = [];
$(#editSortable+ ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
Kindly suggest.
var columns = [];
$('#editSortable .sortable-list li').each((i, li) => columns.push(li.id))
console.log(columns)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>

Hide/ show list items when clicking on h4 in .aspx page

I'm building a newsletter archive which is sorted in different categories. The markup looks like this:
<h4>Category 1</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
<h4>Category 2</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
Now there will be quite a lot of categories and newsletters so I want the newsletters to be hidden until the user clicks on the Category h4. And to hide again when clicked again.
I've tried this function:
<script type="text/javascript">
$('h4').click(function() {
$(this).find('ul').toggle();
});
</script>
I guess this isn't working because I would have to wrap the h4 in a ul but this results in an error. Any suggestions?
You need to use the jQuery .next function, so it will look for the next <ul> class after each h4 tag here is a quick demo demo:
(function( $ ) {
$('h4').click(function() {
$(this).next('ul').toggle();
});
}).apply( this, [ jQuery ]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Category 1</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
<h4>Category 2</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
And a
Jsfiddle demo

add selected li to an existing ul

I have a list of elements li
<ol class="selectable" id="firstList">
<li class="ui-widget-content"> text 1</li>
<li class="ui-widget-content"> text 2</li>
<li class="ui-widget-content"> text 3</li>
</ol>
I want when I select one or more element in int the first list, these selected elements should be added to another list <ol>
<ol class="selectable" id="result">
</ol>
Simply you can do something like this
$('#firstList li').click(function() {
// click event handler for listening click event
$(this).toggleClass('selected');
// toggling selected class class
$('#result').html($('#firstList .selected').clone())
// updating result list with selected list item ( li which have selected class )
// use `.removeClass('selected')` if you want to remove selected class from clone
})
#firstList .selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol class="selectable" id="firstList">
<li class="ui-widget-content">text 1</li>
<li class="ui-widget-content">text 2</li>
<li class="ui-widget-content">text 3</li>
</ol>
<ol class="selectable" id="result">
</ol>

how to show hide element previce element and show one nested ul

I create this nested list to show and hide items but I want ask how can I show one list and hide other for example if user click on second subject will hide all open items
HTML
<ul>
<li class="subject">List item 1 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 2 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 3 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
javascript
$(function(){
// $("ul li").children().slideDown("slow");
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
});
})
CSS
#item
{
display: none;
}
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
$(this).siblings().children('ul').slideUp();
});
DEMO
or
$(".subject").click(function () {
$(this).find("#item").slideToggle("slow")
.end().siblings().children('ul').slideUp();
});
DEMO
I corrected your markup. Your IDs should always be unique; otherwise use classes.
$(function(){
$(".subject").click(function(){
$('ul.item').not( $(this).find('ul.item') ).slideUp("slow");
$(this).find('ul.item').slideDown('slow');
});
});
WORKING JSFIDDLE DEMO

Categories

Resources