left click to activate onclick and right click to activate href - javascript

I have an img tag as(which of course is not of the exact syntax)
<img src="http://localhost/img/img_1.png" id=1 onclick="say_hi(id)" href="/img_page_1/" alt="Aim Pic" width="230" height= "164" />
what i need here is when user left clicks on img, i need onClick to be triggered and when user right clicks on it, it must act like a general href showing option ("open in new window" etc)
why i need it is, i want to show the page preview related to image with in the home page by bluring rest of page(ajax is used here to load preview of image page in say_hi function) and when user right clicks on it i want it to feel like a normal href so that he can directly open the page in other tab rather than a preview.
EDIT:
In simple terms i want to state/write/give a link to some image which acts normally as a link when right clicked(showing the context menu which has all the options for a link) but it must trigger a onClick event(or run a function in javascript) when left clicked.
Thank you.

Removed previous answer in reply to question edit.
The new edit is much simpler, see the following (using inline-JavaScript as an example - it's bad practice and shouldn't be used in any production code - see here and here for more info.):
HTML/Inline-JS:
<a href="/img_page_1/" onclick="left_click(id)">
<img src="http://localhost/img/img_1.png">
</a>
Firstly, href isn't a valid attribute on images - give it to an anchor (<a>), which you can then wrap around the image.
Only the left-click will trigger your function, right click still has default behaviour.
Function:
function left_click(id) {
event.preventDefault(); // Prevents the default anchor action.
// Rest of your function here.
}
Here we prevent the default behaviour triggered by the anchor - stopping the link from taking you to a different page.
jsFiddle example.

You need to differentiate between mouse buttons through the button member of the event object:
var left, right;
left = mie ? 1 : 0;
right = 2;
var clickHandler = function (e){
if(e.button === left){
// do onClick stuff and return
}
else if(e.button === right){
// show your context menu
}
}, false);
But this does look like you could simply have your link as description if I'm not misunderstanding what you want to do.

Related

How to follow a link via swipe in javascript?

To handle swiping I use the script posted here:
http://padilicious.com/code/touchevents/
It works fine.
Now instead of changing the background (what the original script does), I would like it to grab the link contained within an <a> which has a class, and which is normally a link to the next page, but for mouse events like so:
<a href="mypage02.html" target="_self" class="NextP" title="My Second Page">
and then load the page.
I have many pages, with the same structure, I don't want to manually define the links. I want the js to get hold of the current href contained in the <a> and launch it, when triggered by the swipe. If possible.
Thank you ;-)
From what I understand, you want to look for a
<a href="http://example.com/" class="NextP">
element in a page (an <a> anchor tag with a NextP class), and when the user swipes, visit that link.
To do this, I would
look through your HTML for an a.NextP element, and capture its href attribute.
when the user swipes, set window.location.href to this attribute.
window.onload = function(){
var nextPageUrl = document.querySelector('a.NextP').href;
// just guessing how swiping works, I haven't looked through your library
document.body.onswiperight = function(){
window.location.href = nextPageUrl;
};
};
Of course, you would use the correct method of detecting the swipe.

javascript gallery not displaying main image when thumbnails clicked

I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.
No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?
<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
<a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
thumb.jpg'/></a>
<a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img
src='images/motorbike-girl-thumb.jpg'/></a>
<a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img
src='images/yamaha.jpg'/></a>
</div>
function gallery(change) {
document.getElementById('viewer').src = change.href;
}
The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to.
So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.
cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).

Activate style with if statements for anchor position

I am a beginner and have searched thoroughly, finding not a solution for this problem.
I've written a code where a css style changes when you click on a link, such as the one below:
function spHome(){
document.getElementById("btnHome2").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
document.getElementById("btnAccount").style.background = "0";
}
function spAccount(){
document.getElementById("btnHome2").style.background = "0";
document.getElementById("btnAccount").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
}
This code works perfectly fine. The problem for me is that when I refresh the page, the click state is no longer active. Is there a code that can allow the function to stay active only when the user is at a certain anchor point of the page. For example, if we have an anchor location called index.html#home, the home button will be active and when index.html#account is clicked, the account button will stay on clicked even after page refresh.
The example below doesn't seem to be working on jsfiddle but it is fine on all browsers:
http://jsfiddle.net/JoshuaWaheed/HZLVt/3/
Is there a way to make this happen?
Add href hashes and return false onclick to avoid page reloading
You need to execute js at page load, check the url's hash, and put the button's state accordingly to the hash.
Using jQuery, it would be something like (not tested):
$(function() {
if (document.location.hash == "#home")
spHome()
else
if (document.location.hash == "#account")
spAccount()
})
If you don't want to use jQuery, you can put that code on docuent event "load"

Support Middle Clicks on my Fancybox Lightbox

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.

My website alway scroll up when i click link?

I have a link
Text
when i click this link my page alway scroll up to the top. How do i manage it that when i clik this link my page not scroll up to the top.
Javascript? or something
thank you
you can add some javascript to deny the default behavior.
function myClickHandler(e) {
// your code here
// ...
// new code
if(e.preventDefault){ //firefox,chrome
e.preventDefault();
}
else { // ie
return false;
}
}
if you provide some more detail/example code, we can give you a more specific answer.
Not sure what you are trying to do, but maybe you are thinking of:
<a href="JavaScript:void(0);" >Text</a>
that'll do nothing.
You might want to post an example of a link that does this. My guess is that it's because you don't have an href set for the link or you ended the link href with a "#someId"
It's not that it's scrolling to the top of the page, it's refreshing the page.
An example of a top link:
Some Link
Somewhere <!-- will refresh and you end up at the top -->
EDIT
Ah... Now that you've provided the link... it's the Hash # that's the problem.
To avoid that from happening ( I'm guessing you want to do some Javascript on the link and you're trying to get it to do something.. ) then you need return false; in your javascript. This will return false from the link and won't follow it.
It is because you have only the hash # as "URL". It makes the browser jump to the top of the page (normally it would jump to the element with the corresponding ID if you specify any).
But what is the purpose of such a link if you don't use it?
The [relative] URL # is treated by browsers as the top of the page. Either change the link's href attribute to refer to another resource, or add a click event handler that prevents the default action. Better yet, if you intend it to be a button that triggers a click event, replace the <a> tag with a <button> which is more semantically correct anyway.
<body>
<h1 id="top">First Headline</h1>
<!-- your document here-->
go to Top
</body>
With Javascript you could add some smoothness like slowly scroll up. HTML Links

Categories