i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>
Related
I am trying to resize my map icon with scaledSize however the icon does not change, here is my code:
This works:
<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')">
But when I try to resize the icons, it does not work with scaledSize:
<div class="map-container">
<div style="margin: 0 auto; overflow:hidden; background: white;">
<div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
{!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}
<marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}"
on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>
<info-window id="{resource.id}" max-width="300" style="display: none;">
<div ng-non-bindable="">
<div id="siteNotice"></div>
<a href="" response-click="go">
<h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
</a>
<div id="bodyContent">
<p>
{resource.city}
</p>
</div>
</div>
</info-window>
{!end}
</ng-map>
</div>
</div>
</div>
I coded this layout but it's not responsive. The image doesn't seem to respond as it needs to. Can someone help me with this.
I wanted the code to respond to image where it is able to re-size itself as the browser size is adjusted. However i can only see that the images sort of align as I re-size the browser but it fails to change the sizes. I am not sure what is going on in here. Seems like i have all the code placed in but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
.responsive {
width: 100%;
height: auto;
}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Here you go:
https://codepen.io/panchroma/pen/EeaoyP
There were two simple syntax errors in your CSS, I added a closing curly bracket at line 20 and commented out line 28 in your HTML.
What was happening without these corrections is that there was no max-width for your images and they weren't scaling at narrow viewports.
Good luck!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
} /* added closing bracket */
.responsive {
width: 100%;
height: auto;
}
/* } commented out this bracket */
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
I am using Firefox 54 (64-bit) and my app is using AngularJS Material and AngularJS. I cannot figure out why after redrawing my webpage does not display correctly most of the time. It seems to be "torn". I added a button especially for redrawing with the following code:
var scanPageElt = document.getElementById("scanPage");
// Force page redraw (buggy with tearing/banding)
scanPageElt.style.display = 'none';
scanPageElt.offsetHeight;
scanPageElt.style.display = '';
console.log("Page redrawn!");
It updates the display and after 3-4 clicks, it manages to display the page correctly.
I have the main HTML file which includes the part that has the issue. Here is the part with the include:
<div class="row no-padding" ng-if="mainView === false"> <!-- Interactive View for docs/fingers/face scanning -->
<div class="col-lg-12">
<div class="row roundbox boxshadow" style="max-height:930px; min-height:930px;max-width:1890px; min-width:1890px;background-color:{{scanBackgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div ng-include="currScanPage"/></div>
</div>
</div>
And now here is the HTML file where the issue occurs:
<div class="row header">
<div class="col-lg-11">
<span class="title" style="float:left; margin-top:7px"><strong>{{currentWorkflowStepTitle}}</strong></span>
</div>
<div class="col-lg-1">
<div class="col-lg-12">
<md-button aria-label="minimize" class="header-button" ng-click="minimizeScanView()" style="float:right">
<img src="img/icons/minimize_window.svg" style="width:170%; height:170%; margin-top:-11px; margin-left:-7px">
</md-button>
</div>
</div>
</div>
<div class="row command">
<span style="margin-left: 40px">{{view_scan_current_message}}</span>
</div>
<div class="row" style="margin-left:10px; margin-top:10px">
<div class="col-lg-6 passportscanbox roundbox boxshadow small-margin" style="max-width:900px; min-width:900px;min-height:800px; max-height:800px">
<div class="row small-header">
<span class="medium-title"><strong>Left Hand Information</strong></span>
</div>
<div class="row">
<div class="col-lg-6">
<object id="svgIgloo_left" data="img/igloo_left.svg" style="width: 250%; height: 250%; margin-left: -20px"></object>
</div>
<div class="col-lg-6 flex-container">
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><strong>Index Finger</strong></span>
</div>
<div>
<img ng-if="fingerprintScan[1] !=''" data-ng-src="{{fingerprintScan[1]}}" style="width: 100%; height: 100%; margin: auto">
<img ng-if="fingerprintScan[1] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto">
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><strong>Middle Finger</strong></span>
</div>
<div>
<img ng-if="fingerprintScan[2] !=''" data-ng-src="{{fingerprintScan[2]}}" style="width: 100%; height: 100%; margin: auto">
<img ng-if="fingerprintScan[2] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto">
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Ring Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[3] !=''" data-ng-src="{{fingerprintScan[3]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[3] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Little Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[4] !=''" data-ng-src="{{fingerprintScan[4]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[4] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Thumb Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[0] !=''" data-ng-src="{{fingerprintScan[0]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[0] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 passportscanbox roundbox boxshadow small-margin" style="max-width:900px; min-width:900px;min-height:800px; max-height:800px">
<div class="row small-header">
<span class="medium-title"><b>Right Hand Information</b></span>
</div>
<div class="row">
<div class="col-lg-6 flex-container">
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Index Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[6] !=''" data-ng-src="{{fingerprintScan[6]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[6] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Middle Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[7] !=''" data-ng-src="{{fingerprintScan[7]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[7] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Ring Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[8] !=''" data-ng-src="{{fingerprintScan[8]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[8] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Little Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[9] !=''" data-ng-src="{{fingerprintScan[9]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[9] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
<div class="row" style="margin: auto">
<div class="col-lg-12 boxshadow small-margin" style="height:143px; max-height:143px; min-height:143px; width:130px; max-width:130px;min-width:130px;background-color:{{backgroundColor}};overflow:hidden; border: solid 3px black;margin-right: 15px">
<div class="row small-header">
<span class="small-title"><b>Thumb Finger</b></span>
</div>
<div>
<img ng-if="fingerprintScan[5] !=''" data-ng-src="{{fingerprintScan[5]}}" style="width: 100%; height: 100%; margin: auto" />
<img ng-if="fingerprintScan[5] ===''" data-ng-src="{{mrz_imageNotAvailable}}" style="width: 100%; height: 100%; margin: auto" />
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<object id="svgIgloo_right" data="img/igloo_right.svg" style="width: 250%; height: 250%; margin-left: -600px"></object>
</div>
</div>
</div>
</div>
I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 500px; top: 156px; left: 706px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-comment-dialog">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="comment-dialog" class="ui-dialog-content ui-widget-content" style="background-color: white; width: auto; min-height: 0px; height: 208.267px;">
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Edit Approved Data</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
i want to locate the "Edit Approved Data" button but gets an error always saying element not found.
//div[#class='ui-dialog-buttonset']/button
//div[#class='ui-dialog-buttonset']/button[1]
//div[#class='ui-dialog-buttonset']/button/span
//span[text()='Edit Approved Data']
//\*[text()='Edit Approved Data']
The way to use:
driver.findElement(By.xpath(xpath)).click();
Every presented xpath should work