In my application navigator status bar is displayed by default at the bottom of each screen and URLs linked to buttons and icons will be displayed on it.
Like this:
I do not want to show URL associated to hyperlink or button at bottom of the web page using JavaScript.
What I have tried so far:
Setting window.status = '' onmouseover property of hyperlink/button, but this is not working.
Browser I'm using are Internet Explore IE11 and Firefox 38.8.0.
Try this
It's working for me.
I have tested this on both browsers: Internet Explore and Firefox
click here
I do not want to show URL associated to hyperlink or button at bottom of the web page [using JavaScript]
Statusbar shows the href.
So: don't specify an href.
There's no need for javascript to "hide" it.
Given that it's a link you probably want to be able to click it, so add a click handler with jquery and you can style with css to make it look like a link.
$(function() {
$("#saveLink").click(function() {
location.href = $(this).data("href");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id='saveLink' title='Click to save' data-href='http://google.com'>no status bar link on hover</a>
<br/>
<a href='http://google.com'>link shown in status bar on hover</a>
If you need keyboard support (tab) then you'll need an href, so can just go with href='#'
Related
I've created my page using bootstrap and have a link to fire off a fancybox box as below:
<a class="iframe" href="AForm.asp?ID=<%=Request("ID")%>"><button class="btn-warning">Action Form</button></a>
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
'type' : 'iframe',
'width':500,
'height':500,
'afterClose':function () {
window.location.reload(); }
});
});
</script>
The default functionality works fine to begin with: i can trigger fancybox to load, click the default cross icon and it closes the box - all working as expected.
When i submit a form within the fancybox (html/classic asp) and it does a redirect to a standard HTML page that literally just says "Please close this page" the default close cross icon does nothing. It is visible and in the correct place but there is no click functionality.
I have tried custom close buttons within the HTML page but nothing works - it just doesn't want to close at all. Anyone got any ideas? Thanks
Not so much an answer but after trying to fix this all day i gave up on Fancybox and found Colorbox to work pretty much out of the box for what i was trying to do. Colorbox
I am using ShareThis widget in my website, here trying to customize some of the functionality of the email widget shown below:-
Currently when you hover on this email icon, a dialog box appears:-
What i am trying to do is, making the popup disable for the icon and implement a url which takes me to a specified url let say http://www.google.com...
I also try to add window.open to the span:-
Before:-
<span class='st_email_large' displayText='Email'></span>
After:-
<span class='st_email_large' displayText='Email' onClick="window.open('http://www.google.com'); return false;"></span>
But unfortunately my all ideas have been so far waste, their is no responce from onclick javascript? Any solution for this?
This code snippet works for me when I type it in the Javascript Console on the sharethis.com Website:
// Disable Sharethis popup
$(".st_email_large")[0].onclick = null;
// Load url instead
$(".st_email_large").click(function() { window.location.href = "http://google.com"; });
You need jQuery for it though.
I'm creating a jQuery Mobile web application.
This link, works correctly:
Click Here 1<!--This is working-->
But, these links which have anchors are not working:
Click Here 2<!--This is not working-->
Click Here 3<!--This is not working-->
How to make those links that have # work with ajax navigation?
Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I've used #. (#3 means the third article in the page)... Do you know any better way?
Edit 2: I'm simply trying to load/show a page and then jump within it...
Edit 3: My jump inside that page isn't a simple jumping. It's a custom handled jumping with hashchange event. But if there is any other method, I can change that page...
add rel="external" to any links that have an anchor # and you don't want to load via ajax.
New Links would be:
Click Here 2<!--This is not working-->
Click Here 3
See http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html for more detail.
You can try using this from JS like this , I had problems with # tags :
<a class='homeSet'>Home</a>
....
$('body').on('click', '.homeSet', function(ev) {
$.mobile.changePage('/home.html#myhome', {
transition : "slide"
});
return false;
});
I am trying to use the jQuery tabbed widget as a menu for my application and have managed to set up the tabbed interface so that when you click a tab it shows the first page of that section. According to the docs, if you click on a link on this page and want it to load in the same tab then you need to use the code below. This partially works because now when I click on an image-hyperlink on that page it renders the new page in the tabbed window.
However, when I click on a button which has javascript the button no longer works. This is the case for all of the javascript. How can I get the javascript working again under the new tabbed interface?
$('#example').tabs({
load: function(event, ui) {
$(ui.panel).delegate('a', 'click', function(event) {
$(ui.panel).load(this.href);
event.preventDefault();
});
}
});
EDIT: So if you add the following line to LeftyX's code in the page 1 file, then the button causes page4.html to open but does not do it in the tab
<button onclick="location.href='Page4.html'">Test button </button>
It must work.
If you show us your HTML we might try to help.
You can check my sample and download the code.
Try and check if there are any errors in your script using some Dev Tools (ex: Google Chrome Developer Tools)
UPDATE:
if you're using a button you can use some HTML5 attribute:
<button data-pagelink="Page4.html">Test button</button>
and trap the click event:
$(ui.panel).delegate('button', 'click', function(event, o) {
$(ui.panel).load(this.dataset.pagelink);
event.preventDefault();
});
or use an hyperlink and transform it in a button:
<a id="thisIsAButton" href="Page4.html">go to page 4</a>
with this:
$("#thisIsAButton").button();
Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.
I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.