|
JavaScript - Post An Anchor Within A Page To Move Down The Page?
hi,
I have a large list of UK towns, see he http://www.mypubspace.com/mobile/index.php#towns I would like to add an a-z link so that when a user clicks on say 'W' they are then presented with the towns that begin with 'W' the problem is, is that I have to keep #towns in the URL as it's a web application Can anyone help? thanks Similar TutorialsThis 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>
Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
shiftPix(pixArray[j], counter, j);
}
setTimeout("display()",3000);
}
// -->
</script>
</head>
<body onload="display();">
<div id="Picture1" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" width="90" height="120" />
</div>
<div id="Picture2" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" width="90" height="120" />
</div>
<div id="Picture3" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" width="90" height="120" />
</div>
<div id="Picture4" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" width="90" height="120" />
</div>
<div id="Picture5" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" width="90" height="120" />
</div>
<div id="Picture6" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("Picture1");
pixArray[1] = document.getElementById("Picture2");
pixArray[2] = document.getElementById("Picture3");
pixArray[3] = document.getElementById("Picture4");
pixArray[4] = document.getElementById("Picture5");
pixArray[5] = document.getElementById("Picture6");
display();
// -->
</script>
</body>
</html>
Thanks in advance!! 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> . . . .Within my website (so I control all pages) I often make anchor-links from one page (call it currentpage.htm) to an anchor-link in another page (newpage.htm). Imagine that newpage.htm has two anchor-locations, one near the page-beginning (#high) and one near the page-end (#low). . . . .There is a problem when linking to newpage.htm#low (or an inside-the-page link to #low) because the page-end goes to the bottom of the browser window, and the location (#low) appears somewhere in the vertical middle of the browser window, so it's difficult for a user to know where they should begin reading, and they get confused. . . . .A low-tech solution is to "make the page longer" by adding space to the page-bottom with a series of <p> </p>, or with a tall blank spacer-gif. But this implies something false, it tricks a user into thinking the page is longer than it is, so they may think "this page is too long, I don't want to read that much" and they go away, or they "skim" when they could read more slowly. . . . .Is there a solution using javascript? . . . .If yes, I assume the javascript must be located within newpage.htm, because a command within currentpage.htm can't "tell another page" what to do. Is this correct? I'm not confident because I'm a novice with using javascript. . . . .So is there a way to say, within newpage.htm, "make the page longer by adding a blank spacer-gif to the page-end when an incoming link goes to newpage.htm#low" but to have this be temporary, so when newpage.htm is opened the next time normally (with a link to newpage.htm or to newpage.htm#high) the spacer-gif is gone? CraigR Hi I have created a very very simple javascript that displays random text quotes. It is in Greek but here it is anyway: http://gerogriniaris.blogspot.com It is in blogger and shows up as a gadget. My problem is that i need to make it reload by a button and at the same time go to the top of this gadget (using an anchor). The reason I want to do this is that I have been sharing this with other bloggers, but if they don't put it on top of their page, as soon as they press the button that reloads the page, they are in the top of the page and they would have to scroll down to find the quote. I have tried to use window.location.reload with window.location.hash. It works in Firefox, but not in IE. I have been trying something like that: Code: <input type="button" value="Click to refresh" style="width: 130px" onclick="window.location.hash='#something';window.location.reload()" /> As i said, this works with Firefox, but not with IE9 Also, I can't define urls beforehand because I want other people to be able to use it to their own blog or website. I suppose this is a noob question, but I have been trying to find a solution and couldn't. Please be kind... Any ideas? 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! All, I have the following code: Code: $(function() {
$("#check_login").click(function() {
event.preventDefault();
var $email = $("#login_email").val();
var $password = $("#login_password").val();
$.post("check.php", {email: $email, password: $password}, function(result) {
if(result=="Success"){
parent.$.fancybox.close();
window.location.replace("index.php");
}else{
$("#login_check").html(result);
$("#login_email").val('');
$("#login_password").val('');
}
});
});
});
I'm basically checking a user login. If the login is successful I'd like to close the Fancybox. This part works fine. I'm using an iFrame from Fancybox. If I don't have this part: Code: parent.$.fancybox.close(); It will reload the index page in my iFrame. How can I refresh my other page from the iFrame? Thanks in advance. Hope someone can help. i have this script I found that i think does what i am looking for but i cant seem to get it to work.I think I am just overlooking something. I have a group of radio buttons in a form on a page and i am trying to get the value and image attached to the chosen radio button to pass to another form on another page.here is what i have so far. form 1 page named - giftcards.html Code: <form action="GIFTCERTIFICATES.html" name="giftcardstyle"> <input name="giftcardstocknumber" type="radio" value="BBA - 006"/> <img src="GIFTCARDS/004 BASIC4.jpg" alt="bba-006" style="width: 150px; height: 100px"> form 2 new page named - giftcertificates.html Code: <SCRIPT LANGUAGE="JavaScript" type="text/javascript"><!--
function getParm(string,parm) {
// returns value of parm from string
var startPos = string.indexOf(parm + "=");
if (startPos > -1) {
startPos = startPos + parm.length + 1;
var endPos = string.indexOf("&",startPos);
if (endPos == -1)
endPos = string.length;
return unescape(string.substring(startPos,endPos));
}
return '';
}
var passed = location.search.substring(1);
document.f1.giftcardstocknumber.value = getParm(passed,'giftcardstocknumber');
document.formname.otherfield.value = getParm(passed,'otherfield');
//--></SCRIPT>
<input type="text" name="giftcardstocknumber"/>
<img src="" style="width: 150px; height: 100px"/>
Hello , here is my code(which is not working on my problem) i want to remove anchor tag(href="a") will u please help.... Code: <html>
<head><title>Welcome to DevForum</title></head>
<script language="javascript" type="text/javascript">
function Remove()
{
var anchor = document.getElementsByTagName("a");
var i;
for(i=0;i<anchor.length;i++)
{
var anc=anchor.item(i);
var href=anc.attributes.getNamedItem("href");
if (href.value == "a")
{
anchor.item(i).attributes.getNamedItem("href").value = "";
}
}
}
</script>
<body onload="Remove()">
<h1>Welcome</h1>
<a href="b">b</a>
<a href="a">a</a>
</body>
</html>
Thanks in Advance.... I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script> About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to. When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00. I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top. I appreciate your help. Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya 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 All, Im new to this forum...need some of your help and advice. I have a js code like this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> what it does is that it hide and show a panel by slidint it to the left. But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { var autoTimer = null; autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos }); autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos = -856 }); }, 2000); },1000); $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> But when the panel finished showing the button to open it again doesn't work...any help please..really urgent. thks //Sam Hi there! I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image. Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up. So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position. Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen. Here is an example: http://synaxis.pcriot.com/ When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there. And this does happen on every browser that I have tested, Firefox, IE, and Chrome. So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful. Thank You Here is a link to the original code: http://synaxis.pcriot.com/javascript...ox/glassbox.js And modified code: http://synaxis.pcriot.com/javascript...ox/glassbox.js The modified code is at the very bottom of the script. Original Code: Code: /**
* @public
*/
if ( typeof($) == 'undefined' ) {
$ = function (id) {
return document.getElementById(id);
}
}
Modified Code Code: /**
* @private
*/
var removeElement = function(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
/**
* @private
*/
var getDocHeight = function() {
var db = document.body;
var ddE = document.documentElement;
return Math.max(
db.scrollHeight, db.offsetHeight, db.clientHeight,
ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
);
}
/**
* @public
*/
if ( typeof($) == 'undefined' ) {
$ = function (id) {
return document.getElementById(id);
}
}
On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page? How exactly would i go around doing this? Thankyou Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. Hi there, Im a total newbie and learning html and javascript as I go along, so any help you can give is greatly appreciated! It is possible to perform a find in page search that looks at a specific link, opens the page in a new window and finds the text within that document?? Basically I regularly use an html page in work that has a list of people and their telephone numbers. I want to be able to type in a searchbox on my main page and it open the target page and find the name I am looking for? Is this possible or can you only Find In Page on the same page or another frame? Tearing my hair out........ Thanks Glen Hello Basically I have found and adapted the code: Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#projectscontainer').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in... I want the new content to appear below "#projectscontainer'" Why won't this work? Anyone know? Thanks |
|||||||