JavaScript - Using Anchor Jumps With 'instant' Anchor Based Navigation

greetings everyone!

this is my first time trying to join this javascript
community.

Well then, now I'm telling about my miss-understanding
of this keywords of javascript here...

here's the html
Code:

<fieldset > <legend>Attachment</legend>
            <table id="attachment" style="height: 50px;" width="200" border="0">
                <th width="19%">Title</th>
                <th width="26%">File</th>
                <th width="41%">Description</th>
                <th width="6%">Upload</th>
                <th width="6%">More File</th>
                <tr>
                    <td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
                    <td><input name="filepath" type="file" size="33"></td>
                    <td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
                    <td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
                    <td><div align="center">
                            <input onclick="addMoreFile()" type="button" value="+">
                        </div></td>
                </tr>
            </table>
            <!-- end Attachment --> </fieldset>

the aim is that the upload button would eventually changed into image
and then changed back to a link.
That one is already done here's the javascript

Code:

var attRow;

function upload(obj){

	// obtain the table pointer
	var attTable = document.getElementById('attachment');
	
	// post file into the jsp file
	
	// changing the image
	// get parent pointer of this element
	var par = obj.parentNode;
	
	var loImage = document.createElement('img');
	loImage.setAttribute('src', 'images/loading1.gif');
	
	par.innerHTML = '';
	par.appendChild(loImage);
		
	// create the removal link
	var text = document.createTextNode('remove');
	
	var liRem = document.createElement('a');
	liRem.setAttribute('href','javascript:removeFile(this)');
	liRem.appendChild(text);
	
	par.innerHTML = '';
	par.appendChild(liRem);
	
}

function removeFile(obj){
	
	// post fileid 
	
	// change the image
	
}

function addMoreFile(){
	
	// create fully file upload row
	// consist of two text elements, file element, and 1 button.  
	var nFileTitle = document.createElement('input');
	nFileTitle.setAttribute('name','title');
	nFileTitle.setAttribute('type','text');
	nFileTitle.setAttribute('size', '33');
	nFileTitle.setAttribute('value','- none -');
	nFileTitle.setAttribute('maxlength','50');
	
	var nFilePath = document.createElement('input');
	nFilePath.setAttribute('name', 'filepath');
	nFilePath.setAttribute('type', 'file');
	nFilePath.setAttribute('size', '33');
	
	var nDesc = document.createElement('input');
	nDesc.setAttribute('name', 'description');
	nDesc.setAttribute('type', 'text');
	nDesc.setAttribute('value','- none -');
	nDesc.setAttribute('size', '60');
	nDesc.setAttribute('maxlength', '200');
	
	
	var nUpButton = document.createElement('input');
	nUpButton.setAttribute('name', 'upload');
	nUpButton.setAttribute('type', 'button');
	nUpButton.setAttribute('value', ' Upload ');
	nUpButton.setAttribute('onclick', 'upload(this)');
	
	// empty element
	var ksg = document.createTextNode(' ');
	
	// obtain the table pointer
	var attTable = document.getElementById('attachment');
	attRow = attTable.rows.length;
	alert(attRow);
	
	var nextRow = attTable.insertRow(attRow);
	var ceL = nextRow.insertCell(0);
	
	ceL.appendChild(nFileTitle);
	
	ceL = nextRow.insertCell(1);
	
	ceL.appendChild(nFilePath);
	
	ceL = nextRow.insertCell(2);
	
	ceL.appendChild(nDesc);
	
	ceL = nextRow.insertCell(3);
	
	ceL.appendChild(nUpButton);
	
	ceL = nextRow.insertCell(4);
	
	ceL.appendChild(ksg);
	
}

the problem arise when I try to use the removeFile() function using this keywords.
into these;

Code:

function removeFile(obj){
	
	// post fileid 
	
	// change the image back
	// get parent pointer of this element
	var par = obj.parentNode;
	
	var loImage = document.createElement('img');
	loImage.setAttribute('src', 'images/loading1.gif');

	
}

I try to apply the same approach as the upload() function.
But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed?

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?

Thanks for your time.

Hi all,

I have added the Javascript Fancy Box to my each of the main images of site, when these main images are selected the fancy box works fine but for some reason all my other anchors when selected try to use this fancybox aswell?

I understand that the source of my problems come from this peice of code:

Code:

<script type="text/javascript">
				$(document).ready(function() {
				$("a").fancybox();
			});
	</script>

but how do I alter it so its only the main images that are presented in the box?

My site is www.kylehouston.com

Also how do I remove the black background used when the fancy box opens?

Thanks loads in advance!!

Kyle

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.

Any help would be much appreciated! what is wrong with the following?

<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.

Thanks for any help in advance.

------------------------

The Blue Dot pays top dollar for your used cell phones.

Hi,

I have a series of images, anchored linked together to simulate a tour. I decided it would be better if rather than clicking it was like a smooth simulation so i added onmousever to the anchor links. this was a smooth transistion but entirely too fast.

is there a way with javascript, to slow down the onmouseover events? i have the images on the same page, just shoved down the page by using pagebreak html, so that they load when the page loads and therefore don't slow down the effect. (they are large images). i can't use the script that smoothly scrolls between anchor links, because it scrolls down the page to the next image, which ruins the effect. the images are increasingly larger pictures of the same thing, so the effect is somewhat like moving thru 3d space.

i need the onmouseover to FIRE but move slower than normal onmouseover before firing again. repeat.

here's an example
http://www.thelivingmoon.com/undomie...rmouse.html#22

i mean the entire sequence is done before the person even realizes what just happened

Hopefully this is a simple problem with a simple solution but I cannot find it as of yet. Here is an example: The following is a link that goes nowhere, it has a mouseover listener function registered. The function works in firefox but not IE. I have also tried to 'attachEvent' for IE instead of 'addEvent' but this too does nothing. Is it possible to attach a mouseover to an anchor tag in ie or am I wasting my time?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
	window.onload = function(){
		document.getElementById('test').addEventListener('mouseover',function(e){ alert("mouseover"); }, false);
	}
</script>
</head>
<body>
<a href="#" id="test">mouseover</a>
</body>
</html>

-Jon

Hey,

I was wondering if it is possible to make an image change whenever an anchorpoint on my page reaches the center or the side of the screen...

Thanks for your help!

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: Code:

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 ) );" />
	</td>
</tr>';

And this is the alert: PHP Code:
echo vmCommonHTML::scriptTag('', "function confirm( form ) {
        form.task.value='confirm_text'; 
        alert('Your text was successfully attached.');
        return true;
        
}" ); 


How can I prevent the page from returning to the top after the user submits text?

Thank you,
Charlotte

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:

http://www.gooplusplus.com/external_wx._js

Code:

// This javascript file is normally dynamically CRON generated
// but for this test, we will just use static values.
document.write(''+
'<a href="http://www.gooplusplus.com/g5.php?p=X&s=box#FAKE-WEATHER-SITE">'+
'<div class="wxbox">    <img class="wximg" alt="Clear" title="Clear"'+
' src="http://newcityvegas.com/pics/nightmoon.png" />    '+
' <div class="wxtemp" title="Temperatu  73&deg;F (23&deg;C)">73&deg;F</div>'+    
' <div class="wxvis" title="Visibility: 10 miles">10 miles</div>'+    
' <div class="wxother"'+ 
' title="Wind: Calm, Pressu  1008 hPa (29.76 in Hg), Humidity: 47%">'+
'Wind: Calm<br />Pressu  29.76 in<br />Humidity: 47%'+
'</div></div>'+
'</a>');

I tried to change the (first and only) HREF URL to a NULL value like this:

document.getElementsByTagName('a')[0] = null;

It did not work and I have not figured out an alternate method. My working test page is he

http://www.newcityvegas.com/weatherbox.html with source code below. Any suggestions?

Code:

<html><head>
<link rel="STYLESHEET" type="text/css" href="weatherbox.css">
</head><body>

<script type="text/javascript" 
        src="http://www.gooplusplus.com/external_wx._js"></script>

       
<div style="position:absolute;top:150px;left:0px;margin-left:20px">
<script type="text/javascript">
{
// trying to reassign HREF url
var firstHREF;
var newURL='http://intellicast.com/Local/Weather.aspx?location=USNV0049#subnav';

firstHREF = document.getElementsByTagName('a')[0];

document.write("<font color=red>document.getElementsByTagName\('a'\)\[0\] \=\= </font>");
document.write(firstHREF);
document.write("<br><br>");

document.write("<font color=red>Try to change HREF URL value to NULL \=\= </font>");
  document.getElementsByTagName('a')[0] = null;
  firstHREF = document.getElementsByTagName('a')[0];
document.write(firstHREF);
document.write("<br><br>");

document.write("<font color=red>Try to set HREF URL value to NEW URL \=\= </font>");
  document.getElementsByTagName('a')[0] = newURL;
  firstHREF = document.getElementsByTagName('a')[0];
document.write(firstHREF);
document.write("<br><br>");

}
</script>        

</div></body></html>

Hey guys,

In a previous post, while trying to get help, I was able to figure out a solution to using js to force a specific anchor call to jump after the page completely loads. The reason I am doing this is because the page I am linking to with anchors takes a long time to load and a standard browser anchor link sometimes does not work 100%. With that said, I would now like to make the script I wrote universal to get ANY anchor param in the url and jump to that spot on the page. Right now it's coded to just look for "#anchor". I want to re-code it so it will look for "#" + "anyAnchorName".


Page A:
Code:

<a href="pageB.html#anchor">Click</a>

Page B:
Code:

<script type="text/javascript">
function load() {
	var urllocation = location.href;
	if(urllocation.indexOf("#anchor") > -1){
		window.location.hash="anchor"; 
	} else {
	return false;
	}
}
</script>


<body onload="load()">

Thanks in advance!

