I have a font awesome icon <i> item inside a a href with a target='_blank' — yet only the text is clickable; clicking on the icon opens a new tab with about:blank, not the actual link.
<a href="..." class="not-light" target="_blank" style="display: block; ">
<i class="fa fa-android"></i> »
</a>
How do I make the icon clickable as well?
For example, click the lightbulb in the footer of the http://ambieye.com/ site's footer.
The <li> is a list. The list must be on the outer and the text in the inner like this :
<li style="display: block; ">
<a href="..." class="not-light" target="_blank">
<i class="fa fa-android"></i> » The text
</a>
</li>
Try it.
The issue was in the javascript handler, not the css/html; the way to find these issues is in Chrome's handlers section, under 'click handler' -
function handleSystemLink(a) {
var url = a.target.href;
The argument a was the i element which did not have href, thus openning a bad link.
Related
I'm learning HTML.
I've following code piece:
<a href="#B" id="specialClass" class="primary-btn icon-cart" data-one="#A" data-five="google.com" data-ten="#C" target="_blank">
<span id="pressButton">New Button</span>
</a>
When I press button based on slider and data-five gets triggered, I for some reason open in a new tab mywebsite.com/google.com instead of google.com.
What am I doing wrong?
If it is an address outside your web page you have to put the full path with https://google.es
<a target="_blank" href="https://google.es">Google</a>
I am using the code below to open a new tab upon clicking a bootstrap button in a razor .cshtml page currently. I have a button in the new tab opened which returns to the main menu, but I would like to know how to close this tab, to effectively return to where the user was previously.
<ul class="nav nav-sidebar">
<!-- Menu Item -->
<li class="menuItem">
<a asp-controller="New Tab Section Menu" asp-action="Index" target="_blank" class="menuItemLabel">
<i class="fas fa-book-reader fa-lg" style="padding-right: 5px"></i>
New Section Menu
</a>
</li>
You can't close browser tabs this simple.
I assume that you have a return button. What you can use target="_self" instead of target="_blank" so no tab will open and you can navigate back.
You could use window.close() in Javascript before, but this is mostly unavailable EXCEPT when you open a new tab with target="_blank" or by script.
In your case it might be worth a try.
Use a button with:
Return to base!
Browsers are very picky about this for security and useability reasons.
https://stackoverflow.com/a/66688958/6803592
I want to display LinkedIn popup in a small new window, but the share popup keeps opening as a new full screen tab.
This is the piece of HTML I'm using:
<div class="share-block">
<a
href="#"
onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=Excellent review on my website reviews', '_blank, width=500, height=500, resizable=yes, scrollbars=yes'); return false;"
><i class="fa fa-fw fa-linkedin"></i> LinkedIn</a>
</div>
I'm using the same code for Facebook and Twitter which opens up the popup in a new small window as it should. This is the Twitter HTML for example:
<div class="share-block">
<a
href="#"
onclick="window.open('https://twitter.com/intent/tweet?text=Excellent review on my website:%20' + encodeURIComponent(document.URL), '', '_blank, width=500, height=500, resizable=yes, scrollbars=yes'); return false;"
><i class="fa fa-fw fa-twitter"></i> Twitter</a>
</div>
I can't figure out why doesn't it work with LinkedIn. This is what I want to achieve
How to display LinkedIn share in new window like shown on the image?
The second argument in the window.open is for title. You missed that in your linked in popup. So that it treat as all the _blank, width=500..... everything as title. That is the reason it is not following any property width and height and etc. Add that empty string as the second parameter ''.
Fiddle DEMO
The options for the window.open are in the third parameter instead of in the second, where they should be.
I have a link on a webpage to open a new message in the default email service. The link opens and works except for the fact that the new window never has the focus. Is there a way to give it focus? I have included the link below.
<a href='mailto:soandso#email.com?Subject=hi' target='_top' id='emailEvents'>soandso#email.com</a>
New Page :
<a href='mailto:test#email.com?Subject=Test' target='_blank' id='emailEvents'>test#email.com </a>
This Page :
<a href='mailto:test#email.com?Subject=Test' target='_self' id='emailEvents'>test#email.com </a>
Use target="_blank"
<a href='mailto:soandso#email.com?Subject=hi' target='_blank' id='emailEvents'>soandso#email.com </a>
I'm trying to specify link behaviour by setting the target to _blank if the link is external and _self if link is internal. It works in the latest version of Chrome and Firefox just fine but when the site is tested on IE9, the external links are opened as if they had a _self target.
Inspecting the HTML elements, I get this which is what I expected to see.
<ul>
<li>
<a href="http://www.bbc.co.uk/news/" target="_blank">External Link
<i class="icon icon-point-right-circled"></i>
</a>
</li>
<li>
<a href="http://test.mysite.com/uk/en/Documents/Test%20document.pdf" target="_blank">
<i class="icon icon-download-circled"></i>
</a>
</li>
</ul>
I've tried adding a style attribute to the tag:
<a href="http://www.bbc.co.uk/" target="_blank" #(isInternal ? #Html.Raw(style=\"target-new: window\"") : #Html.Raw(string.Empty))>
<i class="icon icon-download-circled"></i>
</a>
That didn't work.
Any ideas what I might have been missing?
Regards,
Tim