I've been trying for hours now to click a link with Selenium Webdriver in Java.
There are 6 links with different div IDs.
Here is the HTML code
<div id="aktion_tr1" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
http://www.e-necker.at<br>Credits: 0.32 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr2" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
http://midineroganadopromos.blogspot....<br>Credits: 0.16 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr3" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.haar-pigmentierung.com<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr4" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.tierreich-onlineshop.at<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr5" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.loluva.com<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr6" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.main-steam.de/<br>Credits: 0.32 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div style="clear:both"></div>
How i can navigate to the links?
thanks for your time
// get parrent div
WebElement divAktion_tr1 = driver.findElement(By.id("aktion_tr1"));
// get all childs a tags
ArrayList<WebElement> aHrefs = divAktion_tr1.findElements(By.tagname("a"));
// declare desired link id or any part of the href or whole href
String linkId1 = "1986070";
// loop child a tags
for (WebElement aHref: aHrefs) {
// get href attribute
String href = aHref.getAttribute("href");
// condition to pinpoint desired link, maybe need use CharSequence instead of String to use Objects.containts(Object)
if (href.contains(linkId1) {
// click
aHref.click();
}
}
Not sure about what exactly you're trying to achieve but, in general, you're just instantiate WebElement object with a css/xpath locator that leads to the link you need and call click() on it
WebDriver link1 = driver.findElement(By.css("#aktion_tr6 .zeile2 a")); // CSS
WebDriver link2 = driver.findElement(By.xpath("//div[#id='aktion_tr4']/div[#class="zeile2"]/a")); // XPATH
link1.click();
link2.click();
Related
My materialize DatePicker works only for the FirstTime
I am using Materialize for devloping a site which invloves date-picker. The date-picker works only for the first load of a page. When we select the date for second-time it comes and goes.
How to solve this type of problem? Any help is greately Appriciated. Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
h5{
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .5px;
color: #98AAB8;
margin-right: -.5px; font-weight:700; font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
input {
line-height: normal;
padding: 10px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
font-family: quick-sand, sans-serif;
font-size: 13px;
}
.input_field1{
line-height: normal;
padding: 12px 9px 12px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
font-family: quick-sand, sans-serif;
font-size: 13px;
margin-bottom: 20px;
}
.text_area{
padding:69px 280px;
}
.input_date{
line-height: normal;
padding: 13px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
margin-bottom: 20px;
}
.form_header {
font-family: quick-sand, sans-serif;
font-size: 13px;
/* float: left; */
text-align: left;
margin-bottom: 10px;
font-weight: 500;
color:#666;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
position: absolute;
margin-top: 13px;
margin-left: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.posterImg{
text-align: center;
margin: 0px 0;
width: 164px;
height: 159px;
padding: 55px 2px 11px 5px;
border: 1px solid #2F3B59;
border-radius: 7px;
font-size: 12px;
color: #98AAB8;
margin-bottom: 20px;
}
.breadcrumb:before {
content: '\E5CC';
color: rgba(255,255,255,0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #566985;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
/* color: #ffab40; */
color: #566985;}
textarea.materialize-textarea {
overflow-y: hidden;
border: none;
border: 1px solid #2F3B59;
padding: .8rem 0 1.6rem 0;
resize: none;
min-height: 3rem;
border-radius: 7px;
background: #f9f9f9;
}
input[type=text]:not(.browser-default){
background-color: transparent;
border: none;
/* border-bottom: 1px solid #9e9e9e; */
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<!-- Fav icon -->
</head>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper" style="background: #2F3B59;">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div style="height:30px; background:white;"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m10">
<nav style="border: 1px solid #eee;background: #F8FBFE; border-radius:5px;">
<div class="nav-wrapper">
<div class="col s12">
Add Listing
Add conference
Profile
Home
</div>
</div>
</nav>
</div>
<div class="col s12 m1"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m3">
<div class="card sticky-action" style="border: 1px solid #eee;">
<div class="card-action">
<div class="card" style="background: #F8FBFE; border-radius:5px;border: 1px solid #eee;">
<div class="card-action">
Edit Profile
</div>
<div class="card-action">
Add event
</div>
<div class="card-action">
Added Events
</div>
<div class="card-action">
<a class="waves-effect waves-light btn-small" style="background: #4DB7FE; color: #566985;">Save</a>
</div>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m7">
<h5 style="text-align:center;font-family: quick-sand, sans-serif;">Conference Details</h5>
<div class="row">
<div class="col s12">
<div class="form_header">Conference Link</div>
<i class="fa fa-link"></i><input type="" class="input_field1" placeholder="Conference Link" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Name</div>
<i class="fa fa-address-book"></i><input type="" class="input_field1" placeholder="Conference Name" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference URL</div>
<i class="fa fa-link"></i> <input type="" class="input_field1" placeholder="Conference URL">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Registration URL</div>
<i class="fa fa-ticket"></i> <input type="" class="input_field1" placeholder="Conference Registration URL">
</div>
<div class="col s12 m6">
<div class="form_header">Conference Start Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker1" placeholder="yyy-mm-dd" onclick="jithendra()">
</div>
<div class="col s12 m6">
<div class="form_header">Conference End Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker2" placeholder="yyy-mm-dd" onclick="jithendra1()">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter Handle</div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" placeholder="City">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m12">
<div class="form_header" style="margin-top:20px;">City</div>
<i class="fa fa-map-marker"></i> <input type="" class="input_field1" type="text" placeholder="City">
</div>
<div class="col s12 m12">
<div class="form_header">Venue</div>
<i class="fa fa-map-marker"></i><input type="" class="input_field1" type="text" placeholder="Venue">
</div>
<div class="col s12 m12">
<div class="form_header" style="width: 338px;">Keywords</div>
<input type="" class="input_field1" type="text" placeholder="Keywords">
</div>
<div class="col s12 m12">
<div class="form_header">Conference City</div>
<input type="file" class="input_field1" type="text" placeholder="Venue" style="opacity:0px;">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee;margin-bottom:20px;margin-top: 21px;"></div>
</div>
<div class="col s12 m12">
<div style="height:10px;"></div>
</div>
<div class="col s12 m12">
<a class="waves-effect waves-light btn" style="background: #2F3B59;border-radius:5px;">Submmit</a>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<!-- <div class="col s12 m4">
<div class="form_header" >Poster Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div>
<div class="col s12 m3"></div>
<div class="col s12 m4">
<div class="form_header" >Card Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div> -->
<!--
<div class="col s12 m12">
<hr>
</div>
<div class="col s12 m12">
<h5>My Socials</h5>
</div>
</div>
<div class="col s12 m12">
<div class="form_header">Facebook </div>
<i class="fa fa-facebook"></i><input type="" class="input_field1" type="text" placeholder="https://facebook.com/">
</div>
<div class="col s12 m12">
<div class="form_header">LinkedIn </div>
<i class="fa fa-linkedin"></i><input type="" class="input_field1" type="text" placeholder="Linkedin.com">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter </div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" type="text" placeholder="https://twitter.com/">
</div>
</div> -->
</div>
</div>
</div>
<footer class="page-footer" style="background: #2F3B59;">
<div class="container">
<div class="row">
<div class="col s12 m3">
<h5 class="white-text">KonfHub</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script>
function jithendra(){
$('.modal').modal();
$('#datepicker1').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
function jithendra1(){
$('#datepicker2').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
</script>
</body>
</html>
I changed a few things in your code. You were using both the versions of Materialize 1.0.0 and 0.100.2, no idea why you should use only one version and then I updated the jQuery methods as per the new version that is 1.0.0, you can check those on their website Picker - Materialize and Select - Materialize. You were using .input-date class but in order to use datepicker you've to use .datepicker class only, you can modify the CSS of .datepicker class. I added !important to the changes you've made to the .datepicker class, so you can have the modified CSS which you applied to .input-date. At last, you've given ids to individual datepickers, so you can either use the jQuery methods on ids or on class.
Codepen - Working Demo
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
Im trying to get a bootstrap column to span 2 rows. I have been been looking at How can I get a Bootstrap column to span multiple rows? and it doesnt seem to work in the context of my project.
Could someone tell me what I need to do in order to make the column on the right span 2 rows?
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
CSS
.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}
.index-b-right-3 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}
.index-b-right-3 a {
color: #CC9900;
}
I guess this is what you wanted to do?
Simple way i would explain it is you create the top most row, create the columns in the row, then in the other column, create another row which you then divide up into individual columns.
Hope it helps!
<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
<div class="col-md-4">
<img src="public/img/index/Hola_Sevila.png" style="width:180px">
<h6>Hola Sevilla!</h6>
<p>I recently had the pleaseure and the privilege of travelling to the ...</p>
<p>Read More</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
<img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
<h6>Translation helps children</h6>
<p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
...</p>
<p>Read More</p>
</div>
<div class="col-md-4 two_row_column">
<div class="index-b-right-1"></div>
<div class="index-b-right-1">
<h3>Videos</h3>
</div>
<div class="index-b-right-1">
<h3>Be a Friend</h3>
</div>
<div class="index-b-right-2">
<h4>You can show your appreciation and support future development by becoming a friend of the
Rosetta</h4>
</div>
<div class="index-b-right-3">
<h3>Donate</h3>
</div>
<div class="index-b-right-1"></div>
</div>
</div>
</div>
</div>
Results show up like this
http://puu.sh/hZrVY/cbfe561492.jpg
How can I make it so that they show up in rows of 3 with no offsetting.
Code:
#foreach ($posts as $post)
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#endforeach
CSS:
body {
background-image: url("http://www.ruschgaming.tv/img/bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.portfolio-item {
margin-bottom: 25px;
}
.container {
margin-top: 80px;
padding-top: 20px;
height: 100%;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 2px 2px 5px grey;
}
Missing the rows tags:
#foreach ($posts as $key => $post)
#if(($key==0) || is_int($key/3))
<div class="row">
#endif
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#if(is_int($key/3))
<div>
#endif
#endforeach
I need to select the element inside the popup in selenium webdriver.THis element inside the div call as ajax popup pleae help me?
<a class="modalCloseImg simplemodal-close" title="Close"></a>
<div class="simplemodal-wrap" tabindex="-1" style="height: 100%; outline: 0px none; width: 100%; overflow: auto;">
<div id="ajaxcart" class="ajaxcart simplemodal-data" style="">
<p class="popup-success-msg"></p>
<div class="popup-content"></div>
<div class="ajaxcart-buttons-container">
<a class="simplemodal-close btn-small-dark-grey"></a>
<a class="ajaxcart-btn btn-small-orange" href="http://www.xcite.com"></a>
</div>
</div>
</div>