Hello all,

I needs some help. I currently have a script to jump to an anchor tag when the page loads:

Code:

<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.


Can anyone please help?

Hello Everyone!!!

I have a question, and any advise or help would be greatly appreciated.

I know that ANCHORS situated on a page may be retrieved from another page using the method [a href="faq.html#here"].

How would I retrieve an ANCHOR within an IFRAME from another page.

Below are my codes.

Thank you all in advance,

mbay

--

[Help Page]

<html><body><head><title>Help</title></head><table><tr><td>Below I will show an example of html. For those of you who don't know what HTML is, click <a href="faq_iframe.html#whatis"> here</a></td></tr><tr><td>Below I will show an example of tables. For those of you who don't know what tables are, click <a href="faq_iframe.html#table"> here</a></td></tr><tr><td>Below I will show an example of a hyperlink. For those of you who don't know what HYPERLINK is, click <a href="faq_iframe.html#hyper"> here</a></td></tr></table></body></html>

--

[FAQ]

<html><body><head><title>FAQ</title>
<script language="javascript">
<!-- Hide the script from old browsers --
function surfto(form) {
var myindex=form.dest.selectedIndex
var passed = form.dest.options[myindex].value
var acomma = passed.indexOf(",")
var chars = passed.length
var filename = passed.substring(0,acomma)
var where = passed.substring(acomma+1,chars)
if(filename != "") {window.open(filename, rel="nofollow" target=where)};
}
//-->
</script>
</head><table><tr><td><form name="myform"><select class="pulldown" name="dest" size="1"><option>Select An Option</option><option value="faq_iframe.html#whatis,FAQ">What is HTML</option><option value="faq_iframe.html#table,FAQ">What are tables?</option><option value="faq_iframe.html#hyper,FAQ">What are hyperlinks?</option></select>&nbsp;<input type="button" value="GO!" onclick="surfto(this.form)"></form></td></tr><tr><td><IFRAME SRC="faq_iframe.html" Title="FAQ" SCROLLING="auto" NAME="FAQ" WIDTH="200" HEIGHT="200" ALIGN="center" FRAMEBORDER="no" style="border:15px ridge #0066FF"></IFRAME></td></tr></table></body></html>

--

[FAQ IFRAME]

<html><body><head><title>FAQ IFRAME</title></head><table><tr><td><font size="7">Welcome to the FAQ SECTION</font></td></tr><tr><td><a name="whatis"><b>What is Html?</b></a></td></tr><tr><td>HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now. </td></tr><tr><td><a name="table"><b>What are tables?</b></a></td></tr><tr><td>Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.
</td></tr><tr><td><a name="hyper"><b>What are hyperlinks?</b></a></td></tr><tr><td>Hyperlinks are what connect the world wide web, without them we would get nowhere without knowing the exact URL (Universal Resource Locater) of the document we are looking for. Hyperlinks or more commonly just called "links" can do many things, but they always call for an action. A link could open your email client, it can move you to different pages or it can move you to different spots within the same document.
</td></tr></table></body></html>

for an anchor object, it is ok to reference by index. But when referenced by name, it seems unavailable in IE8 (not sure abt other IE version). I tried FF, it works well. So is it an IE bug or something?

Code:

<a name="thisAnchor">HERE</a>
<script language="javascript" type="text/javascript">
alert(document.anchors[0].nodeType)   // no problem in IE and FF
alert(document.anchors["thisAnchor"].nodeType)   // does't work in IE?
</script>

thx in advance

Im using an anchor tag with a class specified.
When i click the anchor tag which i have displayed using C# it opens as a popup with background disabled.
But when i clikc the anchor tag which i displayed using javascript it redirects to the url mentioned and does not open as a popup.

C# Code
-----------------
Code:

builder.Append("<a href='EditLevelValues.aspx?levelId=" + levelId + "&amp;levelValueId=" + levelValueId + "&amp;levelName=" + levelName + "&amp;levelValueName=" + levelValueName + "&amp;levelValueDescription="+levelValueDescription+"&amp;placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=300&amp;width=500&amp;modal=true&amp;'  class='thickbox obox'>");

trLevels.InnerHtml = builder.ToString();

JAVASCRIPT CODE
-------------------------
Code:

strLevelValues += "<a href='EditLevelValues.aspx?levelValueName=" + lvlValueName + "&amp;levelId="+lvlId+"&amp;levelValueId=" + lvlValueId + "&amp;levelValueDescription="+lvlValueDescription+"&amp;levelName=Projects&amp;placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=300&amp;width=500&amp;modal=true&amp;' class='thickbox obox'>";

trProjLevel[0].innerHTML = strLevelValues;

Hi all

Just curious how I might be able to target an anchor class with jQuery.

For example,

If my anchor class is:

#nav a.activeSlide {
}

How can I target it for a fadeTo() ?

Not sure of the syntax. Tried variations of:

$('#nav a.activeSlide').fadeTo(1000,.5);

To no avail.

Thanks for your help.