SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2001
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need some help positioning a layer on a centered design. I figured it would be easier to show by example what I am trying to do.

    The layer is the dropdown menu on the top right. Don't mind it overlapping the graphics as this is just an example.

    Sample 1 : Working properly on a left aligned design. But I need the dropdown to stay in the same place on a centered design.

    Sample 2 : As you can see here, when you resize the browser window the dropdown is all over the place. The code is the same as above as I couldn't come up with anything to get the job done.

    Thanks in advance.

  2. #2
    SitePoint Zealot cckrocks's Avatar
    Join Date
    Nov 2000
    Location
    A home in the hills where the grass grows green an
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably the only way to accomplish this would be to have it inside a table. You could use css position:relative, however that is only relative to where it's starting position would be in the document. If you just used it as a div inside the body, it would only position relative to the body. You could also position it relative to another div, as long as they are nested.
    Think beyond what is common...
    www.jaggedknife.com
    www.fusion-in.com

  3. #3
    SitePoint Member
    Join Date
    May 2001
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it worked in IE but not in NS (big surprise). At any rate I learned something new.

  4. #4
    SitePoint Addict Drinky's Avatar
    Join Date
    Jan 2001
    Location
    England
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My prefered way of manipulating layers is with the DynAPI2 javascript dHTML API, which you can download from http://dynapi.sourceforge.net/dynapi/
    This API handles all of the browser compatability issues behind the scenes, leaving you to use one set of commands that work on may browsers. The API is still being developed, at the moment and works for a large slice of browsers.

    This is an example of how a layer can re-centre when the browser resizes.
    http://www.guntrisoft.com/dev/james/...eredlayer.html

    This is the code that makes it work
    Code:
    <html>
    <head>
    <title>Centred Layer Demo - James Drinkwater</title>
    <script language="Javascript" src="./js/dynapi.js"></script> <!-- Load the API -->
    <script language="Javascript">
    	DynAPI.setLibraryPath('./js/lib/');			//Tell DynAPI where to find all of the api library's
    	DynAPI.include('dynapi.api.browser');		//Required browser id library - handles browser detection.
    	DynAPI.include('dynapi.api.dynlayer');		//Required layer functions library - basic layer creation and manipulation functions.
    	DynAPI.include('dynapi.api.dyndocument');		//Required dynamic document functions library - allows creation and interaction with dynamic documents.
    
    </script>
    <script language="Javascript">
    
    	DynAPI.onLoad=function(){	//DynAPI Event, triggered when the page loads.
    		myLayer=new DynLayer(null,0,0,200,100,'#c0c0c0');	//Create a new dynamic layer and assign it to a variable
    		myLayer.setHTML('&amp;nbsp;<br><div align="center"><form><select><option>myDropdown</option><option>Option1</option></select></form></div>');	//Add HTML to the layer
    		DynAPI.document.addChild(myLayer);	//Add the layer to the page
    		reCentre(myLayer);	//Call the function to re-position the layer
    	}
    
    	DynAPI.onResize=function(){	//DynAPI Event, triggered when the page is resized.
    		reCentre(myLayer);	//When the page is resized, re-position the layer
    	}
    
    	function reCentre(lyr){		//Function to reposition the layer in the centre of the page.
    		var w=DynAPI.document.getWidth();
    		var h=DynAPI.document.getHeight();
    		var lw=lyr.getWidth();
    		var lh=lyr.getHeight();
    
    		lyr.moveTo(((w-lw)/2),((h-lh)/2)); //Move the layer
    	}
    
    </script>
    </head>
    <body>
    Resize this window and the layer moves with it.
    </body>
    </html>
    I included a code example because this API uses language that may not be familiar to some people.
    Last edited by Drinky; May 6, 2001 at 14:24.
    Drinky

  5. #5
    SitePoint Member
    Join Date
    May 2001
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch Drinky, with some changes in the reCentre function I got this to do exactly what I wanted, even in older NS4.x versions. Perfect!.

  6. #6
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which version of Javascript is it ? The first time I see the DynAPI thingie ...
    [blogger: zengun] [blogware contributor: wordpress]

  7. #7
    SitePoint Addict Drinky's Avatar
    Join Date
    Jan 2001
    Location
    England
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript 1.2

    DynAPI is not part of javascript but a large set of objects and functions for doing DHTML stuff. (see all the includes at the top)
    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
  •