Does anybody know how to put images inside a paginator ?
https://www.primefaces.org/primeng/v8.2.9-lts/#/paginator
**Instead of this** :
<div class="sticky-header">
<div class="p-grid p-align-center" style="color: #007ad9;">
<!--<div class="p-col-2 p-hidden-sm-down">
Help Step
</div>-->
<p-dataView [value]="helps" [paginator]="true" [rows]="1">
<ng-template let-help pTemplate="listItem">
<div>
{{help.Title}}
</div>
</ng-template>
</p-dataView>
</div>
<div class="p-grid p-align-center" class="p-col-12" style="color: #007ad9;">
**<img src="/assets/images/Language.jpg" alt="Trash Button">**
</div>
<hr />
</div>
Use this :
<div class="sticky-header">
<div class="p-grid p-align-center" style="color: #007ad9;">
<!--<div class="p-col-2 p-hidden-sm-down">
Help Step
</div>-->
<p-dataView [value]="helps" [paginator]="true" [rows]="1">
<ng-template let-help pTemplate="listItem">
<div>
{{help.Title}}
**<img src="/assets/images/Language.jpg" alt="Trash Button">**
</div>
</ng-template>
</p-dataView>
</div>
<div class="p-grid p-align-center" class="p-col-12" style="color: #007ad9;">
</div>
<hr />
</div>
Related
I'm facing a problem with a stale element under the shadow DOM, scenario below:
hover to the video and the dock is shown and vice versa
HTML Dom changes from not hovering to hovering and vice versa:
The below html is for not hovering.
<div class="base overlay hidden" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
After hovered, the change is:
<div class="base overlay" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
The code to get the Element after mouse hover as below:
public static WebElement getElementFromShadow(String jsPath) {
WebElement element = null
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor jse = ((driver) as JavascriptExecutor)
int attempts = 0;
while (attempts < 5) {
try {
element = ((jse.executeScript('return ' + jsPath)) as WebElement)
if (element != null) {
break;
}
else {
WebDriverWait wait = new WebDriverWait(driver, 10, 100);
element = wait.until(ExpectedConditions.elementToBeClickable(((jse.executeScript('return ' + jsPath)) as WebElement)))
}
} catch (Exception e) {
e.printStackTrace()
}
attempts++
Thread.sleep(2000)
}
return element
}
but when run it, I got org.openqa.selenium.StaleElementReferenceException: stale element reference: stale element not found
(Session info: chrome=91.0.4472.124)
PS: the above code works fine with the normal shadow element(No DOM is changed).
Could anyone know any idea/solution to solve the issue, thank you in advance!
how to align them in a row with equal height.
<div id="about-page-contain">
<div class="">
<div class="row equal">
<div class="wwd">
<div class="col-md-12">
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/plots">
<img src="/public/uploadfiles/images/be71f72e-b2e6-4dab-8dd4-8bc4d48365b8.jpg" alt="PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="/public/uploadfiles/images/ff74dcc3-71b4-4d35-b53b-77c6c36a0947.jpg" alt="FLATS" style="">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/farm-land">
<img src="/public/uploadfiles/images/06fdde52-b169-45eb-a96a-ec1dd07f15e5.jpg" alt="FARM LAND" style="">
<div class="caption" style="text-align:center;">
<p>FARM LAND</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-sites">
<img src="/public/uploadfiles/images/45d18935-9220-41ed-8f58-4aa3a16be8a8.jpg" alt="DEVELOPMENT SITES" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT SITES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-lands-for-plots">
<img src="/public/uploadfiles/images/d85c0a59-2d35-4f24-830b-8cfe606f8caf.png" alt="DEVELOPMENT LANDS FOR PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT LANDS FOR PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-houses">
<img src="/public/uploadfiles/images/5d265aad-31ef-4285-94a3-3aaeb0111e7a.jpg" alt="INDEPENDENT HOUSES" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT HOUSES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/outrate-lands-for-appt-&-plots">
<img src="/public/uploadfiles/images/8d3cfcec-5415-422c-8426-665271216009.jpg" alt="OUTRATE LANDS FOR APPT & PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>OUTRATE LANDS FOR APPT & PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/commercial-properties">
<img src="/public/uploadfiles/images/707cc088-4383-4423-8172-2fb2d9efa46d.jpg" alt="COMMERCIAL PROPERTIES" style="">
<div class="caption" style="text-align:center;">
<p>COMMERCIAL PROPERTIES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-villas-in-prime-locations">
<img src="/public/uploadfiles/images/c2a9b09c-94bd-43ee-92ae-db4c587dd8eb.jpg" alt="INDEPENDENT VILLAS IN PRIME LOCATIONS" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT VILLAS IN PRIME LOCATIONS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/construction-contract">
<img src="/public/uploadfiles/images/5f253c56-7f4d-4e61-9359-f5b2f7748443.jpg" alt="CONSTRUCTION CONTRACT" style="">
<div class="caption" style="text-align:center;">
<p>CONSTRUCTION CONTRACT</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There are a few issues here:
You have a class of wwd that we cannot see. Is that applying some styles of some sort?
Each image has a blank style="" class. Why is that there?
If I remove the link to the bootstrap styles I do not see any difference in applied styles.
the image sizes of your images can affect the layout and there are no actual links to the image so it makes it difficult to reproduce. Include the full links in your example to make it easier to reproduce.
I created a codepen with a fake image but I don't see the issue you are seeing.
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt="DEVELOPMENT SITES" style="" width="100px">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
How about this example?
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
</div>
I am trying to modify the checkout page in our store, this question may be a little incomprehensive for the masters of the BigCommerce league, I apologize for this upfront. Also, similar questions to this question have been asked before but was never answered.
BigCommerce single checkout page (express checkout & optimized single page checkout) comes in multiple collapsed steps, I am trying to un-collapse the containers and make it look like a true single page checkout in three columns instead of steps being underneath each-other.
I know bigcommerce partners are offering similar solutions, I'm trying to find out which panels to modify. I would sincerely appreciate if someone can put a light on which files to modify in order to achieve the goal.
I can provide access to the staging store if required.
This is the default checkout_express.html file.
%%Panel.HTMLHead%%
<body>
<script type="text/javascript" src="%%GLOBAL_CdnAppPath%%/javascript/express.checkout.js?%%GLOBAL_JSCacheToken%%"></script>
%%Panel.DrawerMenu%%
<div class="page">
%%Panel.Header%%
<div class="main">
<div class="inner">
%%Panel.WrapperBanner%%
<div class="Content Widest" id="LayoutColumn1">
<!-- <h1 class="TitleHeading mbm">%%LNG_SecureCheckout%%</h1> -->
<h1 class="TitleHeading mbm">Secure Checkout</h1>
<div class="fullwidth">
<div class="Block ExpressCheckout">
<script type="text/javascript" src="%%GLOBAL_TPL_PATH%%/js/formfield.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript">
lang.LoginEnterValidEmail = "%%LNG_LoginEnterValidEmail%%";
lang.LoginEnterPassword = "%%LNG_LoginEnterPassword%%";
lang.AccountEnterPassword = "%%LNG_AccountEnterPassword%%";
lang.AccountPasswordsDontMatch = "%%LNG_AccountPasswordsDontMatch%%";
lang.AccountEnterFirstName = "%%LNG_AccountEnterFirstName%%";
lang.AccountEnterLastName = "%%LNG_AccountEnterLastName%%";
lang.EnterShippingFirstName = '%%LNG_EnterShippingFirstName%%';
lang.EnterShippingLastName = '%%LNG_EnterShippingLastName%%';
lang.EnterShippingAddress = "%%LNG_EnterShippingAddress%%";
lang.EnterShippingCity = "%%LNG_EnterShippingCity%%";
lang.ChooseShippingCountry = "%%LNG_ChooseShippingCountry%%";
lang.ChooseShippingState = "%%LNG_ChooseShippingState%%";
lang.EnterShippingZip = "%%LNG_EnterShippingZip%%";
lang.ExpressCheckoutStepBillingAddress = "%%LNG_ExpressCheckoutStepBillingAddress%%";
lang.ExpressCheckoutStepBillingAccountDetails = "Working?";
// lang.ExpressCheckoutStepBillingAccountDetails = "%%LNG_ExpressCheckoutStepBillingAccountDetails%%";
lang.ExpressCheckoutLoadError = "%%LNG_ExpressCheckoutLoadError%%";
lang.ExpressCheckoutCheckingOutAsGuest = "%%LNG_ExpressCheckoutCheckingOutAsGuest%%";
lang.ExpressCheckoutCreatingAnAccount = "%%LNG_ExpressCheckoutCreatingAnAccount%%";
lang.ExpressCheckoutChooseBilling = "%%LNG_ExpressCheckoutChooseBilling%%";
lang.ExpressCheckoutChooseShipping = "%%LNG_ExpressCheckoutChooseShipping%%";
lang.ExpressCheckoutChooseShipper = "%%LNG_ExpressCheckoutChooseShipper%%";
lang.ExpressCheckoutFor = "%%LNG_ExpressCheckoutFor%%";
lang.ExpressCheckoutLoading = "%%LNG_ExpressCheckoutLoading%%";
lang.ShippingMethodCombined = "%%LNG_ShippingMethodCombined%%";
lang.EnterShippingPhone = "%%LNG_EnterShippingPhone%%"
lang.EnterCouponCode = "%%LNG_EnterCouponCode%%";
lang.BillAndShipToAddress = "%%LNG_BillAndShipToAddress%%";
lang.BillToThisAddress = "%%LNG_BillToThisAddress%%";
lang.ShipToThisAddress = "%%LNG_ShipToThisAddress%%";
lang.CheckingOutAs = "%%LNG_CheckingOutAs%%";
var CustomCheckoutFormNewAccount = %%GLOBAL_CustomCheckoutFormNewAccount%%;
var CustomCheckoutFormBillingAddress = %%GLOBAL_CustomCheckoutFormBillingAddress%%;
var CustomCheckoutFormShippingAddress = %%GLOBAL_CustomCheckoutFormShippingAddress%%;
$(document).ready(function() {
ExpressCheckout.signedIn = %%GLOBAL_ExpressCheckoutSignedIn%%;
ExpressCheckout.digitalOrder = %%GLOBAL_ExpressCheckoutDigitalOrder%%;
ExpressCheckout.init();
%%GLOBAL_GoToStep%%
});
%%GLOBAL_FormFieldRequiredJS%%
</script>
%%Discount.FreeShippingEligibility%%
<div class="ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassAccountDetails%%" id="CheckoutStepAccountDetails" style="%%GLOBAL_ExpressCheckoutHideAccountDetails%%">
<p class="ErrorMessage" style="display: %%GLOBAL_HideCheckoutError%%">
%%GLOBAL_CheckoutErrorMsg%%
</p>
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('AccountDetails');" title="Modify"></a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepAccountDetails%%: %%LNG_ExpressCheckoutStepAccountDetails%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
<div class="CreateAccount">
<form action="#" method="post" onsubmit="ExpressCheckout.GuestCheckout(); return false;">
<div id="CheckoutGuestForm" style="%%GLOBAL_HideGuestCheckoutOptions%%">
<h4>%%LNG_NotAnExistingCustomer%%</h4>
<p>%%LNG_CheckoutGuestIntro%%</p>
<div class="" style="line-height: 2;">
<dl class="mbm">
<dd><label><input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAddress%%');" /> %%LNG_CheckoutAsAGuest%%</label></dd>
<dd><label><input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAccountDetails%%');" /> %%LNG_RegisterAnAccount%%</label></dd>
</dl>
<div class="Submit">
<input type="submit" id="CreateAccountButton" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</div>
</div>
</div>
<div style="%%GLOBAL_HideRegisteredCheckoutOptions%%">
<h4>%%LNG_NotAnExistingCustomer%%</h4>
<p>%%LNG_CreateAccountIntroTitle%%</p>
<div>
<ul style="margin-left: 0; line-height: 1.4; padding-left: 0;">
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro1%%</li>
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro2%%</li>
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro3%%</li>
</ul>
</div>
<p class="PL40 Submit">
<input type="submit" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</p>
</div>
</form>
</div>
<div class="AccountLogin">
<!-- <h4>%%LNG_AlreadyHaveAnAccount%%</h4> -->
<h4> What? </h4>
<p id="LoginIntro">%%LNG_AlreadyHaveAnAccountIntro%%</p>
<form action="#" id="LoginForm" method="post" onsubmit="ExpressCheckout.Login(); return false;">
<div class="FormContainer HorizontalFormContainer">
<p style="display: none" class="ErrorMessage" id="CheckoutLoginError">
%%GLOBAL_LoginMessage%%
</p>
<dl>
<dt>%%LNG_EmailAddress%%:</dt>
<dd><input type="text" class="Textbox Field200 InitialFocus" name="login_email" id="login_email" /></dd>
<dt>%%LNG_Password%%:</dt>
<dd><input type="password" autocomplete="off" class="Textbox Field200" name="login_pass" id="login_pass" /></dd>
<dt> </dt>
<dd>
<input id="LoginButton" type="submit" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</dd>
<dt></dt>
<dd>%%LNG_ForgotYourPassword%%</dd>
</dl>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassBillingAddress%%" id="CheckoutStepBillingAddress">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('BillingAddress');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepBillingAddress%%:
<span id="BillingDetailsLabel">%%LNG_ExpressCheckoutStepBillingAddress%%</span>
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
%%SNIPPET_BillingAddressStepContents%%
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassShippingAddress%%" id="CheckoutStepShippingAddress" style="%%GLOBAL_ExpressCheckoutHideShippingAddress%%">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('ShippingAddress');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepShippingAddress%%: %%LNG_ExpressCheckoutStepShippingAddress%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
%%SNIPPET_ShippingAddressStepContents%%
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassShippingProvider%%" id="CheckoutStepShippingProvider" style="%%GLOBAL_ExpressCheckoutHideShippingProviders%%">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('ShippingProvider');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepShippingProvider%%: %%LNG_ExpressCheckoutStepShippingMethod%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassConfirmation%%" id="CheckoutStepConfirmation">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('Confirmation');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepConfirmation%%: %%LNG_ExpressCheckoutStepOrderConfirmation%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassPaymentDetails%%" id="CheckoutStepPaymentDetails" style="%%GLOBAL_ExpressCheckoutHidePaymentDetails%%">
<div class="ExpressCheckoutTitle">
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepPaymentDetails%%: %%LNG_ExpressCheckoutStepPaymentDetails%%
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
%%Panel.Footer%%
</div>
<script type="text/javascript">
$(document).ready(function() {
// live change to watch for newly created dom elements
$('#FormField_11, #FormField_21').live('change',function(){
$.uniform.restore('select.JSHidden');
});
});
$(document).ajaxComplete(function(event,request, settings) {
$('select').not('.UniApplied').uniform();
$('input[type=checkbox], input[type=radio]').not('.UniApplied').uniform();
});
$(window).load(function() {
$('select').not('.UniApplied').uniform();
});
</script>
</body>
</html>
Current Checkout Page:
Desired Checkout Page:
I want to click on all View Contact tabs in webpage,there are 10 View Contact tabs in webpage. each tabs having the same html code
Please see the image of webpage.
https://i.stack.imgur.com/vTocP.jpg
my html code:-
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
The HTML is :
<div id="226235653" class="lmsSearchTpl1">
<div class="lmsSearchTplDetail">
<div class="lmsTplQualify">
<span class="hasEllipse">
<i class="lmsIcons requirement-verified-tuple"></i>
<div id="expelipse" class="infoTip f12 ital tool_tip6" style="width: 200px; top: 40px; left: -15px; display: none;"><em class="upPin"></em><em class="text">Verified: Lead’s information has been verified by our system.</em></div>
</span>
<!-- Classes of such icons : mobile-verified-tuple, mobile-exist-tuple, requirement-verified-tuple -->
</div>
<div class="clearAfter">
<div class="bulkSmsTupleCheckboxDiv lf" style="width: 4%;display: none;">
<input type="checkbox" class="bulkSmsTupleCheckbox" id="tuplecheckbox_226235653" value="226235653_27395571" onclick="leadSrch.listUnlistForSms(this)">
</div>
<div class="lf lmsIndName">
Arjun Singh </div>
<div class="rf lmsTplDate">
<span>Received : </span>
<span class="sb" style="color: #666;">10 Dec 2017</span>
</div>
</div>
<div class="clearAfter rel">
<div class="lf lmsTypeAndAddress f13">
<div>
<span class="sb"><span>Residential Apartment</span></span>
<span>for</span>
<span class="sb">Rent</span>
</div>
<div>
<span>City :</span>
<span class="sb"><span>Kolkata South</span></span>
<span> | </span>
<span>Locality : </span>
<span class="sb"><span>Tollygunge</span></span>
</div>
</div>
<div class="rf">
<i></i>
</div>
</div>
<div class="clr" style="height: 10px;"></div>
<div class="clearAfter tabularFacts">
<div>
<div>Min Budget</div>
<div>5,000 </div>
</div>
<div>
<div>Bedrooms</div>
<div>2 BHK</div>
</div>
<div>
<div>Car Parking</div>
<div>----</div>
</div>
<div>
<div>Furnishing</div>
<div><span>Unfurnished</span></div>
</div>
<div>
<div>Tenant Type</div>
<div>----</div>
</div>
<div>
<div>Projects</div>
<div>----</div>
</div>
<div>
<div>Preferred Call Time</div>
<div>Any Time</div>
</div>
<div>
<div>Site Visit </div>
<div>----</div>
</div>
</div>
<div class="clearAfter tabularOtherFacts mt20">
<div>
<span>Requirements : </span>
<span>----</span>
</div>
</div>
</div>
<div class="lmsViewMoreLine clearAfter">
<div class="lf" style="padding: 0px 15px 5px 15px;">
<a id="vmr_226235653" href="javascript:void(0);" class="vmr inlineMiddleChild lmsViewMore">
<span>
View more requirements from this buyer
</span>
<i class="lmsIcons lmsBlueArrow ml5"></i>
</a>
<div class="clr" style="height: 10px;"></div>
<div id="vmrWrap_226235653" class="otherAssociateLeads" style="display:none;">
<div class="clr pdt8"></div>
</div>
</div>
<div class="rf lmsSearchControls">
<div class="lmsCredits">
<span class=" numCredits">1.00</span>
<span>Credit(s)</span>
</div>
<div class="lmsLookout">
<i class="lmsEye lmsIcons"></i>
<span id="viewTime">0 Time(s)</span>
</div>
<div>
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
</div>
</div>
<div class="lmsTplConfirm clr confirmBox" style="background-color: rgba(134, 134, 134, 0.05);display: none;">
<div class="lmsTplConfirmQues">
<div class="f13 grey">
You cannot view this lead's contact details.
</div>
</div>
<div class="lmsTplConfirmAns clearAfter" style="display: none">
<div class=" clearfix" style="display:block">
<div class="clr f14 lf grey"> Some error has occurred. Please refresh your search and try again. </div>
</div>
</div>
</div>
</div>
</div>
To click the View Contact button for Arjun Singh you can use the following xpath :
"//div[#class='lf lmsIndName']//following::input[#class='boxOpener btn blue b']"
Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only one div while page is loading, but without v-cloak?
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
This might be happening because of other errors in your code, like:
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.
See modified code:
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
<img :src="home_asset('img/very_big_user_icon.png')" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>