Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts

    Help that slides in from the right

    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
    }
    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,031
    Thanks
    0
    Thanked 248 Times in 245 Posts

    use function parameter

    // 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'

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,031
    Thanks
    0
    Thanked 248 Times in 245 Posts
    intervalID = setInterval("moveHelp('" + objName + "'," + helpWidth + ")", 1)

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,031
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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.

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,031
    Thanks
    0
    Thanked 248 Times in 245 Posts
    you're welcome.

    to answer your last question...
    MUST READ- How to post a JavaScript question!

  • #9
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •