Not really FrontPage, but javascript in general

J

Jim Carlock

I've toyed with using css to get hover effects, but Internet
Explorer continuously fails to work properly...

/*
:hover on anything other than <a> tags does not
work with any version of IE.

td.menuButton:hover {
text-align: center;
font-family: verdana, helvetica, san-serif;
font-size: 10pt;
width: 100px;
color: #990033;
background-color: transparent;
text-decoration: none;
}
*/

So I get around it by using javascript. And if I'm going to use
JavaScript, I might as well create a menuButton object. How

<script language="javascript"><!--
function buttFrame(n,x) {
if (document.getElementById) {
var button=document.getElementById("butt300"+n);
button.style.backgroundPosition=x+"px 0px";
button=document.getElementById("top");
}
}
--></script>
<tr>

<td class="menuButton"><div class="menuButton"
id="butt3001"><a href="#" class="menuButton"
onmouseover="buttFrame(1,200);"
onmouseout="buttFrame(1,0);"
onmousedown="buttFrame(1,100);"
onmouseup="buttFrame(1,200);">Get Info</a></div></td>

</tr>

Anyone have a suggestion on how to deploy this as an object
so as I need not use all that onmouse... stuff? I see alot of
stuff about javascript's built-in objects... and I thought I read
something in the past where there's a way to create your own
objects.

Maybe a global onmouse... function which checks the id?

Thanks.
 
S

Steve Easton

You've got it backwards.

CSS can not "fire" javascript, but javascript can "fire" CSS.

I had forgotten I'd even put this out there.
http://www.95isalive.com/test/hoverbutton.htm
View the source and it should give you some ideas.
Don't be fooled by the file name, it has nothing to do with hover buttons, it's all about
css and javascript.

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
J

Jim Carlock

Steve Easton said:
You've got it backwards.

CSS can not "fire" javascript, but javascript can "fire"
CSS.
Click to expand...

<g> Thanks, Steve.

I'll have to reread what I posted. I meant the question as a
javascript question about user-defined javascript objects.

The statement about the only text gets highlighted with
CSS should be rewritten to allow for the following way
of fixing the text-only-highlight problem...

a { display: block; }
a:hover {display: block; }

The reason that fixes the only-text highlight is because any
BLOCK element grows to the size of it's container, and by
default it's width seems to be set at 100% although Internet
Explorer fails to conform to the W3 standards.

So when I'm messing with <a> elements and hover effects,
I specifically set it to display: block; and then set the the size
as well to fix the problems with "Internet Explorer" not being
a W3 compliant browser.

Try this code... view it with Internet Explorer and then with
either FireFox or Mozilla.

<html>
<head>
<title>Test</title>
<style type="text/css">
a.menuItem {display:block; background-color:#888888;}
a.menuItem:hover {display:block; background-color:#ffff00;}
</style>
</head>
<body>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100"><a class="menuItem" href="#">Menu</a></td>
</tr><tr>
<td width="100"><a class="menuItem" href="#">Item</a></td>
</tr>
</body>
</html>

The way I fix the "Internet Explorer" problem with the above,
is to use the following style statements:

<style type="text/css">
a.menuItem {
display:block;
background-color:#888888;
width=100px;
}
a.menuItem:hover {
display:block;
background-color:#ffff00;
width=100px;
}
</style>

A drawback by making an inline element into a block element...
vertical-align: <position>; stops working because w3 indicates
vertical-align only applies to inline elements and a block element
inside a block element... Ahh I was going to ask about that too
but I've just answered it. <g> I need to set the vertical-align
inside the div or td. It's coming back... except the javascript...
I'm still drawing a blank with out to create a javascript object
and make that object inheret the onmouseout, onmouseover,
onmouse... et al methods... that's what I'm looking for.

--
Jim Carlock
Post replies to the newsgroup, thanks.

Steve Easton said:
I had forgotten I'd even put this out there.
http://www.95isalive.com/test/hoverbutton.htm
View the source and it should give you some ideas.
... it's all about css and javascript.
Click to expand...

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
M

Murray

If you define a { display:block } there would be no reason to also define
a:hover { display:block; }
but I'm still a little uncertain about what you are trying to accomplish.
It seems a bit around the block to me....

--
Murray
============

Jim Carlock said:
Steve Easton said:
You've got it backwards.

CSS can not "fire" javascript, but javascript can "fire"
CSS.
Click to expand...

<g> Thanks, Steve.

I'll have to reread what I posted. I meant the question as a
javascript question about user-defined javascript objects.

The statement about the only text gets highlighted with
CSS should be rewritten to allow for the following way
of fixing the text-only-highlight problem...

a { display: block; }
a:hover {display: block; }

The reason that fixes the only-text highlight is because any
BLOCK element grows to the size of it's container, and by
default it's width seems to be set at 100% although Internet
Explorer fails to conform to the W3 standards.

So when I'm messing with <a> elements and hover effects,
I specifically set it to display: block; and then set the the size
as well to fix the problems with "Internet Explorer" not being
a W3 compliant browser.

Try this code... view it with Internet Explorer and then with
either FireFox or Mozilla.

<html>
<head>
<title>Test</title>
<style type="text/css">
a.menuItem {display:block; background-color:#888888;}
a.menuItem:hover {display:block; background-color:#ffff00;}
</style>
</head>
<body>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100"><a class="menuItem" href="#">Menu</a></td>
</tr><tr>
<td width="100"><a class="menuItem" href="#">Item</a></td>
</tr>
</body>
</html>

The way I fix the "Internet Explorer" problem with the above,
is to use the following style statements:

<style type="text/css">
a.menuItem {
display:block;
background-color:#888888;
width=100px;
}
a.menuItem:hover {
display:block;
background-color:#ffff00;
width=100px;
}
</style>

A drawback by making an inline element into a block element...
vertical-align: <position>; stops working because w3 indicates
vertical-align only applies to inline elements and a block element
inside a block element... Ahh I was going to ask about that too
but I've just answered it. <g> I need to set the vertical-align
inside the div or td. It's coming back... except the javascript...
I'm still drawing a blank with out to create a javascript object
and make that object inheret the onmouseout, onmouseover,
onmouse... et al methods... that's what I'm looking for.

--
Jim Carlock
Post replies to the newsgroup, thanks.

Steve Easton said:
I had forgotten I'd even put this out there.
http://www.95isalive.com/test/hoverbutton.htm
View the source and it should give you some ideas.
... it's all about css and javascript.
Click to expand...

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
.......................with a computer
Click to expand...
 
J

Jim Carlock

Murray said:
If you define a { display:block } there would be no reason
to also define a:hover { display:block; }...
Click to expand...

Thanks for your comment, Murray. Your comment
leads me into the (well known?) Internet Explorer
gripe about it's CSS rendering failures... see attached
gripe.txt. It's off-topic so it's a text file put into the
attached IEgripe.zip file. Basically it's a gripe about IE
("display: block;") does not render subsequent tags to
inheret (along with "width: 100%") the property.
but I'm still a little uncertain about what you are trying to
accomplish.

It seems a bit around the block to me....
Click to expand...

I seek some javascript help... Anyone have a simple
demonstration of creating and using common "methods"
on an object? Microsoft's JSCRIPT, and maybe all
JavaScript in general, appears to implement the concepts
of objects in a procedural mannerism. The following
air-code might provide some ideas about what I hope
to accomplish...

var NumberOfMenus=0;
var PicturePath="./lib/butt4010.jpg"
var PictureNormal="0 0";
var PictureHover="-100 0";
var PicturePressed="-200 0";
// anyone have a good description of what "this" is
var oMenu;

function addMenuItem(sName, sURL) {
var i;
this.length+=1;
i=this.length-1;
this.Menu=sName;
this.Link=sURL;
}

function PressButton(iMenuItem) {
// check to see within bounds?
// press the button...
// hmm... wondering if I can use an oMenu variable,
// not sure what "this" refers to... There a way to
// specifically set this to a variable (another object)?
// The purpose is to put a button on a form and
// provide a mechanism to get rid of all the HTML
// encoding - onmouseout=""
}

function cMenu(nNumberOfMenuItems,sPicPath,aMenuItem) {
var i;
this.length=2;
// add methods
this.addMenuItem=addMenuItem; // include addMenuItem as a method
this.PressButton=PressButton; // include PressButton as a method
this.onmouseout=onmouseout; // can we take over onmouseout ?
// add properties
this.PicturePath = sPicPath;
this.NumberOfMenus=nNumberOfMenuItems;
// create 0-based number of items
for (i = 0; i < nNumberOfMenuItems; i++) {
this.Name = aMenuItem[i,0];
this.Link = aMenuItem[i,1];
}
}

<!-- an .htm file -->
<html>
<head>
<script type="text/javascript" language="JavaScript">
// NOTE: titles required for helping people with sight difficulties.
var aMenu = [["Help", "Click here for help details.", "help.htm"], /
["Contact Us", "Click here to send us a message.", "message.htm"], /
["Styles", "Click here for styles.", "styles.htm"], /
["Location", "Click here for map.", "locate.htm"]];

var oMenu=new cMenu(4, aMenu);
</script>
</head>
<body>
<div style="padding-left:10px;padding-top:10px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="LeftMenus">
<script type="javascript"><!--
var sOpenJavaScript = '<script type="text/javascript" language="JavaScript">';
var sCloseJavaScript = '</script>'
//
// var sNoJS ='<noscript><div id="reqJS">Requires JavaScript</div></noscript>';
// bahh! going to have to put the sNoJS thing into a
// server-side include script. Good thing too, because
// it doesn't need to be included in the HTML if JS
// works.
//
var sOpenDiv = '<div class="menuItem">';
var sCloseDiv = '</div>';
// variables to dislay default tag info
var sLink1 = '<a href="';
var sLink2 = ''; // filled in with oMenu[iMenuNum].Topic
var sLink3 = '">'; // placed as closing tag of <a href="sURL" title="sTitle">
var sLink4 = '</a>'; // terminates the <a> tag, comes after sTopic
var sHTML=sOpenJavaScript + sOpenDiv + sCloseJavaScript;
var i;
var oMenu;
var oButton = new cButton();

function DisplayPressButton(sButtonPath) {
// need to work out this code to display
// pressed button image
}

function DisplayReleaseButton(sButtonPath) {
// need to work out this code to display
// released button image
}

function DisplayHoverButton(sButtonPath) {
// need to work out this code to display
// hover button image
}

function cButton(sImagePath) {
this.length = 4;
// methods
this.Press = DisplayPressButton; // display pressed button image
this.Release = DisplayReleaseButton; // display released button image
this.Hover = DisplayHoverButton; // display hover button image
// need to know how to create "events" to over-ride the following
// events: onmouseout, onmouseover, onmousepress
// properties
this.ImagePath = sImagePath;
}
function cMenu(aMenuItems, sButtonImage) {
this.length = 6;
// methods
this.
this.NumberOfMenuItems = ubound(aMenuItems);
this.
}

// build menu
oMenu = new cMenu();
document.write(sHTML);
//-->
</script>
</td>
<td class="MainBody"><p>xxx</p></td>
<td class="RightColumn"><p> </p></td>
</tr></tbody></table>
</body></html>

I'm having problems with encapsulation. Is there a way
to encapsulate the above, so that all the variables are
local to the file in question? I guess I what I really want
is a way to declare them public and private. It seems as
if all the variables and routines become public the
moment the file is included in the HTML document.

Also, in JScript, is there an Option Explicit statement
available? Any suggestions, one or two typos kills me.
<g>

Anyone here use Visual InterDev to do JavaScript?
Guess I'll have to make sure I don't make any typos.
NotePad forgives me too much. Either that or start
using InterDev? :)

--
Jim Carlock
Some interesting links...
http://www.csszengarden.com/?cssfile=/173/173.css&page=1
http://www.wpdfd.com/editorial/wpd0404footnote.htm
FireFox, a better way to browse... http://www.firefox.com
Post replies to the newsgroup, thanks.
 
M

Murray

Basically it's a gripe about IE
("display: block;") does not render subsequent tags to
inheret (along with "width: 100%") the property.
Click to expand...

When you have a valid and complete doctype on the page, these problems melt
away. It's quirks mode that is the killer....

And I'm sure your example is a comprehensive explanation of your question,
but I just don't see that forest for the trees. Sorry....

--
Murray
============

Jim Carlock said:
Murray said:
If you define a { display:block } there would be no reason
to also define a:hover { display:block; }...
Click to expand...

Thanks for your comment, Murray. Your comment
leads me into the (well known?) Internet Explorer
gripe about it's CSS rendering failures... see attached
gripe.txt. It's off-topic so it's a text file put into the
attached IEgripe.zip file. Basically it's a gripe about IE
("display: block;") does not render subsequent tags to
inheret (along with "width: 100%") the property.
but I'm still a little uncertain about what you are trying to
accomplish.

It seems a bit around the block to me....
Click to expand...

I seek some javascript help... Anyone have a simple
demonstration of creating and using common "methods"
on an object? Microsoft's JSCRIPT, and maybe all
JavaScript in general, appears to implement the concepts
of objects in a procedural mannerism. The following
air-code might provide some ideas about what I hope
to accomplish...

var NumberOfMenus=0;
var PicturePath="./lib/butt4010.jpg"
var PictureNormal="0 0";
var PictureHover="-100 0";
var PicturePressed="-200 0";
// anyone have a good description of what "this" is
var oMenu;

function addMenuItem(sName, sURL) {
var i;
this.length+=1;
i=this.length-1;
this.Menu=sName;
this.Link=sURL;
}

function PressButton(iMenuItem) {
// check to see within bounds?
// press the button...
// hmm... wondering if I can use an oMenu variable,
// not sure what "this" refers to... There a way to
// specifically set this to a variable (another object)?
// The purpose is to put a button on a form and
// provide a mechanism to get rid of all the HTML
// encoding - onmouseout=""
}

function cMenu(nNumberOfMenuItems,sPicPath,aMenuItem) {
var i;
this.length=2;
// add methods
this.addMenuItem=addMenuItem; // include addMenuItem as a method
this.PressButton=PressButton; // include PressButton as a method
this.onmouseout=onmouseout; // can we take over onmouseout ?
// add properties
this.PicturePath = sPicPath;
this.NumberOfMenus=nNumberOfMenuItems;
// create 0-based number of items
for (i = 0; i < nNumberOfMenuItems; i++) {
this.Name = aMenuItem[i,0];
this.Link = aMenuItem[i,1];
}
}

<!-- an .htm file -->
<html>
<head>
<script type="text/javascript" language="JavaScript">
// NOTE: titles required for helping people with sight difficulties.
var aMenu = [["Help", "Click here for help details.", "help.htm"], /
["Contact Us", "Click here to send us a message.", "message.htm"], /
["Styles", "Click here for styles.", "styles.htm"], /
["Location", "Click here for map.", "locate.htm"]];

var oMenu=new cMenu(4, aMenu);
</script>
</head>
<body>
<div style="padding-left:10px;padding-top:10px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="LeftMenus">
<script type="javascript"><!--
var sOpenJavaScript = '<script type="text/javascript"
language="JavaScript">';
var sCloseJavaScript = '</script>'
//
// var sNoJS ='<noscript><div id="reqJS">Requires
JavaScript</div></noscript>';
// bahh! going to have to put the sNoJS thing into a
// server-side include script. Good thing too, because
// it doesn't need to be included in the HTML if JS
// works.
//
var sOpenDiv = '<div class="menuItem">';
var sCloseDiv = '</div>';
// variables to dislay default tag info
var sLink1 = '<a href="';
var sLink2 = ''; // filled in with oMenu[iMenuNum].Topic
var sLink3 = '">'; // placed as closing tag of <a href="sURL"
title="sTitle">
var sLink4 = '</a>'; // terminates the <a> tag, comes after sTopic
var sHTML=sOpenJavaScript + sOpenDiv + sCloseJavaScript;
var i;
var oMenu;
var oButton = new cButton();

function DisplayPressButton(sButtonPath) {
// need to work out this code to display
// pressed button image
}

function DisplayReleaseButton(sButtonPath) {
// need to work out this code to display
// released button image
}

function DisplayHoverButton(sButtonPath) {
// need to work out this code to display
// hover button image
}

function cButton(sImagePath) {
this.length = 4;
// methods
this.Press = DisplayPressButton; // display pressed button image
this.Release = DisplayReleaseButton; // display released button image
this.Hover = DisplayHoverButton; // display hover button image
// need to know how to create "events" to over-ride the following
// events: onmouseout, onmouseover, onmousepress
// properties
this.ImagePath = sImagePath;
}
function cMenu(aMenuItems, sButtonImage) {
this.length = 6;
// methods
this.
this.NumberOfMenuItems = ubound(aMenuItems);
this.
}

// build menu
oMenu = new cMenu();
document.write(sHTML);
//-->
</script>
</td>
<td class="MainBody"><p>xxx</p></td>
<td class="RightColumn"><p> </p></td>
</tr></tbody></table>
</body></html>

I'm having problems with encapsulation. Is there a way
to encapsulate the above, so that all the variables are
local to the file in question? I guess I what I really want
is a way to declare them public and private. It seems as
if all the variables and routines become public the
moment the file is included in the HTML document.

Also, in JScript, is there an Option Explicit statement
available? Any suggestions, one or two typos kills me.
<g>

Anyone here use Visual InterDev to do JavaScript?
Guess I'll have to make sure I don't make any typos.
NotePad forgives me too much. Either that or start
using InterDev? :)

--
Jim Carlock
Some interesting links...
http://www.csszengarden.com/?cssfile=/173/173.css&page=1
http://www.wpdfd.com/editorial/wpd0404footnote.htm
FireFox, a better way to browse... http://www.firefox.com
Post replies to the newsgroup, thanks.
Click to expand...
 
J

Jim Carlock

When you have a valid and complete doctype on the
page, these problems melt away. It's quirks mode that
is the killer....
Click to expand...

I read somewhere something about an IE quirks mode.
I was just messing around with another file and I noted
I left off some end tags "</tr></tbody></table>".

IE apparently decided to go into quirks mode because
of the missing end tags. The moment I added the end
tags, (and a DOCTYPE tag) everything worked well.

Thanks for the clarification. Between mis-spellings
(<script language="javscript"...) and leaving out end
tags... I'm getting better than as good as I used to think
I was...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can one include data from javascript in form 1
Menu to drop down only on arrow? 3
Frontpage removes javascript after save 6
Entity name must immediately follow the '&' in the entity referenc 0
Aligning trouble 4
table scrollbars 3
text not displaying right in boxes at less than 1024 res, why? 4
Frontpage 2000, browser trouble 5

Top