Develop Reference

JavaScript in slider image

I have a slider on my e-commerce homepage but it is freeze .I need to change it after 3 second .... Thanks in advance.
function aweMainSlider() {
var e = $(".main-slider");
e.owlCarousel({
items: 1,
nav: !0,
dots: !0,
onInitialized: function() {
e.find(".owl-item").each(function() {
var e = $(this),
o = e.find(".main-slider-item"),
a = e.find(".main-slider-image > img");
o.length && a.length && (o.addClass("background"),
o.css("background-image", "url(" + a.attr("src") + ")"), a.css({
opacity: 0,
visibility: "hidden"
}))
})
}
})
}

Adding or Creating "forEach" to function in javascript / jquery

First and foremost I'd like to thank everyone who participates contributes and adds to the forums / community, you guys provide an extremely appreciated and valued resource to those that just need information and assistance when needed. Simple thing to do for some, but to many it means volumes. So thanks again.
I'm no coding or script expert but I definitely learn quick and know enough to get around and translate (especially if the language is explained) attempting to get a player on my site to populate and propagate a playlist based on an uploaded file string.
So far I have the player completely up and running, it properly parses the upload links to display the separate mp3 files to play as well as the separate description information per file.
The problem is when I click the play button all of the files mp3 play at once. I'm almost positive I need to add a forEach statement or something along those lines either here:
$(function(){
$('#player1').plp({
'volume': 80,
'playlist':[
{"title":"{$pic.video_descr }",
"author":"{.Me}",
"cover":"files/covers/fullfilename",
"mfile":"{.siteurl}{.fullfilename}",
"duration":"330"},
]
});
});
for each title, author, cover, duration and mfile,
or somewhere around here
function init_track(i){
cpl = i;
$this.find('.playlist span').removeClass('active');
$this.find('.playlist span:eq('+i+')').addClass('active');
$audio.src = options.playlist[i].mfile;
$this.find('.title').html(options.playlist[i].title);
$this.find('.author').html(options.playlist[i].author);
$this.find('.cover').attr('src', options.playlist[i].cover);
}
for(i=0; i < options.playlist.length; i++){
$this.find('.playlist').append('<span>'+options.playlist[i].author+' - '+options.playlist[i].title+'</span>');
}
init_track(cpl);
$this.find('.playlist span').click(function(){
init_track($(this).index());
});
here is the full .js
(function($) {
jQuery.fn.plp = function(options) {
var options = $.extend({
volume: 50,
playlist: [],
autostart: false
}, options);
var make = function() {
var $this = $(this);
var cpl = 0;
var $audio = new Audio();
var isrand = false;
$this.find('.volume').slider({
animate: true,
range: 'min',
value: options.volume,
min: 0,
max: 1,
step: 0.01,
slide: function(event, ui) {
$audio.volume = ui.value;
}
});
$this.find('.long').slider({
animate: true,
range: 'min',
value: 0,
min: 0,
max: 60,
step: 1,
slide: function(event, ui) {
$audio.currentTime = ui.value;
}
});
$audio.addEventListener('canplay', function(_event) {
if ($audio.duration) {
$this.find('.all').html(' / ' + toMinit($audio.duration));
$this.find('.long').slider({
'max': $audio.duration
});
} else {
this.find('.all').html(' / ' + toMinit(options.playlist[cpl].duration));
$this.find('.long').slider({
'max': options.playlist[cpl].duration
});
}
if (options.autostart) {
$audio.play();
$this.find('.tlb_stop').addClass('isplay');
} else {
options.autostart = true;
}
});
$audio.addEventListener('ended', function() {
if (isrand) {
var rand = cpl;
while (rand == cpl) {
rand = Math.floor(Math.random((options.playlist.length)));
}
init_track(rand);
} else {
if (cpl == options.playlist.length - 1) {
cpl = -1;
}
init_track(cpl + 1);
}
});
$audio.addEventListener('timeupdate', function() {
$this.find('.long').slider({
'value': $audio.currentTime
});
$this.find('.current').html(toMinit($audio.currentTime));
});
function toMinit(val) {
val = Number(val);
var ost = Math.floor(val % 60);
var tm = Math.floor(val / 60);
if (ost < 10) {
ost = '0' + ost;
}
if (tm < 10) {
tm = '0' + tm;
}
return tm + ':' + ost;
}
function init_track(i) {
cpl = i;
$this.find('.playlist span').removeClass('active');
$this.find('.playlist span:eq(' + i + ')').addClass('active');
$audio.src = options.playlist[i].mfile;
$this.find('.title').html(options.playlist[i].title);
$this.find('.author').html(options.playlist[i].author);
$this.find('.cover').attr('src', options.playlist[i].cover);
}
for (i = 0; i < options.playlist.length; i++) {
$this.find('.playlist').append('<span>' + options.playlist[i].author + ' - ' + options.playlist[i].title + ' < /span>');
}
init_track(cpl);
$this.find('.playlist span').click(function() {
init_track($(this).index());
});
$this.find('.tlb_prev').click(function() {
if (isrand) {
var rand = cpl;
while (rand == cpl) {
rand = Math.floor(Math.random() *
(options.playlist.length));
}
init_track(rand);
} else {
if (cpl === 0) {
cpl = options.playlist.length;
}
init_track(cpl - 1);
}
return false;
});
$this.find('.tlb_stop').click(function() {
if ($audio.paused) {
$audio.play();
$(this).addClass('isplay');
} else {
$audio.pause();
$(this).removeClass('isplay');
}
return false;
});
$this.find('.tlb_next').click(function() {
if (isrand) {
var rand = cpl;
while (rand == cpl) {
rand = Math.floor(Math.random() *
(options.playlist.length));
}
init_track(rand);
} else {
if (cpl == options.playlist.length - 1) {
cpl = -1;
}
init_track(cpl + 1);
}
return false;
});
$this.find('.vol_icon').click(function() {
$(this).toggleClass('active');
$this.find('.volume').fadeToggle(100);
return false;
});
$this.find('.pl_icon').click(function() {
$(this).toggleClass('active');
$this.find('.playlist').fadeToggle(100);
return false;
});
$this.find('.while_icon').click(function() {
if ($audio.loop) {
$(this).removeClass('active');
$audio.loop = false;
} else {
$(this).addClass('active');
$audio.loop = true;
}
return false;
});
$this.find('.rand').click(function() {
if (isrand) {
$(this).removeClass('active');
isrand = false;
} else {
$(this).addClass('active');
isrand = true;
}
return false;
});
};
return this.each(make);
};
})(jQuery);
Here is the PHP/HTML (smarty template):
<script type="text/javascript" src="/jquery.js">
</script>
<script type="text/javascript" src="/player.js">
</script>
{foreach item=pic from=$pics} {/foreach}
<table>
<tr>
<td valign="middle">
{if $pic.ext == 'yt'}
<div style=
"background-image:url('http://img.youtube.com/vi/{$pic.ytref}/0.jpg');">
<div style="height:120px; max-width:120px;">
<a alt="video no {$pic.videono}" href=
"http://www.youtube.com/v/{$pic.ytref}&fs=1&rel=0::"
title="Click to Play"><img height="120" onmouseout=
"this.src='playbtred.png'" onmouseover=
"this.src='playbty.png'" src="playbtred.png" width=
"120"></a>
</div>
</div>
<div style=
"width:60%;word-wrap: break-word;padding-bottom:20px;">
{$pic.video_descr }
</div>{elseif $pic.ext == 'mp3'}
<script type="text/javascript">
$(function(){
$('#player1').plp({
'volume': 80,
'playlist':[
{"title":"{$pic.video_descr }",
"author":"Test2",
"cover":"files/covers/1.jpg",
"mfile":"{$config.siteurl}{$pic.fullfilename}",
"duration":"330"},
]
});
});
</script><br>
<div style=
"width:60%;word-wrap: break-word;padding-bottom:20px;">
</div>{else} {include file='otheruploads.tpl'}<br>
{$pic.video_descr } {/if}
</td>
</tr>
</table>
<div class="player" id="player1">
<img alt="" class="cover" src=""><!--album cover-->
<span class="title"></span><!--song title-->
<span class="author"></span><!--artist-->
<div class="long"></div>
<div class="current">
00:00
</div>
<div class="all"></div>
<div class="volume"></div>
<div class="vol_icon"></div>
<div class="rand"></div>
<div class="while_icon"></div>
<div class="toolbar">
<div class="tlb_prev"></div>
<div class="tlb_stop"></div>
<div class="tlb_next"></div>
</div>
<div class="pl_icon active"></div>
<div class="playlist flexcroll"></div>
</div>{/if}
I'm just not sure where or how. I've literally spent the last two days searching and researching to figure it out. I'm so sure its simple, but I'm lost at the moment, and would GREATLY appreciate the help.

Knockout.js: How to sort table?

I use this example:
http://stevescodingblog.co.uk/real-time-system-resource-monitor-with-signalr-mvc-knockout-and-webapi/#comment-3293
Table displays observable array. This array is updating by clients via signalr. All works fine.
I want to add sorting by selected column.
<div id="computerInfo">
<h2>Real-time System Resource Monitor</h2>
<h5 data-bind="visible: connected">Connected to message hub</h5>
<table border="0" class="table table-striped">
<tr>
<th>Machine</th>
<th>CPU %</th>
<th>Memory Available (Mb)</th>
<th>Total Memory (Mb)</th>
<th>Mem Available %</th>
</tr>
<!-- ko foreach: machines -->
<tr data-bind="css: { highCpu: cpu() > 90 || memPercent()<30 }">
<td data-bind="text: machineName"></td>
<td data-bind="text: cpu"></td>
<td data-bind="text: memUsage"></td>
<td data-bind="text: memTotal"></td>
<td data-bind="text: memPercent"></td>
</tr>
<!-- /ko -->
</table>
$(function () {
// The view model that is bound to our view
var ViewModel = function () {
var self = this;
// Whether we're connected or not
self.connected = ko.observable(false);
// Collection of machines that are connected
self.machines = ko.observableArray();
self.headers = [
{ title: 'Machine Name', sortKey: 'keyMachineName' },
{ title: 'CPU', sortKey: 'keyCpu' },
{ title: 'Mem Usage', sortKey: 'keyMemUsage' },
{ title: 'Mem Total', sortKey: 'keyMemTotal' },
{ title: 'Mem Percent', sortKey: 'keyMemPercent' }
];
self.sort = function (header, event) {
var sortKey = header.sortKey;
//implementation of sort
};
self.sort = function (header, event) {
var sortKey = header.sortKey;
switch (sortKey) {
case 'keyMachineName':
self.machines.sort(function (a, b) {
var n = a.machineName < b.machineName ? -1 : a.machineName > b.machineName ? 1 : 0;
alert(n);
return n;//1;
});
break;
case 'keyCpu':
self.machines.sort(function (a, b) {
var n = a.cpu < b.cpu ? -1 : a.cpu > b.cpu ? 1 : 0;
alert(n);
return n;
});
break;
case 'keyMemUsage':
self.machines.sort(function (a, b) {
var n = a.memUsage < b.memUsage ? -1 : a.memUsage > b.memUsage ? 1 : 0;
alert(n);
return n;
});
break;
}
};
};
// Instantiate the viewmodel..
var vm = new ViewModel();
// .. and bind it to the view
//ko.applyBindings(vm, $("#computerInfo")[0]);
// Get a reference to our hub
var hub = $.connection.cpuInfo;
// Add a handler to receive updates from the server
hub.client.cpuInfoMessage = function (machineName, cpu, memUsage, memTotal) {
var machine = {
machineName: machineName,
cpu: cpu.toFixed(0),
memUsage: (memUsage / 1024).toFixed(2),
memTotal: (memTotal / 1024).toFixed(2),
memPercent: ((memUsage / memTotal) * 100).toFixed(1) + "%"
};
var machineModel = ko.mapping.fromJS(machine);
// Check if we already have it:
var match = ko.utils.arrayFirst(vm.machines(), function (item) {
return item.machineName() == machineName;
});
if (!match) {
vm.machines.push(machineModel);
} else {
var index = vm.machines.indexOf(match);
vm.machines.replace(vm.machines()[index], machineModel);
}
// vm.machines.sort();
//ko.applyBindings(vm, $("#computerInfo")[0]);
//$("#infoTable").tablesorter({sortList: [0,0]});
};
///
ko.applyBindings(vm, $("#computerInfo")[0]);
///
// Start the connectio
$.connection.hub.start().done(function () {
vm.connected(true);
});
});
The problem is:
sort function always returns 0, i.e. there values always the same:
var n = a.machineName < b.machineName
When I for the test return 1 then sorting works fine.

When you create a machine using
var machineModel = ko.mapping.fromJS(machine);
you create a view model with observable properties. In this case in your sort method you need to treat them as observables, so you must use them using parenthesis. For example:
case 'keyMachineName':
self.machines.sort(function (a, b) {
var n = a.machineName() < b.machineName() ? -1 : a.machineName() > b.machineName() ? 1 : 0;
alert(n);
return n;//1;
});
break;

The jQuery tablesorter plugin does not work with knockout. Simply forget it.
Knockout cannot handle when DOM nodes are moved around without its knowledge, but that's what jQuery Tablesorter does.
But knockout is perfectly prepared to sort your table for you.
Below example features
fully configurable columns, i.e. not hard-coded in the view
sortable table columns on click, including visual feedback which is the sorted column
alternating ascending/descending sort order
value formatting via a Knockout extender
automatic update of values in an interval (likely scenario in this use case)
automatic re-sort when the values update
ko.extenders.formatted = function (underlyingObservable, formatFunction) {
underlyingObservable.formatted = ko.computed(function () {
return formatFunction(underlyingObservable());
});
};
function Machine(data) {
var self = this,
memoryFormat = function (val) { return Math.round(val / 1024, 0).toLocaleString(); };
self.machineName = ko.observable().extend({formatted: function (val) { return val; }});
self.cpu = ko.observable(0).extend({formatted: function (val) { return val.toFixed(1); }});
self.memUsage = ko.observable(0).extend({formatted: memoryFormat});
self.memTotal = ko.observable(0).extend({formatted: memoryFormat});
self.memPercent = ko.computed(function () {
return self.memUsage() / self.memTotal() * 100;
}).extend({formatted: function (val) { return val.toFixed(1) + '%'; }});
self.conditions = ko.computed(function () {
return {
highCpu: self.cpu() > 50,
lowMem: self.memPercent() < 30
};
});
self.update(data);
};
Machine.prototype.update = function (data) {
ko.mapping.fromJS(data, {}, this);
};
function MachineList() {
var self = this;
self.connected = ko.observable(false);
self.machines = ko.observableArray();
self.headers = [
{title: 'Machine Name', key: 'machineName', cssClass: ''},
{title: 'CPU %', key: 'cpu', cssClass: 'right'},
{title: 'Mem Usage (MB)', key: 'memUsage', cssClass: 'right'},
{title: 'Mem Total (MB)', key: 'memTotal', cssClass: 'right'},
{title: 'Mem Available %', key: 'memPercent', cssClass: 'right'}
];
self.sortHeader = ko.observable(self.headers[0]);
self.sortDirection = ko.observable(1);
self.toggleSort = function (header) {
if (header === self.sortHeader()) {
self.sortDirection(self.sortDirection() * -1);
} else {
self.sortHeader(header);
self.sortDirection(1);
}
};
// use a computed to subscribe to both self.sortHeader() and self.sortDirection()
self.sortMachines = ko.computed(function () {
var sortHeader = self.sortHeader(),
dir = self.sortDirection(),
tempMachines = self.machines(),
prop = sortHeader ? sortHeader.key : "";
if (!prop) return;
tempMachines.sort(function (a, b) {
var va = ko.unwrap(a[prop]),
vb = ko.unwrap(b[prop]);
return va < vb ? -dir : va > vb ? dir : 0;
});
self.machines.notifySubscribers();
});
self.insertMachine = function (data) {
var machine = ko.utils.arrayFirst(vm.machines(), function (item) {
return ko.unwrap(item.machineName) == ko.unwrap(data.machineName);
});
if (machine) machine.update(data);
else vm.machines.push(new Machine(data));
self.sortMachines();
};
};
// -------------------------------------------------------------------------------
// connection mockup
$.connection = {
cpuInfo: {client: {}},
hub: {start: function() { return $.Deferred().resolve(); }}
};
var vm = new MachineList(),
hub = $.connection.cpuInfo;
hub.client.cpuInfoMessage = function (data) { vm.insertMachine(data); };
// start the connection as soon as possible...
$.connection.hub.start().done(function () {
vm.connected(true);
$(function () {
// ...but don't apply bindings before the document is ready
ko.applyBindings(vm, $("#computerInfo")[0]);
});
// create some random sample data
setInterval(function () {
var GB = 1024 * 1024;
['A', 'B', 'C', 'D'].forEach(function (name) {
hub.client.cpuInfoMessage({
machineName: name,
cpu: getRandomInt(0, 1000) / 10,
memUsage: getRandomInt(5 * GB, 7 * GB),
memTotal: 10 * GB
});
});
}, 1000);
});
// -------------------------------------------------------------------------------
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
.table { border-collapse: collapse; }
.table th, .table td { border: 1px solid silver; padding: 0 2px; }
.sortable { cursor: pointer; }
.table-striped tbody tr:nth-child(odd) { background-color: #f7f7f7; }
.highCpu { color: red; }
.lowMem { color: red; }
.right { text-align: right; }
.sorted { background-color: #B5E0FF; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div id="computerInfo">
<h2>Real-time System Resource Monitor</h2>
<h5 data-bind="visible: connected">Connected to message hub</h5>
<table border="0" class="table table-striped">
<thead>
<tr data-bind="foreach: headers">
<th class="sortable" data-bind="click: $root.toggleSort, text: title, css: {sorted: $data === $root.sortHeader()}"></th>
</tr>
</thead>
<tbody data-bind="foreach: machines">
<tr data-bind="foreach: $root.headers, css: conditions">
<td data-bind="text: $parent[key].formatted, css: cssClass"></td>
</tr>
</tbody>
</table>
</div>

wookmark modification and li side by side and under each other

i'm using wookmark plugin for my project and i need to load more items when the V scroll reach to the bottom.
plugin url : http://www.wookmark.com/jquery-plugin
scroll function that i use :
function _scroll() {
var v = false;
$(document).scroll(function(e) {
var t = document.height - (window.pageYOffset + window.innerHeight);
if ((t <= 20) && ( !v)) {
v = true;
$.ajax({ type:"POST",
data: {type:$("#type").val(),id:$("#pid").val(),lid:$("#lid").val()},
async:true,
cache:false,
url:"fetchMore.php?v=18",
success: function(d) {
var t = d.split('{#}');
if (parseInt($("#lid").val()) != t[1]) {
$("#tiles").append(t[0]);
$("#lid").val(t[1]);
applyLayout();
}
v = false;
} });
}
});
}
and the applylayout function:
function applyLayout() {
$('#tiles').imagesLoaded(function() {
// Destroy the old handler
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
$handler = $('#tiles li');
$handler.wookmark(options);
});
}
Finally my options and sort functions:
function comparatorId(a, b) {
return $(a).attr("id") > $(b).attr("id") ? -1 : 1;
}
function _Animate() {
$('#tiles').imagesLoaded(function() {
options = {
autoResize: true,
container: $('#main'),
offset: 2,
itemWidth: 210,
comparator: comparatorId,
direction: 'right',
fillEmptySpace: false
};
$handler = $('#tiles li');
$handler.wookmark(options);
});
}
The problem is:
when i'm going to load more the items are randomly re-sorting just like there is no comparatorId function ..
is there any solution ?
if there is no solution ..
how can i do a ul li tags like this layout ?
i can put them side by side but i want them to be side by side + under each other

i've solved the problem..
it's just by putting data-id="{ID}" tag for li and remove all class(es)

Moving repeating pattern in a div container

I have a div container which has a repeating background image that forms a pattern, and I would like to animate it with jQuery so that the pattern moves south-west.
How can this be done?
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="content/main.css">
<script src="content/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>

Have a look at Sprightly. It's a jQuery plugin and makes animating background images reasonably easy.
To pan (animate a background image), the documentation gives this code as an example:
$('#trees').pan({fps: 30, speed: 2, dir: 'left'});
If you're looking for a simpler, lighter approach, this plugin may be a better solution. To animate a background, give it an offset:
$('.elem').animate({backgroundPosition: '500px 150px'})

Like this:
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
...
/**
* #author Alexander Farkas
* v. 1.22
*/
(function ($) {
if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8
var oldCurCSS = $.curCSS;
$.curCSS = function (elem, name, force) {
if (name === 'background-position') {
name = 'backgroundPosition';
}
if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if (!force && style && style[name]) {
return style[name];
}
return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
};
}
var oldAnim = $.fn.animate;
$.fn.animate = function (prop) {
if ('background-position' in prop) {
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if ('backgroundPosition' in prop) {
prop.backgroundPosition = '(' + prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
};
function toArray(strg) {
strg = strg.replace(/left|top/g, '0px');
strg = strg.replace(/right|bottom/g, '100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
}
$.fx.step.backgroundPosition = function (fx) {
if (!fx.bgPosReady) {
var start = $.curCSS(fx.elem, 'backgroundPosition');
if (!start) {//FF2 no inline-style fallback
start = '0px 0px';
}
start = toArray(start);
fx.start = [start[0], start[2]];
var end = toArray(fx.end);
fx.end = [end[0], end[2]];
fx.unit = [end[1], end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
};
})(jQuery);