|
JavaScript - Jump To Anchor Tag Onload
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? Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone 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 need your help guys. I've got a little problem. I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode It works perfectly, it enters the smileycode to the textarea. My problem is... When I say document.getElementById('message').focus() it goes back to where the cursors has last been so before the smileycode. Instead of this, I want the focus to go back after the insertion of the code. I hope it's understandable. And thanks in advance! Right so I have a popup window that when opened in any browser expect of course IE will open perfectly in the centre of the screen. However with IE it decides to jump to the top of the page, then is pushed back down to just show the popup at the bottom of the window. Anyone got any idea how I can stop this? Using IE8. Code: function openPopup_JD(params){
var name = params.name;
var blanket = params.blanket || true;
var effect = params.effect || "fade"
var afterOpen = params.afterOpen || "";
var width = document.getElementById(name).style.width;
var height = document.getElementById(name).style.height;
width = width.slice(0, -2);
height = height.slice(0, -2);
width = width * 1;
height = height * 1;
document.getElementById(name).style.left = getLeft_JD(width) + "px";
document.getElementById(name).style.top = getTop_JD(height) + "px";
//Create blanket if it doesn't already exist.
if(!document.getElementById('blanket')){
var popupBlanket = document.createElement("div");
popupBlanket.id = 'blanket';
popupBlanket.style.display = "none";
popupBlanket.style.opacity = 0;
popupBlanket.style.filter = 'alpha(opacity = 0)';
popupBlanket.style.backgroundColor = "#000";
popupBlanket.style.position = "absolute";
popupBlanket.style.zIndex = 9998;
popupBlanket.style.top = "0px";
popupBlanket.style.left = "0px";
popupBlanket.style.width = "100%";
popupBlanket.style.height = getBlanketHeight()+"px";
document.body.appendChild(popupBlanket);
}
switch(effect){
//-----------------------------------
//FADE IN
//-----------------------------------
case "fade":
if(blanket == true){
animate_JD({
objects: 'blanket |'+name,
properties: "opacity |opacity",
start: "0",
end: "0.75 |1",
inerval: "20 |20",
frames: "15 |20",
effect: "SFS",
wait: "0 |-1",
onStart: "toggle('blanket') |toggle('"+name+"')",
onComplete: " |"+afterOpen
});
}else{
animate_JD({
objects: ''+name,
properties: "opacity",
start: "0",
end: "1",
interval: "20",
frames: "6",
effect: "SFS",
wait: "0",
onStart: "toggle('"+name+"')",
onComplete: ""+afterOpen
});
}
break;
Not all of the function is shown because below this are only other effects I am using a Jump Menu: Code: function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_jumpMenuGo(selName,targ,restore){ //v3.0
var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
Code: <form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)">
<!--webbot bot="Validation" b-disallow-first-item="TRUE" --><select name="menu" class="TextArea" onchange="MM_jumpMenu('self',this,0)">
<option value="javascript:myVoid()" selected>Choose One
</option>
<option value="1.html">One</option>
<option value="2.html">Two</option>
</select>
</form>
Is there some way to make such a jump menu observe the history, so that going back will go back to the page containing the form? Hi all, I'm having problems with a javascript jump menu that uses two select form elements, where the first one enables the second one if the right option is picked. I've not much knowledge of javascript so I've basically combined two separate functions, but at the moment only the second menu redirects the user - I need the first menu to do this as well if the second option is selected. Any ideas?! Here's the code - many thanks in advance if you can help: Code: <html>
<head>
<script type="text/javascript">
function chooseSelect(selectOption) {
document.getElementById('shape').disabled = (selectOption!=1);
}
function jumpMenu(select) {
var i = select.selectedIndex;
var selection = select.options[i].value;
var url;
if (i === 0) {
alert("Please select an option");
} else {
url = selection;
location.href = url;
}
}
</script>
</head>
<body>
<form action="" method="get">
<select name="color" id="color" onChange="chooseSelect(this.value);">
<option value="">- Choose Color -</option>
<option value="red.html">Red</option>
<option value="1">Shape</option>
</select><br />
<select name="shape" id="shape" disabled="disabled">
<option value="">- Choose Shape-</option>
<option value="square.html">Square</option>
<option value="circle.html">Circle</option>
<option value="rectangle.html">Rectangle</option>
</select><br />
<br />
<input type="button" value="GO" onclick="jumpMenu(this.form.shape);">
</form>
</body>
</html>
Hello I need some help with Google Maps please. Im using Google Maps API V3. So I can create a simple map but what I need is to have two markers (which are quite far apart) on the map. For example these markers are called 'Marker 1' and 'Marker 2'. Below the map I would have 2 links called for example 'Marker 1 link' and 'Marker 2 link'. When the map loads, 'Marker 1' is visible and centered. Now to move to 'Marker 2' on the map, I would click the link under the map. And vice versa. A good example is http://arts.brighton.ac.uk/contact-u...aculty-of-arts I tried but failed when I tried this guys answer on this website: http://stackoverflow.com/questions/2...utside-the-map Any help to create this is greatly appreciated! Hi all, I am having trouble with the Form Validation I have on my wifes website...everything is working how it should it's just when you hit the submit button the screen jumps up about an inch or so putting the error message out of view....Is there anything that can be done to stop... Thanks all. if i have a large script built multi-select-list-box, is there a way within javascript to onClick of a hyperlink, jump-to the line within the select box that corresponds to the value clicked?
Hi, I want my page to jump to a different page based on data collected in the form input fields. I can jump to a new page alright, using the following javascript: 1. javascript code in form_a.html document.forms["form_A"].action = "page_x.html"l; document.forms["form_A"].submit(); 2. document.forms[0].action = "page_x.html"l; 3. window.locaton = "page_x.html"; 4. window.location.href = "page_x.html"; The problem is, I can see the new page was jumped to, but immediately it return back to the page that trigger the jump. Any idea? I need to finish the project before Christmas. Any help is greatly appreciated! Jeff I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?
Hi, I'm looking to create a box that shows to IE6 users or lower, to tell them that my site does not render properly in the IE6 browser and that they should therefore upgrade to a newer version or alternative browser. Basically I would put whatever the code to show the box into these tags: Code: <!--[if lte IE 6]> INSERT HERE <![endif]--> to enable it to only appear to IE6 or below users. Preferably when this box appeared, it would be nice if it could fade the page behind it. Does anyone have a script for this or know of a tutorial I could use? The box would also need buttons at the bottom that said "Ok, upgrade me" (this would load another window with links to alternative browsers) or "No thanks" (or "Close") Thanks in advance. Am I saying the onload event wrong or something? PHP Code: <input type="button" value="Mouse" onload="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" /> Other events like onmouseover and onClick work I have this code: Code: <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c7b22470e521876"></script> I want this JavaScript code above to be executed when all My page finished loading (maybe by using JavaScript onload) So how can I do that? Hi all I would like the img src to be populated after page load I'm not sure this is doing what I would like it to do. I have done this. (tag shortened for post) Code: <img src="" id="testImg2" onload="(this.src='images/USA.jpg')"/> Is this populating the img src after page load or when the img tag is loaded? LT Hi I am in need of some help with my Javascript code, basicly I am creating a Javascript SDK for my site and I am trying to make is a little like jQuery in which you check if the document is ready such as $('document').ready(function(){}); which my SDK looks like this $.functions.push(function(){}); the only thing is when using it like this each function push gets added to the functions array which i then need to use on the documents load. With my SDK I use $.onload.ready();, which should act as window.onload and run all the functions with-in the array but I cant seem to get it to work. This is what I currently have. Code: $.functions =new Array();
$.onload = {};
$.onload.ready = function(){
if(window.onload !== undefined && window.onload != '')
{
window.onload=function(){for(var i=0;i<$.functions.length;i++){$.functions[i];}};
}
};
Can anyone help me out? Thank You DJCMBear EDIT: Don't worry I have found the solution and it works! This is the code for the onload. Code: $.onloadAdd = function(func)
{
if(typeof onload == 'function')
{
var oldonload = onload;
onload = function()
{
oldonload();
func();
}
}
else
{
onload = func;
}
};
$.onload = function(){
if(window.onload !== undefined && window.onload != '')
{
for(var i=0;i<arguments.length;i++)
{
$.onloadAdd(arguments[i]);
}
}
};
And this is the onload functions that get added to the list to be run. Code: $.onload(function(){if($.Class('Listener')){for(i=0;i<$.Class('Listener').length;i++){$.Class('Listener')[i].onclick=function(){alert($.getInfo(this).innerHTML);};}}},function(){if($.Class('Add')){for(i=0;i<$.Class('Add').length;i++){$.Class('Add')[i].innerHTML=$.Class('Add')[i].innerHTML+'...';}}});
Hi there, I'm trying to port a pretty old javascript to a brand new Joomla website. I didn't create the original site that the javascript comes from, and haven't been able to locate it in my Google searches either. I'm assuming it's quite old. That being said, it seems to *want* to load up correctly. Since this is in an individual Joomla article, I didn't want to set the template to always try and load this script from <body>, so I'd found what I thought might be a workaround by calling it from another javascript within the article. It *looks* like it starts to want to call the required images, but then they disappear. I am not a javascript programmer in any way. I really don't do more than copy & paste various scripts of that nature. So I'm a little flummoxed here. Any help you can afford will be appreciated. Here is the development page: Mixes Thanks in advance. ~Laura while decomplicating things I putted into single jsp code like that: Code: <script language="javascript" src="../js/A.js" type="text/javascript">
</script>
<script language="javascript" src="../js/B.js" type="text/javascript">
</script>
The prob here is that both A and B contains window.onload, and only the one from A gets executed. All things that come to my mind is back to complications, loosing track of things. Any advice ? Hi, I am trying to give the user the option of music on my homepage (b/c we've all found it annoying at times...perhaps most times). I have found an "onload" option for the body tag on dotnetspider.com, but it doesn't seem to be working for me. Please take a look and let me know of any improvements I could make. Thx Code: <body onload="loadMusic()">
<p>
<script type="text/javascript"><!--
function loadMusic()
{
var r=confirm("Would you like a background tune?");
if (r==true)
{
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
<object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640">
<param name="autoplay" value="false" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav" autoplay="true" loop="true" controller="true"></embed>
</object>
}
else
{
alert("If you change your mind reload the page to choose again.");
// --></script>
Hi all, I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load: Code: function toggleDiv (divid) {
if (document.getElementById (divid).style.display == 'none') {
document.getElementById (divid).style.display = 'block';
} else {
document.getElementById (divid).style.display = 'none';
}
}
Code: <a href="javascript:;" class="showmorelink" onmousedown="toggleDiv('checks');">Safeguarding</a>
Can anyone advise? Many thanks, Greens85 |
|||||||