I tried this code with manual data and it worked perfectly, now I'm pulling data from the database to the carousel but it just loads all the images unto the page without sliding through them. this is my code
<carousel :margin="20"
:autoplay="true"
:items="3"
:loop="true"
:nav="true"
:navText="[`<span class='fas fa-angle-left text-bold h3'></span>`,`<span class='fas fa-
angle-right text-bold h3'></span>`]"
:dots="false"
>
<div v-for="(project, index) in projects" :key="index" :class="index === 0 ? 'active': ''">
<img :src="project.cover_image" alt="image" >
</div>
</carousel>
You just need to add v-if="projects.length > 0" in your carousel
<carousel v-if="projects.length > 0">
<div v-for="(project, index) in projects" :key="index">
<img :src="project.cover_image" alt="image" >
</div>
</carousel>
Related
I am trying to perform concatenation in img tag and here below is what i am trying to do:
<div class="vx-row">
<div v-for="item in items" class="vx-col" v-bind:key="item.id">
<div class="w-full mb-base">
<vx-card>
...
<img :src="require('./img/stars_' + item.id + '_logo.png')" alt=""/>
...
</vx-card>
</div>
</div>
</div>
I am trying to concatenate the item.id to the image path as i am making my code dynamic such that when the cards are displayed then the respective image is displayed.
Please let me know how it can be done, initially i could see images in respective cards but then i tried using
<img :src="require(`./img/stars_${this.$route.params.item_id}_logo.png`)">
in other components then i get error every where.
Here is the error that i get everywhere:
Here you can try a shorthand that webpack will use.
HTML:
<img :src="getByPath(item.id)" v-bind:alt="item.id">
Method:
getByPath(id) {
return require('./img/stars_' + id + '_logo.png')
}
you can do with method like below code
try this:
<div class="vx-row">
<div v-for="item in items" class="vx-col" v-bind:key="item.id">
<div class="w-full mb-base">
<vx-card>
...
<img :src="getImgUrl(item.id)" alt=""/>
...
</vx-card>
</div>
</div>
</div>
and create method:
getImgUrl(value) {
return `./img/stars_${value}_logo.png`
},
in my app i want to scrape a web page to extract the values i am interesting.
(ShopData is the HtmlNodeCollection)
and my C# code like this :
var ShopName = ShopData.SelectNodes(".//div[#class='shop-name']");
this return null
if i try this, returns the node:
var ShopName1 = ShopData.SelectNodes(".//div[contains(#class, 'shop cf')]")
why .//div[#class='shop-name'] does not work?
if i do ShopData.SelectNodes(".//div[contains(#class, 'shop cf')]").ToList()[0];
then the innertext is empty.
the same time ShopData.SelectNodes(".//div[#class='price']").ToList()[0].InnerText return text normally.
what are the difference between this 2 functions?
my web page looks like this:
<li class="cf card js-product-card">
<div class="shop cf">
<div class="shop-logo js-shop-logo">
<img class="fade-in" src="//a.scdn.gr/ds/shops/logos/2870/mid_20181210114648_f305ba08.jpeg" data-src="//a.scdn.gr/ds/shops/logos/2870/mid_20181210114648_f305ba08.jpeg" alt="Electroholic">
</div>
<i class="icon tooltip-parent js-tooltip-handler trustmark" data-trigger="toggle" data-type="string" data-theme="light" data-content="Το κατάστημα διαθέτει πιστοποίηση GRECA Trustmark που σημαίνει ότι έχει δεσμευτεί να εργαστεί σύμφωνα με τον Eλληνικό και Ευρωπαϊκό (αντίστοιχα) Κώδικα Ηλεκτρονικού Εμπορίου, διασφαλίζοντας δεοντολογικά πρότυπα στην ψηφιακή αγορά.<div>Περισσότερες πληροφορίες στην <a href='http://www.greekecommerce.gr/' target='_blank'>ιστοσελίδα του GRECA.</a></div>" data-placement="left">
<span>GRECA Trustmark</span>
</i>
<div class="shop-name">Electroholic</div>
</div>
<div class="description">
<div class="item">
<h3>
<a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link content-placeholder" data-type="title" href="/products/show/32755241">
Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις</a>
</h3>
<p class="availability"><span class="availability">Παράδοση έως 30 ημέρες</span></p>
</div>
</div>
<div class="price">
<div class="">
<div class="price-content"><a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link product-link content-placeholder" data-type="net_price" href="/products/show/32755241">358,00 €</a><span class="extra-cost cf"><em>+ 9,00 €</em> <span>Μεταφορικά</span></span><span class="extra-cost cf"><em>+ 2,00 €</em> <span>Αντικαταβολή</span></span><span class="final-price"><a title="Πολυμηχάνημα Epson EcoTank ITS L6170 WiFi ink - έως 60 δόσεις" rel="nofollow" class="js-product-link content-placeholder" data-type="final_price" href="/products/show/32755241">369,00 €</a></span></div>
</div>
</div>
<div class="shop-details react-expander-bottom js-product-uservoice"><span class="payment-options"><i class="icon tooltip-parent js-tooltip-handler trustmark" data-trigger="toggle" data-type="string" data-theme="light" data-content="Το κατάστημα διαθέτει πιστοποίηση GRECA Trustmark που σημαίνει ότι έχει δεσμευτεί να εργαστεί σύμφωνα με τον Eλληνικό και Ευρωπαϊκό (αντίστοιχα) Κώδικα Ηλεκτρονικού Εμπορίου, διασφαλίζοντας δεοντολογικά πρότυπα στην ψηφιακή αγορά.<div>Περισσότερες πληροφορίες στην <a href='http://www.greekecommerce.gr/' target='_blank'>ιστοσελίδα του GRECA.</a></div>" data-placement="auto vertical"><span>GRECA Trustmark</span></i>
</span>
<div class="shop-expander-tabs">
<button class="shop-tab js-shop-tab icon ">
<div class="rating-with-count react-component">
<a class="rating stars" title="3,9 αστέρια από 1493 χρήστες" href="#reviews">
<div class="rating-wrapper">
<div class="actual-rating blue" itemprop="" style="width: 78%;">1493</div><span itemprop="">3,9</span></div>
</a>
<div class="reviews-count blue">
<a title="1493 αξιολογήσεις χρηστών" href="#reviews">1493</a></div>
</div>
</button>
<button class="shop-tab js-shop-tab icon location-tab multi-shops ">
<span>Περιστέρι, Αττική</span></button>
</div>
<div class="shop-info-object js-shop-info-expander ">
</div>
</div>
</li>
OK, i figure out what is goin on.
the web page use AJAX calls and thats why i cannot see them.
I've made a site with laravel and have a page where there are pictures that can be seen in hi-resolution via fancybox or downloaded. In the database i have counters for each action. and I do already have GET routes set up for the counting since they are used in other situations too.
for example: www.mysiste.com/somecode/someothercode/image/viewed
the simplified structure of each image is this.. This is called inside a for each loop.. i removed all styling and classes for better reading...
<div >
<div class="card" style="background-color: lightgray">
<div >
<a data-fancybox="gallery" href="/images/......../{{$photo->filename}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
</div>
<div class="card-footer">
<div>
<div>
<a download="{{$photo->filename}}" href="/images/......../{{$photo->filename}}">
<span>Download (Hi-Res)</span>
</a>
</div>
<div>
<a download="social_{{$photo->filename}}" href="/images/......../social_{{$photo->filename}}">
<span>Download (Social-Res)</span>
</a>
</div>
</div>
</div>
</div>
</div>
I would need that when they hit the download button it calls a certain URL in the background for upcounting.. (most important)
If possible I would like to hit another URL when the images are viewed fullscreen through fancybox.
how can this be done?
You can do something in the lines of:
<a data-fancybox="gallery" href="{{ route('photo.fancybox', ['photo' => $photo])}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
...
<a href="{{ route('photo.download', ['photo' => $photo])}}">
<span>Download (Hi-Res)</span>
</a>
PhotoController
public function download(Photo $photo){
$photo->downloadCount->increment();
return redirect('/images/......../'. $photo->filename);
}
public function fancybox(Photo $photo){
$photo->fancyboxCount->increment();
return redirect('/images/......../social_'. $photo->filename);
}
And make sure to register your new routes accordingly:
Route::get('photo/download', 'PhotoController#download')->name('photo.download');
Route::get('photo/fancybox', 'PhotoController#fancybox')->name('photo.fancybox');
I am faced with a frequent problem in react botostrap,sometimes grid offset props does not work, and only normal bootstrap classes work for me.
code:
<Carousel.Item >
<div className="item-container d-flex flex-column flex-wrap ">
{
this.categories.map(category => {
return (
<Card className="px-2 category__card col-xl-4 col-sm-6">
<div className=" car-container" style={category.style}>
<Card.Body>
<Card.Title className="text-white font-weight-normal text-uppercase ">
<h3>
{category.title}
</h3>
</Card.Title>
<Button variant="light rounded-0" >View Products</Button>
</Card.Body>
<Card.Img variant="bottom" src={category.img} className="card-image"/>
</div>
</Card>
);
})
}
</div>
</Carousel.Item>
This code works as i used normal bootstrap classes in Card component col-xl-4 col-sm-6 but it does not work when i remove these classes and use react-bootstrap props sm={6} xl={4}
I can use bootstrap classes and be happy but i need to make the width of the cards in carousel item dynamic so why i am asking the question, what may be the reasons behind these props does not work???
VueJS markup:
<v-menu
lazy
:close-on-content-click="false"
v-model="modal"
transition="scale-transition"
offset-y
full-width
:nudge-right="40"
max-width="290px"
min-width="290px">
<v-text-field
slot="activator"
label="Issue Date"
v-model="date"
append-icon="event"
readonly
>
</v-text-field>
<v-date-picker v-model="date" no-title scrollable actions>
<template scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
HTML:
`<div class="menu__activator">
<div data-v-386ef34c="" class="input-group input-group--dirty input-group--append-icon input-group--text-field">
<label>Issue Date</label>
<div class="input-group__input">
<input readonly="readonly" tabindex="0" aria-label="Issue Date" type="text">
<i aria-hidden="true" class="material-icons icon input-group__append-icon input-group__icon-cb">event</i>
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
</div>`
How it appears in browser:
I'd like to write e2e to assert some logic with the calendar date. Date is produced with moment to match current day. However I cannot figure out how to access that text value with xpath.
Xpath to get the element:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]')
How the element appears in developer console:
With the attribute I need at the very bottom:
Xpaths I've tried which result in empty array:
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]//#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly]/#value')
$x('//div[contains(#class, "input-group--text-field")]//input[#readonly][0]//#value')
Edit:
Managed to get the value in chrome console:
$x('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]')[0].value
But still struggling with Nightwatch
Any solutions with xpath or css are welcome! Thanks!
Had to import chai, but this finally worked:
.getValue('//div[contains(#class, "input-group--text-field")]//input[#aria-label="Issue Date"]', function(result) {
expect(result.value).to.equal('2017-10-17')
})