- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 2539
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="lib/jquery-3.4.1.min.js" defer></script> <script type="text/javascript" src="js/index.js" defer></script> </head> <body> <div id="append"></div> </body> </html>JS:
$('#append').append('<a href="#" class="apendTest">Test</a>');
$('#append').on('click', '.apendTest', function() {
alert("test")
})
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4255
Another example of slider. Here I gave one example of the slider, but I didn't like that example since I am deleting and adding IMG tag, which can costs performance. I decided to write another example where I will just move pictures. Problem with which I was facing was how to make infinite? That problem I solved by splitting images in two part, then one part I will move on the end of another, and this is how I will have infinity effect.
HTML is simple:
<div id="container">
</div>
CSS:
#container {
width: 17%;
overflow: hidden;
}
.imagesTrack {
white-space: nowrap;
position: relative;
}
JS:
/*global jQuery, document, setInterval*/
(function () {
"use strict";
jQuery.getJSON("files.json", function (data) {
var myQ = jQuery,
firstHalfRightPosition = 0,
secondHalfRightPosition = 0,
px,
firstHalf = "first-half",
secondHalf = "second-half",
firstHalfId = "#" + firstHalf,
secondHalfId = "#" + secondHalf,
widthOfFirstHalf = 0,
widthOfSecondHalf = 0,
spaceBetweenTwoHalfs = 10,
loadedImgIndex = 0,
numberOfImages = 0;
myQ("<span class='imagesTrack' id='" + firstHalf + "'/>").appendTo("#container");
myQ("<span class='imagesTrack' id='" + secondHalf + "'/>").appendTo("#container");
data.forEach(function (file, index, array) {
var imgSrc = '<img src="' + file + '" id="' + index + '">';
numberOfImages = numberOfImages + 1;
if (index < array.length / 2) {
myQ(imgSrc).appendTo(firstHalfId);
} else {
myQ(imgSrc).appendTo(secondHalfId);
}
myQ('#' + index).on("load", function () {
loadedImgIndex = loadedImgIndex + 1;
});
});
secondHalfRightPosition = -spaceBetweenTwoHalfs;
setInterval(function () {
if (loadedImgIndex === numberOfImages) {
widthOfFirstHalf = myQ("#first-half").width();
widthOfSecondHalf = myQ("#second-half").width();
px = firstHalfRightPosition + "px";
myQ(firstHalfId).css("right", px);
firstHalfRightPosition = firstHalfRightPosition + 1;
px = secondHalfRightPosition + "px";
myQ(secondHalfId).css("right", px);
secondHalfRightPosition = secondHalfRightPosition + 1;
if (firstHalfRightPosition === widthOfFirstHalf + spaceBetweenTwoHalfs) {
firstHalfRightPosition = -1 * secondHalfRightPosition - spaceBetweenTwoHalfs;
}
if (secondHalfRightPosition === widthOfFirstHalf + widthOfSecondHalf + spaceBetweenTwoHalfs) {
secondHalfRightPosition = -1 * firstHalfRightPosition - spaceBetweenTwoHalfs;
}
}
}, 1);
});
}());
Live example:
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 6394
One small example of list of images in one line, with endless animating, where middle image will be shown as "selected".
Html part is simple we need only one line of code:
<div id="imagesTrack"></div>
CSS:
#imagesTrack {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
Javascript:
/*global jQuery, document, setInterval*/
(function () {
"use strict";
jQuery.getJSON("files.json", function (data) {
data.forEach(function (file) {
jQuery("#imagesTrack").append('<img src="' + file + '">');
});
setInterval(function () {
jQuery("#imagesTrack").append('<img src="' + jQuery("img")[0].src + '">');
jQuery("img").eq(0).remove();
jQuery("img").eq(2).css("border", "14px solid #333");
jQuery("img").eq(1).css("border", "");
}, 500);
});
}());
Interesting thing to notice here is eq, which will give us jQuery object of one item in the array (or list, whatever) of images.
Live example:
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4088
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/jquery-2.1.4.js" type="text/javascript"></script>
<script src="/index.js" type="text/javascript" defer></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="animation" style="position: absolute">
I am the text which is going to be animated
</div>
</body>
</html>
JS:
/*global $*/
$(".animation").animate({
left: "+=500"
}, 5000, function () {
alert("finish!");
});
Taken from here.