I am creating an xpath but I am having whitespaces in the xpath output. I tried using normalize-space but it didn't work.
((//a[contains(#class,'product-name')])[3])[normalize-space()='Printed Dress']
<div class="product-container" itemscope itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container">
<a class="product_img_link" href="http://automationpractice.com/index.php?id_product=3&controller=product" title="Printed Dress" itemprop="url">
<img class="replace-2x img-responsive" src="http://automationpractice.com/img/p/8/8-home_default.jpg" alt="Printed Dress" title="Printed Dress" width="250" height="250" itemprop="image" />
</a>
<div class="quick-view-wrapper-mobile">
<a class="quick-view-mobile" href="http://automationpractice.com/index.php?id_product=3&controller=product" rel="http://automationpractice.com/index.php?id_product=3&controller=product">
<i class="icon-eye-open"></i>
</a>
</div>
<a class="quick-view" href="http://automationpractice.com/index.php?id_product=3&controller=product" rel="http://automationpractice.com/index.php?id_product=3&controller=product">
<span>Quick view</span>
</a>
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" class="price product-price">
$26.00 </span>
<meta itemprop="priceCurrency" content="USD" />
</div>
</div>
</div>
I wanted the output to be as only "Printed Dress" but i get the output as
Printed Dress
normalize-space is a xpath function all it will do is trim the white spaces while evaluating the xpath but not the output.
You have to trim the output using the language specific method. Eg: if you are using python you can use outPut.strip().
Related
i got this code from http://www.lightningdesignsystem.com/components/carousel/#About-Carousel. it was supposed to do the auto play function but it is not working, even the round buttons are also not working. am i missing something?
i also know about the LWC carousel, but i need to customize some of the things which was not possible on that, so was trying this one.
code
<template>
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style="transform:translateX(-0%)">
<div id="content-id-01" class="slds-carousel__panel" role="tabpanel" aria-hidden="false" aria-labelledby="indicator-id-01">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="0">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-01.jpg" alt="Visit App Exchange" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Visit App Exchange</h2>
<p>Extend Salesforce with the #1 business marketplace.</p>
</div>
</a>
</div>
<div id="content-id-02" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-02">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-02.jpg" alt="Click to Customize" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Click to Customize</h2>
<p>Use the Object Manager to add fields, build layouts, and more.</p>
</div>
</a>
</div>
<div id="content-id-03" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-03">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-03.jpg" alt="Download SalesforceA" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Download SalesforceA</h2>
<p>Get the mobile app that's just for Salesforce admins.</p>
</div>
</a>
</div>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-01" class="slds-carousel__indicator-action slds-is-active" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="content-id-01" title="Visit App Exchange tab">
<span class="slds-assistive-text">Visit App Exchange tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-02" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-02" title="Click to Customize tab">
<span class="slds-assistive-text">Click to Customize tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-03" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-03" title="Download SalesforceA tab">
<span class="slds-assistive-text">Download SalesforceA tab</span>
</a>
</li>
</ul>
</div>
</div>
</template>
Code is only for understanding purpose. This does not include javascript. You have to wire your code to JS with following aspects:
Write onclick function on anchored tag of "round button" as you call them in question.
This JS button should call a method which does following things :
mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
find which element is clicked and add "slds-is-active" in class attribute.
make area selected attribute to true for only the element clicked.
make tab index of actual panel should be 0 for tab to be shown. This can be matched by indicator Id. and for all others it should -1.
assign transform style dynamically using formula : -100*index
Here is sample:
<template>
<div style="">
<div class="slds-carousel" id="carousel-example-generic" data-ride="carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style={transformstyle}>
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<div id={dataIndex.contentid}
key={dataIndex.index}
class="slds-carousel__panel"
role="tabpanel"
aria-hidden={dataIndex.areahidden}
aria-labelledby={dataIndex.indicatorid}>
<div
class="slds-carousel__panel-action slds-text-link_reset"
tabindex={dataIndex.tabindex}>
<div >
<!-- Any LWC which you want to show in screen -->
</div>
</div>
</div>
</template>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<li data-target="#carousel-example-generic"
key={dataIndex.index}
data-slide-to={dataIndex.dataslideto}
class="slds-carousel__indicator"
role="presentation">
<div id={dataIndex.indicatorid}
class={dataIndex.liclass}
data-index={dataIndex.index}
data-ariacontrols={dataIndex.contentid}
role="tab"
aria-selected={dataIndex.areaselected}
aria-controls={dataIndex.contentid}
onclick={handleclick}
title="Visit App Exchange tab">
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
in JS have this function :
selectelement(index){
this.template.querySelectorAll(".slds-carousel__indicator-action").forEach(ele=>{
ele.classList.add('slds-is-active');
ele.classList.remove('slds-is-active');
});
this.template.querySelector(`[data-index="${index}"]`).classList.add('slds-is-active');
this.dataDisplay.forEach(ele=>{
ele.areaselected = false;
ele.tabindex = -1;
ele.areahidden = true;
if(ele.index === index){
ele.areaselected = true;
ele.tabindex = 0;
ele.areahidden = false;
}
});
this.transformstyle = `transform:translateX(-${
index * 100
}%);`
this.dataDisplay = [...this.dataDisplay];
}
I am working on a website that uses Zurbs foundation js, sorry but I am not a fan of this framework but I am stuck with it on this.
Question.
I have tried several times to either add in the orbit or on a containing div the class show-for-small-only but when I go to mobile view only the Arrow show, I have to refresh the page to see the orbit-container. I just used a normal orbit, here is a sample.
Is this typical of Orbits or am I missing something?
<div class="columns small-12 medium-10 text-center small-centered show-for-small-only">
<div class="orbit" role="region" aria-label="Test Orbit" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<div class="icon">
<img src="assets/img/people.png">
<p>
Human-safe<br />
Pet-safe
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/beaker.png">
<p>
Clean without chemicals
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/hearthand.png">
<p>
Leaves no toxic residue
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/earth.png">
<p>
Creates less waste
</p>
</div>
</li>
<li class="orbit-slide">
<div class="icon">
<img src="assets/img/gear.png">
<p>
Anti-bacterial self-cleaning
</p>
</div>
</li>
</ul>
</div>
</div>
I need to set a default image from my local file if profile pic is not set by user and how to set hover to it if the user moves the mouse close to the profile pic field to set the image.
My HTML :
<div class="col-lg-2 vheight1">
<h4>Profile Picture</h4>
<div class="fileinput fileinput-new" onclick='$("#my_profile_pic").click();'>
<div class="fileinput-preview thumbnail" data-provides="fileinput" data-trigger="fileinput" id="profile_pic">
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
</div>
<!-- <div class="hidden-sm hidden-md hidden-lg hidden-xs">
<span>
<span class="fileinput-new" ng-show="!hasFile()">Select image</span>
<span class="fileinput-new" ng-show="hasFile()">Change</span>
</span>
<a href="#" class="btn btn-danger fileinput-new glyphicon glyphicon-trash" data-dismiss="fileinput" ng-show="hasFile()" ng-click="removefile( json, file )" ></a>
</div> -->
</div>
</div>
<input type="file" class="hidden hidden-sm hidden-md hidden-lg hidden-xs" id='my_profile_pic' file-model="photo">
Can anyone please help me.
Replace:
<img ng-if="source" class="thumb" ng-src="{{source}}"/>
with:
<img class="thumb" ng-src="{{source ? source : 'pathtodefault.png'}}"/>
To complete Piyush's answer, you can also do:
<img class="thumb" ng-show="source" ng-src="{{source}}"/>
<img class="thumb" ng-show="!source" src="defaultSrc"/>
We have a content type called product which has a custom "input" button that allows you to "add to cart". So I have this:
<input type="submit" value="Buy Now $'.$content['field_price'][0]['#markup'].'" alt="Buy Now $'.$content['field_price'][0]['#markup'].'" />
The problem is that the price field is inside an input field, and therefore not displayed, so I would have to show the price some other way to include it within the product page.
The sample that I have shows the price on the page, but I don't want to show the price, because it's already shown in my input field. So this won't work:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$55.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />In stock
</div>
</div>
The only way I see this working is I do something sneaky like this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" style="displaY: none;">$55.00</span>
</div>
Would that be allowed or is that not going to solve my problem?
UPDATE
This works:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" style="displaY: none;">$55.00</span>
</div>
</div>
This doesn't:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" itemprop="55.00" />
<meta itemprop="priceCurrency" itemprop="USD" />
</div>
</div>
You should use the meta element.
In HTML5+Microdata (as well as in HTML+RDFa) the meta element may be used in the body element, exactly for this purpose. It’s the same idea as using the link element for the availability property (like in your example).
In Microdata, it could look like this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="55.00" />
<meta itemprop="priceCurrency" content="USD" />
</div>
<header id="top-header">
<div class="row-fluid">
<div id="school-info" class="pull-left">
<span id="school-name" class="lead">THPT Hùng Vương</span>
<small> Học kỳ I năm 2013-2014</small>
</div>
<div id="user-info" class="pull-right">
<a href="/app/truong_hoc" title="Sửa thông tin người sử dụng, đổi mật khẩu, đổi tên tài khoản.">
<i class="icon-user"></i>
<span class="hidden-phone">
<small class="hidden-phone hidden-tablet">(truong_hoc)</small>
</span>
</a>
<a id="logout" href="/logout/" title="Thoát ra, kết thúc phiên làm việc. ">
<i class="icon-signout"></i>
<small class="hidden-phone hidden-tablet">Đăng xuất</small>
</a>
</div>
</div>
</header>
Logout element has an icon and a text. When I use Click Element icon use
xpath: "Click Element xpath=//a[#id='logout']/i"
it works, but when I use Click Element text use
xpath: "Click Element xpath=//a[#id='logout']/small"
it doesn't work. Help!
(Sorry because that website doesn't support English and I don't have enough reputation to post images)