I want to show owl-carousel image-slides in two or three horizontal row, based on setting. How it is possible?
Also i need that, in mobile view(small screen), the image-slide should be single and should be in single row.
Something like this (guess below numbers are images):
Slides(single row): 1 2 3 4 5 6 7 8 9
I need:(if Two row)
1 3 5 7 9
2 4 6 8
I need:(if Three row)
1 4 7
2 5 8
3 6 9
I have found this answer on my own, this will helps someone who need this if it is in their project-requirement.
Note: in new owl-carousel js (version 2.3.4), just make minor property change on init-code of below jquery code.
i am putting the code here:
below is the .Net MVC HTML CODE:
Here you can see in div tag class name "clsBannerAds", we will write jquery for append the multiple row in owl-carouesel. Also see in div tag there are some data- attributes which helps to make owl-carousel slides to show dynamically, as like how many rows, or how many slides in one column (based on setting in db).
HTML::>>
<div class="clsBannerAds" data-columncount="#(Model.AdvertGroup.BlockColumnSize ?? 1)" data-autoplayinterval="#(Model.AdvertGroup.CarouselRefreshRate)" data-rowcount="#(Model.AdvertGroup.BlockRowSize ?? 1)" data-displaymode="#Model.AdvertGroup.DisplayMode.ToString()">
#foreach (var item in Model.ListAdvertIndividual)
{
int itemBannerHeight = Model.ListAdvertIndividual.Count() > 1 && string.IsNullOrWhiteSpace(item.LabelTitle) ? Model.AdvertGroup.GroupImgWithLableHeight : Model.AdvertGroup.GroupBannerHeight;
if (item.AdvertIndividualId > 0 && !string.IsNullOrWhiteSpace(item.SeoFilename)) //--#0012794
{
<div class="item" style="margin-left:7px;margin-right:7px;margin-top:5px;margin-bottom:15px;">
<div class="inner-item" style="height:#(Model.AdvertGroup.GroupImgWithLableHeight)px;width:#(Model.AdvertGroup.GroupBannerWidth);max-width:100%;margin-top:20px;">
<img class="d-block w-100" src="#(item.SeoFilename)" alt="First slide" style="width:#(Model.AdvertGroup.GroupBannerWidth);height:#(itemBannerHeight)px;max-width:100%;">
</div>
</div>
}
}
JQUERY::>> (we need below function to call on document.ready)
function bannerAdWidgetSetCarousal() {
$('.clsBannerAds').each(function (index, element) {
var columnCount = $(this).attr('data-columncount') || 1;
var columnCntDesktopSmall = columnCount > 2 ? columnCount - 1 : columnCount;
var columnCntTablet = columnCntDesktopSmall > 2 ? columnCntDesktopSmall - 1 : 1;
var playInterval = $(this).attr('data-autoplayinterval') || false;
var rowCount = $(this).attr('data-rowcount');
var displayMode = $(this).attr('data-displaymode');
var isDynamicDisplayMode = displayMode && displayMode == "Dynamic" ? true : false;
var makeAnimate = isDynamicDisplayMode;
var showNavigationArrow = !isDynamicDisplayMode ? true : false;
var arrNavText = !isDynamicDisplayMode ? ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"] : ["", ""];
var slideItems = $(element).find('.item');
//THIS is code for make carosal slide in horizontal row, based on row count [ex. slides in 1 row, 2 row, 3 row]
if (rowCount && rowCount > 1 && slideItems.length > 1) {
var loopCount = Math.ceil(slideItems.length / rowCount);
for (var i = 0; i < loopCount; i++) {
var $el = $(element).find('.item:nth-of-type(' + (i + 1) + ')');
if ($el.next().length == 0) break;
$el.next().find('.inner-item').appendTo($el);
$el.next().remove();
}
}
//Init owlCarousel
$(element).owlCarousel({
items: columnCount,
lazyLoad: true,
loop: true,
autoPlay: playInterval,
pagination: false,
itemsDesktop: [1199, columnCount],
itemsDesktopSmall: [979, columnCntDesktopSmall],
itemsTablet: [768, columnCntTablet],
itemsMobile: [479, 1],
navigation: showNavigationArrow,
navigationText: arrNavText,
singleItem: makeAnimate,
transitionStyle: "goDown"
});
});
}
Related
I've data which is also width in my project so everytime I click for example a button it will - my data number my code does perfectly but there's one thing, it can't go under 0 any soltuons?
data:{
monsterHealth:100,
},
methods:{
attack(){
var max = 10
var min = 3
var damage = Math.max(Math.floor(Math.random() * max) + 1, min)
this.monsterHealth -= damage;
}
<div class="monster">
<h1>MONSTER</h1><div class="healthbar" :style="{width:monsterHealth + '%'}"></div>
</div>
<button class="attack" #click="attack">Attack</button>
I'm newbie in using WebRTC and I am using this git project by Muaz-khan. I have problem when divided chat output into two columns (User name 1 and User name 2), this is default of chat output
id of this div is #chat-output
Can you show code for example? I think you just create two html containers (left and rigth for example) and push messages first to the left, and messages from the second to the right.
I am using this demo of him , [ https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/TextChat%2BFileSharing.html].
Here is function that Text Message Out Put will put here in . I want to change it in two columns, such as for User name 1 : <div id="usename1"></div>, for user name 2 : <div id="username2"></div>
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return;
connection.send(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
}
Modify function appendDIV().
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.style.width = '100%';
if (event.data)
div.style.textAlign = 'left';
else
div.style.textAlign = 'right';
div.focus();
document.getElementById('input-text-chat').focus();
}
P.S. I apologize for the late reply :)
I am new to Vuejs but am having an issue with some code.
I am trying to 'flatten' a series of line_items of orders into a list of items and then create meta information for each object. The first part works fine but it appears as if the reactive nature of Vuejs is causing the last value of these newly created objects to extend across all previous incarnations.
I have created a fiddle here. http://jsfiddle.net/trestles/ruj7hzcf/3/
I presume that the problem is in creating my item (~ line 70 in fiddle).
// here's the problem - why is quantity being updated to the last value?
var item = {item_id: line_item.menu_item_id, header: line_item.menu_item_header, quantity: line_item.quantity, locations: locations }
this.items.push(item);
Why in this case would item be updated to the last value?
In the table, the results are:
test item 3 5 8
spiced shrimp with horseradish cocktail sauce (per dozen) 9 5 8
dates with bacon & parmesan (per dozen) 5 5 8
marcona almonds (serves 8) 6 5 8
marinated olives (serves 8) 8 5 8
and should be
test item 3 3 0
spiced shrimp with horseradish cocktail sauce (per dozen) 9 2 7
dates with bacon & parmesan (per dozen) 5 5 0
marcona almonds (serves 8) 6 0 6
marinated olives (serves 8) 8 0 8
What am I doing wrong?
The root of most problems in your existing code is reusing the same objects - elements of this.locations and this.orderPickupTimes arrays - again and again as you pass those through createNewItem. Augment those lines in your code:
// instead of var location = this.locations[j];
var location = Object.assign({}, this.locations[j]);
// and within the internal loop
// instead of var order_pickup_time = this.orderPickupTimes[k];
var order_pickup_time = Object.assign({}, this.orderPickupTimes[k]);
... and see the difference it makes.
Still, it's only part of the problem. The key idea of your code is storing -alongside each 'item' object - the whole list of locations and pickup times, having the ones with some orders set their 'quantity' attribute changed.
But to do this, you need to differentiate between the items already processed (with their structures already filled) - and fresh items. It's cumbersome, yes, but might work with something like this:
var locations = [];
var item = this.items.find(it => it.item_id === line_item.menu_item_id);
if (item) {
locations = item.locations;
}
else {
item = {item_id: line_item.menu_item_id, header: line_item.menu_item_header, quantity: 0, locations: locations };
this.items.push(item);
}
... and have this repeated all the time you need to choose between creating a new location or orderPickupTime - or reusing the existing ones.
Here's the demo illustrating this approach.
Still, I'd change two major parts here.
First, I'd create a dedicated - private - function to group the order items by their locations and order pickup times. Something like this:
function _groupItemsByOrders(orders) {
return orders.reduce(function(groupedItems, order) {
var locationId = order.location_id;
var orderPickupTimeKey = order.order_pickup_time_short;
order.line_items.forEach(function(lineItem) {
if (!groupedItems.hasOwnProperty(lineItem.menu_item_id)) {
groupedItems[lineItem.menu_item_id] = {
header: lineItem.menu_item_header,
quantity: 0,
locations: {}
};
}
var groupedItem = groupedItems[lineItem.menu_item_id];
if (!groupedItem.locations.hasOwnProperty(locationId)) {
groupedItem.locations[locationId] = {};
}
var groupedItemLocation = groupedItem.locations[locationId];
if (!groupedItemLocation.hasOwnProperty(orderPickupTimeKey)) {
groupedItemLocation[orderPickupTimeKey] = 0;
}
groupedItemLocation[orderPickupTimeKey] += lineItem.quantity;
groupedItem.quantity += lineItem.quantity;
});
return groupedItems;
}, {});
}
Second, I'd rearranged that template so that it takes the order of locations and orderPickupTimes from header arrays, then maps it to groupedData. Something like this:
<tr v-for="(item, item_id) in groupedItems">
<td>{{item_id}}</td>
<td>{{item.header}}</td>
<td>{{item.quantity}}</td>
<template v-for="location in locations">
<td v-for="opt in orderPickupTimes">
{{item.locations[location.id][opt.short]}}
</td>
</template>
</tr>
Now, your 'mounted' hook would look like this:
mounted(){
axios.get('http://www.mocky.io/v2/59f8ceb52d00004d1dad41ec')
.then(response => {
this.locations = response.data.locations;
this.orderPickupTimes = response.data.order_pickup_times;
this.groupedItems = _groupItemsByOrders(response.data.orders);
});
}
Here's the demo.
I have several tabs with same page elements. One of the element contains a map div based on location details. I could get the map initialized for the first tab opened. The next tab when I open it throws up error as the div id containing the map is already initialized. How to make the div id unique (dynamic) for each map initialization in different tabs? Any idea would help me!
You can use this function to generate a completely unique id which you can then set with [id]="getUniqueId()":
getUniqueID(): string {
let d = Date.now();
if (window.performance && typeof window.performance.now === 'function') {
d += performance.now();
}
const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d/16);
return (c === 'x' ? r : (r&0x3|0x8)).toString(16);
});
return id;
}
Scratching head here. I've got a pulldown and if I query it in SQL Server Manager Query Window I get 5 different values (these are sample points for a water system).
However, when the pulldown loads, there are 5 options of the first value. Can someone see something I can't?
I narrowed it down to the code below because I held my cursor over "results" which was the final step in my Controller's code, and it showed 5 items all of the same value:
else if ((sampletype == "P") || (sampletype == "T") || (sampletype == "C") || (sampletype == "A"))
{
var SamplePoints = (from c in _db.tblPWS_WSF_SPID_ISN_Lookup
where c.PWS == id && c.WSFStateCode.Substring(0, 1) == "S"
select c).ToList();
if (SamplePoints.Any())
{
var listItemsBig = SamplePoints.Select(p => new SelectListItem
{
Selected = false,
Text = p.WSFStateCode.ToString() + ":::" + p.SamplePointID.ToString(),
Value = p.WSFStateCode.ToString()
}).ToList();
results = new JsonResult { Data = listItemsBig };
}
}
return results ;
}
I have had a similar problem in nHibernate, it was caused by how I defined my primary keys/foreign keys in the ORM, leading to a bad join and duplicate values.