...

View Full Version : Help that slides in from the right



tpeck
09-13-2003, 11:49 AM
Dear Everyone:

I have some code which works well for a single instance of an object with the ID 'help'. It makes a small window with help text (or whatever you like) slide in smoothly from the right of the screen to the center.

My problem is that I want more than one instance of the object (with different help text) to appear on the same HTML page.

A demo of the effect can be seen at

http://www.aapress.com.au/vocab2/helpdance.html


Here is an outline of the stuff within the body of the HTML. You can see that it contains the object with ID='help':

<a href="javascript:void showHelp()"
<img src="img/help.gif" border="0" width="154" height="19"></a>
script type="text/javascript" language="javascript">
var output = ""
output = "<DIV ID='help' onClick='hideMe()' STYLE='position:relative; visibility:hidden; margin-top: -200; width:400; background: url(img/background.gif); border:1px solid #000000; font-family: Arial; font-size: 9pt; font-weight: bold;'>\n"
output += "

blah blah blah


"</DIV>"
document.write(output)
</script>

My query is, how can I alter the external .js file to accommodate more than one instance of the object?

The relevant part of the external .js file is below. You can see that the objName is "help". How can I make it work for help1, help2, help3 etc.?

The entire .js file is called DHTMLapi.js and can be quite easily found on the web.

Many thanks for anyone's advice.

Terry

/*************************************************
BEGIN HELP ELEMENT FUNCTIONS
**************************************************/
// initiate show action
function showHelp() {
var objName = "help"
var helpWidth = 0
shiftTo(objName, insideWindowWidth, 80)
setZIndex(objName,1000)
show(objName)
if (document.layers) {
helpWidth = document.layers[objName].document.width
} else if (document.all) {
helpWidth = document.all(objName).offsetWidth
} else if (document.getElementById) {
if (document.getElementById(objName).offsetWidth >= 0) {
helpWidth = document.getElementById(objName).offsetWidth
}
}
intervalID = setInterval("moveHelp(" + helpWidth + ")", 1)
}
// iterative move help DIV to center of window
function moveHelp(w) {
screenWidth = screen.width;
screenHeight = screen.height;
shiftBy("help",-5,0)
var objectLeft = getObjectLeft("help")
if (screenWidth == 1024 && screenHeight == 768) {
if (objectLeft <= (insideWindowWidth/2) - (w+390)/2) {
clearInterval(intervalID)
}}else{
if (objectLeft <= (insideWindowWidth/2) - (w+175)/2) {
clearInterval(intervalID)
}
}
}
// hide the help DIV
function hideMe() {
clearInterval(intervalID)
hide("help")
shiftTo("help", insideWindowWidth, 80)
}
// calculate center of window for help DIV
function setWinWidth() {
if (window.innerWidth) {
insideWindowWidth = window.innerWidth
} else if (document.body.scrollWidth) {
insideWindowWidth = document.body.scrollWidth
} else if (document.width) {
insideWindowWidth = document.width
}
}

glenngv
09-13-2003, 01:22 PM
// initiate show action
function showHelp(objName) {
var helpWidth = 0
shiftTo(objName, insideWindowWidth, 80)
setZIndex(objName,1000)
show(objName)
if (document.layers) {
helpWidth = document.layers[objName].document.width
} else if (document.all) {
helpWidth = document.all(objName).offsetWidth
} else if (document.getElementById) {
if (document.getElementById(objName).offsetWidth >= 0) {
helpWidth = document.getElementById(objName).offsetWidth
}
}
intervalID = setInterval("moveHelp(" + helpWidth + ")", 1)
}
// iterative move help DIV to center of window
function moveHelp(objName,w) {
screenWidth = screen.width;
screenHeight = screen.height;
shiftBy(objName,-5,0)
var objectLeft = getObjectLeft(objName)
if (screenWidth == 1024 && screenHeight == 768) {
if (objectLeft <= (insideWindowWidth/2) - (w+390)/2) {
clearInterval(intervalID)
}}else{
if (objectLeft <= (insideWindowWidth/2) - (w+175)/2) {
clearInterval(intervalID)
}
}
}
// hide the help DIV
function hideMe(objName) {
clearInterval(intervalID)
hide(objName)
shiftTo(objName, insideWindowWidth, 80)
}
// calculate center of window for help DIV
function setWinWidth() {
if (window.innerWidth) {
insideWindowWidth = window.innerWidth
} else if (document.body.scrollWidth) {
insideWindowWidth = document.body.scrollWidth
} else if (document.width) {
insideWindowWidth = document.width
}
}
...
<a href="javascript&#58;showHelp('help')">
<img src="img/help.gif" border="0" width="154" height="19"></a>
<script type="text/javascript" language="javascript">
output = '<DIV ID="help" onClick="hideMe(\'help\')" STYLE="position:relative; visibility:hidden; margin-top: -200; width:400; background: url(img/background.gif); border:1px solid #000000; font-family: Arial; font-size: 9pt; font-weight: bold;">\n'

