I am developing a product sale page. I have used a jquery plugin for implementing a carousel image.
Thats the library:
https://www.jqueryscript.net/demo/Carousel-Plugin-jQuery-RV-Gallery/
I am using the image statically for testing, with some images from internet. But I have to store the images dynamically, so amb I trying to iterate an ARRAY inside html. That array is html formatted.
I need to replace the shopify links, for the content of the arrayImagesProduct. Each product, it may have one, two, three,.. images. So I need to iterate the array .
I have tried this:
$("#productImages").html(arrayImagesProduct.join(''));
but then the slider it doesnt work. I get this error:
Uncaught TypeError: Cannot read property 'clientWidth' of undefined
at Gallery.countMoveRight (RV-gallery.js:121)
at RV-gallery.js:36
at dispatch (VM1025 jquery-1.12.4.js:5226)
at elemData.handle (VM1025 jquery-1.12.4.js:4878)
function showProduct(productCode){
var arrayImagesProduct = [];
$.post('../ServletJson', {
elem : 'productInfo',
code: productCode,
}, function(data) {
$.each(data,function(t,elem){
/* some stuff */
arrayImagesProduct.push('<img class="gallery-item" src="../loadImgProduct.jsp?idImg='+elem.idImg+'&code=productCode">');
});
$("#productImages").html(arrayImagesProduct.join(''));
});
}
How I can iterate the arrayImagesProduct array inside the html?
Inside here
<div class="gallery" id="productImages">
<!-- iterate arrayImagesProduct -->
<\div>
<body>
<div class="container-fluid">
<div class="row image-gallery-container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div class="gallery" id="productImages">
<img class="gallery-item" src="https://cdn.shopify.com/s/files/1/0122/2724/8185/products/0719_2019_Top1_b_ae870642-af0d-4655-811d-d597ed2a8bcc_720x.jpg?v=1574239406">
<img class="gallery-item" src="https://cdn.shopify.com/s/files/1/0122/2724/8185/products/0719_2019_Top1_a_720x.jpg?v=1574239409">
</div>
</div>
</div>
<!-- more content -->
</div>
</body>
Uncaught TypeError: Cannot read property 'clientWidth' of undefined
at Gallery.countMoveRight (RV-gallery.js:121)
at RV-gallery.js:36
at dispatch (VM1025 jquery-1.12.4.js:5226)
at elemData.handle (VM1025 jquery-1.12.4.js:4878)
The carousel is instantiating doing the declaration:
<div class="gallery">
jQuery('.gallery').eq(0).initGallery({
nav: ['<i class="material-icons">keyboard_arrow_left</i>', '<i class="material-icons">keyboard_arrow_right</i>'],
close: "<i class='material-icons'>close</i>",
aspectRatio: 3/2,
showDots: true,
showNavIfOneItem: false,
showNav: false,
arrows: true,
transition: "slide",
transitionTime: 700,
});
jQuery.fn.initGallery = function(options) {
if(!options) {
options={};
}
var galleries=[];
for (let i=0; i<this.length; i++) {
options.gallery = this.eq(i);
galleries[i] = new Gallery(options);
}
};
Related
I have a div that looks like this:
<div id="data" class="grid grid-cols-2">
</div>
and I have a function that can append in data div:
function loadStaticBar(data) {
let pl_name= `bar-${data.title.replace(/\s+/g, '-').toLowerCase()}`
$('#data').append(`
<div class="flex flex-col" id="${pl_name}-wrapper">
<div class="static barchart" id="${pl_name}-plot">
</div>
</div>
`)
}
The content of loadStaticBar(data) is a key and value it's a details for charts:
{id: 453, title: 'Bar Chart Example', select: 'bar-form', xtitle: 'Values', ytitle: 'Date', …}
Now, I'm trying to get all the IDs with the class static. I have tried:
$('#data').find('.static')
And I get S.fn.init [prevObject: S.fn.init(1)] inside of this are bunch of information. How can I get the IDs of the div that containing static class like this.
ids = [line-plot, bar-plot]
The answer to the updated question could be:
function loadStaticBar(data) {
let pl_name= `bar-${data.title.replace(/\s+/g, '-').toLowerCase()}`
$('#data').append(`
<div class="flex flex-col" id="${pl_name}-wrapper">
<div class="static barchart" id="${pl_name}-plot">
</div>
</div>
`)
}
const data={id: 453, title: 'Bar Chart Example', select: 'bar-form', xtitle: 'Values', ytitle: 'Date'};
$(function(){
loadStaticBar(data); // create the divs first !!!
const ids=$("#data .static").get().map(el=>el.id);
console.log(ids);
});
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div id="data" class="grid grid-cols-2">
</div>
As you want to receive a "proper" array instead of a jQuery object it makes sense to .get() the selected DOM elements first and then .map() them using the standard Array-method.
Incidentally, you can solve the originally posted question also without jQuery:
document.addEventListener("DOMContentLoaded", function () {
const ids=[...document.querySelectorAll("#data .static")].map(el=>el.id);
console.log(ids);
});
<div id="data" class="grid grid-cols-2">
<div class="flex flex-col" id="line-wrapper">
<div class="static linechart" id="line-plot">
</div>
</div>
<div class="flex flex-col" id="bar-wrapper">
<div class="static barchart" id="bar-plot">
</div>
</div>
</div>
I need to delete default navigation (nextEl, prevEl) and make button with "NEXT SLIDE BUTTON" text scroll to next slide
<swiper class="news-slider" :sliderd-per-view="1" :modules="[Navigation, Pagination, A11y, Lazy]" navigation="navigation" :navigation="{ nextEl: '.nextArrow'}" :pagination="{ clickable: true, dynamicBullets: true, dynamicMainBullets: 5 }" preload-images="false" lazy="lazy">
<swiperSlide class="swiper-slide" v-for="n in 10" :key="n">
<div class="news-container">
<div class="news"><img class="news__image swiper-lazy" src="#/assets/img/lookism-transformed-transformed.png" alt=""/>
<div class="swiper-lazy-preloader"></div>
<div class="news__info">
<div class="news__title">title</div>
<div class="news__description">description</div>
<div class="news__buttons">
<button class="normal-button news-button">more</button>
<button class="next-button"><span class="next-button__text">NEXT SLIDE BUTTON</span><img class="next-button__icon" src="#/assets/img/arrow-right.svg" alt=""/></button>
</div>
</div>
</div>
</div>
</swiperSlide>
</swiper>
<script>
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y],
};
},
};
</script>
How can i do that? I will be very grateful for your help
This should do it, all you need to do is import useSwiper and assign it to a const variable and use it in the div element as swiper.slideNext()
And also if you do not wish to use swiper's own elements then remove the navigation module.
Here's the doc source which is clearer
https://swiperjs.com/vue#use-swiper
I have a ng-repeat in my view and I want to pass the object from my ng-repeat to a javascript function but when I try to display it on the console it gives me undefined.
Here is my html:
<!-- Panel -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
{{card}}
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="nvd3-container" class="md-card" style="overflow-x: auto" ng-if="dataloaded0">
<md-card-content id="nvd3-scrollable-content" style="width: {{width}}px; height: 350px;">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab ng-repeat="pu in selectedKpi" label="{{pu.dprdProuNr}}">
<md-content class="md-padding">
<div class="row">
<div class="col-md-6">
{{pu.item1}}
{{pu.item2}}
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-card-content>
</div>
</div>
<!-- /.panel-body -->
<a href="" ng-click="footerLinkClicked(pu)">
<div class="panel-footer">
<span class="pull-left">Trend</span>
<span
class="pull-right">
<i class="fa fa-arrow-circle-right"></i>
</span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.panel -->
Here is my js file that returns undefined:
angular.module('App')
.directive('KpiParameter', function() {
return {
restrict: 'E',
templateUrl: 'app/kpi/kpi-parameter/kpi-parameter.html',
scope: {
card: '=',
kpiParamCallback: '&',
selectedProductionUnit: '<'
},
controller: function($scope, $rootScope, KpiChartFactory, $filter) {
console.log("!???????");
console.log($scope.selectedProductionUnit);
$scope.$watch('selectedProductionUnit', function() {
console.log($scope.selectedProductionUnit);
console.log("Changed");
KpiParamUpdated();
$scope.kpiParamCallback({
selectedProductionUnit: $scope.productionUnitDefault
});
}, true);
function KpiParamUpdated() {
console.log("KPiParamUpdated");
console.log($scope.selectedProductionUnit);
$scope.dataloaded0 = true;
KpiChartFactory.get({ pu: $scope.selectedProductionUnit }, function(data) {
$scope.selectedKpi = data;
console.log($scope.selectedKpi);
$rootScope.$broadcast('kpiParams', $scope.selectedKpi);
});
}
$scope.footerLinkClicked = function(pu) {
console.log("parameters received :");
console.log(pu);
}
},
controllerAs: "KpiPCtrl"
};
});
Do you have any idea why? I need to define it also in my js file?
As found in the docs of AngularMaterial, you can only achieve what you want to do by using md-on-select
Attributes
Parameter Type Description
label string
Optional attribute to specify a simple string as the tab label
ng-disabled boolean If present and expression evaluates to truthy, disabled tab selection.
md-on-deselect expression Expression to be evaluated after the tab has been de-selected.
md-on-select expression Expression to be evaluated after the tab has been selected.
md-active boolean When true, sets the active tab. Note: There can only be one active tab at a time.
Note: This event differs slightly from ng-click, in that if a tab is already selected and then clicked, the event will not fire.
Your call to footerLinkClicked() has no way of knowing which pu to use unless you tell it which one to use. And since it's outside of your ng-repeat, there's no overly easy way to do that.
md-tabs has an attribute called md-selected that allows you to store the currently selected index in a variable. So assuming that selectedKpi is an array (or is array-like), you can do this:
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedTab">
and this:
<a href="" ng-click="footerLinkClicked(selectedKpi[selectedTab])">
and you should be all set.
I have the following code, and it displays the listed text and the pagination at the bottom all fine. But when I try to get the images from the child page into the list it errors for me. Any ideas why?
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "SiteLayout.cshtml";
}
<div role="main" id="main">
<div id="blogPageFeatures">
<!-- loop through all of the child pages (blog posts) and grab data to output as a summary -->
#{
var pageSize =3;
var page =1;int.TryParse(Request.QueryString["page"],out page);
var items =Model.Content.Children().Where(x => x.IsDocumentType("BlogArticle")).OrderByDescending(x => x.CreateDate);
var totalPages =(int)Math.Ceiling((double)items.Count()/(double)pageSize);
if(page > totalPages)
{
page = totalPages;
}
else if(page <1)
{
page =1;
}
}
#foreach(var item in items.Skip((page -1)* pageSize).Take(pageSize))
{
<a href="#item.Url">
<!-- The next image line is where it errors -->
<img src="#Umbraco.Media(item.Children.blogArticleImage).Url">
<h2>#item.Name</h2>
<p class="blogTileDate">#item.CreateDate.ToString("dd/MM/yy")</p>
</a>
}
<div class="clearfix"></div>
<!-- Pagination START -->
#if(totalPages >1)
{
<div class="pagination">
<ul>
#if(page >1)
{
<li>Prev</li>
}
#for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li#(Html.Raw(active))>
#p
</li>
}
#if(page <totalPages)
{
<li>Next</li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
You are getting Model.Content.Children, which is a strongly typed collection of IPublishedContent objects. You are then calling item.Children.blogArticlImage, which is not going to work, as you're trying to get the a property on the children of the item, not a property of the item itself. You're also trying to use dynamic syntax, which won't work on the strongly typed objects. Try changing your image code to:
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
That should do te trick, one thing to note is that if an item doesn't have an image set, or the image that has been selected has been deleted, it'll throw an error. A more robust approach would be something like this:
var imageSrc = "ADD DEFAULT IMAGE PATH HERE";
var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage"));
if (media != null && !string.IsNullOrEmpty(media.Url))
{
imageSrc = media.Url;
}
<mig src="#imageSrc">
Using following code to display text from another page
$.ajax({
url: 'topic/ginger.php',
success: function (data) {
data = $(data).find('div#display');
$('.res h2').html(data);
}
});
<a href="topic/ginger.php">
<div class="res" id="content" style="background-color:rgb(50, 190, 166)">
<h2></h2>
</div>
</a>
now i have two div with different href
<a href="topic/icecre.php">
<div class="res" id="content" style="background-color:rgb(224, 79, 95)">
<h2></h2>
</div>
</a>
<a href="topic/jelly.php">
<div class="res" id="content" style="background-color:rgb(92, 184, 92)">
<h2></h2>
</div>
</a>
As you see <a href="topic/ginger.php"> is url in ajax code, now i have two other div with different href so different url how do i sole this
$('.res').each(function(){
getAjax($(this).find("h2"), $(this).parent().attr('href'));
});
function getAjax(child, link)
{
$.ajax({
url: link,
success: function (data) {
data = $(data).find('div#display');
child.html(data);
}
});
}
Assuming all your divs are in the res class I would think this would do it, loops throught the res class and grabs the h2 inside it and the href of its parent and passes it to your ajax call to do the work. Havent tested it though.
EDITL just saw your newest edit, you cant have multiple items with the ID = "content" so get rid of them and give them each class ="res"