SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapsable Panel

    Hey, Im trying to make a collapsable panel for my site for the navbar. Here is a pic of my design.

    http://i266.photobucket.com/albums/i...endovation.jpg

    I want the horizontal nav to close when you click the littler arrow in the middle of the bottom bar of the header. Its the darker grey part. Thanks for any help. Here is the php page so far.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    	<head>
    		<title>Nintendovation</title>
    		<link rel="stylesheet" type="text/css" href="style1.css" />
    	</head>
    	<body>
    	</script>
    	<div id="header">
    	<div id="logo">
    	<img src="images/logo.png">
    	</div> <!--logo-->
    	<div id="search">
    	<label for="search">Search</label><input type="text" name="search" />
    	</div> <!--search-->
    	<div id="navigation">
    	</div> <!--navigation-->
    	</div> <!--header-->
    	<div id="content">
    	</div> <!--content-->
    	<div id="footer">
    	</div> <!--footer-->
    	</body>
    </html>

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Have a look at http://www.harrymaugans.com/category/tutorials/ for a sliding collapsing DIV or look into the javascript libraries such as prototype, mootools and jQuery
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Further

    Ok, Im a lot further now, but I'm having a couple problems still. The buttons isn't in the right place, if you look at the picture in my last post, and I'd like the arrow to switch directions within the button. Thanks

    http://www.nintendovation.com/index.php

    index.php
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    	<head>
    		<title>Nintendovation</title>
    		<link rel="stylesheet" type="text/css" href="style1.css" />
    		<script language="JavaScript" src="library/motionpack.js"></script>
    	</head>
    	<body>
    	<div id="wrapper">
    	<div id="header">
    	<div id="logo">
    	<img src="images/logo.png">
    	</div> <!--logo-->
    	<div id="search">
    	<label for="search">Search</label><input type="text" name="search" />
    	</div> <!--search-->
    	<div id="navigation">
    	<div id="mydiv" style="display:none; overflow:hidden; height:19px;"><a href="index.php">home</a></div>
    	<a href="javascript:;" onmousedown="toggleSlide('mydiv');"><div id="click"><img src="images/buttton.png" /></div></a>
    	</div> <!--navigation-->
    	</div> <!--header-->
    	<div id="content">
    	<?php
    	include 'library/config.php';
    	include 'library/opendb.php';
    
    	$query  = "SELECT title, date, body FROM articles";
    	$result = mysql_query($query);
    
    	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
    	{
    	    echo "<h2>{$row['title']}</h2>" .
    	         "<span >{$row['date']}</span>" . 
    	         "{$row['body']}";
    	} 
    
    	include 'library/closedb.php';
    	?>
    	</div> <!--content-->
    	<div id="footer">
    	</div> <!--footer-->
    	</div> <!--wrapper-->
    	</body>
    </html>
    style1.css
    Code:
    * {
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
    
    body {
    	font: 12px 'Century Gothic';
    	text-align: center;
    }
    
    a {
    	text-decoration: none;
    }
    
    a:link {
    	color: #D7DFE2;
    }
    
    a:visited {
    	color: #D7DFE2;	
    }
    
    a:active {
    	color: #D7DFE2;
    }
    
    a:hover {
    	color: #ADB6C3;
    }
    
    div#wrapper { 
    text-align:left; /* reset text alignment */ 
    width:748px; /* or a percentage, or whatever */ 
    margin:0 auto; /* for the rest */ 
    border-left: solid #2E2E2E 1px;
    border-right: solid #2E2E2E 1px;
    }
    
    #header {
    	background: url('images/header.png') repeat-x;
    	width: 100&#37;;
    	height: 63px;
    }
    
    #logo {
    	height: 63px;
    	margin-left: 30px;
    	float: left;
    	
    }
    
    #search {
    	float: right;
    	height: 63px;
    	font-size: 14px;
    	background: url('images/search.png') no-repeat right;
    	margin-right: 30px;
    }
    
    #search input {
    	width: 100px;
    	height 20px;
    	margin-top: 23px;
    	font-size: 14px;
    	margin-right: 15px;
    }
    
    #search label {
    	padding-right: 12px;
    	margin-top: 23px;
    	color: #6E6E6E;
    }
    
    #navigation {
    	clear: both;
    }
    
    #mydiv {
    	background-color: #61B6D3;
    	border-top: solid #416589 1px;
    	padding: 0 20px 0 20px;
    	font: 12px 'Century Gothic';
    	font-weight: 500;
    	color: #D7DFE2;
    }
    
    #click {
    	width: 100%;
    	background-color: #DBDDE0;
    	height: 6px;
    	text-align: center;
    	border-top: solid #416589 1px;
    	border-bottom: solid #979EA8 1px;
    }
    
    #content {
    	padding: 20px;
    	padding-top: 40px;
    }
    
    #content input {
    	border: solid #6AB0D2 1px;
    	margin-bottom: 5px;
    	padding: 2px;
    }
    
    .date {
    font-style: italic;
    }
    motionpack.js
    Code:
    var timerlen = 5;
    var slideAniLen = 250;
    
    var timerID = new Array();
    var startTime = new Array();
    var obj = new Array();
    var endHeight = new Array();
    var moving = new Array();
    var dir = new Array();
    
    function slidedown(objname){
            if(moving[objname])
                    return;
    
            if(document.getElementById(objname).style.display != "none")
                    return; // cannot slide down something that is already visible
    
            moving[objname] = true;
            dir[objname] = "down";
            startslide(objname);
    }
    
    function slideup(objname){
            if(moving[objname])
                    return;
    
            if(document.getElementById(objname).style.display == "none")
                    return; // cannot slide up something that is already hidden
    
            moving[objname] = true;
            dir[objname] = "up";
            startslide(objname);
    }
    
    function startslide(objname){
            obj[objname] = document.getElementById(objname);
    
            endHeight[objname] = parseInt(obj[objname].style.height);
            startTime[objname] = (new Date()).getTime();
    
            if(dir[objname] == "down"){
                    obj[objname].style.height = "1px";
            }
    
            obj[objname].style.display = "block";
    
            timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
    }
    
    function slidetick(objname){
            var elapsed = (new Date()).getTime() - startTime[objname];
    
            if (elapsed > slideAniLen)
                    endSlide(objname)
            else {
                    var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                    if(dir[objname] == "up")
                            d = endHeight[objname] - d;
    
                    obj[objname].style.height = d + "px";
            }
    
            return;
    }
    
    function endSlide(objname){
            clearInterval(timerID[objname]);
    
            if(dir[objname] == "up")
                    obj[objname].style.display = "none";
    
            obj[objname].style.height = endHeight[objname] + "px";
    
            delete(moving[objname]);
            delete(timerID[objname]);
            delete(startTime[objname]);
            delete(endHeight[objname]);
            delete(obj[objname]);
            delete(dir[objname]);
    
            return;
    }
    
    function toggleSlide(objname){
      if(document.getElementById(objname).style.display == "none"){
        // div is hidden, so let's slide down
        slidedown(objname);
      }else{
        // div is not hidden, so slide up
        slideup(objname);
      }
    }


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
  •