homepage Welcome to WebmasterWorld Guest from 54.196.207.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Nav not working
spcohen




msg:4164787
 3:09 pm on Jul 5, 2010 (gmt 0)

My nav doesn't seem to work with this jquery.. I'm a newbie, so cannot see the problem.. any help greatly appreciated:
www.sirtuesday.com/test

 

spcohen




msg:4164792
 3:16 pm on Jul 5, 2010 (gmt 0)

here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.sirtuesday.com/test/jquery.tools.min.js"></script>
<script type="text/javascript" src="scroll.min.js"></script>
<style type="text/css">

* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
background-color: #cccccc;
text-align:center;
min-height:300px;/* for good browsers*/
min-width:800px;/* for good browsers*/
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 300px;
}
#inner {
width: 800px;
height: 300px;
text-align: center;
margin-left:auto;
margin-right:auto;
border: solid 1px #000;
}



#main {
position: relative;
text-align:left;
overflow : hidden;
height : 300px;
font-size: 11px;
width:100%;


}
#pages {
position : absolute;
width:600px;


}
.page {
padding : 30px 0;

background-color:#eee;
}
.scrollable {
position : relative;
overflow : hidden;
width : 600px;
height:300px;
margin : 0 auto;
}
.scrollable .items {
width : 20000em;
position : absolute;
clear : both;
}
.item {
float : left;
cursor : pointer;
width : 600px;

}
.item img {
border : 1px solid #616262;
}

#navmenu
{
position:relative;
float:right;
text-align:left;
height:300px;
width:180px;
border-left: solid 1px #fff;
padding-left:8px;
padding-top:100px;
font-size:14px;

}
.main_navi li {
list-style:none;
}








</style>

</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<div id="main">
<div id="pages">
<!-- page #1 Biography -->
<div class="page">
<div class="navi"></div>

<!-- inner scrollable #1 -->
<div class="scrollable">
<!-- root element for scrollable items -->
<div class="items">
<div class="item">
<img src="http://www.dizenoco.com/demo/wp-content/themes/brave-zeenat/timthumb.php?src=http://www.dizenoco.com/demo/slides/slide-42.jpg&amp;h=300&amp;w=898&amp;zc=1" alt="My Website Projects: Part 3" />
<h3><a href="http://www.dizenoco.com/demo/2010/06/my-website-projects-part-3/" title="Permanent Link to My Website Projects: Part 3">My Website Projects: Part 3</a></h3>
<div class="meta-data">Posted by Dizeno Co | Published on Monday, June 21st, 2010 | <a href="http://www.dizenoco.com/demo/2010/06/my-website-projects-part-3/#comments" title="Comment on My Website Projects: Part 3">2 Comments</a></div>
<div>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div><div class="meta-data">Taged in: <a href="http://www.dizenoco.com/demo/tag/portfolio/" rel="tag">Portfolio</a>, <a href="http://www.dizenoco.com/demo/tag/websites/" rel="tag">Websites</a>, </div>
</div>
<div class="item">
<img src="http://www.dizenoco.com/demo/wp-content/themes/brave-zeenat/timthumb.php?src=http://www.dizenoco.com/demo/slides/elegancia-900.jpg&amp;h=300&amp;w=898&amp;zc=1" alt="Elegancia: Dizeno&#8217;s Newest Wordpress Theme" />
<h3><a href="http://www.dizenoco.com/demo/2010/06/elegancia-dizenos-newest-wordpress-theme/" title="Permanent Link to Elegancia: Dizeno&#8217;s Newest Wordpress Theme">Elegancia: Dizeno&#8217;s Newest Wordpress Theme</a></h3>
<div class="meta-data">Posted by Dizeno Co | Published on Sunday, June 20th, 2010 | <a href="http://www.dizenoco.com/demo/2010/06/elegancia-dizenos-newest-wordpress-theme/#respond" title="Comment on Elegancia: Dizeno&#8217;s Newest Wordpress Theme">No Comments</a></div>

<div>We call it a daring theme; this is not somthing you see everyday. A unique Wordpress theme that displays static header and footer throughout the site. The homepage slider content is vertically middle aligned. Option to replace conventional sidebar with tabbed content. In creating this theme, we dared to be different, now its your turn.
Known Issues
Due to the design constraints, the homepage slider displays the last post in the slider in the beginning as well. It doesnt really hurt, but we thought we will let you know before hand.
Feature ListFixed...</div>'
<div class="meta-data">Taged in: </div>
</div>
</div>
</div>
</div>
<!-- page #2 Works -->
<div class="page">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
<div class="item">
Works Page Item 1
<div>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div>
</div>
<div class="item">
Works Page Item 2
<div>abcdef Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div>
</div>
</div>
</div>
</div>
<!-- page #3 Press -->
<div class="page">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
<div class="item">
Press Page Item 1
<div>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div>
</div>
</div>
</div>
</div>
<!-- page #4 Links -->
<div class="page">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
<div class="item">
Links Page Item 1
<div>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div>
</div>
</div>
</div>
</div>
<!-- page #5 Contact -->
<div class="page">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
<div class="item">
Contact Page Item 1
<div>Sed tempor lectus in risus. Nullam vestibulum, odio ac pulvinar condimentum, urna neque aliquet ipsum, in blandit velit nunc eget mauris. Suspendisse aliquet sem ut nulla. Cras mollis ornare nisl. Morbi ac mi. Nunc eget nisi. Donec at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed diam. Ut sagittis ultrices urna. Suspendisse eget erat non purus varius sodales.Vivamus volutpat risus non est. Nullam et ipsum. Nunc ac risus. Pellentesque consectetuer nisi a nulla porttitor tincidunt. Cras pretium...</div>
</div>
</div>
</div>
</div>
</div>
<div id="navmenu">
<ul class="main_navi">
<li><a href="#bio">Biography</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#press">Press</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>

</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
$("#main").scrollable({
vertical:true,
circular: true,
size: 1,
clickable: false,
keyboard: 'static',
// onSeek: function(event, i) {
// horizontal.scrollable(i).focus();
// }
}).navigator({
// select .main_navi to be used as navigator
navi: "div#navmenu ul.main_navi",

// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',

// assign "current" class name for the active A tag inside navigator
activeClass: 'current',

// make browser's back button work
history: true
}
);


var horizontal = $(".scrollable").scrollable({ size: 1 }).circular().navigator(".navi");
horizontal.eq(0).scrollable().focus();
});
</script>

</body>
</html>

spcohen




msg:4165267
 4:40 pm on Jul 6, 2010 (gmt 0)

anyone?

enigma1




msg:4170603
 11:48 am on Jul 15, 2010 (gmt 0)

Seems you did not download all the js files for the scroll. I believe there are 3 files and you need them.

brokenbynubs




msg:4178588
 2:41 pm on Jul 29, 2010 (gmt 0)

I'd suggest using the jquery tools Download page to compile all of those .js files into one. Also, $(document).ready(function() has been known to cause tons of problems with the jquery tools pack. If you could post a link to your test page I'd be happy to check everything out.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved