SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sliding out layers

    I am trying to design an advert that is like a banner and when you rollover is a picture slides out from it and overlays the content underneath it...

    Does anyone know how I can do this? Could I use layers and some javascript?

    I have never really used layers, I am more of a table girl! LOL

    Thanks

    ****************
    The Webmistress

  2. #2
    SitePoint Member
    Join Date
    Oct 2002
    Location
    Leeds
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,
    I think i have seen this script up at www.dynamicdrive.com

    Take a look
    Learning the ropes of webdesign - Favourite application : Dreamweaver MX - Favourite gfx application : Adobe Photoshop 6

  3. #3
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Webmistress,

    I 'think' that I have some code which does what you ask. I got it from youngpup - a website of free js scripts.

    anyway try this test, create index.html and insert this code
    Code:
    <html>
    <head>
    	<script language="javascript" src="ypSlideOutMenusC.js"></script>
    	<script language="javascript">
    		new ypSlideOutMenu("menu1", "up", 0, 300, 180, 200)
    		new ypSlideOutMenu("menu2", "left", 50, 300, 180, 300)
    		new ypSlideOutMenu("menu3", "right", 100, 300, 350, 75)
    		new ypSlideOutMenu("menu4", "down", 100, 50, 45, 100)
    	</script>
    
    	<style type="text/css">
    		.menuActuator a { 
    			color:#666666;
    			font-weight:bold;
    			font-size:12px;
    			font-family:arial;
    		}
    
    		.menu {
    			font-family:verdana;
    			color:#666666;
    			font-size:10px;
    			background-color:#cccccc;
    /*			layer-background-color:#cccccc;*/
    		}
    	</style>
    </head>
    
    <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white">
    	<table bgcolor="#CCCCCC" width="400" cellpadding="2" cellspacing="0" border="0">
    	<tr>
    		<td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1')">menu1</a></td>
    		<td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')">menu2</a></td>
    		<td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')">menu3</a></td>
    		<td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')">menu4</a></td>
    		<td width="250">&nbsp;</td>
    	</tr>
    	</table>
    
    	<div id="menu1Container">
    		<div id="menu1Content" class="menu">this is menu 1!</div>
    	</div>
    
    	<div id="menu2Container">
    		<div id="menu2Content" class="menu">this is menu 2!</div>
    	</div>
    
    	<div id="menu3Container">
    		<div id="menu3Content" class="menu">this is menu 3!</div>
    	</div>
    
    	<div id="menu4Container">
    		<div id="menu4Content" class="menu">this is menu 4!</div>
    	</div>
    </body>
    then create ypSlideOutMenu.js with this content
    Code:
    /*****************************************************
     * ypSlideOutMenu
     * 3/04/2001
     * 
     * a nice little script to create exclusive, slide-out
     * menus for ns4, ns6, mozilla, opera, ie4, ie5 on 
     * mac and win32. I've got no linux or unix to test on but 
     * it should(?) work... 
     *
     * --youngpup--
     *****************************************************/
    
    ypSlideOutMenu.Registry = []
    ypSlideOutMenu.aniLen = 250
    ypSlideOutMenu.hideDelay = 1000
    ypSlideOutMenu.minCPUResolution = 10
    
    // constructor
    function ypSlideOutMenu(id, dir, left, top, width, height)
    {
    	this.ie  = document.all ? 1 : 0
    	this.ns4 = document.layers ? 1 : 0
    	this.dom = document.getElementById ? 1 : 0
    
    	if (this.ie || this.ns4 || this.dom) {
    		this.id			 = id
    		this.dir		 = dir
    		this.orientation = dir == "left" || dir == "right" ? "h" : "v"
    		this.dirType	 = dir == "right" || dir == "down" ? "-" : "+"
    		this.dim		 = this.orientation == "h" ? width : height
    		this.hideTimer	 = false
    		this.aniTimer	 = false
    		this.open		 = false
    		this.over		 = false
    		this.startTime	 = 0
    
    		// global reference to this object
    		this.gRef = "ypSlideOutMenu_"+id
    		eval(this.gRef+"=this")
    
    		// add this menu object to an internal list of all menus
    		ypSlideOutMenu.Registry[id] = this
    
    		var d = document
    		d.write('<style type="text/css">')
    		d.write('#' + this.id + 'Container { visibility:hidden; ')
    		d.write('left:' + left + 'px; ')
    		d.write('top:' + top + 'px; ')
    		d.write('overflow:hidden; }')
    		d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ')
    		d.write('width:' + width + 'px; ')
    		d.write('height:' + height + 'px; ')
    		d.write('clip:rect(0 ' + width + ' ' + height + ' 0); ')
    		d.write('}')
    		d.write('</style>')
    
    		this.load()
    	}
    }
    
    ypSlideOutMenu.prototype.load = function() {
    	var d = document
    	var lyrId1 = this.id + "Container"
    	var lyrId2 = this.id + "Content"
    	var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
    	if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
    	var temp
    
    	if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
    	else {
    		this.container	= obj1
    		this.menu		= obj2
    		this.style		= this.ns4 ? this.menu : this.menu.style
    		this.homePos	= eval("0" + this.dirType + this.dim)
    		this.outPos		= 0
    		this.accelConst	= (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen 
    
    		// set event handlers.
    		if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    		this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
    		this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
    
    		//set initial state
    		this.endSlide()
    	}
    }
    	
    ypSlideOutMenu.showMenu = function(id)
    {
    	var reg = ypSlideOutMenu.Registry
    	var obj = ypSlideOutMenu.Registry[id]
    	
    	if (obj.container) {
    		obj.over = true
    
    		// close other menus.
    		for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
    
    		// if this menu is scheduled to close, cancel it.
    		if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
    
    		// if this menu is closed, open it.
    		if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    	}
    }
    
    ypSlideOutMenu.hideMenu = function(id)
    {
    	// schedules the menu to close after <hideDelay> ms, which
    	// gives the user time to cancel the action if they accidentally moused out
    	var obj = ypSlideOutMenu.Registry[id]
    	if (obj.container) {
    		if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
    		obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
    	}
    }
    
    ypSlideOutMenu.hide = function(id)
    {
    	var obj = ypSlideOutMenu.Registry[id]
    	obj.over = false
    
    	if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
    	
    	// flag that this scheduled event has occured.
    	obj.hideTimer = 0
    
    	// if this menu is open, close it.
    	if (obj.open && !obj.aniTimer) obj.startSlide(false)
    }
    
    ypSlideOutMenu.prototype.startSlide = function(open) {
    	this[open ? "onactivate" : "ondeactivate"]()
    	this.open = open
    	if (open) this.setVisibility(true)
    	this.startTime = (new Date()).getTime()	
    	this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
    }
    
    ypSlideOutMenu.prototype.slide = function() {
    	var elapsed = (new Date()).getTime() - this.startTime
    	if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
    	else {
    		var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
    		if (this.open && this.dirType == "-")		d = -d
    		else if (this.open && this.dirType == "+")	d = -d
    		else if (!this.open && this.dirType == "-")	d = -this.dim + d
    		else										d = this.dim + d
    
    		this.moveTo(d)
    	}
    }
    
    ypSlideOutMenu.prototype.endSlide = function() {
    	this.aniTimer = window.clearTimeout(this.aniTimer)
    	this.moveTo(this.open ? this.outPos : this.homePos)
    	if (!this.open) this.setVisibility(false)
    	if ((this.open && !this.over) || (!this.open && this.over)) {
    		this.startSlide(this.over)
    	}
    }
    
    ypSlideOutMenu.prototype.setVisibility = function(bShow) { 
    	var s = this.ns4 ? this.container : this.container.style
    	s.visibility = bShow ? "visible" : "hidden"
    }
    ypSlideOutMenu.prototype.moveTo = function(p) { 
    	this.style[this.orientation == "h" ? "left" : "top"] = p
    }
    ypSlideOutMenu.prototype.getPos = function(c) {
    	return parseInt(this.style[c])
    }
    
    // events
    ypSlideOutMenu.prototype.onactivate		= function() { }
    ypSlideOutMenu.prototype.ondeactivate	= function() { }
    I knwo it look sbad but save these both and load up teh index.html in your browser and see if that is something that you want? the grey colour etc can easily be changed as can the location of 'where' the boxes come up.

    Then I would you suggest cut and paste the code about until you get only with one box and in the right location.

    Good luck

    Sarah
    Regular user

  4. #4
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that.

    Sos for the late reply, I have been in Italy rallying about in a mini!



    Ta
    ****************
    The Webmistress

  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    no problem when you are doing something as fun as that this certainly takes a back seat - proper rallying? or is that just the way you drive

    Sarah
    Regular user

  6. #6
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hehe

    yeah it was proper rallying honest!

    Have a peek here if you are interested: Italian Job

    ****************
    The Webmistress

  7. #7
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh thanks for that I got it working perfectly.

    I am looking for some more code now. Not sure if anyone can help.

    I want a gif banner to slide out on a page and sit in the middle of it then the user can click a close button on the banner and it will slide back in. However, it won't sit in completely, it will stick out a bit and the user could click it again to view (ie they could click the bit that sticks out and it slides back out again) it at their leisure..? Confusing!? LOL

    Any help would be great. Thanks!

    ****************
    The Webmistress


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
  •