...

View Full Version : Problem adding another menu in javascript



walkie
07-25-2011, 09:58 AM
Hi,

I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

If I'm not making myself clear, please let me know and I will try to explain it better :)

Thanks
walkie


index.htm


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
<div id="leftSide">
<!--Site Title-->
<div id="title">
<!--Main Title-->
<h1><span></span>Identity</h1>
<!--Caption/Sub Title-->
<span class="titleSubText">the portfolio of john smith</span>
</div>
<div id="arrowWrapper"><div id="arrow"></div></div>
<div id="buttonsWrapper">

<!--About Button-->
<div id="aboutButtonWrapper">
<div class="navButton" id="aboutButton"></div>
<div class="navCaption" id="aboutCaption">
<!--About Button: Label-->
<span class="navCaptionText">about</span><br />
<!--About Button: Sub-Label-->
<span class="navSubCaptionText">who I am</span>
</div>
</div>

<!--Portfolio Button-->
<div id="portfolioButtonWrapper">
<div class="navButton" id="portfolioButton"></div>
<div class="navCaption" id="portfolioCaption">
<!--Portfolio Button: Label-->
<span class="navCaptionText">portfolio</span><br />
<!--Portfolio Button: Sub-Label-->
<span class="navSubCaptionText">my work</span>
</div>
</div>

<!--Services Button-->
<div id="servicesButtonWrapper">
<div class="navButton" id="servicesButton"></div>
<div class="navCaption" id="servicesCaption">
<!--Services Button: Label-->
<span class="navCaptionText">services</span><br />
<!--Services Button: Sub-Label-->
<span class="navSubCaptionText">what I do</span>
</div>
</div>

<!--Contact Button-->
<div id="contactButtonWrapper">
<div class="navButton" id="contactButton"></div>
<div class="navCaption" id="contactCaption">
<!--Contact Button: Label-->
<span class="navCaptionText">contact</span><br />
<!--Contact Button: Sub-Label-->
<span class="navSubCaptionText">get in touch</span>
</div>
</div>

</div>
</div>

<div id="contentPanelWrapper">
<div id="contentPanelEdge"></div>


<!--Wrapper That Contains 'About' Content-->
<div class="content" id="aboutContent">
<!--Title-->
<div class="contentTitle">about</div>
<!--Body Text-->
<div id="aboutText">
<h3>Who I Am</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
sagittis id neque.</p><br />
<p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
</div>
</div>


<!--Wrapper That Contains 'Portfolio' Content-->
<div class="content" id="portfolioContent">
<!--Title-->
<div class="contentTitle">portfolio</div>
<!--Image Slider-->
<div id="portfolioSlider">
<div id="sliderToolbar">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="imageWrapper">
<ul id="imgList">
<!--Portfolio Images Go Here (See Documentation)-->
<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
</ul>
</div>
</div>
</div>


<!--Wrapper That Contains 'Services' Content-->
<div class="content" id="servicesContent">
<!--Title-->
<div class="contentTitle">services</div>
<!--Service 1 Column-->
<div class="serviceColumn" id="serviceColumn1">
<h3>Identity Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 2 Column-->
<div class="serviceColumn" id="serviceColumn2">
<h3>Web Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 3 Column-->
<div class="serviceColumn" id="serviceColumn3">
<h3>Icon + UI Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
</div>


<!--Wrapper That Contains 'Contact' Content-->
<div class="content" id="contactContent">
<!--Title-->
<div class="contentTitle">contact</div>
<div id="contactFormWrapper">
<!--Contact Form-->
<form id="contact" method="post" action="mail.php">
<input type="text" id="name" name="name" value="name" />
<input type="text" id="email" name="email" value="email" /><br /><br />
<textarea id="message" name="message" rows="" cols="">message</textarea>
<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
</form>
<div id="successMessage"></div>
</div>
</div>


</div>

</body>
</html>



javascript.js


numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){

// Initializes FancyBox Lightbox
$("a.sliderImage").fancybox({
'zoomSpeedIn':200,
'zoomSpeedOut':200,
'overlayShow':true,
'padding':4
});

SelectButton("none");
$("#arrow").fadeOut(0);

if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
$("input").css({"height":13});
$("#name").css({"width":155});
};

$("#title").click(function(){
ShowPanel("none");
});

// Handles Formatting the Portfolio Slider
$("#imgList").children().each(function(){
numImages++;
});
$("#imageWrapper").css({"width":(numImages*541)});

// Handles Function of the Portfolio Slider
$("#prevButton").click(function(){
if (currentImage==1){
currentImage=numImages;
} else {
currentImage--;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
$("#nextButton").click(function(){
if (currentImage==numImages){
currentImage=1;
} else {
currentImage++;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});

// Handles Rollover and Click For the Nav Buttons
$("#aboutButton").mouseenter(function(){
SelectButton("about");
});
$("#portfolioButton").mouseenter(function(){
SelectButton("portfolio");
});
$("#servicesButton").mouseenter(function(){
SelectButton("services");
});
$("#contactButton").mouseenter(function(){
SelectButton("contact");
});
$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
SelectButton("none");
});
$("#aboutButton").click(function(){
ShowPanel("about");
});
$("#portfolioButton").click(function(){
ShowPanel("portfolio");
});
$("#servicesButton").click(function(){
ShowPanel("services");
});
$("#contactButton").click(function(){
ShowPanel("contact");
});

// Handles Contact Form Behavior
$("#name").focus(function(){
$("#name").css({"background-color":"#FFFFFF"});
if ($("#name").val()=="name"){
$("#name").val("");
$("#name").css({"color":"#444444"});
};
});
$("#name").blur(function(){
if ($("#name").val()==""){
$("#name").val("name");
$("#name").css({"color":"#888888"});
$("#name").css({"background-color":"#ffdddd"});
};
});
$("#email").focus(function(){
$("#email").css({"background-color":"#FFFFFF"});
if ($("#email").val()=="email"){
$("#email").val("");
$("#email").css({"color":"#444444"});
};
});
$("#email").blur(function(){
if ($("#email").val()==""){
$("#email").val("email");
$("#email").css({"color":"#888888"});
$("#email").css({"background-color":"#ffdddd"});
};
if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
$("#email").css({"background-color":"#ffdddd"});
};
});
$("#message").focus(function(){
$("#message").css({"background-color":"#FFFFFF"});
if ($("#message").val()=="message"){
$("#message").val("");
$("#message").css({"color":"#444444"});
};
});
$("#message").blur(function(){
if ($("#message").val()==""){
$("#message").val("message");
$("#message").css({"color":"#888888"});
$("#message").css({"background-color":"#ffdddd"});
};
});
$("#submit").mousedown(function(){
$("#submit").attr({"src":"images/sendButtonSel.png"});
});
$("#submit").mouseup(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#submit").mouseout(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#name,#email,#message").keyup(function(){
if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
EnableSubmitButton();
} else {
DisableSubmitButton();
};
});
$("#submit").click(function(){
DisableSubmitButton();
var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function() {
ResetForm();
$("#successMessage").fadeIn(10);
setTimeout('$("#successMessage").fadeOut(1000);',2000);
}
});
return false;
});

});

function EnableSubmitButton(){
$("#submit").attr({"disabled":""});
$("#submit").attr({"src":"images/sendButton.png"});
};

function DisableSubmitButton(){
$("#submit").attr({"disabled":"disabled"});
$("#submit").attr({"src":"images/sendButtonDis.png"});
};

function ResetForm(){
DisableSubmitButton();
$("#name, #email, #message").css({"background-color":"#FFFFFF"});
$("#name, #email, #message").css({"color":"#888888"});
$("#name").val("name");
$("#email").val("email");
$("#message").val("message");
};

function ShowPanel(panel){
currentPanel=panel;
SelectButton(panel);
$(".content").fadeOut(250);
switch(panel){
case "none":
$("#contentPanelWrapper").animate({"left":"100%"},500);
$("#arrow").fadeOut(50)
break;
case "about":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#aboutContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
break;
case "portfolio":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#portfolioContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
break;
case "services":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#servicesContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
break;
case "contact":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#contactContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
break;
};
};

function SelectButton(button){
if (currentPanel!="about"){
$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"0px 0px"});
};
if (currentPanel!="portfolio"){
$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"0px -64px"});
};
if (currentPanel!="services"){
$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"0px -128px"});
};
if (currentPanel!="contact"){
$("#contactCaption").animate({"left":50},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
$("#contactButton").css({"background-position":"0px -192px"});
};
switch(button){
case "none":
break;
case "about":
$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"65px 0px"});
break;
case "portfolio":
$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"65px -64px"});
break;
case "services":
$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"65px -128px"});
break;
case "contact":
$("#contactCaption").animate({"left":70},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
$("#contactButton").css({"background-position":"65px -192px"});
break;
};

};

walkie
07-25-2011, 09:59 AM
Also, here are the CSS if it's needed:

style.css


@charset "UTF-8";

* { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; }

body {
background-color:#eec015;
overflow:hidden;
}

h1 {
position:relative;
font-family:Helvetica, Arial, sans-serif;
color:#FFFFFF;
font-size:19pt;
font-weight:normal;
text-shadow: rgba(0,0,0,0.75) 0px 1px 2px;
}

h1 span {
background: url(../images/textGradient.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:30px;
}

h3 {
font-size:10pt;
}

#name, #email, #message {
border:1px #A5A5A5 solid;
background-color:#FFFFFF;;
font-family:Helvetica, Arial, sans-serif;
font-size:10pt;
resize:none;
color:#888888;
}

#name, #email {
height:20px;
width:166px;
padding-top:4px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
}

#message {
width:344px;
height:51px;
padding-top:4px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
}

#submit {
padding-top:6px;
}

#leftSide {
position:absolute;
left:0px;
right:57%;
top:0px;
bottom:0px;
width:auto;
height:auto;
background-color:#4f545a;
background-image:url(../images/leftSide7.png);
background-position:right;
background-repeat:repeat-y;
}

#title {
position:absolute;
top:50%;
margin-top:-33px;
right:265px;
width:auto;
height:66px;
text-align:right;
line-height:26px;
cursor:pointer;
}

.titleSubText {
font-family:Helvetica, Arial, sans-serif;
color:#a2a0a0;
font-size:10pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}

#arrowWrapper {
position:absolute;
top:50%;
margin-top:-143px;
right:170px;
width:12px;
height:286px;
}
#arrow {
position:absolute;
left:0px;
top:22px;
width:12px;
height:20px;
background-image:url(../images/highlightArrow.png);
}

#buttonsWrapper {
position:absolute;
top:50%;
margin-top:-143px;
right:15px;
width:145px;
height:286px;
}

#aboutButtonWrapper {
position:absolute;
left:0px;
top:3px;
width:145px;
height:64px;
}

#aboutButton {
background-position:0px 0px;
}

#portfolioButtonWrapper {
position:absolute;
left:0px;
top:76px;
width:145px;
height:64px;
}

#portfolioButton {
background-position:0px -64px;
}

#servicesButtonWrapper {
position:absolute;
left:0px;
top:148px;
width:145px;
height:64px;
}

#servicesButton {
background-position:0px -128px;
}

#contactButtonWrapper {
position:absolute;
left:0px;
top:221px;
width:145px;
height:64px;
}

#contactButton {
background-position:0px -192px;
}

.navButton {
position:absolute;
left:0px;
top:0px;
width:65px;
height:64px;
background-image:url(../images/icons.png);
cursor:pointer;
z-index:2;
}

.navCaption {
position:absolute;
left:50px;
top:16px;
width:75px;
height:40px;
opacity:0;
z-index:1;
}

.navCaptionText {
font-family:Helvetica, Arial, sans-serif;
color:#c2c2c2;
font-size:11pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}

.navSubCaptionText {
font-family:Helvetica, Arial, sans-serif;
color:#898989;
font-size:8pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}

#contentPanelWrapper {
position:absolute;
top:50%;
margin-top:-140px;
left:100%;
right:0px;
width:auto;
height:280px;
background-image:url(../images/panelBack.png);
overflow:hidden;
}

#contentPanelEdge {
position:absolute;
left:0px;
top:0px;
width:30px;
height:280px;
background-image:url(../images/panelEdge2.png);
}

.content {
position:absolute;
left:37px;
top:27px;
width:565px;
height:185px;
padding-top:45px;
}

.contentTitle {
position:absolute;
left:0px;
top:0px;
width:565px;
height:30px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:16pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
}

#aboutContent {
display:none;
}

#aboutText {
height:144px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:10pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
overflow:auto;
}

#portfolioContent {
background-image:url(../images/sliderBack.png);
background-position:-3px 50px;
background-repeat:no-repeat;
display:none;
}

#portfolioSlider {
position:absolute;
left:8px;
top:60px;
width:541px;
height:139px;
overflow:hidden;
}

#imageWrapper {
position:absolute;
left:0px;
top:0px;
width:541px;
height:139px;
}

#imgList ul {
list-style:none;
}

#imgList li {
display:inline;
float:left;
}

#sliderToolbar {
position:absolute;
top:85px;
left:193px;
width:154px;
height:48px;
background-image:url(../images/navbarBack.png);
z-index:3;
}

.sliderButton {
position:absolute;
top:8px;
width:32px;
height:31px;
background-image:url(../images/navButtons.png);
cursor:pointer;
}

#prevButton {
left:26px;
background-position:0px 0px;
}
#prevButton:active {
background-position:32px 0px;
}

#nextButton {
left:99px;
background-position:0px -62px;
}
#nextButton:active {
background-position:32px -62px;
}

#servicesContent {
display:none;
}

.serviceColumn {
position:absolute;
top:55px;
width:165px;
height:165px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:8pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
line-height:12pt;
}

#serviceColumn1 {
left:0px;
}

#serviceColumn2 {
left:200px;
}

#serviceColumn3 {
left:400px;
}

#contactContent {
display:none;
}

#contactFormWrapper {
position:absolute;
left:2px;
top:67px;
width:350px;
height:150px;
}

#contact {
line-height:7px;
letter-spacing:1px;
text-align:right;
}

#successMessage {
position:absolute;
left:0px;
top:102px;
width:129px;
height:27px;
background-image:url(../images/sentBadge.png);
z-index:3;
display:none;
}

#submit {
width:84px;
height:27px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum