PDA

View Full Version : Trying to move animated side bar- any thoughts? css/jquery/html



whatpapertiger
Feb 8th, 2010, 11:05 PM
Hey everyone, I am trying to adapt this design..( http://www.newghost.net/TRY.html) right now the sidebar animates when you click it and goes to hiding... on the right side of the page...

I am trying to get the side bar to come from the top- so that it spans across the top and when you click it it goes to hide away up in the top. (and not the right side....) I would like to keep the function it has as it moves... Would eventually like to put some buttons on this bar- like file download buttons etc.


Any thoughts on how to make this work? I feel like I have hit a wall..I am really new to this whole css/java/jquery thing and am practicing and working out the kinks..

any advice, or resources on the how-to is appreciated. Below are my css/html docs.... If I need to post the jquery docs let me know... I can do that too..

Here is my css document:

/* Reset */
html{color:#000;background:#fefefe;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,field set,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}

/* Global */
html {
font-size:125%;
background:#fff;
}
body {
color:#222;
font:400 50%/1 Monaco, 'Courier New', Courier, serif;
background:#fff;
width:100%;
}

/* Links */
a {
outline:0;
color:#000;
}
a:focus {
background:#fff;
color:#000;
}

.page .page .entry-content {
padding:1em;
display:block;
margin:80px 0 20px;
width:400px;
line-height:1.4em;
}
body.page-template-news-php {
padding:80px 0 20px;
}
.page-template-news-php .entry-content {
margin:0 0 10px !important;
width:400px;
line-height:1.4em;
}
.page-template-news-php .entry-content h2 {
text-transform:uppercase;
}
.page-template-news-php .entry-content .entry-date {
font-style:0.9em;
padding:4px 0 8px;
}


.s-category-news .entry-content {
margin:80px 0 10px !important;
width:400px;
line-height:1.4em;
}
.s-category-news #pagination {
display:none;
}

.entry-content {
padding:1em;
display:block;
margin-top:80px;
}
.entry-content img {
display:inline;
border:0;
float:left;
}
#postHeader h1 {
font-size:2em;
color:#000;
padding:6px 10px 10px;
position:fixed;
top:20px;
left:0;
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial;
font-weight:700;
letter-spacing:-1px;
text-transform:titlecase;
}
#pagination {
font-size:1.4em;
color:#000;
padding:10px 10px;
position:fixed;
top:60px;
left:0;
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial;
font-weight:700;
letter-spacing:-1px;
}
.nav-previous {
display:inline;
}
.nav-next {
display:inline;
}
.nav-previous a {
color:#000;
text-decoration:none;
}
.nav-next a {
color:#000;
text-decoration:none;
}

/* SIDEBAR */
#sidebar {
bottom:0;
color:#fff;
display:block;
position:fixed;
text-shadow:0 -1px 0 #000;
top:0;
width:190px;
}
#sidebar #header {
position:absolute;
top:0;
left:0;
display:block;
width:190px;
background:url(Images/logotype.png) no-repeat;
height:102px;
text-indent:-9000px;
}
#sidebar #header h1 a {
display:block;
width:190px;
height:102px;

}
#sidebar #header h1 a:focus {
background:none;
}
#sidebar .bg {
position:absolute;
top:102px;
right:0;
left:0;
bottom:0;
background:#000;
background:rgba(0, 0, 0, 0.8);
width:190px;
z-index:0;
margin-top:inherit
}
#sidebar .hide {
position:absolute;
display:block;
top:0;
left:2px;
bottom:0;
width:10px;
height:100%;
z-index:10;
cursor:pointer;
}
#sidebar .hide span {
position:relative;
top:50%;
display:block;
}
#sidebar .show {
position:absolute;
display:block;
top:0;
left:2px;
bottom:0;
width:10px;
height:100%;
z-index:10;
cursor:pointer;
}
#sidebar .show span {
position:relative;
top:50%;
display:block;
}
#sidebar .wrap {
position:relative;
z-index:1;
top:102px;
padding:0 10px 0 20px;
font-size:1em;
}
#sidebar h2 {
color:#fff;
font-weight:700;
text-transform:uppercase;
margin:20px 0 4px;
}
#sidebar ul li {
line-height:1.4em;
font-size:0.9em;
}
#sidebar ul#news li {
margin:0 0 10px;
}
#sidebar ul#news li h3 {
text-transform:uppercase;
}
#sidebar a {
color:#fff;
text-decoration:none;
}
#sidebar a:hover {
text-decoration:underline;
}
#sidebar a:focus {
background:#fff;
color:#000;
text-shadow:none;
}
#sidebar .closewrap {
margin-top:12px;
}
#sidebar .built {
position:absolute;
bottom:10px;
right:20px;
color:#fff;
color:rgba(255,255,255,0.5);
text-shadow:none;
z-index:100;
}
#sidebar .built a {
color:#fff;
color:rgba(255,255,255,0.5);
}

/* Footer */
#footer {
width:100%;
clear:both;
display:block;
}
#footer p {
padding:20px 10px;
}

#ie6 {
background:black;
position:absolute;
top:0;
bottom:0;
z-index:1000;
width:100%;
height:100%;
color:#fff;
font-size:60pt;
padding:20px;
}

.newswrap{
height:90px;
}
#newsHolder{
height:90px;
}
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
background:rgba(255,255,255,0.1);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.jScrollPaneDrag {
position: absolute;
background:rgba(255,255,255,0.5);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor: pointer;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
*background-color: #999;
height: 9px;
}@charset "UTF-8";
/* CSS Document */

------------------------------------------------------------------------------





and here is my html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content= "PHRASE WORDS" />
<meta name="keywords" content="PHRASE WORDS" />
<meta name="author" content= "NAME" />
<meta name="copyright" content= "NAME" />

<link rel="stylesheet" type="text/css" href="mscripts/style.css" />
<meta name="generator" content="WordPress 2.9.1" />
<link rel="shortcut icon" href="../mscript/Images/favicon.ico" />
<script type='text/javascript' src='mscripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='mscripts/jquery.load.min.js'></script>
<script type='text/javascript' src='mscripts/jquery.mousewheel.js'></script>
<script type='text/javascript' src='mscripts/jquery.em.js'></script>
<script type='text/javascript' src='mscripts/jquery.jscrollpane.js'></script>
<script type='text/javascript' src='mscripts/jquery.initialize.js'></script>
</head>

<body class="wordpress y2010 m02 d01 h02 home blog">
<!--[if lte IE 6]>
<div id="ie6">It's yours</div>
<![endif]-->

<div id="post-6315" class="try p1 post publish author-category-images y2010 m01 d26 h16">
<div id="postHeader">
<h1>Test Site</h1>
<div id="pagination">
<div class="nav-previous"><a href="http:// /page/2/" >PAST</a></div>
/
<div class="nav-next"></div>
</div>
</div>

<div class="entry-content">
<p><img class="alignnone size-full wp-image-5140" title="IMAGE TITLE HERE" src="IMAGE JPG HERE" alt="" width="800" height="600" /></p>
</div>
</div>

<!-- begin sidebar -->
<div id="sidebar">

<div id="header">

</div>

<div class="wrap">

<h2>Pages</h2>
<ul>
<li class="page_item page-item-4857"><a href="linkpapge/about-2/" title="Aboutlink here">LINK NAME</a></li>
<li class="page_item page-item-4860"><a href="linkhere" title="News link here">News LINKS HERE</a></li>
<li class="page_item page-item-6319"><a href="link here/" title="link title">LINK NAME</a></li>
</ul>

<h2>Latest News</h2>
<div class="newswrap">
<div id="newsHolder">
<ul id="news">
<li>
<h3>TEST TEST TEST</h3>
<div class="entry-date">OCTOBER 29th, 2006</div>
<p>lorem ibsum <a href="http://newghost.net class="more-link">Read More <span class="meta-nav">&raquo;</span></a></p>
</li>
<li>
<h3>TEST @ TEST2</h3>
<div class="entry-date">FEB 19th, 2004</div>
<p>TEST TES TE TST <a href="http://newghost.net/" target="_blank">THIS</a> check it out <br />
<a href="newghost.net target="_blank">http://newghost.net</a></p>
</li>
<li>
<h3> WORDS GO HERE</h3>
<div class="entry-date">ENTER DATE</div>
<p>WORDS WORDS<a href="link here" target="_blank">PHRASE TITLE</a>.. Good looks <a href="insert link here" target="_blank">nowww</a>.</p>
<p><a href="insert html" target="_blank">insert html</a></p>
</li>
<li>
<a href="insert archive">News archive &raquo;</a>
</li>
</ul>
</div>
</div>

<li id="linkcat-2" class="linkcat"><h2>TITLE HERE</h2>
<ul class=' blogroll'>
<li><a href="linkhere" rel="name" target="_blank">name phrase</a></li>

</ul>
</li>

<h2>RSS</h2>
<a href="address/feed/" title=" latest posts" rel="alternate" type="application/rss+xml">Subscribe</a>

<div class="closewrap">
<a href="#close" class="close">x Close</a>
</div>
</div>
<span class="bg"></span>
<span class="hide"><span>&raquo;</span></span>
<span class="show"><span>&laquo;</span></span>
</div>
<!-- end sidebar -->

<div id="footer">
</p>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12650616-1");
pageTracker._trackPageview();
} catch(err) {}
</script>

</body>
</html>
<!-- Dynamic page generated in 0.267 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2010-02-01 02:15:46 -->

jenius
Feb 9th, 2010, 04:21 AM
How much do you know about CSS? All you need to do is change the position of the div "sidebar". You will also have to change how the content is laid out on the sidebar, and the jquery animation style (from sliding left/right to up/down)

If you are going in to this blind, which it seems that you are, I would suggest starting with a more simple project and building your way up to this - it's never a good idea to dive into something that you have no idea how it works and trying to modify it - trust me, I've tried many a time, and it ends up in lots of frustration and time wasting.

Why dont you learn a bit about css and html and how page layouts work first. Try out w3schools or by looking for books on either one. I would highly recommend "CSS: The Missing Manual (http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/ref=sr_1_1?ie=UTF8&s=books&qid=1265685396&sr=1-1)" For getting a solid handle on how css works.

I know this might not have been the response you were looking for, but in the long run, you will thank me. It sucks, but in order to build something advanced, you really have to learn the basics first. We are here to help you out with code, not write it for you.

I would suggest starting from scratch, and seeing if you can write the css for a sidebar that looks like that yourself. Then you will understand how it is made. After this, it will be easy for you to change the layout and move it to the top instead. The next step is learning how jquery animation works (don't worry, it's actually very simple) and applying it to the sidebar. As you learn these things, you will be able to look at the source of the page you are trying to emulate and understand what he was doing, and why.

whatpapertiger
Feb 9th, 2010, 08:02 AM
....before I posted I had already played around with moving the div tag... I am pretty sure the problem lies within the connection between the jquery and the css... Thats what I have been mainly stuck on..

jenius
Feb 10th, 2010, 05:36 AM
I believe it - did you read any of my post? haha