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';
Related
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 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.
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
I have a <div id="section1"> </div> at the bottom of my page.
And I have a button I want this functionality in button
$location.hash('section1');
$anchorScroll();
It is working as I want but it is giving me ugly url all this is in single page than why my url is updating?
my expecting Url is :
/Order/BuildOrder
when page load I get this but when I click button screen took me to my anchor div with id='section1'
but now url change to /Order/BuildOrder#!#section1
How can I remove #!# as this is scrolling on a single page. href location is not changing
I am using SVG <use> sprites as described in this CSS-Tricks article. Those icons often live in anchors, as demonstrated below:
<a ui-sref="home">
<svg class="rp-icon">
<use xlink:href="#rp-home"></use>
</svg>
<span>Home</span>
</a>
I've hit an odd bug with AngularJS that only occurs in IE11 (not IE10, and didn't test any earlier IE versions).
Clicking directly on the icon throws the Angular error Unable to get property 'nodeName' of undefined or null reference, thrown in this Angular function:
function nodeName_(element) {
return lowercase(element.nodeName || element[0].nodeName);
}
Clicking on the anchor, but not directly on the icon, works as expected.
Is this an Angular bug, or something wrong with my use of SVG icons?