Prev: securing javascript
Next: A general purpose hash function for javascript
From: MG on 14 Apr 2010 12:15
Thanks Stefan, Scott and Jeremy

Your responses have helped me a lot.

MG


"MG" <nospam(a)nospam.com> wrote in message
news:hq4k8f$p0p$1(a)news.eternal-september.org...
>I am learning javascript from a book. In one example (full example below) I
>just can't understand the syntax.
>
> This is the line that I a do not understand:
> interval = setInterval('scrollRight("' + menuName + '")', 30);
>
> In particular, this bit:
> ("' + menuName + '")
>
> I understand that menuName is a variable and contains the text 'slider'. I
> would have thought that syntax like this would work
> (\" + menuName + \")
> But it doesn't and I don't understand why not.
>
> The syntax in the example does work, but I don't understand what it is
> doing.
>
> Hopefully someone can explain it all to me.
>
> Thanks
> MG
>
> ===================
>
> <!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>
> <title>Slide-in Menu Example</title>
> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
> <style type="text/css">
> <!--
> .menu { background: blue; padding: 0px; margin: 0px;
> border-style: solid; border-width: 2px;
> border-color: lightblue; position: absolute;
> text-align: left; width: 150px; top: 80px;
> z-index: 100; }
> .menuitem { color: white; position: relative;
> display: block; font-style: normal; margin: 0px;
> padding: 2px 15px 2px 10px; font-size: smaller;
> font-family: sans-serif; font-weight: bold;
> text-decoration: none; }
> a.menuitem:hover { background-color: darkblue; }
> -->
> </style>
> <script type="text/javascript">
> <!--
> var leftmost = -120;
> var rightmost = 5;
> var interval = null;
> var DOMCapable;
> document.getElementById ? DOMCapable = true : DOMCapable = false;
> function scrollRight(menuName)
> {
> var leftPosition;
> if (DOMCapable)
> {
> leftPosition =
> parseInt(document.getElementById(menuName).style.left);
> if (leftPosition >= rightmost)
> {
> // if the menu is already fully shown, stop scrolling
> clearInterval(interval);
> return;
> }
> else
> {
> // else move it 5 more pixels in
> leftPosition += 5;
> document.getElementById(menuName).style.left = leftPosition+"px";
> }
> }
> }
> function scrollLeft(menuName)
> {
> if (DOMCapable)
> {
> leftPosition =
> parseInt(document.getElementById(menuName).style.left);
> if (leftPosition < leftmost)
> {
> // if menu is fully retracted, stop scrolling
> clearInterval(interval);
> return;
> }
> else
> {
> // else move it 5 more pixels out
> leftPosition -= 5;
> document.getElementById(menuName).style.left = leftPosition+"px";
> }
> }
> }
> function startRightScroll(menuName)
> {
> clearInterval(interval);
> interval = setInterval('scrollRight("' + menuName + '")', 30);
> }
> function startLeftScroll(menuName)
> {
> clearInterval(interval);
> interval = setInterval('scrollLeft("' + menuName + '")', 30);
> }
> //-->
> </script>
> </head>
> <body
> onload="document.getElementById('slider').style.left=leftmost+'px';">
> <!-- the hidden menu -->
> <div class="menu" id="slider"
> onmouseover="startRightScroll('slider');"
> onmouseout="startLeftScroll('slider');">
> <h3 class="menuitem"><u>Our Products</u></h3>
> <a class="menuitem" href="widgets.html">Widgets</a>
> <a class="menuitem" href="swidgets.html">Super Widgets</a>
> <a class="menuitem" href="sprockets.html">Sprockets</a>
> <a class="menuitem" href="vulcans.html">Vulcans</a>
> </div>
> <h1>Welcome to our company</h1>
> </body>
> </html>
>


First  |  Prev  | 
Pages: 1 2
Prev: securing javascript
Next: A general purpose hash function for javascript