SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Layers and IE?

  1. #1
    SitePoint Member
    Join Date
    Feb 2001
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the 'layer' tag is only recognized by Netscape 4+ how do you code a script that will also work in Internet Explorer?... or any other browser?

    Do you use CSS positioning for all browsers?

    Thanks for your help.

    denali

  2. #2
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your question is a bit open-ended, but yes, in most cases if you implement layers in Netscape, its counterpart in IE would be DIVs, and you'd use CSS positioning to place the DIV layer where you want it.
    My 2 Cents (or is that 2.2 Cents including GST?)

  3. #3
    SitePoint Member
    Join Date
    Feb 2001
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to understand layers and positioning so I appologize if my questions are open ended.

    Could I... Should I use CSS positioning (DIV tags) in a site's code and have it work in both NS and IE without using LAYER tags that would just work for NS? If it is better to have both LAYER tags (for NS) and DIV tags (for IE) in the same coding of a site , could you give an example of a short piece of code that would use both or direct me to a tutortial that explains how to position layers in both IE and NS.

    Thanks for your help

    denali

  4. #4
    SitePoint Addict Drinky's Avatar
    Join Date
    Jan 2001
    Location
    England
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creating a simple layer that works in both IE and NS.

    Code:
    <html>
    <head>
      <style type="text/css">
        #myLayer{position:absolute;top:50;left:50;background-color:EEEEEE;}
      </style>
    </head>
    
    <body>
      <div id="myLayer">This is my layer</div>
    </body>
    </html>
    If you copy and paste this code into an html file and run it in either IE or NS you'll see a grey layer with "This is my layer" written in it.

    If you intend to manipulate the layer with javascript after creating it the only CSS attribute you need is position:absolute/relative;

    NOTE 1: position:relative; has a bit of a quirky implementation in netscape, and you may find that the layer is cropped until you resize the browser window.

    NOTE 2: The CSS style must have the same name as the id of your div, and you must use a # not a dot or a tag name.
    Drinky

  5. #5
    SitePoint Addict Drinky's Avatar
    Join Date
    Jan 2001
    Location
    England
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once you have mastered the basics of layers you might want to try getting a little more advanced. The tool I use for cross browser DHTML is called DynAPI. It allows you to create and delete layers on the fly, without needing CSS styles or DIV tags in the HTML.

    The DynAPI can be downloaded from http://sourceforge.net/projects/dynapi/ along with support docs and tutorials.

    Here is a sample page that I created using this API.
    Code:
    <html>
    <head>
      <!-- <meta name="robots" content="noindex"> -->
      <title>G&nbsp;u&nbsp;n&nbsp;t&nbsp;r&nbsp;i&nbsp;s&nbsp;o&nbsp;f&nbsp;t&nbsp;&nbsp;&nbsp;L&nbsp;t&nbsp;d&nbsp;.</title>
      <!-- <link rel="stylesheet" href="lib/css/main.css"> -->
      <script language="Javascript" src="./lib/js/dynapi.js"></script>
      <script language="Javascript">
      <!--
    
      	DynAPI.setLibraryPath('./lib/js/');
    
    	DynAPI.include('dynapi.api.browser.js');
    	DynAPI.include('dynapi.api.dynlayer.js');
    	DynAPI.include('dynapi.api.dyndocument.js');
    	DynAPI.include('dynapi.ext.images');
    
    	var statusBarMessages  = new Array;
    
    	statusBarMessages[0] = 'W e l c o m e   t o   G u n t r i s o f t   L t d .';
    	statusBarMessages[1] = 'G u n t r i s o f t   L t d .   >>   C o m p a n y';
    	statusBarMessages[2] = 'G u n t r i s o f t   L t d .   >>   P r o j e c t s';
    	statusBarMessages[3] = 'G u n t r i s o f t   L t d .   >>   N e w s';
    	statusBarMessages[4] = 'G u n t r i s o f t   L t d .   >>   X t r a n e t   C l i e n t   L o g i n';
    
    	window.status = statusBarMessages[0];
    
    	//-----------------------------------------------------------------------------
    
    	DynAPI.onLoad=function() {
    
    		lyrMain = new DynLayer();
    			lyrMain.setSize(this.document.getWidth(),50);
    			lyrMain.moveTo(0,(this.document.getHeight()/2)-(lyrMain.getHeight()/2));
     			lyrMain.setHTML('<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/lines.gif"><tr><td align="center" nowrap><a href="javascript:showAll()" onclick="unselect(this)" onmouseover="self.status = statusBarMessages[0];return true;" onmouseout="hideAll()"><img src="images/logo.jpg" height="50" width="200" border="0" alt="Guntrisoft Ltd."><a href="company.php" onclick="unselect(this)" onmouseover="beadHover(0);self.status = statusBarMessages[1];return true;" onmouseout="beadLeave(0)"><img src="images/bead.gif" height="50" width="30" border="0" alt="Company"></a><a href="projects.php" onclick="unselect(this)" onmouseover="beadHover(1);self.status = statusBarMessages[2];return true;" onmouseout="beadLeave(1)"><img src="images/bead.gif" height="50" width="30" border="0" alt="Projects"></a><a href="news.php" onclick="unselect(this)" onmouseover="beadHover(2);self.status = statusBarMessages[3];return true;" onmouseout="beadLeave(2)"><img src="images/bead.gif" height="50" width="30" border="0" alt="News"></a><a href="xtranet.php" onclick="unselect(this)" onmouseover="beadHover(3);self.status = statusBarMessages[4];return true;" onmouseout="beadLeave(3)"><img src="images/bead.gif" height="50" width="30" border="0" alt="Xtranet"></a></td></tr></table>');
    			this.document.addChild(lyrMain);
    
    			// Create hide and show layers
    
    		lyrCompany = new DynLayer();
    			lyrCompany.setSize(87,148);
    			lyrCompany.moveTo(((this.document.getWidth() / 2)-32),((this.document.getHeight() / 2)+15));
    			lyrCompany.setHTML('<img src="images/company.gif" width="87" height="148">');
    			this.document.addChild(lyrCompany);
    			lyrCompany.setVisible(0);
    
    		lyrProjects = new DynLayer();
    			lyrProjects.setSize(86,147);
    			lyrProjects.moveTo(((this.document.getWidth() / 2)-1),((this.document.getHeight() / 2)-lyrProjects.getHeight()-13));
    			lyrProjects.setHTML('<img src="images/projects.gif" width="86" height="147">');
    			this.document.addChild(lyrProjects);
    			lyrProjects.setVisible(0);
    
    		lyrNews = new DynLayer();
    			lyrNews.setSize(86,148);
    			lyrNews.moveTo(((this.document.getWidth() / 2)+115),((this.document.getHeight() / 2)+15));
    			lyrNews.setHTML('<img src="images/news.gif" width="86" height="148">');
    			this.document.addChild(lyrNews);
    			lyrNews.setVisible(0);
    
    		lyrXtranet = new DynLayer();
    			lyrXtranet.setSize(90,148);
    			lyrXtranet.moveTo(((this.document.getWidth() / 2)+145),((this.document.getHeight() / 2)-lyrProjects.getHeight()-13));
    			lyrXtranet.setHTML('<img src="images/xtranet.gif" width="90" height="147">');
    			this.document.addChild(lyrXtranet);
    			lyrXtranet.setVisible(0);
    
    		self.status = statusBarMessages[0];
    
    	}
    
    	//-----------------------------------------------------------------------------
    
    	DynAPI.onResize=function(){
    
    			// Keep the main layer centred on resize
    
    		lyrMain.setSize(this.document.getWidth(),50);
    		lyrMain.moveTo(0,(this.document.getHeight()/2)-(lyrMain.getHeight()/2));
    
    			// Re calculate hide show layers positions on window resize.
    
    		lyrCompany.moveTo(((this.document.getWidth() / 2)-32),((this.document.getHeight() / 2)+15));
    		lyrProjects.moveTo(((this.document.getWidth() / 2)-1),((this.document.getHeight() / 2)-lyrProjects.getHeight()-13));
    		lyrNews.moveTo(((this.document.getWidth() / 2)+115),((this.document.getHeight() / 2)+15));
    		lyrXtranet.moveTo(((this.document.getWidth() / 2)+145),((this.document.getHeight() / 2)-lyrProjects.getHeight()-13));
    
    	}
    
    	//-----------------------------------------------------------------------------
    
    	function beadHover(Index){
    		switch (Index) {
       			case 0 :
          			lyrCompany.setVisible(1);
          			break;
       			case 1 :
          			lyrProjects.setVisible(1);
          			break;
          		case 2 :
          			lyrNews.setVisible(1);
          			break;
          		case 3 :
          			lyrXtranet.setVisible(1);
          			break;
    		}
    	}
    
    	//-----------------------------------------------------------------------------
    
    	function beadLeave(Index) {
    
    		self.status = 'W e l c o m e   t o   G u n t r i s o f t   L t d .';
    
    		switch (Index) {
       		case 0 :
          			lyrCompany.setVisible(0);
          			break;
       		case 1 :
          			lyrProjects.setVisible(0);
          			break;
          		case 2 :
          			lyrNews.setVisible(0);
          			break;
          		case 3 :
          			lyrXtranet.setVisible(0);
          			break;
    		}
    
    	}
    
    	//-----------------------------------------------------------------------------
    
    	function showAll(){
    		lyrCompany.setVisible(1);
    		lyrProjects.setVisible(1);
    		lyrNews.setVisible(1);
    		lyrXtranet.setVisible(1);
    	}
    
    	function hideAll(){
    		lyrCompany.setVisible(0);
    		lyrProjects.setVisible(0);
    		lyrNews.setVisible(0);
    		lyrXtranet.setVisible(0);
    	}
    
    	function unselect(elm){
    		if (!DynAPI.browser.ns4){
    			elm.blur();
    		}
    	}
    
    	//-----------------------------------------------------------------------------
    	//-->
      </script>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    </body>
    </html>
    notice the lack of code in the body tags.

    This page can be found at http://www.guntrisoft.com/index.php

    In the code above i've highlighted a few things to show you how it works.

    The library includes are highlighted in green.

    All of the creation and initialisation of layers happens in the DynAPI.onload event which is called when the page is finished loading. In this function I create my 5 layers, set thier contents and positions and then add them as children to the document.

    When the browser window is resized the DynAPI.onResize event is triggered and the code for repositioning the layers so that they stay relative to the centre of the window is executed.
    Last edited by Drinky; Feb 21, 2001 at 10:15.
    Drinky


Bookmarks

Posting Permissions

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