jQuery Syntax Error

Question

dylank 0 Junior Poster in Training

13 Years Ago

Hey guys - I'm working on a new website template. It works great, except for a little bug with the Contact panel.

It should slide into the screen from the right side into the center, but fails to do so. I believe it is because of the CSS property "display" not being set to "block", but the code states it should:

function showContact() {
	$(".contact_outerPosition").css("display", "block").animate({"bottom":"0em"}, effect_delay, "easeInOutCubic");
}

The website is located @ http://drafts.thatcompdude.com/NewSite/

Help is greatly appreciated!

--Dylan

javascript jquery

2 Contributors
4 Replies
87 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Dylan,

I always wondered what "quantitative easing" looked like in javascript!?!? :-/

Function hideCustomComp doesn't follow the same pattern as the other three hide functions.

In its callback, it hides ".contact_outerPosition" , not ".customComp_outerPosition" .

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dylank 0 Junior Poster in Training · Answer 1 · 2010-12-12T13:08:32+00:00

Here is the Index page 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>That Computer Dude: All Computer Repair, Custom Builds and Consultation</title>
<link rel="stylesheet" href="css/style_1.css"  />
<link rel="stylesheet" href="css/y-reset.css"  />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

var effect_delay = 300;

disableOverflow();
$(document).ready(function(){
	goToHome();
});

//Hiding the screens
function hideHome() {
	$(".home_outerPosition").animate({"left":"-92em"},effect_delay,"easeInOutCubic", function(){$(".home_outerPosition").css("display","none")});
}
function hideAbout() {
	$(".about_outerPosition").animate({"left":"100em"},effect_delay,"easeInOutCubic", function(){$(".about_outerPosition").css("display","none")});
}
function hideContact() {
	$(".contact_outerPosition").animate({"bottom":"-90em"}, effect_delay, "easeInOutCubic", function(){$(".contact_outerPosition").css("display","none")});
}
function hideCustomComp() {
	$(".customComp_outerPosition").animate({"top":"-90em"}, effect_delay, "easeInOutCubic", function(){$(".contact_outerPosition").css("display","none")});
}
//For selecting the screens to show
function goToHome() {
	disableOverflow();
	$("img#bk_img_handle").animate({"left":"-20em","top":"-74em"}, effect_delay*3, "easeInOutCubic");
	hideContact();
	hideCustomComp();
	hideAbout();
	setTimeout('showHome();', effect_delay); 
	enableOverflow();
}

function goToAbout() {
	disableOverflow();
	$("img#bk_img_handle").animate({"left":"-70em","top":"-103em"}, effect_delay*3, "easeInOutCubic");
	hideHome();
	hideContact();
	setTimeout('showAbout();', effect_delay);
	enableOverflow();
}
function goToContact(){
	disableOverflow();
	$("img#bk_img_handle").animate({"left":"-81em","top":"-100em"}, effect_delay*3, "easeInOutCubic");
	hideAbout();
	hideCustomComp();
	hideHome();
	setTimeout('showContact();', effect_delay);
	enableOverflow();
}
function goToCustomComp(){
	disableOverflow();
	$("img#bk_img_handle").animate({"left":"-20em","top":"-50em"}, effect_delay*3, "easeInOutCubic");
	hideAbout();
	hideHome();
	hideContact();
	setTimeout('showCustomComp();', effect_delay);
	enableOverflow();
}

function showHome() {
	$(".home_outerPosition").css("display", "block").animate({"left":"0em"}, effect_delay, "easeInOutCubic");
}
function showAbout() {
	$(".about_outerPosition").css("display", "block").animate({"left":"0em"}, effect_delay, "easeInOutCubic");
}
function showContact() {
	$(".contact_outerPosition").css("display", "block").animate({"bottom":"0em"}, effect_delay, "easeInOutCubic");
}
function showCustomComp() {
	$(".customComp_outerPosition").css("display", "block").animate({"top":"0em"}, effect_delay, "easeInOutCubic");
}
//For hiding and showing the overflows
function disableOverflow() {
	$("body").css("overflow", "hidden");
}
function enableOverflow() {
	$("body").css("overflow", "visible");
}
</script>
</head>

<body id="body">
  <div id="bk_img"><img src="bk_img/1263021_65691011.jpg" id="bk_img_handle"  /></div>
  <div class="middleAllign">
  <!------------------------------------------------------------------------------Home Box-------------------------------------------------------------->
  <div class="home_outerPosition dialog" id="outerPosition">
    <div class="home">
      <div class="bodyheader">
        <div class="bodyheader_left"></div>
        <div class="bodyheader_right"></div>
      </div><!-- end bodyheader class -->
        <div class="contentParent">
          <div class="content">
          <h1>HOME</h1>This is a HOME!<br />
          <ul>
          	<li><a href="#home">Home</a></li>
            <li><a href="#about">About TCD</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#custom_comps">Custom Computers</a></li>
           </ul>
            <button id="button1" onclick="goToHome();">HOME</button>
            <button id="button2" onclick="goToAbout();">ABOUT</button>
            <button id="button3" onclick="goToContact();">CONTACT</button>
            <button id="button4" onclick="goToCustomComp();">CUSTOM COMPUTERS</button>
          </div><!--End of content class-->
        </div><!--End of contentParent class-->
        <div class="footerheader">
          <div class="footerheader_left"></div>
          <div class="footerheader_right"></div>
        </div><!-- end bodyheader class -->
      </div><!--End home div-->
    </div><!--End outerPosition class div-->
    <!-------------------------------------------------------------------------------About Box------------------------------------------------------------------>
    <div class="about_outerPosition dialog">
      <div class="about">
        <div class="bodyheader">
          <div class="bodyheader_left"></div>
          <div class="bodyheader_right"></div>
        </div><!-- end bodyheader class -->
      
        <div class="contentParent">
          <div class="content">
            <h1>Site currently under construction!</h1><br />
            This is the about box!
            <button id="button1" onclick="goToHome();">HOME</button>
            <button id="button2" onclick="goToAbout();">ABOUT</button>
            <button id="button3" onclick="goToContact();">CONTACT</button>
            <button id="button4" onclick="goToCustomComp();">CUSTOM COMPUTERS</button>
          </div><!--End of content class-->
        </div><!--End of contentParent class-->
        
        <div class="footerheader">
          <div class="footerheader_left"></div>
          <div class="footerheader_right"></div>
       </div><!-- end bodyheader class -->
      </div><!--End of ABOUT div-->
    </div><!-- end about_outerPosition -->
    <!---------------------------------------------------------------------------------End about box----------------------------->
    <!-------------------------------------------------------------------------------Contact Box------------------------------------------------------------------>
    <div class="contact_outerPosition dialog">
      <div class="contact">
        <div class="bodyheader">
          <div class="bodyheader_left"></div>
          <div class="bodyheader_right"></div>
        </div><!-- end bodyheader class -->
      
        <div class="contentParent">
          <div class="content">
            <h1>Contact Me</h1><br />
            This is the CONTACT box!
            <button id="button1" onclick="goToHome();">HOME</button>
            <button id="button2" onclick="goToAbout();">ABOUT</button>
            <button id="button3" onclick="goToContact();">CONTACT</button>
            <button id="button4" onclick="goToCustomComp();">CUSTOM COMPUTERS</button>
          </div><!--End of content class-->
        </div><!--End of contentParent class-->
        
        <div class="footerheader">
          <div class="footerheader_left"></div>
          <div class="footerheader_right"></div>
       </div><!-- end bodyheader class -->
      </div><!--End of ABOUT div-->
    </div><!-- end about_outerPosition -->
    <!---------------------------------------------------------------------------------End Contact box----------------------------->
    <!-------------------------------------------------------------------------------Custom Computer Box------------------------------------------------------------------>
    <div class="customComp_outerPosition dialog">
      <div class="customComp">
        <div class="bodyheader">
          <div class="bodyheader_left"></div>
          <div class="bodyheader_right"></div>
        </div><!-- end bodyheader class -->
      
        <div class="contentParent">
          <div class="content">
            <h1>Contact Me</h1><br />
            GEt sum CUSTOM COMPUTERS!
            <button id="button1" onclick="goToHome();">HOME</button>
            <button id="button2" onclick="goToAbout();">ABOUT</button>
            <button id="button3" onclick="goToContact();">CONTACT</button>
            <button id="button4" onclick="goToCustomComp();">CUSTOM COMPUTERS</button>
          </div><!--End of content class-->
        </div><!--End of contentParent class-->
        
        <div class="footerheader">
          <div class="footerheader_left"></div>
          <div class="footerheader_right"></div>
       </div><!-- end bodyheader class -->
      </div><!--End of ABOUT div-->
    </div><!-- end about_outerPosition -->
    <!---------------------------------------------------------------------------------End Custom Computer box----------------------------->
  </div><!-- end middlealign class -->
  
</body>
</html>

dylank 0 Junior Poster in Training · Answer 2 · 2010-12-14T12:53:57+00:00

Wow, how did i miss that?? XD

+100 skill points for you!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-12-14T17:28:52+00:00

Dylan,

That's called a CPFTE - "Copy, Paste, Forget to Edit".

Airshow