Javascript Anchor
Oct 19, 2005Does anyone have any javascript code that can navigate to an anchor in the
page load? I use location.href and it works in IE, but I can not get it to
work properly in FireFox.
Does anyone have any javascript code that can navigate to an anchor in the
page load? I use location.href and it works in IE, but I can not get it to
work properly in FireFox.
If using an onclick event handler to execute javascript when an anchor
element is clicked on, what should the href attribute be? #?
javascript:void(0)? Something else?
I'm working on a project where we're using JavaScript to let users swap styles on a page. To accomplish this, I'm calling the script via href="javascript:swapcss()" on the switch styles button.
Some pages on the site have anchor links. On those pages, if someone swaps styles without hitting any of the anchor links, all is well. But if someone hits an anchor link and then hits the swap button (at this point the URL is pageid.html#anchor), the page just reloads to their anhor point without swapping styles.
Does anyone have a workaround handy? I've tried several alternatives I've found online (href="#" onClick="action"; href="javascript void(0)" ). Nothing works for this case yet. Code:
I am looking for a generic javascript function to identify the form with in which a element exists, thus developer can avoid coding like document.forms[index].submit() - where they are sure, they want the form with in which this element exists is to be submitted. This way when forms are introduced at top level the code can remain unchanged, else every form introduce above in the DOM will result in increasing the index by one.
The code is given below. While doing so i am stuck with 2 problems
P1: In the code, you can see i am giving a explicit 'break' in the code. If i don't do so the code seems to be looping. Obviously i am missing some basic.
P2: I am able to pass 'this' for anchor element by name="xy"
<a href="#" name="xy"
in its onclick function by which, in the javascript function i move up the DOM.
While i am unable to do that on the anchor element given below since this function is now on the href attribute.
<a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>
Hence the script fails. Code:
I need to get the page to reload with the anchor in the link when it is clicked in a dropdown menu. For example if I am on 'www.domain.com/about/#2' and I then click on 'www.domain.com/about/#3' the url changes but the page doesn't reload so I need the page to reload, but keep the new anchor (#3).I gave the links with anchors a class of 'reload' and tried this:
$('a.reload').click(function() {
window.location.reload();
});
I have a script that scans an HTML document for headers and special comment tags for the purpose of generating a left-floating/position-fixed DIV that contains the document's outline or "table of contents." Within the DIV are lists (UL element by default) whose items (LI elements) are jump-to links (A elements) to the points (headers, special points marked for inclusion in table of contents) in the document. The problem is this. I have typical HTML document with links that jump to points (usually headers) inside the document, as shown below:
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a>Header Text</h1>
<p>...
</body>
But my script, being a document outliner that finds headers in a document, inserts another anchor as a jump-to point just before the first occurrence of text in the header (inserted A element shown in red below). This somehow disables the document-coded jump anchor (shown in blue below). And it occurs in FF and IE, which suggests it is not a browser-specific issue. Why does it occur? Is there something in the HTML spec that states that two anchors to which a jump occurs are not allowed to be adjacent elements in the document?
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a><a id="jump-1"></a>Header Text</h1>
[code]....
To reproduce what I am seeing, search for the text "Why Is A Survey Done". The first occurrence is a within-document jump-to link, which should jump to a header below it. If the script execution to generate a document outline is disabled, the jump works. But if the script is executed and the document outline generated, the jump-to link does not work.
Having a little bit of trouble with a site I'm currently working on I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:[URL].. This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).
I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?
I define an anchor as a global variable, like this:
var globvar = {
anchor: document.createElement("A")
}
Later, on the fly, I give it the attributes, like this:
globvar.anchor.setAttribute("href","javascript:keyb_change()");
globvar.anchor.setAttribute("onclick","javascript:blur()");
globvar.anchor.setAttribute("id","switch");
[code]....
1) In setting the attributes on the fly, how do I attach the anchor's text (the user clicks on) to the anchor?
2) Is there a way to include the attributes within the global variable's original definition, thereby sparing me from coding the attributes on the fly?
I'm starting to play with JS/JQuery and I don't know how to get the name af an anchor. I have a list of img faces and when hovering them, I want to display a random quotation
Here is the html
PHP Code:
<div id="faces">
<ul>
<li><a href="#" name="stalin"><img src="../images/img1.gif" width="50" height="58" /></a></li>
[code]....
Is there an other way to link to an element on the same page without using anchor URLs?
View 18 Replies View RelatedI have a div that scrolls horizontally that I use for navigation. As you go to each page, it'd be great if that scrolling nav div would take you to which page you were currently on, so you could navigate easier. If I use anchors for the links, it works (as in scrolls to the right spot), but obviously also shifts the page down, which I don't want.
Does anyone know a method to which I can get this div to scroll without shifting the page down?
I need to add acnhor tag dynamically using javascript. I have achived this using following code, but there is little prioblem.
Code:
function addURL(token){
var tableObject = document.getElementById("tableConfirmationsToAttach");
var rowCount = tableObject.rows.length;
var row = tableObject.insertRow(rowCount);
[Code]...
I use named anchors to take users to specific parts of a long page. But I
want to add some processing and do some things with my nav bar when users go
to certain sections delineated by named anchors. I understand that the
anchors array creates an element for each anchor in the page when the page
is loaded, but how do I identify which anchor is currently being viewed?
Here's some pseudo code:
if (document.anchors.name == "section_B") {
then do this or that
}
But what do I test to determine the current anchor name?
What about using id's instead of names? Can the anchors array return
anchors created with id's as well as names? Would this be of any benefit?
I placed an anchor at the end of my long page inside a top <iframe>.
my entry field is in another iframe at the bottom. when i enter something and hit return, it adds a new line to the html file as well as <a name=END></a> tag (there is only one END tag at the end of the file)
I then request top frame to reload and goto END tag.
sometimes it works, sometimes it won't (IE). Is this normal ? Is it Frame related?
I have this anchor tag which is created through script [code]...
I'd like to add a title attribute to it. How would I go abouttargetingthe tag and then adding the title?
I have a problem with my jquery. This is my code:
jQuery(function(){
jQuery(".class1").toggle(function(){
jQuery(this).animate({ height: 250 }, 'slow');
jQuery(".class12",this).animate({ height: 250 }, 'slow');
[Code].....
So div.class1 wil animate from 100px to 250px if it's clicked. However, I couldnot click the link inside this div. Everytime i click it will be animated to 100px, and I can never get the link.
How can I keep the div.class1 open so that I can click on the link??
i have a problem, let me paste here a code snippet first:
<a name="Paragraph 1"></a>
<p> Paragraph1 </p>
<a name="Paragraph 2"></a>
<p> Paragraph2 </p>
<a name="Paragraph 3"></a>
<p> Paragraph3 </p>
Now i want to get the anchor name of the corresponding paragraph. For example: if i hover the paragraph 2 then it will display the name of anchor tag as "Paragraph 2". can we do this in jquery? if yes then how can we achieve this?
I have tried for hours to work this out, but with no success.
<a href="IMG_0001.jpg" rel="album" title="IMG_0001"><img src="IMG_0001.jpg" alt="IMG_0001" /></a>
<script type="text/javascript">
jQuery.noConflict();
[code]....
All I want to be able to do is use the alt attribute in the image tag instead of the title attribute in the anchor tag.
I have multiple <tr> tags following the below pattern:
<tr>
<td class=c1Top>
<table>
<tbody>
[code]....
I need to update the href attribute so it appends the html value to the href attribute e.g.
href="http://mysite/Page1.html"
href="http://mysite/Page2.html"
href="http://mysite/Page3.html"
I tried the following, but no luck. It updates the html value of all anchor tags with the value contained in the 1st tr $('td.c1Top table tbody tr td.ms-vb a').attr('href', $('td.c1Link table tbody tr td.ms-vb a').html());
I define an anchor as a global variable, like this:
Code:
var globvar = {
anchor: document.createElement("A")
}
Later, on the fly, I give it the attributes, like this:
Code:
globvar.anchor.setAttribute("href","javascript:keyb_change()");
globvar.anchor.setAttribute("onclick","javascript:blur()");
globvar.anchor.setAttribute("id","switch");
...
globvar.paragraph.appendChild(globvar.anchor);
TWO questions:
1) In setting the attributes on the fly, how do I attach the anchor's text (the user clicks on) to the anchor?
2) Is there a way to include the attributes within the global variable's original definition, thereby sparing me from coding the attributes on the fly?
How would one normally grab the #someanchor part of a URL for use in javascript? for example, if I have a url....
mysite.com/page#anchor1
I want to access the data after the #, which is normally the anchor. What is the JS for grabbing this?
I currently have a script to jump to an anchor tag when the page loads:
<script type="text/javascript">
function goToAnchor() {
location.href = "myPage.html#myAnchor";
}
</script>
Now, I would like to take it a step further and would like to link from page A to page B that usually takes a while to load and once the page loads, run a script to jump to the specified anchor tag on the page after everything has loaded. I know I have to add some parameters at the end of the url link on page A, but that's where I get stuck.
I want to add a small but informative weather widget to one of my web sites. Having searched around, most are either too big or too simple.
I did find "one" that I liked but it links to a lame page. I would rather have no link rather than the one provided. The widget I like is a simple javascript "include file" similar to this one:
[Code]...
I Am trying to use the following script to generate a url dynamically and I can get the link working just fine with plain txt in the anchor area but when I try to add an image - I am running into trouble.
<script>document.write ("<a href="http://contact."+ domain +"/ws/eBayISAPI.dll?ShowCoreAskSellerQuestion&requested="+ userid +"&iid="+ itemid +"&frm=284&redirect=0&SSPageName=PageAskSellerQuestion_VI"><img src="http://www.thebluedot.net/images/layout/contact_us.gif" style="border:none;"></a>");</script>
Please help me out. I have been tearing my hair out over this basic script. I am complete newbie to javascript so please be easy on me.
I'm filling in for a coworker on a radio stations website.
The station currently streams live online. I want to add an event tracking so I can track how many people are streaming. I'm really new to js, but I think I figured it out (keyword is "think"). However, there was already an onclick event within the anchor tag. Can I have two in the same tag? Is there a better way to do this?
To order a customized product from my site, the user has to upload an image and then submit text (separate steps but part of the same php form) before adding to their cart. Currently, the user must scroll back down from the top of the page to the next part of the form after each step which is more confusing than I would like.
The first step of the form uses a straight forward <form> and I was able to add an action="#anchor" to jump down to where I set the first anchor.
The second step is regrettably not so straight forward and I'm having trouble adding an anchor. After entering text, the user clicks a submit button which triggers an alert letting them know the text was submitted successfully. When the user clicks the okay button on the popup alert, I would like the page to jump down to the 'add to cart' portion.
This is the button:
echo '<tr>
<td valign="bottom" colspan="2" align="center">
<input id="delete_button" class="button" type="submit" value="Attach Text" onclick="return( confirm( this.form ) );" />
[Code]....
How can I prevent the page from returning to the top after the user submits text?