I'm building a website that requires a carousel to be implemented. Because this website is built on AngularJS I wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time.
What I will need will be 3 images at a time on desktop, on a tablet 2 images and on mobile 1. So there's a significant element of responsive design involved here too.
Does anyone have any experince with this that doesn't involve JQuery? I'm not opposed to it but have been told by a senior member of the team to try to source an alternative, if any.
What I tried from Angulars bootstrap:
$scope.getPromoURLs = function() {
var subObj = myJSON.response.details.promotionalSpots;
for( var keys in subObj ) {
var value = subObj[keys].promotionUrl;
$scope.slides.push( value );
}
};
// Builts an array of promotional URLS to from a JSON object to source the images
$scope.getPromoURLs();
$scope.addSlide = function () {
// Test to determine if 3 images can be pulled together - FAILS
var newWidth = 600 + slides.length;
slides.push({
image: ''+slides[0]+''+slides[1] // etc
// Tried to stitch images together here
});
};
// TODO Should examine array length not hardcoded 4
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
ui-bootstrap's carousel is not a good choice, it has other drawback like isolated scope on each slide.
I'm using https://github.com/revolunet/angular-carousel which support multi item on each slide.
Because this directive support ng-repeat. You easy change you collection and using nested ng-repeat to set different number of items in each slide.
<ul rn-carousel class="image">
<li ng-repeat="images in imageCollection">
<div ng-repeat="image in images" class="layer">{{ image }}</div>
</li>
</ul>
As you have already defined 3 break points. We just need to reconstruct the imageCollection array when viewport size changed.
$window.on('resize', function() {
var width = $window.width();
if(width > 900) {
// desktop
rebuildSlide(3);
} else if(width <= 900 && width > 480) {
// tablet
rebuildSlide(2);
} else {
// phone
rebuildSlide(1);
}
// don't forget manually trigger $digest()
$scope.$digest();
});
function rebuildSlide(n) {
var imageCollection = [],
slide = [],
index;
// values is your actual data collection.
for(index = 0; index < values.length; index++) {
if(slide.length === n) {
imageCollection.push(slide);
slide = [];
}
slide.push(values[index]);
}
imageCollection.push(slide);
$scope.imageCollection = imageCollection;
}
So, I tried this one so as to make angularjs Carousel (ui.bootstrap.carousel) to work with multi items per animation. I have also tried to apply [Detection for Responsive Websites using AngularJS].2
Take a look here: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
Results:
1 ) One Item (Mobile Version) :
2 ) Two Items (Tablet Version) :
3 ) Three Items (Desktop Version) :
PART 2:
It can also detect the resolution of the window so as to determine if it is tablet,mobile or desktop following this tutorial...
Try to use this values: "mobile, tablet, desktop" to see the three different view versions.
Demonstration of the tablet version:
var app = angular.module('myApp', ['ui.bootstrap', 'angular-responsive']);
app.controller('MainCtrl', function($scope) {
$scope.displayMode = 'mobile'; // default value
$scope.$watch('displayMode', function(value) {
switch (value) {
case 'mobile':
// do stuff for mobile mode
console.log(value);
break;
case 'tablet':
// do stuff for tablet mode
console.log(value);
break;
}
});
});
function CarouselDemoCtrl($scope) {
var whatDevice = $scope.nowDevice;
$scope.myInterval = 7000;
$scope.slides = [{
image: 'http://placekitten.com/221/200',
text: 'Kitten.'
}, {
image: 'http://placekitten.com/241/200',
text: 'Kitty!'
}, {
image: 'http://placekitten.com/223/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/224/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/225/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/226/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/227/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/228/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/229/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/230/200',
text: 'Feline!'
}];
var i, first = [],
second, third;
var many = 1;
//##################################################
//Need to be changed to update the carousel since the resolution changed
$scope.displayMode = "tablet";
//##################################################
if ($scope.displayMode == "mobile") {many = 1;}
else if ($scope.displayMode == "tablet") {many = 2;}
else {many = 3;}
for (i = 0; i < $scope.slides.length; i += many) {
second = {
image1: $scope.slides[i]
};
if (many == 1) {}
if ($scope.slides[i + 1] && (many == 2 || many == 3)) {
second.image2 = $scope.slides[i + 1];
}
if ($scope.slides[i + (many - 1)] && many == 3) {
second.image3 = $scope.slides[i + 2];
}
first.push(second);
}
$scope.groupedSlides = first;
}
app.directive('dnDisplayMode', function($window) {
return {
restrict: 'A',
scope: {
dnDisplayMode: '='
},
template: '<span class="mobile"></span><span class="tablet"></span><span class="tablet-landscape"></span><span class="desktop"></span>',
link: function(scope, elem, attrs) {
var markers = elem.find('span');
function isVisible(element) {
return element && element.style.display != 'none' && element.offsetWidth && element.offsetHeight;
}
function update() {
angular.forEach(markers, function(element) {
if (isVisible(element)) {
scope.dnDisplayMode = element.className;
return false;
}
});
}
var t;
angular.element($window).bind('resize', function() {
clearTimeout(t);
t = setTimeout(function() {
update();
scope.$apply();
}, 300);
});
update();
}
};
});
Hope it helps!
Related
I have 3 clickable objects. When one is clicked, this becomes the 'selected unit'.
I am trying to create some generic actions for the units such as moving to a point.
In my create function I initialize the units, when a unit is clicked on - this is supposed to become the 'selected unit' so that my movement and direction function applies to the this unit. However, the script is not able to recognize which unit intend for example I get this error:
Uncaught TypeError: Cannot read property 'velocity' of undefined.
Is there a way to use a variable to indicate selected users and pass that to the functions?
window.onload = function() {
var block_count = 0;
var block = '';
var selected_unit = '';
var unit_clicked = 0;
var tank1 = null;
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render});
function preload () {
game.load.image('block', 'block.png');
game.load.image('tank1', 'tank.png');
game.load.image('baddie', 'tank.png');
game.load.image('mouse_btn', 'block.png');
game.input.mouse.capture = true;
}
function create () {
game.physics.startSystem(Phaser.Physics.ARCADE);
mouse_btn = game.add.sprite(30,30, 'mouse_btn');
mouse_btn.anchor.setTo(0.5, 0.5);
//T1
tank1 = game.add.sprite(30,30, 'tank1');
initialise_player(tank1);
game.physics.enable(tank1, Phaser.Physics.ARCADE);
//T2
tank2 = game.add.sprite(30,60, 'tank1');
initialise_player(tank2);
game.physics.enable(tank2, Phaser.Physics.ARCADE);
game.world.setBounds(0, 0, 2000, 2000);
game.camera.follow(tank1);
}
function update () {
if(selected_unit == '') {
mouse_btn.x = game.input.mousePointer.worldX
mouse_btn.y = game.input.mousePointer.worldY
}
if(game.input.activePointer.leftButton.isDown && block_count == 0 && unit_clicked == 0) {
game.input.activePointer.leftButton.stop(event);
block_count =1;
block = game.add.sprite(game.input.mousePointer.worldX, game.input.mousePointer.worldY, 'block');
game.physics.enable(block, Phaser.Physics.ARCADE);
block.anchor.setTo(0.5, 0.5)
lookAtObject(selected_unit, block, 0.005);
}
if(block.alive){
game.physics.arcade.moveToObject(selected_unit, block, 260, 0)
} else {
console.log(selected_unit)
selected_unit.body.velocity.x = 0;
selected_unit.body.velocity.y = 0;
}
if(game.physics.arcade.collide(selected_unit, block)) {
block_count--;
block.kill();
}
}
function render(){
//console.log(game.physics.arcade.collide(tank1, block))
}
function lookAtObject(obj, target, rotspeed){
var angle = Math.atan2(block.y - tank1.y, block.x - tank1.body.x);
tank1.rotation = angle + game.math.degToRad(90);
}
function initialise_player(tank1){
tank1.anchor.setTo(0.5, 0.5);
tank1.inputEnabled = true;
tank1.input.useHandCursor = true;
tank1.events.onInputDown.add(t1_clicked,this);
tank1.events.onInputOver.add(t1_over, this)
tank1.events.onInputOut.add(t1_out, this)
}
function t1_clicked() {
selected_unit = tank1;
}
function t1_over() {
unit_clicked = 1
}
function t1_out () {
unit_clicked = 0
}
};
The error you're getting on initial load is because in update you're making an assumption that selected_unit exists and has a body.
Update your third if to make sure selected_unit is defined.
if (selected_unit !== '') {
selected_unit.body.velocity.x = 0;
selected_unit.body.velocity.y = 0;
}
However, a better option would be to put this a few lines down, where you kill the block instead.
if(game.physics.arcade.collide(selected_unit, block)) {
selected_unit.body.velocity.x = 0;
selected_unit.body.velocity.y = 0;
block_count--;
block.kill();
}
if (block.alive); moveToObject is also expecting selected_unit to exist and have a body, which may not be the case; wrap it with a check.
if (selected_unit !== '') {
game.physics.arcade.moveToObject(selected_unit, block, 260, 0)
}
That now allows tank1 to rotate to look at the item you just placed, but it doesn't move it until it or tank2 have been clicked on.
This also points out that there are a number of tweaks you'll want to make to your code in general, since you're ignoring arguments that are being passed in. For example, t1_clicked isn't using the sprite that's been clicked on, but is instead just hard-coding tank1. lookAtObject isn't using obj or target, but again has values hard-coded in.
One other thing you may want to change is the following:
if(selected_unit == '') {
mouse_btn.x = game.input.mousePointer.worldX
mouse_btn.y = game.input.mousePointer.worldY
}
If you make that the following, you won't end up with an extra sprite hanging about on the screen.
if (block_count === 0) {
mouse_btn.x = game.input.mousePointer.worldX;
mouse_btn.y = game.input.mousePointer.worldY;
}
I have a product page with images and product description that all loads dynamically from a json file. Everything works perfectly except for the owl carousel when I click on either the prev/next arrows. The main image and the data updates as it should, but the carousel does not.
I logged the new image urls and they are being updated properly.
I tried using this everywhere in the code
$("#owl-focus").trigger('refresh.owl.carousel');
This is the javascript for the page
// ========== Compile Product Data =======================================
$.getJSON("../../json/guitars.json", function(data) {
var jsonLength = data.length
// ------- Parse & Returns URL Parameters -----------------------------
function getUrlVars(guitar) {
var vars = {}
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
})
return vars
}
// ------------ Append Clicked Image -------------------------------------
var guitar = parseInt(getUrlVars()["product"], 10)
loadGuitar(guitar)
function loadGuitar(guitar) {
// Images
var image1 = data[guitar].img1
var image2 = data[guitar].img2
var image3 = data[guitar].img3
var image4 = data[guitar].img4
var alt = data[guitar].alt
// description
var title = data[guitar].title
var brand = data[guitar].brand
var code = data[guitar].code
var price = data[guitar].price
var description = data[guitar].description
var specs = data[guitar].specs
$('#clickImg').attr({src: `../${image1}`, alt: `${alt}`})
$('#img1').attr({src: `../${image1}`, alt: `${alt}`})
$('#img2').attr({src: `../${image2}`, alt: `${alt}`})
$('#img3').attr({src: `../${image3}`, alt: `${alt}`})
$('#img4').attr({src: `../${image4}`, alt: `${alt}`})
$('#title').html(title)
$('#brand').html(brand)
$('#variant-sku').html(code)
$('#price').html(price)
$('#description').html(description)
$('#specs').empty();
specs.forEach(spec => {
$("#specs"). append(`<li>${spec}</li>`)
})
}
// -------------- Owl Carousel -------------------------------------------
$(document).ready(function () {
$('#owl-focus').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [$('.owl-navigation .owl-nav-prev'), $('.owl-navigation .owl-nav-next')],
responsiveClass: true,
responsive: {
0: {
items: 3,
},
1050: {
items: 4,
}
}
})
})
// -------- Next / Previous Arrows -------------------------------------
$("#prev-btn").click(function() {
if (guitar === 0) {
guitar = jsonLength - 1
} else {
guitar = guitar - 1
}
loadGuitar(guitar)
onPageChg()
})
$("#next-btn").click(function() {
if (guitar === jsonLength - 1) {
guitar = 0
} else {
guitar = guitar + 1
}
loadGuitar(guitar)
onPageChg()
})
})
// ========== Compile Product Data End ===================================
Figured it out. Instead of trying to reload owl I reloaded the page as I should have with new data. Similar functions that take me to that product page in the first place with a few adjustments.
$("#prev-btn").on("click", function(e) {
$.getJSON("../../json/guitars.json", function(json) {
if (guitar === 0) {
new_id = jsonLength - 1
} else {
new_id = guitar - 1
}
window.location.href = "product.html?product=" + new_id
})
})
$("#next-btn").on("click", function(e) {
$.getJSON("../../json/guitars.json", function(json) {
if (guitar === jsonLength - 1) {
new_id = 0
} else {
new_id = guitar + 1
}
window.location.href = "product.html?product=" + new_id
})
})
Before I was just changing the attributes on the photos, description, etc
I am facing a slight dilemma as a JavaScript newbie. Let me explain the script:
I have implemented a JavaScript function rss() which pulls from an internet RSS news feed and saves the news headlines into an array newsArray[].
The function headlinesInsert() should push every item in the array to the HTML ID #headlineInsert, similarly to how it is shown here.
However, the linked example's textlist variable (which should be replaced with my local newsArray[]) does not seem to be 'compatible' for some reason as when replacing nothing shows on the HTML side.
The idea is that the rss() function updates the global newsArray[] with new headlines every 10 minutes while the headlinesInsert() pushes this data to the HTML ID constantly (as per the linked example).
With my limited knowledge of JavaScript, I am hoping someone could help me set the following code right and put the idea into action.
// Push RSS Headlines into HTML ID
var newsArray = [];
var listTicker = function headlinesInsert(options) {
var defaults = {
list: [],
startIndex:0,
interval: 8 * 1000,
}
var options = $.extend(defaults, options);
var listTickerInner = function headlinesInsert(index) {
if (options.list.length == 0) return;
if (!index || index < 0 || index > options.list.length) index = 0;
var value = options.list[index];
options.trickerPanel.fadeOut(function headlinesInsert() {
$(this).html(value).fadeIn();
});
var nextIndex = (index + 1) % options.list.length;
setTimeout(function headlinesInsert() {
listTickerInner(nextIndex);
}, options.interval);
};
listTickerInner(options.startIndex);
}
// The following line should hold the values of newsArray[]
var textlist = new Array("News Headline 1", "News Headline 2", "News Headline 3", "News Headline 4");
$(function headlinesInsert() {
listTicker({
list: textlist ,
startIndex:0,
trickerPanel: $('#headlineInsert'),
interval: 8 * 1000,
});
});
$(function slow(){
// Parse News Headlines into array
function rss() {
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
newsArray = [];
for (var i = 0; i < data.items.length; i++){
newsArray[i] = (data.items[i].title);
}
console.log(newsArray);
})}
// Refresh functions ever 10 minutes
rss()
setInterval(function slow() {
rss();
}, 600000); // 10 Minute refresh time
});
Check following code. You need to initialise listTicker once rss feed is loaded.
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
var listTicker = function(options) {
var defaults = {
list: [],
startIndex: 0,
interval: 3 * 1000,
}
var options = $.extend(defaults, options);
var listTickerInner = function(index) {
if (options.list.length == 0) return;
if (!index || index < 0 || index > options.list.length) index = 0;
var value = options.list[index];
options.trickerPanel.fadeOut(function() {
$(this).html(value).fadeIn();
});
var nextIndex = (index + 1) % options.list.length;
setTimeout(function() {
listTickerInner(nextIndex);
}, options.interval);
};
listTickerInner(options.startIndex);
}
var textlist = new Array("news1", "news2", "news3");
$(function() {
function rss() {
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
newsArray = [];
for (var i = 0; i < data.items.length; i++) {
newsArray[i] = (data.items[i].title);
}
console.log(newsArray);
listTicker({
list: newsArray,
startIndex: 0,
trickerPanel: $('#newsPanel'),
interval: 3 * 1000,
});
})
}
rss();
});
</script>
<div id='newsPanel' />
Coming again with another question :)
This time I had a requirement to show some progress while Child rows are being loaded. Since there is an Api call which relatively takes little time to return data, I do want to show the some progress unless the user who clicks the parent row is totally unaware whether there is a call done to see its child rows.
What I have done:
I wrote a style sheet class which has a
loader-small.gif
image as this:
tr.loading td.details-control {
background: url('/Images/loader-small.gif') no-repeat center center;
}
and applied like this:
$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
try {
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
//Calling the loading Class ------>
tr.addClass('loading');
// Open this row
var arrForTable1 = [];
var arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
console.log('You selected: ' + row.data().AccountManagerID);
var settings = {
"columnDefs": [
{ targets: 1, align: "right", decimals: 0 },
{ targets: 2, align: "right", decimals: 0 },
{ targets: 3, align: "right", decimals: 0 },
{ targets: 4, align: "right", decimals: 2 },
{ targets: 5, align: "right", decimals: 2 }
]
};
//problems with asynchoronus call back
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
if (response.success === "true") {
for (var i = 0; i < response.value.length; i++) {
for (var j = 0; j < response.value[i].Securities.length; j++) {
var itemRow2 = {};
itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
itemRow2["Trades"] = response.value[i].Securities[j].Trades;
itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
arrForTable2.push(itemRow2);
totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
}
totalBrokerage = Math.round(totalBrokerage * 100) / 100;
totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;
var itemRow1 = {};
itemRow1["Account ID"] = response.value[i].AccountId;
itemRow1["Account Name"] = response.value[i].AccountName;
itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
arrForTable1.push(itemRow1);
arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
}
tr.removeClass('loading');
htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
row.child(htmlTable1).show();
tr.addClass('shown');
}
else {
row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
tr.addClass('shown');
};
}
} catch (e) {
console.log(e.message);
}
});
The Problem:
Firefox nicely shows the Progress image after the user clicks it, but Edge and Chrome does not show. Both browsers crossed this piece of code when I was debugging from developer tools of the respective browser.
Its browser compatible problem? Is there a solution for it? Help me please.
In case of chrome there is such an issue while showing the loading bar while making a server call. Please make the following changes where you are making the service call. First add the class loading to the table
tr.addClass('loading');
After that make the service call by giving a timeout function
setTimeout(function(){
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
......
//Your service calls and response call backs
},1);
On providing a timeout (say 1ms), Chrome will get the time to bind the loading bar to DOM, In other case the DOM Object is not available to show the spinner.
I am getting the following error when I scroll in ui-grid:
Uncaught TypeError: Cannot read property 'percentage' of undefined
Interestingly I get the same error on the ui-grid tutorial site so it is possible it is just simply a bug.
Here is a plunker that shows the issue.
Here are the grid options I am using:
mc.gridOptions = {
data: mc.people,
enableSorting: true,
onRegisterApi: function( gridApi ) {
mc.gridApi = gridApi;
},
columnDefs: [
{field: 'name'},
{field: 'age'},
{field: 'state', enableSorting: false}
]
};
Any ideas as to what I am doing wrong here? As far as I can tell there is nothing wrong with this.
I would mention this in the comment box, but I need the space and the formatting to explain that you probably need to bring this up to their attention:
First you are using an unstable version, your best bet is to use a stable version that is being used and tested.
The unstable version is throwing a bug in the code below.. please review all my comments in asterisk (******) :
// Scroll the render container viewport when the mousewheel is used
$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
// use wheelDeltaY
var newEvent = GridUtil.normalizeWheelEvent(evt);
var args = { target: $elm };
*****THIS STATEMENT IS TRUE BECAUSE YOU SCROLLED VERTICALLY, ARGS.Y IS SET*****
if (newEvent.deltaY !== 0) {
var scrollYAmount = newEvent.deltaY * -120;
// Get the scroll percentage
var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / rowContainer.getVerticalScrollLength();
// Keep scrollPercentage within the range 0-1.
if (scrollYPercentage < 0) { scrollYPercentage = 0; }
else if (scrollYPercentage > 1) { scrollYPercentage = 1; }
***THIS IS SET***
args.y = { percentage: scrollYPercentage, pixels: scrollYAmount };
}
*****THIS STATEMENT IS FALSE BECAUSE YOU NEVER SCROLLED HORIZONTALLY, ARGS.X IS NOT SET*****
if (newEvent.deltaX !== 0) {
var scrollXAmount = newEvent.deltaX * -120;
// Get the scroll percentage
var scrollLeft = GridUtil.normalizeScrollLeft(containerCtrl.viewport);
var scrollXPercentage = (scrollLeft + scrollXAmount) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
// Keep scrollPercentage within the range 0-1.
if (scrollXPercentage < 0) { scrollXPercentage = 0; }
else if (scrollXPercentage > 1) { scrollXPercentage = 1; }
***THIS DOESNT GET SET SINCE IT WILL NOT REACH THIS POINT***
args.x = { percentage: scrollXPercentage, pixels: scrollXAmount };
}
*****THROWS AN ERROR BECAUSE ARGS.X IS NULL & DOESNT EXIST*****
// Let the parent container scroll if the grid is already at the top/bottom
if ((args.y.percentage !== 0 && args.y.percentage !== 1) || (args.x.percentage !== 0 && args.x.percentage !== 1)) {
evt.preventDefault();
}
uiGridCtrl.fireScrollingEvent(args);
});