Mimic'ing hidden/visible layers


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Mimic'ing hidden/visible layers

  1. #1
    Lara Fabans Guest

    Mimic'ing hidden/visible layers


    Hi,
    Loved the book (sorry to gush).
    I'm working on a site where we want most everything to be generated by JSP.
    I'm at a loss for how to start (I'm still pretty new at JSP) setting up
    a hidden layer to mimic a layer becoming visible when the mouse clicks a
    button (the purpose would be a nice pop up submenu). Is there a better way
    of doing this then mimic'ing the javascript to change the property of hidden
    to visible? And how would one make the layer disappear again after the mouse
    moved away? I'm sure the use of layers is probably the wrong thing to do
    & need to set up an event handler for the mouse instead.

    Thanks,
    Lara
    Share on Google+

  2. #2
    Larne Pekowsky Guest

    Re: Mimic'ing hidden/visible layers

    In article <3998b7c1$1@news.devx.com>, Lara Fabans <lara@flashcom.net> wrote:
    >Loved the book (sorry to gush).


    Hi Lara, and thank you!

    >I'm at a loss for how to start (I'm still pretty new at JSP) setting up
    >a hidden layer to mimic a layer becoming visible when the mouse clicks a
    >button


    Layers and JSPs are meant to solve two slightly different problems.
    Layers and DHTML are meant to make pages 'dynamic' in the sense that
    the respond immediately to the user. JSPs are meant to make pages
    'dynamic' in the sense that the server can customize each page for the
    user at the time the page is first generated.

    In fact, I would say that Layers and JSPs can compliment each other
    quite nicely, rather than one being a replacement for the other. Two
    great tastes that taste great together...

    Here's a simple HTML page that uses a layer to describe a link when
    the mouse passes over it. The original version of this came from
    Randy Bennett, rbennett@thezone.net, and I found it through
    http://javascript.internet.com "the Javascript Source".


    <html>
    <head>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function setupDescriptions() {
    var x = navigator.appVersion;
    y = x.substring(0,4);
    if (y>=4) setVariables();
    }

    var x,y,a,b;

    function setVariables(){
    if (navigator.appName == "Netscape") {
    h = ".left=";
    v = ".top=";
    dS = "document.";
    ar sD = "";
    } else {
    h = ".pixelLeft=";
    v = ".pixelTop=";
    dS = "";
    sD = ".style";
    }
    }

    v isNav = (navigator.appName.indexOf("Netscape") !=-1);

    function popLayer(a){
    desc = "<table cellpadding=3 border=1 bgcolor=F7F7F7><td>";

    if (a==1) desc += "Comedy with a 'Runch'";

    desc += "</td></table>";

    if(isNav) {
    document.object1.document.write(desc);
    document.object1.document.close();
    document.object1.left=x+25;
    document.object1.top=y;
    } else {
    object1.innerHTML=desc;
    eval(dS+"object1"+sD+h+(x+25));
    eval(dS+"object1"+sD+v+y);
    }
    }

    function hideLayer(a) {
    if(isNav) {
    eval(document.object1.top=a);
    } else {
    object1.innerHTML="";
    }
    }

    function handlerMM(e) {
    x = (isNav) ? e.pageX : event.clientX;
    y = (isNav) ? e.pageY : event.clientY;
    }

    if (isNav) {
    document.captureEvents(Event.MOUSEMOVE);
    }

    document.onmousemove = handlerMM;
    // End -->
    </script>
    </head>

    <BODY OnLoad="setupDescriptions()">

    <div id="object1"
    style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">layer hidden off the screen</div>

    <a href="http://www.brunching.com"
    onMouseOver="popLayer(1)"
    onMouseOut="hideLayer(-50)">The Brunching Shuttlecocks</a>

    </body>
    </html>


    This works fine, but it shows the same URL and rollover to every user
    who visits your page. If you wanted to allow some sort of
    customization you could use a JSP to generate this page, and insert
    the name of the site, the URL, and the text for the rollover. This
    isn't something you could do with a layer, since layers have no way to
    store information about users preferences, but JSPs can.

    To do this we would need a bean to access this data, let's assume we
    have one called userURL, which has methods called getURL(), getName(),
    and getDescription(). To glue these together, you would just need to
    change one line in popLayer to:

    if (a==1) desc += "<jsp:getProperty name="userURL" property="Description">";

    And change the link at the bottom of the page to:

    <a href="<jsp:getProperty name="userURL" property="URL">"
    onMouseOver="popLayer(1)"
    onMouseOut="hideLayer(-50)"><jsp:getProperty name="userURL"
    property="name"></a>


    When the server generates the page it will replace all the getProperty
    tags with the values, so when the JavaScript runs later, in the
    browser, everything will look normal.

    >And how would one make the layer disappear again after the mouse
    >moved away? I'm sure the use of layers is probably the wrong thing to do
    >& need to set up an event handler for the mouse instead.


    In this case I think layers probably are the right thing, since there
    is no other way for the browser to respond to the user without the user
    needing to click something. However, JSPs can tailor the whole
    experience for the particular user. Obviously mixing JSP and
    JavaScript code can get ugly, but you could probably hide this all in
    a couple of JSP includes.

    - Larne

    Share on Google+

Similar Threads

  1. Using multiple Layers Dynamic in N6
    By Patrik Persson in forum Web
    Replies: 3
    Last Post: 06-10-2002, 04:54 PM
  2. ie cant handle form elements in layers
    By moritz moeller in forum Web
    Replies: 0
    Last Post: 10-03-2001, 07:45 AM
  3. Layers and dropdown menu
    By Nandini in forum Web
    Replies: 10
    Last Post: 07-31-2001, 12:33 AM
  4. Printing problems with layers in IE
    By Lesley Carter in forum Web
    Replies: 0
    Last Post: 03-06-2001, 02:02 PM
  5. loading layers in netscape 4.x
    By Donna Brown in forum Web
    Replies: 1
    Last Post: 12-28-2000, 03:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center