I'm new to Jquery. I made a simple text/quote slider that calls the texts from the same html file, but I need it to get the texts from an external ".txt" file instead. I'm intended to use this slider in many other pages, and I don't want to edit each page when I want to edit/remove these texts.
I've read that $('#div-name').load("../textfile.txt") method would do the the trick, but I can't make it work with my slider although I tested it in a server. Do you maybe know how to do it? Here's my code:
HTML:
<div id="updates">
<a href="redirect-link1.html">Text 1</a>
<a href="redirect-link2.html">Text 2</a>
<a href="redirect-link3.html">Text 3</a>
</div>
CSS:
#updates {
width: 100%;
height: 100px;
float: left;
text-align: center;
background: rgb(255,255,255);
}
#updates a {
width: 100%;
color: rgb(0,0,0);
font-size: 25px;
line-height: 100px;
text-decoration: none;
display: inline-block;
}
JS:
$(function () {
var slider = $("#updates"),
items = slider.children('a'),
length = items.length,
i = 0,
change = function () {
items.eq(i).fadeOut(300, function () {
i += 1;
if (i === length) {
i = 0;
}
items.eq(i).fadeIn(300);
});
};
items.not(':first').hide();
setInterval(change, 5000);
});
$.get method is what you looking for.
EDIT 1: change method edit + removed .txt empty lines
EDIT 2: dump links testing
EDIT 3: using links from an external file
jQuery(function () {
const
// Items container
slider = jQuery("#updates"),
// Text file containing links
url = "https://raw.githubusercontent.com/decryptingfuture/placeholders/main/links.txt"
// Initial iteration
let i = 0
// Get text contents
jQuery.get(url, function (data) {
// Split lines and iterate them
data.split('\n').map((block) => {
// Skip empty lines
if (block !== '') {
// Append each line to the container
slider.append(block)
}
})
// Children to be slided
const items = slider.children()
change = function () {
items.eq(i).fadeOut(100, function () {
++i;
if (i >= items.length) i = 0
items.eq(i).fadeIn(100)
})
}
items.not(':first').hide()
setInterval(change, 500)
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="updates"></div>