I'm trying to duplicate the effect I see in the Bootstrap docs and elsewhere:
When you hover over an h1/h2/h3 etc, a glyph appears that enables you to copy/paste a url that includes a fragment identifier eg http://foo.com/woof.html#page_fragment
Picture:
The "chain" icon only shows on the left on hover
Question: is this affect available from within the Bootstrap library or elsewhere?
And what is the name of this type of UX?
Like you noticed bootstrap has no native way to do that : however, with little css and html it will work perfectly :
Working fiddle : https://jsfiddle.net/5of43a4r/
CSS :
h1:hover a.anchorjs-link {
display: block !important;
}
HTML :
<h1>
<a class="anchorjs-link" href="#page_fragment" style="position: absolute; margin-left: -1em; padding-right: 0.5em;display: none">
<span class="glyphicon glyphicon-link" aria-hidden="true"></span> </a>
H1 TEXT
</h1>
Starting with the "anchorJS" clue from Sébastien's answer, I found Bootstrap Anchor, "The missing Bootstrap plugin for anchor support."
Related
Can someone give a better xpath of this div element, or help explain why I cannot seem to select the desired div?
This XPath does not work:
//div[starts-with(normalize-space(.),'Welcome to the Shipt Shopper') and #class='text']
Even though it gets highlighted in chrome developer tool, NoSuchElementException is thrown.
This is the case with all elements on the page
A snippet of the HTML from the page with the content that I am trying to target:
<div class="content-wrapper">
<div class="content" style="padding-top: 116px;">
<div class="media">
<div class="attachment" data-attachment="{"image":"https:\/\/images.typeform.com\/images\/29rsVwT3VF\/image\/default#.png","width":360,"height":137,"video_source":"","video_id":""}" style="width: 360px; height: 137px;">
<img src="https://images.typeform.com/images/29rsVwT3VF/image/default#.png" data-original="https://images.typeform.com/images/29rsVwT3VF/image/default#.png" style="width: 360px; height: 137px; display: inline;">
</div>
</div>
<div class="text" style="padding-top: 30px; margin-left: 0px;">
Welcome to the Shipt Shopper application! <br><br>Ready to get started?
</div>
<div class="button-wrapper" style="margin-top: 30px;">
<div class="button general full enabled hover-effect" style="">Begin</div>
<div class="button-text">press <strong>ENTER</strong></div>
</div>
</div>
</div>
The content that you are targeting is inside of an <iframe>.
I'm not familiar with how to configure Selenium, but it looks as if you may need to switch to that frame. Since it does not have an #id you may need to select by position:
driver.switchTo().frame(0)
and then execute the XPath.
When you are done, jump back to the containing HTML page:
driver.switchTo().defaultContent();
As per the HTML you have shared the xpath which you have used is a valid one and is correct. But NoSuchElementException will be thrown when you will try to interact with it through Selenium.
To interact with the element through Selenium you can use the following xpath :
//div[#class='content-wrapper']/div[#class='content']//div[#class='text' and contains(normalize-space(), 'Welcome to the Shipt Shopper application')]
But looking at the HTML it seems your have to induce WebDriverWait for the element to be visible as follows :
WebElement welcomeShiptShopper = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='content-wrapper']/div[#class='content']//div[#class='text' and contains(normalize-space(), 'Welcome to the Shipt Shopper application')]")));
The webpage doesn't opens at my end. As other's have indicated, the WebElement might be within <iframe> tag, in that case you have to switch to the appropiate iframe first using either of the following methods first :
Switch through Frame Name
driver.switchTo().frame("frame_name");
Switch through Frame ID
driver.switchTo().frame("frame_id");
Switch through Frame Index
driver.switchTo().frame(1);
Once you switch to the appropiate frame, now you can lookout for the WebElement with the suggested xpaths mentioned above.
this is my html structure.
<h2>The heading text</h2>.
No I need to give background color to the text only. and another background for the space apart from text.
Can i achieve this using pure css and not adding any extra element inside it. i need the output like this
You can do this:
<h2> black text <span style="background-color: #333; color: #ccc; "> grey text with dark background </span> another black text</h2>
You can style a span within a heading tag or paragraph tag
You can try this
<h2>My text <span style="background-color: #333; ">your text</span> another text </h2>
This will give that particular text the desired style including background color
you can do like this
<h2><span style='color:green'>The</span> <span style='color:blue'>heading</span>
<span style='color:red'>text</span></h2>.
I am using selenium FirefoxDriver to automate a test case (I am new at this)
I need a way to locate a Button (which I think is implemented as a div/span)
This xpath locator works when I try that in Selenium IDE //span[contains(text(), 'Login')]
Also I can use this CSS locator using the span tag and the classname css=span.x-btn-button
What I need is a way to use CSS locator with tag + class name + inner html text. (This will help me in handelling some of the other UI element in my application)
HTML is as below
<div id="toolbar-1035" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="right: auto; left: 0px; top: 141px; width: 223px;">
<div role="presentation" class="x-box-inner " id="toolbar-1035-innerCt" style="width: 217px; height: 22px;">
<div role="presentation" class="x-box-target" id="toolbar-1035-targetEl" style="width: 217px;">
<a id="button-1036" unselectable="on" hidefocus="on" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="right: auto; top: 0px; margin: 0px; left: 0px; width: 75px;" tabindex="0">
<span unselectable="on" class="x-btn-wrap" role="presentation" id="button-1036-btnWrap">
<span role="presentation" class="x-btn-button" id="button-1036-btnEl" style="background-color: transparent;">
<span unselectable="on" class="x-btn-inner x-btn-inner-center" id="button-1036-btnInnerEl" style="background-color: transparent;">Login</span>
<span style="" unselectable="on" class="x-btn-icon-el " id="button-1036-btnIconEl" role="presentation"></span>
</span>
</span>
</a>
</div>
</div>
</div>
This post has some real good methods to use xpath/css for element identification!
Is it possible to get next sibling using cssContainingText in Protractor
Function cssContainingText is however specific to Protractor.
#Css
findElement(By.cssSelector("span.x-btn-button:contains('Login'));
Keep in mind that this pseudo-class in CSS is not supported by every browser, specifically this is not supported in PhantomJS (There may be other browsers this does not work in, but that is the one I remember).
From Here, about 75% of the way down the page.
Edit:
After looking at this a little more, it seems the pseudo-selector of ":contains('')" is no longer within the CSS3 spec. Reference
If your web application uses JQuery, you can retrieve the element that way with a similar selector, otherwise, you will have to load JQuery into the page and then use it, but that really wouldn't be using CSS, but rather javascript selector functions within JQuery that use CSS syntax.
Conclusion:
Currently, what you are asking is (officially) not supported by CSS.
I am having below mentioned code in which i want to click on a <input> type.
<div class="gwt-TabBarItem" tabindex="0" role="tab">
<div class="gwt-TabBarItem" tabindex="0" role="tab">
<input type="text" tabindex="-1" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="gwt-Label" style="white-space: nowrap;">Explore by Research Topic </div>
</div>
I want to click on <input type="text" ....>
I have tried all possible things like Click, WebElement Click, Java Script Click,sendkeys etc.
But it is not working for me.
Do anyone have any solution for this.
Thanks in Advance
If you're using the Selenium IDE, then use click command, with target as "css=input[type=text]". Should work. Selenium allows use of CSS selectors for locating elements. Examples of possible CSS selectors you can use are given here:
http://www.w3schools.com/cssref/css_selectors.asp
Hope this helps.
Try with the following Xpath:
//div[contains(text(), 'Explore by Research Topic')]//preceding-sibling::input
It worked for me.
Regarding code you provided the input field is hidden so you can't click it.
If this is not a temporary state and you still need to interact with it, try to change element opacity to displayed first - via JavaScript / jQuery.
In Zurb Foundation's Orbit Content Slider, how can I remove the little bullets/circles at the top that represent how many slides you have (and are also clickable)? I want them gone.
There is no bullets/circles at the top in zurb-foundation 5.
So I assume you are using this type of orbit.
How about try .orbit-bullets {display: none;}, somewhere in your css file?
You can use the data-options attribute in your ul:
<ul data-orbit data-options="bullets:false;">
<li>
<img src="satelite-orbit.jpg" alt="slide 1" />
</li>
<li>
<img src="andromeda-orbit.jpg" alt="slide 2" />
</li>
<li>
<img src="launch-orbit.jpg" alt="slide 3" />
</li>
</ul>
You can also use Javascript:
$(document).foundation({
orbit: {
timer_speed: 1000,
bullets: false
}
});
Foundation 5 has more documentation toward the bottom of the Orbit page.
It shouldn't matter which version of Foundation you are using. As mentioned in the above answer; setting orbit-bullets to display none should work.
example:
.orbit-bullets { display: none; }
You could also try the following:
.orbit-bullets-container { display: none; }
If neither of these declarations are working I would guess that the issue lies within your CSS. It would appear that you have either set orbit-bullets to display block somewhere in your stylesheet after you have set them to display none, possibly within a parent div; or you are calling your stylesheet before foundation's CSS and it's being overridden after your declaration. When using any framework, you should call those styles and scripts first; before your application files.
If you could provide an example it shouldn't be difficult to resolve.