I have on anchor tag in htm. when I click mouse middle button on anchor tag then new tab is opened.
But I want to stop it's working. I tried lot of tricks in javascript but it is not working. Can anybody have solution for that?
<a class="tag" href="www.google.com>google</a>
I don't want to open a new tab by clicking with mouse middle button over anchor tag having class (tag)...
prevent mouse middle button to open new tab on anchor tab with a particular id.
I agree with #Matt Lishman in the comments: don't.
But to give you a solution:
Your code is almost right. Only (as #GoTo says), mouseup is to late.
When you listen for click events you can check the which property on the event object. The which is 2 when you click with the scrollwheel.
So, if which === 2, preventDefault
https://jsfiddle.net/k3o5pt6c/
I found solution as per my requirement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){
$(document).on("click", function(e){
if($(e.target).is("#google") && e.button===1)
e.preventDefault()
})
})
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
Google<br> Bing
</body>
</html>
fiddle link
Related
When particular page is opened by clicking on button which id is "button1", I want that page to be scrolled down.
Could that code be in JavaScript?
This is the command you can use to scroll down:
window.scrollTo(0,document.body.scrollHeight);
Now if you want to go directly to the bottom you can put this do that while the page are loaded:
<body onload="window.scrollTo(0,document.body.scrollHeight);">
Here is an example of what you are asking about:
<html>
<head>
<script>
clicked(){
var element = document.getElementById("scrollto");
element.scrollIntoView();
}
</script>
</head>
<body>
<button onclick="clicked()">Click Me</button>
Your content...
<div id="scrollto"></div>
</body>
</html>
When you click the button, it should scroll down to the div.
If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like:
and the link will automatically open to that section of the page.
This is potentially a somewhat oddly specific question.
The situation:
I have a page with a position:fixed modal dialog (actually several, but that's irrelevant to the problem, as far as I've been able to determine). The modal opens when clicking a certain link. A script listens for hashchange events in order to close the modal when the user hits the back button.
The expected behaviour is that when back:ing out of the dialog, the page returns to the scroll position where it was before opening the modal. This happens in nearly every modern browser I've tested (desktop FF, Chrome, IE9/10/11 and Safari, and Chrome for Android).
On iPhone/mobile Safari, the page instead scrolls back to the top.
Test code
This is as reduced as I've been able to make it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html, charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal test</title>
</head>
<body>
<h1>Header</h1>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h1>Header</h1>
<p>Open popup</p>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div id="#popup" style="background:#fff; width:300px; height:100px; border:2px solid #000; position:fixed; top:50px; left:50px; display:none">
Modal dialog.<br>
Hitting 'back' should close this modal.<br><br>
Close modal
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.js-close-popup').click(function(ev){
window.history.back();
return false;
});
$('.js-open-popup').click(function(ev){
$('#\\#popup').fadeIn(400);
});
});
$(window).on('hashchange', function(){
hash = window.location.hash.replace('#','');
if(hash == '' || hash.lastIndexOf('#', 0) !== 0){
$('#\\#popup').fadeOut(400);
}
});
})(jQuery);
</script>
</body>
</html>
What I want to do is kill the scroll-to-top on iPhones, if at all possible without changing too much of the back-button logic for the popups (or breaking something in any other browsers).
I've searched SO for X number of hours but haven't been able to find a mention of this particular problem, or indeed a solution that works. Feel free to slap me on the fingers and point me in the right direction if I've missed an existing thread that answers my question.
EDIT: To clarify, opening the popup works as expected and does not cause any "auto-scroll".
This is definitely related to having "#" for "a href" value in your code. Also, I see a "##" in your code for a name of the ID, which i believe the reason for this. Try using some other name convention. When you are writing ID's, you don't need to give "#" in the HTML code. Try working on these lines, it might work for you.
Thanks!!
I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why.
The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
function doCustomDialog(text1,button1,button2,button3,callback)
{
$("#customDialog .customDialogDesc").text(text1);
$("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){
callback("option3");
});
$("#customDialog").popup("open");
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<INPUT type="button" id="confirm" value="Save data" />
<div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content">
<p class ="customDialogDesc">???</p>
Yes
No
Cancel
</div>
</div>
</div>
<script>
$("#mainPage").on("pageshow", function(e) {
$("#confirm").click(function() {
doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel",
function( returned )
{
//Do things depending on the button clicked, for now just display which button was clicked
alert(returned);
});
});
});
</script>
</body>
</html>
Use popupafterclose to unbind any attached click event. Also, note the direct parent of data-role=popup should be data-role=page.
$(document).on("popupafterclose", "#customDialog", function () {
$('#customDialog a').off('click');
});
Demo
Note: To change button's text, use .ui-btn-inner selector i.e. $("#customDialog .customDialogOption1 .ui-btn-inner").text(button1) in order not to lose button style.
Update: If you wish to go with the above note, you then need to unbind click .ui-btn-inner i.e. $('#customDialog a .ui-btn-inner').off('click');
The issue is because you are attaching another event to each button for every successive time the popup is opened. You can prevent this by using one() to attach the events:
$("#customDialog .customDialogOption1").text(button1).one("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).one("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).one("click.customDialog", function(){
callback("option3");
});
Alternatively, you could remove all the events attached to the buttons first by adding the following line at the start of your doCustomDialog function:
$("#customDialog a").off();
Then you can re-attach then using on as you currently do.
I have the following Javascript code.
When the page is loaded it is scrolled to the right position. When I click on the link to run the function the page scrolls to the top of the page.
How do I fix this?
<html>
<head>
<script type="text/javascript">
function scroll() {
window.scrollTo(0, 400)
}
</script>
<title></title>
</head>
<body onload="window.scrollTo(0, 400)">
<img src="a.jpg"/>
comments1
</body>
</html>
Use
onclick="scroll(); return false;"
that should fix it.
To add a bit more detail, with the return false;, the click event continues after the page is scrolled, and the click event follows the href to #, which is the top of the page. An alternative way to fix this is:
comments1
Returning false is better, IMO, but this would also do the trick.
I have a dropdown Menu where in a div is clicked and List is shown.
On focus out I am supposed to hide the list(i.e. when the user clicks or focuses on some other element and not on mouse out). Hence my obvious choice was onblur.
Now the JavaScript seems to work in Firefox but not in IE thats because my div has a sub div with a height and width specified. This is reproducible in a test file. I am using jQuery.
Is this a known issues in Internet Explorer? And what is the work around?
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option div {height:18px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
<div class="selected_option" tabindex="0">
<div>anywhere in the page</div>
</div>
</body>
</html>
The IE-proprietary focusout event worked for me:
$('.selected_option').bind('focusout', function(){
alert('focusout');
});
Again, this is proprietary (see quirksmode) but may be appropriate if it solves your problem. You could always bind to both the blur and focusout events.
onkeypress="this.blur(); return false;"
its works fine on all IE versions
First realize that focus and blur events are only supported on focusable elements. To make your <div>s focusable you need to look at the tabindex property.
Try using an anchor tag instead of a div since these are naively focusable. You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. Something like this:
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option
{
display: block;
height:18px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
anywhere in the page
</body>
</html>
Haven't tested this, but I think it should work.
I have set the tabIndex property for the div to be focusable and moreover if i comment the height the blur event is fired so I assume thats not the problem.
Try:
$('.selected_option').bind('blur', function(){
alert('blurred');
});
Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously).