JavaScript - Change Anchor Href Url
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> Similar TutorialsHey guys, I'm using a script that has the back-end functionality mashed up so I can't change it. An image with a link around it hides behind this: $RateUserThumbnailLink$ And i'd like to disable the link somehow as the owner wants money for the edit which is ridiculous. Can anyone figure out a way of disabling the link it generates? I have a page with textarea where user can enter html code for link exchange I need to verify whether the code entered contains url in anchor's href tag having same url as that of reciprocal link how can i do this Hello! I'm currently working on trying to target an anchor based on what the contents of their 'title' attribute is, then apply a href to that anchor. Here is what I have so far Code: function(j){ $meh = $('a#mapThisLocation'); if ($meh.attr('title' == '192-dodge')){ $meh.attr('href', 'http://www.google.com') } }; the current html of that anchor when the page loads follows. Code: <a id="mapThisLocation" title="192-dodge"> any thoughts? Hello, So I have two pieces of Javascript attached to my open/close text boxes. One for the visibility function: Code: <script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script> The other for changinging the image to reflect the text box's status (open of closed): Code: <script type="text/javascript"> var ImgPath='../images/portfolio/'; function changeImage (id) { var tab = document.getElementById(id); if (tab.src.match('open.png')) { tab.src = ImgPath + 'close.png'; } else { tab.src = ImgPath + 'open.png'; } } </script> The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position I would like it to stop changing the page position onclick. Any help would be much appreciated! Hello, I am just creating a blog (with blogspot) and the basis is the Lockheart template: http://lockheart-dzignine.blogspot.co.uk/ Problem: I want the thumbnails on the main page to link to the post instead of opening in the shadowbox. I have no clue of javascript, so I hope someone can help me. I think I found the spot where to change it (see bold below), but I need to know what to type in there... How are the BlogPosts named in Blogspot? This is how the Javascript looks like: ______________________________________________ <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 400; summary_img = 430; img_thumb_height = 150; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<div class="crop"><a href="'+img[0].src+'"><img src="'+img[0].src+'" width="270px;" /></a></div>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> _________________________________ Thanks for your help. Hi guys I have a little problem. I have 2 textfields and I need to change a link href based on whatever is in those textfields. The link has to be in this format: Code: <a class="display" href="test.php?test1=textfield1&test2=textfield2">test</a> The reason for this is I need to launch fancybox and as far as im aware this is the best way to call it. So what im hoping is when I add type something in textfield1 this will be reflected in the url. And same for textfield2. I know this can be done easily if I submit the page but I dont want that. Hopefully some javascript/ajax can help me out? I hope im being clear but let me know if im not. Thanks so much! Hi 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! Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript"> if (location.href.match(/folder/)) { document.getElementById("div-layer").style.display="block"; } </script> This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? 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 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. 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? 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> 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. 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! 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 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 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? 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 |