|
JavaScript - How To Add An Anchor's Text On The Fly
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. Similar TutorialsHi guys, 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: http://www.mySiteOfFun.com/index.html#page=news.html; 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? Just not sure how to progress really, and any help would be greatly appreciated! This code: when you click a link it jumps to an anchor point on the page and scrolls there smoothly. I was wondering how I get the same effect if I want the link to jump to another page? A normal anchor point on another page would set the href to, for instance, 'index.html#contact' but it won't work in this case as the javascript isn't reading the '#'. Any ideas?? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('contact')">Go to anchor 1</a></li>
</ul>
Hey guys I am currently trying to set up a set of <li>'s to act as links just so: Code: <li onmouseover="location='http://www.google.com'">Text</li> Obviously this works fine, however what I need it to do is load in an iframe rather than reloading the browser. So the question is, what code do I need to get target data in to the js? Thanks! Please could anyone offer any advice, in simple terms on how to add anchor points to a page in order to create a smooth scroll element such as this one: http://www.kryogenix.org/code/browser/smoothscroll/#top Any help would be much appreciated. 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 found a simple script from the net that redirects the user to another page after timeout. I want to redirect the user to an anchor (an anchor called #done) in the SAME page, but i couldn't do it. Here's the code. Any help will be appreciated. Thank you. Code: <form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>
<script>
<!--
/*
*/
//change below target URL to your own
var targetURL="http://myurl.com"
// tried #done/samepage.htm as also samepage.htm/#done
//change the second to start counting down from
var countdownfrom=6
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>
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°F (23°C)">73°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>
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 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. 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 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 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! 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? 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! 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 Sorry I am new to JavaScript. Says that a.html has two same anchor links (<a href="b.html">b</a>). The anchor links are uneditable but we could add JavaScript to the a.html. Except for dynamic adding onclick event, any other ways could get to know which anchor link being clicked? 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> <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 OK, 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? Code: <a href="/fmstream/listen.asx" onclick="window.open(this.href,'Listen','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=400,height=400,status'); return false" onClick="pageTracker._trackEvent('Stream','Listen_Button','Stream_Live');">
<img src="/images/filecabinet/folder1/listen1.png" alt="listen1"></a>
I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action. Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible. Thanks. |
|||||||