- Details
- Written by: Stanko Milosev
- Category: ExtJS
- Hits: 5024
var tree = Ext.create('Ext.tree.Panel', {
store: store,
hideHeaders: true,
rootVisible: false,
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
}]
},
height: 450,
width: 400,
title: 'InLabel server and databases',
renderTo: 'tree-example',
collapsible: true,
listeners:{
itemclick: function(view, record, item, index, event) {
if (record.isLeaf()) {
Ext.fly("yourdivid").update(record.data.text);
} else {
Ext.Ajax.request({
url: 'components/com_dcstree/detailed_info.php',
method: 'GET',
params: {
id: record.data.id
},
success: function(response){
var text = response.responseText;
Ext.fly("yourdivid").update(text);
// process server response here
}
});
}
//Ext.get("yourdivid").originalDisplay = "aaa";
//dumpProps(view);
}
}
});
So, most important thing is "listeners", and with record.isLeaf() I am checking if user clicked on node, or on leaf. Second part, Ext.Ajax.request,... is example of ExtJS Ajax, in this case I am loading detailed_info.php.
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 2742
<!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: 4476
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: 6647
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: