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
Related
Hello guys im using wordpress and i need to jump to the comments when the user is clicking a link.
The single.php is opening in a new tab and its loading the page on the anchor (comment-id) but after that its always jumping back to the top of the page.
I Know its a problem with javascript (as its working well when i disable js) but im not sure where to find the peace off javascript i have to stop or to change on single.php.
Has anyone an idea how and where to change the javascript. So that i can stay at the comment after clicking the link on a different page?
this is the target <a name="comment'.$comment_ID.'" href="#comment'.$comment_ID.'" onclick="deletco('.$comment_ID.')">DELETE</a>
and this is the link form the other page to the target on single.php
'.$titlecomm.'
thanks for any help
First I encourage you to comment out your JS files one by one it test it out tell you find the responsible js file.
Another approach is, if its javascript issue, then you can do this with jQuery:
$('a.aCommentLinkCssClass').click(function () {
var url = $(this).attr('href').text();
window.location.href = url;
});
and add css class to your link:
'.$titlecomm.'
or if you want just JavaScript only:
<script>
function goToFunction(url) {
window.location.href = url;
}
</script>
and in your html:
<?php echo ''.$titlecomm.''; ?>
try:
onclick="deletco('.$comment_ID.'); return false;"
Or inside the function itself add a return false; at the end. You need to prevent bubbling of the event.
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.
i have an unusual problem. I have a page which contains an iframe, which is controlled by the dropdown. So selection of the dropdown loads different iframes. Anyway - on the bottom I have a button to return to the previous page (I mean the whole page, not previously loaded iframe on that page).
<a href="javascript: history.go(-1)">
Unfortunately it also includes the history of these iframes, so when I click on that button, it loads up the previous iframe instead of taking me back.
Here is how to explain it well:
go to this page: Click here
go to the hyperlink on that page
make couple of selections from the drop down (play with it)
click the return button on the very bottom of the page.
I want it to take me back to the first page (here.html), not go back to the previously loaded iframe on 1.html.
I have to use javascript history.go or similar script. I can't use direct link to here.html, as this page is a part of many other pages, so when the user clicks return, he is forwarded to his specific landing page.
I greatly appreciate any help.
It's a life-saving question
Use document.referer
var referrer = document.referrer;
window.location = referrer;
Check if it works !
<a href="javascript: window.location = document.referrer;">
You need to remove the newly iframe before sending browser back to the actual page.
Add click event on the return link
HTML:
<a id="return_link" href="#">
Javascript:
$(document).ready(function() {
$('#return_link').on('click', function(e) {
e.preventDefault();
$('#iframeId').remove();
window.location = document.referrer;
});
});
try this , Just remove extra spaces from statements.
href="javascript:history.go(-1)
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.
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;
});