JavaScript - Scroll To Hash/anchor Problem
I am trying to write a function that will dynamicly add an anchor, and then scroll to it, then remove the anchor. The script is adding the anchor, and changing the hash, but no scrolling is happening, (IE7)
Any idea whats wrong? Code: function set_anchor( obj ){ name = 'anchor_'+Math.floor(Math.random()*1111); new_anchor = document.createElement('A'); new_anchor.name = name; new_anchor.href = '#'+name; new_anchor.appendChild( document.createTextNode(' ') ); obj.appendChild( new_anchor ); window.location.hash = name; new_anchor.parentNode.removeChild( new_anchor ); } 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! /** The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH <div id="gallery-menu"> <?php foreach ($galleries as $gallery) : ?> <a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?> <?php endforeach ?> </div> <?php foreach ($galleries as $gallery): ?> <div id="<?= $gallery['gallery']['id'] ?>" class="gallery"> <div class="slider" style="width; 100%; height: 100%;"> <ul> <?php foreach ($gallery['images'] as $image): ?> <li class="galleries-container"> <img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" /> </li> <?php endforeach; ?> </ul> </div> </div> <?php endforeach; ?> // javascript // function showGallery(galleryId) { ????!?!?!?!?! } I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame? please run the code, type any text from the paragraph of text and click serach button. see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe] code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script language="javascript" type="text/javascript"> var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text."; var iframe; var id; var doc; var index; var highlightStartTag = "<span style='color:#EE7A03'>"; var highlightEndTag = "</span>"; var wrong_word = "speltext"; var afterHighlightText; var newText; var start = 0; function highlight() { iframe = document.getElementById('frame1'); doc = iframe.document; if (iframe.contentDocument) doc = iframe.contentDocument; else if (iframe.contentWindow) doc = iframe.contentWindow.document; } function highlight1() { newText = html; var tid = document.getElementById('TextBox1'); var text = tid.value; index = newText.indexOf(text); if (index >= start) { var length = 0; length = index + wrong_word.length; var before_delim = newText.charAt(index - 1); var after_delim = newText.charAt(length); var beforeHighlightText = newText.substring(0, index - 1); afterHighlightText = newText.substring(length + 1, newText.length); newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText; doc.write(newText); } else { alert("Reached End"); } return false; } </script> </head> <body onload="highlight()" > <form id="form1" runat="server"> <div> <div> <b>Sample Text:</b> <br /> Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text. </div> <br /> <b>Type the Text to Search from the above passage, for EG:"powerful"</b> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <br /> <b>Move Scroll button to see hidden highlighted text</b> <iframe id="frame1"></iframe> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Search" OnClientClick="return(highlight1());" /> </div> </form> </body> </html> Thanks, Lakshmi Hi, I have written a magnifier (using both CSS and JavaScript), and it appears to work OK in the four browsers I have tested (IE9, FF3.5.7, Safari 5.1, and Opera 11.51). However, Safari annoyingly puts in scroll bars when you are magnifying the picture. I can get rid of this by making the ctrlDiv offset as hidden, but then this removes the bottom scroll bar completely in all browsers (not really useful if the document is bigger than the browser window). I have read about putting the image as a background image of another element, but cannot for the life of me get this to work at all. Also, the functions to return the absolute position of elements (and mouse pointer) does not work if the document has a margin (i.e. width:1216px;margin:auto) - but I can work around this at the moment. Anyway, the complete code is at http://www.geraldholdsworth.co.uk (it was easier to stick it there and post a link than to post the code here). Cheers, Gerald. Hei! I am trying to use a contact form which appears in a lightbox from : http://www.xul.fr/javascript/lightbox-form.html It is working great but, of course I have a problem. My page is very big and when I want my page to scroll to the point where the form is. I am using window.scrollTo function. the problem is that before scrolling to that point , it automatically scrolls to the coordinates (0,0) and only after that. I am posting my javascript and css code. Thanks for your help ! JAVASCRIPT Code: function gradient(id, level) { var box = document.getElementById(id); box.style.opacity = level; box.style.MozOpacity = level; box.style.KhtmlOpacity = level; box.style.filter = "alpha(opacity=" + level * 100 + ")"; box.style.display="block"; if(id=='boxa') { window.scrollTo(2500,0); } else { window.scrollTo(100,100); } return; } function fadein(id) { var level = 0; while(level <= 1) { setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10); level += 0.01; } } function openbox(formtitle, fadin,boxtitle,boxN) { var box = document.getElementById(boxN); document.getElementById('filter').style.display='block'; //var btitle = document.getElementById(boxtitle); // btitle.innerHTML = formtitle; // var btitle = document.getElementById(boxtitle); // btitle.innerHTML = formtitle; if(fadin) { gradient(boxN, 0); fadein(boxN); } else { box.style.display='block'; } } // Close the lightbox function closebox() { document.getElementById('box').style.display='none'; document.getElementById('filter').style.display='none'; document.getElementById('boxa').style.display='none'; document.getElementById('filter').style.display='none'; } CSS Code: #filter { display: none; position: absolute; top: -500px; left: -500px; width: 7200px; height: 3300px; background-color: #000; z-index:10; opacity:0.5; filter: alpha(opacity=50); } #box { display: none; position: absolute; top: 20%; left: 20%; width: 400px; height: 200px; padding: 48px; margin:0; border: 1px solid black; background-color: white; z-index:101; overflow: none; } #boxtitle { position:absolute; float:center; top:0; left:0; width:496px; height:24px; padding:0; padding-top:4px; left-padding:8px; margin:0; border-bottom:4px solid #3CF; background-color: #09c; color:white; text-align:center; } #boxa { display: none; position: absolute; top: 350px; left: 2950px; width: 700px; height: 200px; padding: 48px; z-index:101; overflow: visible; /* background-image: url(../imagini/tutorial.png); */ background-repeat:no-repeat; } All, If I have the following URL: http://example.com/viewpage.php?id=test Then when I write a hash the URL goes to: http://example.com/viewpage.php?id=test#id=nexttest I have the following code: Code: function redirectHash() { var hash = location.hash; if (hash){ hash = hash.replace('#', ''); location.href = hash; } } </script> Currently this code would try and redirect me to http://example.com/id=nexttest How can I get it so that it keeps everything before the ? and just updates the id part? Thanks in advance. Hey there, I'm looking to have some functionality similar to Twitter in that pages are loaded through ajax depending on the path that is shown in the URI hash. For example: http://twitter.com/#!/BarackObama/following I could just split the string by "/" but I want it to work if you enter a bunch of forward slashes as well, or none at all (only for the first forward slash), here's an example: http://twitter.com/#///////////BarackObama/following http://twitter.com/#BarackObama/following http://twitter.com/#/BarackObama The hash would be broken down into multiple parts, the first parameter (ie. BarackObama) would be the first returned value from the match, the second would be the rest of the parameters. Here are examples of what the hash would be, and what I would like in return. Hash: 1. http://twitter.com/#/BarackObama/following/test 2. http://twitter.com/#///////////BarackObama/following 3. http://twitter.com/#BarackObama Returned value from RegExp match: 1. BarackObama,following/test 2. BarackObama,following 3. BarackObama Hope that makes it pretty clear. I also have this so far, but it returns both a comma separated list, but also the original string. Code: /([0-9A-z]+)\/?(.*)/ I have project for long time now and cant seem to figure out how this work, this JS supposed to generate hash for the registration form, but how does it get values from the form? Form has onSubmit="return( onPreCreateAccountSubmit() );" ---------------------------------------------------------- function onPreCreateAccountSubmit() { doKtSubmit() ; return onPreCreateAccount(); } ---------------------------------------------------------- function doKtSubmit() { var ktlk = 'ktl'; var ktfk = 'ktf'; if (document.forms['createaccount'] && document.forms['createaccount'].elements[ktlk] && document.forms['createaccount'].elements[ktfk]) { KT_preSubmit() ; } return true; } PHP Code: <script type="text/javascript"> var KT_keydownHandler, KT_keypressHandler, KT_logEncoder, KT_lastElement = -1, KT_lastKeyCode = -1, KT_lastModifiers = -1, KT_logElement = 0, KT_stoppedLog, KT_ALLOW_FIELD_TYPES = { password: 1, text: 1 }, KT_ALLOW_FIELD_IDS = { firstname: 1, lastname: 1, email: 1, passwd: 1, passwdagain: 1, identityanswer: 1, secondaryemail: 1, newaccountcaptcha: 1, nickname: 1 }, KT_lastTime, KT_inputs, KT_keyInputs = []; if (window.captureEvents) { Event.KEYPRESS && window.captureEvents(Event.KEYPRESS); Event.KEYDOWN && window.captureEvents(Event.KEYDOWN) } function KT_preSubmit() { if (KT_logEncoder) { if (KT_keydownHandler) { KT_encode(16); KT_initHandlers(KT_inputs) } var a = KT_logEncoder; if (a.d != 0) { EN_encodeGroup(a, a.p); a.p = 0 } } } function KT_encode(a) { a < 0 ? KT_stopLog() : EN_encode(KT_logEncoder, a) } function KT_init(a, c, d) { a = KT_logElement = a; if (!a.value) a.value = "A"; KT_logEncoder = { e: a, p: 0, d: 0 }; KT_initHandlers(d); c = c; if (!c.value) for (d = 1; d < KT_keyInputs.length; d++) c.value += KT_keyInputs[d].name + " " } function KT_event(a, c) { if (KT_logElement.value.length > 3E3) { KT_encode(17); KT_stopLog() } else { var d; d = (new Date).getTime(); var b = d - KT_lastTime; KT_lastTime = d; d = b; b = a.k; var e = a.t, f = a.m; if (!(a.m & 3)) { c |= 2; if (b >= 65 && b <= 90) b = 65; else if (b >= 48 && b <= 57) b = 48; else if (c & 1) if (b >= 97 && b <= 122) b = 65; else if (b == 197 || b == 229) c &= 5; else if (b >= 192 && b <= 687) b = 192; else if (b >= 1536) b = 1536; else if (b >= 912) b = 912; else if (b >= 160) b = 160; else if (b >= 127) c &= 5; else if (b >= 33) b = 59; else c &= 5; else if (b < 48) c &= 5; else if (b < 65) b = 59; else if (b < 96) c &= 5; else if (b < 112) b = 96; else if (b < 187) c &= 5; else b = 59 } if (e != KT_lastElement) { KT_encode(c | 4); KT_encode(e); KT_lastElement = e } else { if (b == KT_lastKeyCode && f == KT_lastModifiers) { KT_encode(c | 8); KT_encode(d); return } KT_lastKeyCode = b; KT_lastModifiers = f; KT_encode(c) } KT_encode(b); KT_encode(f); KT_encode(d) } } function KT_initHandlers(a) { KT_keydownHandler = 0; KT_inputs = a; KT_stoppedLog = 0; var c = 1; for (a = 0; a < KT_inputs.length; a++) { var d = KT_inputs[a]; if (!(!KT_ALLOW_FIELD_TYPES[d.type] || d.id && !KT_ALLOW_FIELD_IDS[d.id.toLowerCase()] || d.offsetHeight == 0)) { d.onkeydown = KT_initKeyHandler; KT_keyInputs[c] = d; d.setAttribute("n", c++) } } } function KT_stopLog() { if (KT_keyInputs) for (var a = 1; a < KT_keyInputs.length; a++) { KT_keyInputs[a].onkeydown = 0; KT_keyInputs[a].onkeypress = 0 } KT_stoppedLog = 1 } function KT_getEventModel(a) { if (!a) { a = window.event; if (typeof a.keyCode == "number") return 1; return 0 } if (typeof a.which == "number") return 3; if (typeof a.keyCode == "number") return 2; if (typeof a.charCode == "number") return 4; return 0 } function KT_initKeyHandler(a) { var c, d = KT_logElement.value.length, b = ""; c = KT_getEventModel(a); switch (c) { case 1: a = window.event; b += "f=window.event;var b=f.keyCode;"; break; case 3: b += "var b=f.which;"; break; case 2: b += "var b=f.keyCode;"; break; case 4: b += "var b=f.charCode;" } KT_keypressHandler = 0; if (c != 0) { if (typeof a.modifiers == "number") b += "var c=f.modifiers;"; else if (typeof a.shiftKey == "boolean") b += "var c=f.shiftKey*4+f.ctrlKey*2+f.altKey;"; else KT_stopLog(); if (a.srcElement) b += "var d=f.srcElement;"; else if (a.target) b += "var d=f.target;"; else KT_stopLog() } else KT_stopLog(); if (!KT_stoppedLog) { b += 'var e=0;if(d.getAttribute("n")){e=d.getAttribute("n")}KT_event({k:b, m:c, t:e},'; KT_keydownHandler = new Function("f", b + "0)"); KT_keypressHandler = new Function("f", b + "1)"); KT_lastTime = (new Date).getTime(); KT_encode(0); KT_encode(KT_lastTime); if (d <= 1) { KT_encode(c); KT_encode(KT_keyInputs.length - 1) } } for (c = 1; c < KT_keyInputs.length; c++) { d = KT_keyInputs[c]; if (KT_keydownHandler) { d.onkeydown = KT_keydownHandler; d.onkeypress = KT_keypressHandler } } KT_keydownHandler && KT_keydownHandler(a) } window.KT_init = KT_init; window.KT_preSubmit = KT_preSubmit; this.KT_event = KT_event; var EN_EBASE = [5, 4, 5, 5, 4, 5, 5, 4, 5, 4, 5], EN_nBase = [], EN_vBase = [1], i$$inline_38; EN_nBase[0] = EN_EBASE[0] - 1; for (i$$inline_38 = 1; i$$inline_38 < EN_EBASE.length; i$$inline_38++) { EN_nBase[i$$inline_38] = EN_EBASE[i$$inline_38] - 1; EN_vBase[i$$inline_38] = EN_vBase[i$$inline_38 - 1] * EN_EBASE[i$$inline_38 - 1] } function EN_encodeGroup(a, c) { var d; for (d = 0; d < 4; d++) { var b = c % 67; a.e.value += "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 *-._".charAt(b); c = (c - b) / 67 } a.d = 0 } function EN_encode(a, c) { function d(g) { b += g * EN_vBase[a.d++]; if (a.d >= EN_EBASE.length) { EN_encodeGroup(a, b); b = 0 } } for (var b = a.p, e = EN_nBase[a.d]; c > 0;) { var f = c % e; c = (c - f) / e; d(f); e = EN_nBase[a.d] } d(e); a.p = b; return a }; </script> Theres also this function function doKtInit() { var ktlk = 'ktl'; var ktfk = 'ktf'; if (document.forms['createaccount'] && document.forms['createaccount'].elements[ktlk] && document.forms['createaccount'].elements[ktfk]) { KT_init(document.forms['createaccount'].elements[ktlk], document.forms['createaccount'].elements[ktfk], document.forms['createaccount'].elements); } return true; } Hi All I'm using the fantastic turtorial here for my site navigation: http://css-tricks.com/6336-dynamic-p...acing-content/ It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition Let me know if you need a link to my project I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded? Script below: Code: $(function() { var newHash = "", $mainContent = $("#right"), $pageWrap = $("#wrap"), baseHeight = 0, $el; $pageWrap.height($pageWrap.height()); baseHeight = $pageWrap.height() - $pageWrap.height(); $("nav").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); return false; }); $(window).bind('hashchange', function(){ newHash = window.location.hash.substring(1); if (newHash) { $mainContent .find("#guts") .fadeOut(200, function() { $mainContent.hide().load(newHash + " #guts", function() { $mainContent.fadeIn(200, function() { $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }); }); $("nav a").removeClass("current"); $("nav a[href="+newHash+"]").addClass("current"); }); }); }; }); $(window).trigger('hashchange'); }); All help is appreciated Thanks in advance Craig Hey I am in need of some help with a hash removal detection code, currently I have everything I need to do what I want but when I click the back button and the hash is removed from the url I need to have a script run to then change the page content. My design looked sort of like this. Code: function detect() { var url = window.location; if(url.indexOf('#') === -1) { // run the code } } But that ran the code every time there wasn't any hash in the url so if a user went to lets say /index.php the page content would keep being re-generated as there isn't any hash, so my question is how can I make it so it only runs only if there has been a hash in the url and then has been removed so like if you went to /index.php and clicked a link that took you to /index.php#tags and then the page content was changed with ajax, then the user clicked the browsers back button to go back to /index.php, the page would still have the tags content on it so that's when I need the function to run to change it back again. If anyone can help with my problem please reply. Thank you - DJCMBear So basically, I have this side bar with a whole bunch of links and I wish to load content into a div directly across from it. The links will be hashes (eg example.com/#foo/bar), then the JavaScript loads the content either into a div and updates a SPAN with the page name. I only have the iFrame version so far, so can someone help me on how to improve this and actually load the content instead of an iFrame? So far I have this code: Code: <script> function goto(url) { if (location.hash != url) { window.location = url; document.getElementById("pgname").innerText = "loading..."; } } function setPage() { var hash = location.hash; if (hash=="#foo") { document.getElementById('pgname').innerHTML = 'Foo'; document.getElementById('pglocation').innerHTML = hash; window.frames['content'].location.href = "blablah/foo.php"; } if (hash=="#foo/bar") { document.getElementById('pgname').innerHTML = 'Foo</b> > <b>Bar'; document.getElementById('pglocation').innerHTML = hash; window.frames['content'].location.href = "doo/moo/23.htm"; } } </script> <body onhashchange="setPage();"> <a href="javascript: goto('#foo')">foo</a><br /> <a href="javascript: goto('#foo/bar')">foobar</a><br /> <a href="javascript: alert(location.hash + ' || ' + location);">Info</a><br /> <a href="javascript: goto(location.hash);">Goto</a><br /><br /> <b><span id="pgname">Home</span></b><br /> example.com/<span id="pglocation"></span><br /> <iframe id="content" src="index.php" /> Having trouble figuring out how to do this...I can get the particular entry by name but I can't randomly select one from the several because it's a string and not a number.... Code: var newOre = 0; var ore = { "iron" : 5, "silver" : 3, "gold" : 2, "platinum" : 1 } var userOre = { "iron" : 0, "silver" : 0, "gold" : 0, "platinum" : 0 } Code: function getAnotherOre () { newOre = ore[Math.floor(Math.random() * ore.length)]; userOre += newOre; } The random() is for an array, tried to use it here and returns 0 every time because the key in the key:value pair is a "string", though if I'm reading it right, it is trying to get a random number based off the length of the table, so why doesn't it do that? Ideally I want it to increment a corresponding hash table of users Ores...so if you randomly get a iron, it adds 5 to the users "iron" entry. I had a for loop, but I only need to randomly generate 1 entry result each time called so do I need to loop through things or can I just randomly get a key:value pair back and append that to the userOre table??????? AM I APPROACHING THIS WRONG FOR WHAT I WANT TO DO? Any ideas or link to documentation? I'm searching..... I can get the individual value of a field manually: console.log("keyName"); which will output the right number, but how do I get a random("keyName") and once I figure that out I probably would append("correspondingName", value) to the other table... Basically, functionally I just want to randomly get one of several values when the function is called. I guess I could make global variables for each type of ore, then just manually increment a random one some other way... This is for a html5 game where when you collide with a "mine" it triggers the function but I want it to randomly give various types of ore instead...Maybe I'm going about it wrong... Maybe it's easier just to declare 10 different global variables (assuming 10 ore types) and randomly give a number 0-10 of each every time the function is called......? What I want is a textbox that the user can enter information into. When they press a key the onkeyup event will simulate a function. All that I can do. The function needs to automatically scroll down the page to the anchor that corresponds to the number the user entered. The web page is a factor finding program. You can enter 2 numbers and it finds all the factors of all the numbers between the 2 you entered. Here is the link: http://factorfinder.tumblr.com/ As you can see, when you try to find factors of numbers a new window opens and there is a search box in the top left. Unfortunately, it doesn't work. If you want to check out the code look at the web page but here is the bit that creates the new window Code: function DisplayFactors(FactorsFound, Input, Maximum, ShowFactors, ShowPrimeFactors){ FactorsWindow = window.open("", "", "location = no, menubar = no, personal = no, scrollbars = yes, status = no, toolbar = no, resizable = no, width = 580%, height = 600%, left = 720%, top = 100%") FactorsWindow.document.write("<div id = 'TheHeader' style = 'position: fixed; left: 0; top: 0; width: 100%; height: 15%; z-index: 2; background-color: white; border-bottom: 3px dashed black;'><table style = 'position: relative; left: 2%; top: 25%; font-size: 24px; font-weight: bolder; text-decoration: underline;'><tr><td>The Factor Finding Window</td></tr></table><table align = 'right' style = 'position: relative; top: -25%;'><tr><td>Search For The Number:</td></tr><tr><td><input type = 'text' id = 'SearchNumber_txt' maxlength = '12' onkeyup = 'opener.Search()'/></td></tr></table></div>") FactorsWindow.document.write("<div id = 'TheBody' style = 'position: absolute; left: 0; top: 20%; width: 100%; height: 80%; z-index: 1; background-color: white;'>") } function Search(){ FactorsWindow.location.hash = "#Factor" + FactorsWindow.document.getElementById("SearchNumber_txt").value //This is the bit I need to change because it currently doesn't work } also, this is the bit where I place the anchors in the array Code: FactorsFound.push("<a name = 'Factor'" + Input2 + "><b>The Factors of " + Input2 + " a </b></a><p style = 'margin: 0, 0, 25px, 0; position:relative; left:20px;'>") Ultimately I need it so that when the onkeyup event is triggered it scrolls down the window to the anchor that corresponds to the number entered. I will validate the numbers entered after I find out how to do it. I mean, If the user enters the number 9 and the Factor Window is only displaying numbers 2 - 6, then I'll add an alert message or something. I'll cross that bridge when I get to it. I couldn't find this anywhere on the internet. 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. 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. 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> 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! 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> 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> |