- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4012
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: 6022
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: 3837
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.
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4017
For example, if you want to have button which will clear content from text box, but you don't want to loose focus from your text box then you can use this code:
<!DOCTYPE html> <html> <head> </head> <body> <input type="text" placeholder="Your text" id="myText"> <button>Test</button> <script type="text/javascript" src="/jquery-2.1.3.js"></script> <script type="text/javascript" src="/index.js"></script> </body> </html>
JS:
$("#myText").focus(function (event) {
alert("Focus!");
});
$("button").mousedown(function( event ) {
event.preventDefault();
$("#myText").val("");
});
Thing to notice:
Example you can see here.
Or here: