PDA

View Full Version : Need help fixing this... *tis frustrating*



Twilightrose917
03-04-2008, 05:27 PM
1) Script Title: Floating Menu Script

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/staticmenu.htm

3) Describe problem: The menu shows up in the top left corner of the screen, but is too far up... you can't see the title or the first link inside the box, and I haven't been able to figure out how to fix it. I also want to move it so that it's down in the bottom left corner, but I don't know how.

Jas
03-04-2008, 08:48 PM
Can you provide a link to a live page?

Twilightrose917
03-05-2008, 02:47 PM
um... no. I don't have it on a server yet... would posting a copy of the script work?

Jas
03-05-2008, 07:00 PM
That would work fine :)
And what browser are you viewing in? Or is this a problem in all browsers?

Twilightrose917
03-05-2008, 07:15 PM
It doesn't work in IE, but when I tried it this morning on a different computer I used Safari and it worked fine... there are links to other pages that i've made - do you need the script for those pages as well or can you work with just the homepage?

Jas
03-06-2008, 02:17 AM
I had guessed as much. It seems 90% of problems are reported in IE, lol. Anyway, only the code in question will be necessary (i.e. the html, css, and javascript; No other pages should be needed). Be sure to put the code in code tags
.

Twilightrose917
03-06-2008, 12:23 PM
okay - here it is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Portfolio Index</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12pt;
color: #000000;
}
body {
background-color: #0099FF;
}
a {
font-family: Papyrus;
font-size: 12pt;
color: #FF0000;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #9900FF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
.style1 {font-size: 18pt}
-->
</style>

</head>

<body>

<div align="center" class="style1"><p>Welcome!</p></div>
<div align="center"><h4><p>&nbsp;My name is Alyssa Chvala, and this website is going to be my portfolio. Feel free to look around - I've done work in several different programs and media, including Photoshop, Flash, Illistrator, pencil, pen, pastel, paint. The Navigation bar should be to your left, and it's relatively easy to use. :)</p></h4></div>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="175" cellspacing="0" cellpadding="0">
<tr>

<td width="100%" bgcolor="#00AACC">

<p align="center"><b><font size="4">Navigation Menu</font></b></td>
</tr>
<tr>

<td width="100%" bgcolor="#00FFFF">

<p align="center">*
<a href="Index.html">Home </a><br>
<a href="about me.html">About Me </a><br>
*
<a href="photoshop.html">Photoshop</a><br>
*
<a href="illistrator.html">Illistrator </a><br>
*
<a href="flash.html">Flash</a><br>
*
<a href="noncomputerwork.html">Non- Computer Work </a></td>

</tr>
</table>
<!--END OF EDIT-->

</layer>



<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>


that's for the index page - and the problem is on all the pages that I created, but I think once we fix this one I should be able to fix the rest...

Jas
03-06-2008, 05:17 PM
After a couple of shots at it, I think I've got it. Try this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Portfolio Index</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12pt;
color: #000000;
}
body {
background-color: #0099FF;
}
a {
font-family: Papyrus;
font-size: 12pt;
color: #FF0000;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #9900FF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
.style1 {font-size: 18pt}
-->
</style>

</head>

<body>

<div align="center" class="style1"><p>Welcome!</p></div>
<div align="center"><h4><p>&nbsp;My name is Alyssa Chvala, and this website is going to be my portfolio. Feel free to look around - I've done work in several different programs and media, including Photoshop, Flash, Illistrator, pencil, pen, pastel, paint. The Navigation bar should be to your left, and it's relatively easy to use. :)</p></h4></div>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="175" cellspacing="0" cellpadding="0">
<tr>

<td width="100%" bgcolor="#00AACC">

<p align="center"><b><font size="4">Navigation Menu</font></b></td>
</tr>
<tr>

<td width="100%" bgcolor="#00FFFF">

<p align="center">*
<a href="Index.html">Home </a><br>
<a href="about me.html">About Me </a><br>
*
<a href="photoshop.html">Photoshop</a><br>
*
<a href="illistrator.html">Illistrator </a><br>
*
<a href="flash.html">Flash</a><br>
*
<a href="noncomputerwork.html">Non- Computer Work </a></td>

</tr>
</table>
<!--END OF EDIT-->

</layer>



<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y [I]-35)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>
The problem was that the menu was bigger then it was suppose to be, so it was down past the bottom edge of the screen. I compensated with a -35 (in red).

My browser (Fire Fox on Linux) also had a problem with the doc type, but that may just be me. Anyway, I had to take it out for testing, so that's why it's missing. That may also have been a problem.

Twilightrose917
03-06-2008, 05:26 PM
it works now! thank you SO much. But now... what part of the code do i need to replace in the other pages to make it work there? or do i just need to change that one bit to -35?

Jas
03-06-2008, 05:29 PM
Your welcome :) Add the -35, and possibly take out the doc type if it still doesn't work. I know you shouldn't do that, but I couldn't get it to work with it. I looked at the DynamicDrive doc type in the example for guidance, and they didn't have one! lol

Twilightrose917
03-06-2008, 06:26 PM
okay... pardon me if this makes me sound like an idiot - but what do you mean by doc type? :confused: (and how do i take it out?)

Jas
03-06-2008, 08:48 PM
No worries. The doc type is this tag, found at the very top of the page source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If it works then leave it there, if not you may need to delete it. Also, this:

<html xmlns="http://www.w3.org/1999/xhtml">
May need to be:

<html>
I tested it on a linux with FireFox, and it wouldn't work right with those tags, but it's possible that it's just my OS.

There is probably a solution to make the script work with the doctype, but I don't know what it is.

NOTE: if your page has no doctype, your page is cannot be "valid" html according to W3C standards. (That is, the page will work correctly, but it won't be properly coded; this is an issue if you want to validate the page with them.)

Twilightrose917
03-07-2008, 05:09 PM
Okay - I got the menu to work on all the pages, but I did have to take out the doc type and erase the stuff in the html tag. I'm just happy that it works because now I can start working on the actual portfolio bit...

and i have a few more questions for you - what is the W3C thing you mentioned, and why wouldn't it be valid??? (like, what would be a reason for them not to accept it?) *ish confused*

and thanks again for all your help...

Jas
03-07-2008, 07:26 PM
While no one actually moderates the web, the World Wide Web Consortium (http://www.w3.org) (W3C) sets the standard for how pages should be coded. While it may seem unimportant, the significance is that web browsers tend follow the guidelines set by the W3C. So, if W3C says pages should be coded like this, most broswers will be developed to read the pages accordingly.

The reason they want a doctype in webpages is that it tells the browser specifically how to render a page, rather then the browser "guessing." Right away the browser can say "This is html 4.0 strict!" or "This is xhtml 1.0!"

The W3C validation page is right here: http://validator.w3.org/

I wouldn't worry about it in this stage of development, but later you may want to try to get it up to their standards. Most web pages on the internet, however, are invalid and still work.

Twilightrose917
03-10-2008, 04:07 PM
*dawning look of comprehension crosses face* oh. That makes sense... thanks for explaining it...

and - one last time - thanks for all the help that you've given me with this. :)

Twilightrose917
03-25-2008, 01:09 PM
okay, here's the script for the index...


<html>
<head>
<style>
a:link, a:active { color:red; }
a:visited { color:#9900FF; }
a:hover { color:green;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Portfolio Index</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12pt;
color: #000000;
}
body {
background-color: #0099FF;
}
a {
font-family: Papyrus;
font-size: 12pt;
color: #FF0000;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #9900FF;
}
a:hover {
text-decoration: none;
color: #006600;
}
a:active {
text-decoration: underline;
}
.style1 {font-size: 18pt}
-->
</style>

</head>

<body>

<h1><p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="468" height="60">
<param name="movie" value="images/Welcome.swf">
<param name="quality" value="high">
<embed src="images/Welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>
</object>
</p></h1>
<div align="center"><h4>
<p>&nbsp;My name is Alyssa Chvala, and this website is going to be my portfolio. Feel free to look around - I've done work in several different programs and media, including Photoshop, Flash, Illustrator, In-Design, pencil, pen, pastel, paint. The Navigation bar should be to your bottom left, and it's relatively easy to use. :)</p>
</h4></div>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="175" cellspacing="0" cellpadding="0">
<tr>

<td width="100%" bgcolor="#00AACC">

<p align="center"><b><font size="4">Navigation Menu</font></b></td>
</tr>
<tr>

<td width="100%" bgcolor="#00FFFF">

<p align="center">*
<a href="Index.html">Home </a><br>
<a href="about me.html">About Me </a><br>
*
<a href="photoshop.html">Photoshop</a><br>
*
<a href="illistrator.html">Illustrator </a><br>
*
<a href="flash.html">Flash</a><br>

<a href="in-design.html">In-Design</a><br>

*
<a href="noncomputerwork.html">Non-Computer Work </a></td>

</tr>
</table>
<!--END OF EDIT-->

</layer>



<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y -35)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>

Thanks again!

Jas
03-25-2008, 04:18 PM
Strange. The menu looks like it's in the right position to me. . . (I'm viewing in FireFox 2.0; see the pic) I guess you want it lower?

The number -35 in this:

ftlObj.y += (pY - startY - ftlObj.y -35)/8;
Adjusts the position, as you know. The lower the number, the higher the menu will be. The higher the number, the lower the menu will be.

Hope that helps. :)

Twilightrose917
03-25-2008, 05:26 PM
hmm... i was looking at it in Safari... i haven't tried it in IE yet though. I'll take it home today and play with that value, see if I can make it work. I'll let you know how it goes. :)

Jas
03-25-2008, 09:59 PM
Oh, I see. Yeah, I've had problems with safari on my site as well. I don't have safari installed anymore (although I might have it on another computer. . . I'll check if you need more help), but if you still have problems, there are a few other things that we can try with CSS. I think that the number should be enough, though. Anyway, good luck and let me know. :)

Twilightrose917
03-26-2008, 01:18 PM
I played with the number a little and changed it to -55. It works now. :)

After I finish it and get it posted on a server, would you like to see it? I can pm you the link...

Jas
03-26-2008, 01:44 PM
I'd like to see it :) And I'm glad to hear that it worked out.