I have some text which I'd like to be clickable.
And I want the picture to be opened when I click the certain word in a new window (not in a new tab).
How could I do that? The code below does not work.
<p>Click on the "Request Access" button and fill in the form.</p>
<a href="IMAGE_URL" target="_blank">
<img alt='img_path' class='img-40 rounded-circle' src='IMAGE_URL' />
</a>
Just add a target="_blank" to your link if you want to open the destination of a link in a new tab:
Request Access
And define a onClick method to open it in a window :
<a href="./images/TheForm.jpg"
onclick="window.open('./images/TheForm.jpg',
'windowName',
'width=800, height=600');
return false;"
>Request Access</a>
When you specify the width/height, it'll open the link in a new window instead of a tab.
Here is the documentation for further information.
Related
Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>
I want to open a table tab in a new window to interact with the component separately. What's the best recommended method to do this functionality in React.js?
try this pls . <a href="URL_LINK" target="_blank"/>.
such as :
<a href="http://localhost:3001/users" target="_blank"/>
<a href="http://localhost:3001/personels" target="_blank"/>
You can try target="_blank" for opening new tab if you are using <a href="SOME_URL" target="_blank"/>
or you can use onClick event as shown onClick={()=> window.open("someLink", "_blank")} if you just need to put on button .
I am trying to find out css selector for "Clear" button, as mentioned in below script:
<a href="" class="slds-button slds-button--neutral search-button"
ng-click="vm.clearFilter()" style="">Clear</a>
I have tried :
a[href*="Clear"]
a:contains('Clear')
a[*'Clear'*]
I am expecting to get a click on "Clear" button.
If your are trying to reach that button with the text, then it's not possible.
How about putting an id:
a#clearButton{
background:red
}
<a href="" id="clearButton" class="slds-button slds-button--neutral
search-button">Clear</a>
I see you use AngularJS, the id can be added via the code
driver = webdriver.PhantomJS()
driver.get(url)
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
driver.find_element_by_css_selector('a.btn_more').click()
I am able to click the get more link using above code
get more
but how to click on followers link?
<div class="my_show__info">
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="followers"> 90</a>
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="following"> 33</a>
</div>
you can form a xpath and click on the link as mentioned below. if you want using CSS. convert the following xpath with css.
driver.findElement(By.Xpath("//div[#class='my_show__info']/a[#data-follow="followers"])).click()
I am not good with CSS but I guess following should work.
driver.find_element_by_css_selector('div[class='my_show__info']>a[data-follow='followers']').click()
An image is being shown. On clicking the image a pdf file should open in a new tab. This is how I am trying to render the React component, doesn't work -
<a href={pdfUrl} target="_blank">
<img className="class-image" src={imageUrl} onError={imgError}/>
</a>
When the image is clicked Chrome gives a warning that a pop-up has been blocked. Safari doesn't even give any warning and just eats the tab which it thinks is a pop-up.
I tried removing the onError attribute with no effect.
If I remove the target="_blank" attribute it works fine, opens the pdf in same window.
I have tried adding onClick handler to the <a> tag, opening a window using window.open with the same result - generates warning that a pop-up has been blocked.
This works fine however -
<a className="class-name" href={pdfUrl} target="_blank">{userName}</a>
The problem occurs if rather than rendering text as the content of anchor tag I render an image. Can't figure it out.
EDIT:
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to change the pointer to a cursor so that it looks like a link
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to
change the pointer to a cursor so that it looks like a link
One approach that might work with this is to open the new window, then populate the URL:
const newWindow = window.open();
newWindow.location.href = '/some/url';