|
JavaScript - Hash Transition Navigation - Help Please
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 Similar TutorialsGood day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Hello all.. I am relatively new to javascript. I am using a javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging. Which function should I change for that? Is it parameters in set interval? Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}
.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Script: Code: function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
HTML: Code: <!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
Hey all- I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/) I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions any ideas? Hello good coders! Thanks to the wonderful script provided by coothead he http://www.codingforums.com/showthread.php?t=87036 I was wondering how I could adjust the transition/fade speed between the images in the script? I tried a couple of different ways, but I couldn't get it working. Does anyone know how I can adjust this in a cross-browser compatible way? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#mapImage_holder {
text-align:center;
}
#mapImage {
border:1px solid #000;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var maps=new Array();
maps[0]='dots.gif,#dots';
maps[1]='map.jpg,#blood';
maps[2]='apple0.jpg,#apples';
var c=0;
var speed=1000*10; //set for 10 secs, change to suit needs.
function swapMap() {
obj=document.getElementById('mapImage');
if(c==maps.length) {
c=0;
}
obj.src=maps[c].split(',')[0];
obj.useMap=maps[c].split(',')[1];
c++;
setTimeout('swapMap()',speed);
}
window.onload=swapMap;
//]]>
</script>
</head>
<body>
<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>
<div>
<map id="dots" name="dots">
<area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
<area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
<area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
<area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
<area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
<area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>
<map id="blood" name="blood">
<area coords="40,144,80,171" href="http://www.codingforums.com/" alt="" />
<area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
<area coords="184,144,224,171" href="http://w3c.org/" alt="" />
<area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>
<map id="apples" name="apples">
<area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
<area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
<area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
<area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
<area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
<area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>
</body>
</html>
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; } 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 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 );
}
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. Dear Forum guys, i need a serious help of something i am making a website for a client, and as you can see the picture by clicking on this link http://user3.jabry.com/davidasp/pic.html i've made a navigation bar with javascript and underneath it is a flash swf file however when my mouse is over the navigation bar the drop down sub menu is appearing behind the flash as you can see in the picture. Please... what is wrong ???? why isn't it appearing infornt of the flash file. the code of the page is .... <body> <!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag--> <!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** --> <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="../menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script> <!-- ******** END ALLWEBMENUS CODE FOR menu ******** --> <div id="container"> <div id="header"></div> <div id="navig"><span id="awmAnchor-menu"> </span></div> <div id="nav-submenu" ></div> <div id="mainContent"> <div id="homeflash"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="786" height="200"> <param name="movie" value="../uploads/flash/en-main.swf" /> <param name="quality" value="high" /> <embed src="../uploads/flash/en-main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="786" height="200"></embed> </object> </div> .... and also as you can see in the picture the background is also breaking apart. Please help me guys, i can't figure out why is this happening??? Thank you I'm trying to learn to write javascript myself. So please, don't right anything for me, just steer me in the right direction. The way I have my my navigation set up is when the user clicks on a section of the main nav, the subnav displays beneath the header (see the pic more a visual idea). I want the the subnav for "Services" to be displayed on all pages that are listed under Services. Same thing for everything else on the nav bar. They way it's set up right now, the "about" submenu is displayed on every page. If the user clicks on "services" then that submenu displays. Just in case you need it, I'm posting the code for that. Like I said above, please don't write anything for me, just point me in the right direction. Code: /*Javascript to display Sub Menu */
function showAbout() {
if(subnav.style.display=="none") {
subnav.style.display="block";
services.style.display="none";
contact.style.display="none";;
partners.style.display="none";
}
else subnav.style.display="none";
}
function showServices() {
if(services.style.display=="none"){
services.style.display="block";
subnav.style.display="none";
contact.style.display="none";
partners.style.display="none";
}
else services.style.display="none";
}
function showContact() {
if(contact.style.display=="none"){
contact.style.display="block";
subnav.style.display="none";
services.style.display="none";
partners.style.display="none"
}
else contact.style.display="none";
}
function showPartners() {
if(partners.style.display=="none"){
partners.style.display="block";
subnav.style.display="none";
services.style.display="none";
contact.style.display="none";
}
else partners.style.display="none";
}
This navigation is going to be the death of me, and I think I'm sliding back to noob status.... I've done a navigation, that works just wonderfully. There are three dropdowns in the top row, and one down below. The three on the top populate the one below it. The nav js script goes as follows: Code: var cacheobj=document.dynamiccombo.stage2
function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}
populate(combo1)
The upper three dropdowns are set up like so: Code: <select name="usstage1" size="1" onchange="showDiv(this.value);window.open(this.options[this.selectedIndex].value,'_top');" >
<option selected="selected" value="javascript:populate(combo1)">United States</option>
<option value="javascript:populate(combo2)">Alabama</option>
<option value="javascript:populate(combo3)">Alaska</option>
<option value="javascript:populate(combo4)">Arizona</option>
<option value="javascript:populate(combo5)">Arkansas</option>
<option value="javascript:populate(combo6)">California</option>
etc...
Which populates the bottom dropdown with the locales of that area. Once an option is selected in the bottom dropdown, it goes to the respective page depending on selection. So if you select California from the upper list, the dropdown below populates the list of cities. If you select Los Angeles, it navigates to the LA page. So...none of this is the problem...the problem is, I need it to keep the last selected state of all 4 dropdown boxes as it changes pages... I went with a couple different cookie options and failed miserably. One of them messed it all up by populating the top three boxes with the position of the last selected state of the "city" dropdown. So if I chose LA, it selected from the top 3 boxes the 5th position in their menu and then populated it with that area...anywho.... Help, a solution, or a positive kick in the bum in the right direction would be truly appreciated. Hi all, I wasn't sure of the proper search terms to use to find an answer in the JS forums. I'm trying to create a floating navigation bar which only becomes visible at a certain scroll point on a page - specifically, when the static navigation row is scrolled out of view. I have a floating navigation bar already. And I suspect I'd need to give the static menu an ID to reference in the JS. I'm just not certain on how to proceed. Any help would be greatly appreciated. Thanks. Hi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. |
|||||||