I have created a custom button and added a pop up to it. Here's the code
<div align="center"><span class="browsebutton13">Google</div>
It's works perfectly fine on desktop, but on mobile it open two pages.
1st page - The same page on which the button is clicked is opened again
2nd page- It opens the Google page, which is what I wanted
I want only the second page to be opened when the button is clicked on mobile. I am using Safari browser. It works perfectly fine on desktop.
remove the anchor because you already have window.open in your onclick event
<div align="center"><a target="popup" onclick="window.open('http://www.google.com','name','width=600,height=400')"><span class="browsebutton13">Google</a></div>
remove href from above code
OR
<div align="center"><span class="browsebutton13">Google</div>
Another (more save) approach would be to change your anchor element to ...
<a href="javascript:window.open('http://www.google.com','name','width=600,height=400')">
... since this doesn't harm any specs. You only can remove your href attribute if you use HTML5 (docs). Otherwise, the a element requires an href attribute (docs).
Related
I have a problem of redirection on tags my angular application (version 11).
When I left click on the link, the redirection is done correctly.
When I do a ctrl+left click it's ok too.
However when I right click and "open in a new tab" then this new tab does not redirect to the expected link but to the home page of my application.
redirectTo() {
window.open("https://www.mylink.com");
}
<a (click)="redirectTo()">My link</a>
Do you have a solution?
Thanks
This is achievable with plain HTML
My link
Or even better to create a directive for external url.
You will add the target to your window.open function
window.open("https://www.link.com", '_blank');
If you wanted to achieve this using HTML only
Link
No but I don't want to force the opening in a second tab. I want to give the user the possibility to open it in a second tab by right-clicking "open in a second tab".
I am trying to link to a specific panel of a bootstrap 3 accordion. The links will be in a navigation menu, so sometimes the links will be on the same page as the accordion, and sometimes they will be on a different page. I have an example that works when the links are on a different page, but it doesn't work if you're on the same page. I need it to work in both cases.
Here is the code I'm using:
jQuery(document).ready(function($) {
// open panel when linked from an external link (this works)
location.hash && $(location.hash + '.collapse').collapse('show');
// open panel when link is on the same page (incorrectly requires double click)
$(".nav-left a").on("click", function() {
location.hash && $(location.hash + '.collapse').collapse('show');
});
});
Here is a demo that shows it opening the correct panel from an external link:
http://www.bootply.com/render/123550/#service2
(You may need to copy and paste this URL into your browser if it doesn't work.)
But if you try to use the links once you're already on the page, you have to double click them to get them to open the corresponding panel.
Here's the link to the full bootply with my code: http://www.bootply.com/123550
Thank you for any help!
The click handler for a link is executed before the browser follows the link, so your handler function will still see the old location.hash.
To circumvent that, you can either
react to the window's hashchange event (which has the advantage that it will even work when the user uses the forward/back buttons) or
determine the section to be opened from the link's hash instead of the location's hash.
I have this code in a phonegap html page:
<div class="row">
<div class="small-12 columns" onclick="window.open('http://www.something.com/');">
<h3>some text</h3>
<a href="#" onclick="window.open('http://www.something.com');" class="read-more">read
more
</a>
</div>
</div>
I have a menu page that links to this page (which works fine):
<a href="page.html">
<h2>page</h2>
</a>
I build the apk, when I open it on my smartphone, I get the menu. When I click the page item, the page opens, but then the onclick event fires immediately, without even clicking it.
Can someone help me out
This is an issue with how Android webviews handle click actions. It is best not to use onclick if possible. I have had the best luck with the touchstart event but in some rare cases I have had to implement a hack with the following steps:
onclick/touch append a div element that covers the entire screen and it's z-index is above all elements (but is transparent)
use setTimeout to remove this div element after 301 milliseconds
run the action you want to trigger directly after creating the setTimeout method
This is not a great solution, but if nothing else works this will.
I have an application which has multiple a href links. On right click they display "New Tab" in Chrome browser.
On clicking that it opens a new tab ,but the application is not designed to work in a new tab. Is there any way to disable that option or catch the event of a new tab in Chrome. Thanks
No, that is not possible. It is a browser feature to open links in new tabs. That's, among others, the purpose of a link <a> tag.
However, you can use e.g. a <span> tag and attach an onclick handler on it to perform page navigation:
<span onclick="window.location.href='nextpage.html'">Next page</span>
Using CSS you can style the span to look like a link.
The links open in new tab based on its target attribute, the target attribute specifies where to open the linked document.
Just remove target="_blank" from <a> tag or set target="_self"
I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.
Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.