Javascript Run Action on click of a Hyperlink - javascript

My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.

You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me

No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)

Related

Confirm dialog box with anchor tag

My friend done this below coding for custom control
click
now i want to show confirm dialog box while click this anchor link.
Is it possible?. i want to write script as inline.
Do this :
click
But at some point, you'd want to stop using only inline code and have a look at other clearer ways to add javascript in your code.
You may use a script block like this in the HEAD of your HTML file :
<script>
function doOnClick(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
}
</script>
And then your link becomes
click
Of course, this doesn't feel much simpler with only one function but it helps you put all your functions in the same place and make lighter and clearer html.
An alternative would be to use jQuery, so that you may totally avoid putting javascript in the html part.
The html is then
<a id=myLink>click</a>
And your script, now at the end of the body, is this one :
<script>
$(document).ready(function(){
$('#myLink').click(function(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
});
// other codes will come here
});
</script>
You're not at all required to code it this way now, as you only have a very light function, but if your code grows I suggest you start considering it and look at the jquery tutorials.
Of course. Here is a small snippet, not elegant but it works...
click
I actually had to look this up because I haven't used confirm, alert and prompt in a very long time.
confirm returns true/false depening on what the user selected (OK/Cancel, respectively).
So your resulting code would be
click

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

HTML buttons in javascript codes

I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.

Making a span/div/p href-like or stopping href "executing" links

I have the problem to "stop" href executing any links.
So my question is:
1) Is it possible replace href-elements that generate internal (#) links with any component, maybe <p>, <div> or <span> (or whatever could be working) that keep the same behaviour of <a> element (hovering, underlined etc) but not executing any link?
2) Alternative, a "trick" to avoiding href elements execute links?
1 or 2 without using jquery or any other js library possibly
Thanks Randomize
There are all sorts of tricks that can be employed to do this kind of thing, but what you need to be careful of is modifying the behaviour from that which the users have come to expect from a browser.
For example , it would be possible to swap the meaning of 'OK' & 'Cancel' buttons, but this would just confuse the user. (An extreme example, I know, but you get the idea)
If you could supply some more information about why you are trying to do this, there may be a better way of approaching things.
You can either add an onclick attribute to specific <a> elements:
Or modify the href like this:
To make them look like links, without redirecting the browser.
If instead, you already have a bunch of links with hrefs, and you simply wish to make them all non-redirecting, then the following jQuery will do this to all links on the page:
$(function () {
$('a').click(false);
});
Although nice and short, the above only works with jQuery-1.4.3+. If you are using an older version, then you can use the expanded form:
$(function () {
$('a').click(function () { return false; });
});
Yes. You can prevent links from the default action - the recommended way is to have links work normally (in case JS is disabled or not available - think "mobile browsers"), and then override the default action with JS.
Unfortunately, due to cross-browser incompatibilities, there are three ways to do this ("traditional","W3C" and "IE") and you need all of them: stopPropagation(), cancelBubble and return false. See a complete example at QuirksMode: http://www.quirksmode.org/js/events_order.html#link9
(Incidentally most JS frameworks abstract this away, so in jQuery you'd do this:
$('a').click(function(event){
// do something on click here
event.preventDefault();
});
This does the same thing as the QuirksMode example, but is a easier-to-read example.)
TO disable the link via js add onclick="this.href='javascript:void(0)';" like so:
link text
You can use a similar tactic to make other elements work link links:
<div onclick="this.href='http://www.mysite.com';"></div>
This is working in IE, chrome and firefox:
text link
In the function return void(0):
function functionX() {
...
return void(0);
}

Scrolling effect with the destination highlighted with jQuery

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.

Categories

Resources