tpeck
09-13-2003, 01:56 PM
Thanks a lot glenngv,

I can see that this will work. I now understand the reasoning.

I guess I have to add the objName to this bit too...

***************************************

intervalID = setInterval("moveHelp(objName" + "," + " + helpWidth + "), 1)

***************************************

So far this bit doesn't work because I can't get the quotes in the right place, but I'll perservere.

Thanks again.

Terry

glenngv
09-13-2003, 02:57 PM
intervalID = setInterval("moveHelp('" + objName + "'," + helpWidth + ")", 1)

tpeck
09-13-2003, 03:18 PM
This is more difficult than I thought.

OK - I have tried with the corrected single quotes (thanks) but still no luck.

I think you might have been right the first time..., that is, it might not need the objName in this bit:

intervalID = setInterval("moveHelp(" + helpWidth + ")", 1)

instead of...

intervalID = setInterval("moveHelp('" + objName + "'," + helpWidth + ")", 1)

Anyway, it now doesn't slide in even with only one instance of the object on the page.

I have used the corrected code you supplied exactly as is, with this:

<a href="javascript:void showHelp(help1) ">
<img src="img/help.png" border="0" width="73" height="20"></a></p>
<p></p>
<script type="text/javascript" language="javascript">
var output = ""
output = "<DIV ID='help1' onClick='hideMe(help1)' STYLE='position:absolute; visibility:hidden; top:80; width:400; background: url(img/bgggreylines.gif); border:1px solid #000000; font-family: Arial; font-size: 9pt; font-weight: bold;'>\n"
output += "<br><CENTER><img border='0' src='img/help1.png' width='73' height='20'></CENTER>\n"
output += "<HR COLOR='seagreen'>\n<OL>"
output += "INSTRUCTIONS<br><br>this is a demo of the slide in help</font>\n"
output += "</OL>\n<FORM>\n<CENTER><INPUT TYPE='button' STYLE='font-family: arial; font-size: 11px; background: #b0c0d0; border-bottom: 1px solid #55556d; border-right: 1px solid #55556d; border-left: 1px solid #55556d; border-top: 1px solid #55556d; color: #000033; height: 19px;' VALUE='Close the window'>\n</FORM></DIV>"
document.write(output)
</script>

Most of the above is junk to get the sliding object to look right.

Is there something I am doing wrong in the red bits above?

Terry

glenngv
09-13-2003, 03:35 PM
You should enclose the parameter in double or single quotes because you are passing a literal value not a variable.

<a href="java script:void showHelp('help1')">


output = '<DIV ID="help1" onClick="hideMe(\'help1\')" STYLE="position:absolute; visibility:hidden; top:80; width:400; background: url(img/bgggreylines.gif); border:1px solid #000000; font-family: Arial; font-size: 9pt; font-weight: bold;">\n'
output +='<br><CENTER><img border="0" src="img/help1.png" width="73" height="20"></CENTER>\n'

Single quotes and double quotes in literal strings in javascript are interchangeable but I suggest you use double quotes in html attributes because that is the standard. So use single quotes as string delimeter. If you need to add a single quote inside a string, you should escape it with a backslash (\\') like I did above.

tpeck
09-13-2003, 04:13 PM
What a headache!

but...IT WORKS!!!

see demo at http://www.aapress.com.au/vocab2/helpdance.html

thank you very much.

one unrelated thing -- why does the word javascript get split in two when we post?

Anyhow, not important - I am indebted to you, Glenn. Thanks again.

Terry

glenngv
09-13-2003, 04:33 PM
you're welcome. :)

to answer your last question...
http://www.codingforums.com/showthread.php?s=&threadid=2090#post117971

tpeck
09-13-2003, 06:01 PM
Sorry to trouble you once again, but for good reasons I want to use relative positioning and not absolute.

My two instances of the object slide in as desired (as in my demo at http://www.aapress.com.au/vocab2/helpdance.html).

But now in order to get the objects to both end up at the same vertical position on the screen (i.e. center), I have to add margin-left: -185; to the second style reference:

*********************************************

<script type="text/javascript" language="javascript">
var output = ""
output = '<DIV ID="help2" onClick="hideMe(\'help2\')" STYLE="position:relative; visibility:#; margin-top: -100; margin-left: -185; width:400; background: url(img/bgggreylines.gif); border:1px solid #000000; font-family: Arial; font-size: 9pt; font-weight: bold;">\n'

blah blah blah

document.write(output)

*********************************************

Oddly, the first (top) object coding doesn't require the margin-left: -185;, but the second (and third or fourth etc.) objects all require this left margin adjustment.

Can anyone tell me why the first object should behave differently? The problem doesn't exist with absolute addressing (fair enough) but with relative positioning you need it. It doesn't appear to have anything to do with the external.js file, because it is a question of where the objects begin their position, not what happens to them afterwards.

Relative positioning - yes, but relative to what? Each other?

Very strange to me.

Thanks

Terry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum