I want to click the specific one map marker icon, which is highlighted inside the image. Inside image all map marker is showing with same tag. so i am not able to clicking the map marker icon.
Like my scenario is after clicking the map marker icon, one pop up is showing with the listing name. suppose my listing name is "xyz" so, i want to verify that the listing name "xyz" is present on the map or not?
so, my first step will be find the map marker icon which listing name is having "xyz".
HTML Code Snippet.
<div id="map_canvas" class="map_canvas" style="width: 100%; height: 500px; position: relative; overflow: hidden;">
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none; z-index: 0; cursor: pointer;" title="Formosa Centre">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 2; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none;"/>
<div style="position: absolute; left: 0px; top: 0px; z-index: 3; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none;"/>
<div style="position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%;">
<div style="width: 1px; height: 1px; z-index: 1000; position: absolute; left: 436px; top: 450px;"/>
Refer Image.
I have tried this code, but it is not working for me. i have used xpath along with div tag with using style attribute.
WebDriverWait wait = new WebDriverWait(driver, 120);
wait.until(ExpectedConditions.elementToBeClickable(driver.findElement(By.xpath("//div[#style='position: absolute; left: 0px; top: 0px; z-index: 3; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none;']"))));
driver.findElement(By.xpath("//div[#style='position: absolute; left: 0px; top: 0px; z-index: 3; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; -moz-user-select: none;']")).click();
String title = driver.findElement(By.xpath("//h6/a/span[contains(text(), 'SN Estates')]")).getText();
System.out.println(title);
You don't need to click marker icon to see detailed info about target place- you can use search field in left bottom corner of page to complete the same:
WebDriverWait wait = new WebDriverWait(driver, 15);
wait.until(ExpectedConditions.elementToBeClickable(By.id("search_string"))).sendKeys("SN Estates");
wait.until(ExpectedConditions.presenceOfElementLocated(By.className("ptitle")));
String title = driver.findElement(By.xpath("//a[#class='ptitle']/span")).getText();
System.out.println(title);
How can I remove the gap between the navigation and the header? ALso between the nav and the main content?
Navigation buttons i.e. ul are in their perfect place. but black navigation bar is causing me lots of unnecessary troubles! I am unable to fix it!
here is my html
<div id="header">
<div id="header-container">
Logo goes here!!
</div>
</div>
<div class="nav">
<div class="nav-container">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Browse</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="main-body">
<h1>Contant here!</h1>
</div>
here is my css code:
{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
body{
margin: 0 auto;
background: #cccccc;
}
#header{
background: #FF9900;
height: 160px;
width: 100%;
}
#header-container{
width: 960px;
height: 160px;
margin: 0px auto 0px auto;
}
.nav{
width: 100%;
height: 70px;
background: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
margin-top: 5px;
}
.nav .nav-container ul{
margin-top: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.nav .nav-container ul li{
display: inline-block;
padding: 0px;
border-radius: 10px;
margin-right: 20px;
margin-left: 7px;
background: #000000;
}
.nav .nav-container ul li a{
color: #FF9900;
text-decoration: none;
font-weight: bold;
font-size: 22px;
display: inline-block;
width:150px;
text-align: center;
height: 58px;
line-height: 250%;
}
.nav .nav-container ul li a:hover{
background:#FF9900;
color: white;
border-radius: 10px;
}
.main-body{
width: 960px;
background: white;
margin:auto;
margin-top: 0px;
}
Change margin-top: 5px; to margin-top: 0; in .nav .nav-container.
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
/* margin-top: 5px; becomes */ margin-top: 0;
}
Demo: http://jsfiddle.net/ue65t3gh/
The problem is when I make the browser window smaller, the menu breaks. How can I prevent this from happening (I am new to this!)? It would be helpful to point out errors in my code or what needs to be changed.
Here is my css code:
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
width: 140px;
font-family: Arial, Helvetica, sans-serif;
display: table-row-group;
text-align: left;
}
Here is my html code:
<ul id="drop-nav">
<li>Home</li>
<li>About
<ul>
<li>Methods</li>
<li>Strategies</li>
<li>Phoneme Images</li>
<li>Alphabet Images</li>
</ul>
</li>
<li>Reading By The Rules
<ul>
<li>Joomla nbsp;</li>
<li>Drupal </li>
<li>Phoneme Images </li>
</ul>
</li>
<li>Products</li>
<li>Contact</li>
</ul>
Without trying to change your existing CSS, a simple fix will be to assign a fixed width to your #drop-nav. On re-sizing the browser, your content will become scrollable.
Live demo on fiddle.
How do i add pop up to an anchor tag with background disabled in MVC 4 Jquery Mobile? I am new to the MVC 4 and JQuery
Put this content in your style sheet
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
and in the code use the following
Open Modal
<div id="openModal" class="modalDialog" data-theme="c">
<div>
X
<h2>Pop up</h2>
<p>Pop up content. You can add your controls here</p>
</div>
</div>
this logic worked for me. Hope it works for you also.
Ok...this is very weird.
Here is the code for all of my inputs:
#sign_in input#submit {
height: 56px;
background-color: #88b805;
font-weight: bold;
text-decoration: none;
padding: 5px 40px 5px 40px; /* top, right, bottom, left */
border: 0;
width: auto;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
-webkit-border-radius: 25px;
}
#sign_in input#submit:hover {
-moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
cursor: pointer;
}
input, textarea {
font-size:20px;
display: block;
width: 365px;
height: 40px;
background: #273243;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ffffff;
/* margin: 0 0 0 100px; top, right, bottom, left */
padding: 5px 5px 5px 15px; /* top, right, bottom, left */
border: 0px;
}
input:focus, textarea:focus {
background: #313131;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
My issue is with the submit button:
<div id="sign_in" align="center">
<form>
<input id="name" type="text" value="Email address" required class="clearField curved" /> <br />
<input id="password" type="text" value="Password" required class="clearField curved" /><br />
<input id="submit" type="submit" value="Log in" class="curved" align="center">
</form>
</div>
Even though I have the div set to align=center, everything is centered in Chrome except the login button.
Btw, when I check it in Firefox, and Safari on a Mac it looks ok. It is just Chrome in both Windows and Mac that the submit button looks like it is flush against the left margin.
Also, when I check the properties in developer tools in Chrome, I notice something strange:
input::-webkit-outer-spin-button {
-webkit-appearance: outer-spin-button;
-webkit-user-select: none;
display: inline-block;
margin-left: 2px;
}
I am not sure why the margin-left is set to 2px. I guess I could target that specific pseudo class to override it, haven't tried that yet, but was wondering if there is another way to do it without having to do that? That seems a bit 'hackish'.
Why is it doing this and how can I fix it? I want the button to be center aligned.
Edit: I targeted that specific Pseudo selector, and tried to set the margin and nothing happened. It didn't change the layout of the button, even setting margin-left to 150px. So not sure what's happening.
Remove align="center" from your div element.
#sign_in {
width:960px;
margin:0 auto;
}
#sign_in input#submit {
height: 56px;
background-color: #88b805;
font-weight: bold;
text-decoration: none;
padding: 5px 40px 5px 40px; /* top, right, bottom, left */
border: 0;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
-webkit-border-radius: 25px;
}
#sign_in input#submit:hover {
-moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
cursor: pointer;
}
input, textarea {
font-size:20px;
display: block;
width: 365px;
height: 40px;
background: #273243;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ffffff;
/* margin: 0 0 0 100px; top, right, bottom, left */
padding: 5px 5px 5px 15px; /* top, right, bottom, left */
border: 0px;
margin:0 auto;
}