Jump to content

Strange error with Javascript and CSS


mrEmpty
 Share

Recommended Posts

Hello. I have a strange error I'm struggling with. Please bear in mind I'm new to web development, and my code is in a messy and experimental phase :) The following Javascript runs fine, however if I move the startTimer() function call to anywhere else, or put anything in front of it, I get no errors but my CSS fails.

$(document).ready(function() {//timer stuff    startTimer();    $(document).bind("mousemove", function() { resetTimer(); });    $(document).bind("touchstart", function() { resetTimer(); });    query();});//query functionfunction query() {//script for iPhone portraitif(Modernizr.mq('all and (max-width: 320px)')) {	 clearTimeout ( alertTimerId );	 clearTimeout ( counterId );}//script for iPhone landscapeif(Modernizr.mq('all and (min-width: 321px)')) {	 clearTimeout ( alertTimerId );	 clearTimeout ( counterId );}//script for iPad portraitif(Modernizr.mq('(max-device-width: 768px) and (orientation: portrait)')) {	 clearTimeout ( alertTimerId );	 clearTimeout ( counterId );}//script for iPad landscapeif(Modernizr.mq('(max-device-width: 1024px) and (orientation: landscape)')) {	 clearTimeout ( alertTimerId );	 clearTimeout ( counterId );}//script for dekstops etc//make sure the timer is goingstartTimer();$(document).bind("mousemove", function() { resetTimer(); });    $(document).bind("touchstart", function() { resetTimer(); });if(Modernizr.mq('all and (min-width: 1028px)')) {	 //script to keep the main content in the center  $(window).resize(function(){  $('#mainBodyList').css({   position:'absolute',   left: ($(window).width() - $('#mainBodyList').outerWidth())/2 + 35,   top: ($(window).height() - $('#mainBodyList').outerHeight())/1.9  });});   //call the centering function$(window).resize();//varsvar line1 = document.getElementById("designLine");var line2 = document.getElementById("codeLine");var designHover = document.getElementById("dMenu");var codeHover = document.getElementById("cMenu");var designHeight = $("#dMenu")[0].scrollHeight;var codeHeight = $("#cMenu")[0].scrollHeight;  //code for the design menu hover$(designHover).hover(function(){  TweenLite.to( $('#designLine'), 1, {css:{height:designHeight - 100, bottom:designHeight - 175}, ease:Expo.easeOut});  TweenLite.to( $('.designMenu'), 1, {css:{top:(designHeight -75) * -1, height:designHeight+100}, ease:Expo.easeOut});},function(){  TweenLite.to( $('#designLine'), 1, {css:{height:'150px', bottom:'75px'}, ease:Expo.easeOut});  TweenLite.to( $('.designMenu'), 1, {css:{top:'0', height:'100px'}, ease:Expo.easeOut});});	//code for the code menu hover$(codeHover).hover(function(){  TweenLite.to( $('#codeLine'), 1, {css:{height:codeHeight - 100, bottom:codeHeight - 175}, ease:Expo.easeOut});  TweenLite.to( $('.codeMenu'), 1, {css:{top:(codeHeight -75) * -1, height:codeHeight+100}, ease:Expo.easeOut});},function(){  TweenLite.to( $('#codeLine'), 1, {css:{height:'150px', bottom:'75px'}, ease:Expo.easeOut});  TweenLite.to( $('.codeMenu'), 1, {css:{top:'0', height:'100px'}, ease:Expo.easeOut});});}};//time functions and tweening opacity functionsvar timerId = 0;var counterId = 0;   function startTimer(){    alertTimerId = setTimeout('fadeGUI()',60000);};	   function resetTimer(){    clearTimeout ( alertTimerId );    clearTimeout ( counterId );    startTimer();    fadeGUIIn();};		function fadeGUI(){    TweenLite.to( $('#logo'), 4, {css:{opacity:0}, ease:Expo.easeOut});    TweenLite.to( $('#mainBodyList'), 4, {css:{opacity:0}, ease:Expo.easeOut});};	   function fadeGUIIn(){    TweenLite.to( $('#logo'), 2, {css:{opacity:0.99}, ease:Expo.easeOut});    TweenLite.to( $('#mainBodyList'), 2, {css:{opacity:0.99}, ease:Expo.easeOut});};function iPhonePortrait(){TweenLite.to( $('#contactInfo'), 2, {css:{paddingLeft:60}, ease:Expo.easeOut});};

In case it help, my messy CSS:

* {    padding: 0;    margin: 0;}head {    background: #fff;}body {    background: #fff;}/*-- iPhone portrait --*/  #logo {	 opacity: 1;	 margin-left: 10px;	 margin-top: 10px;	 height: 100px;	 width: 100px;	 background-image: url('../assets/AL.png');	 background-size:100px;}#contactInfo {	 font-family: 'Helvetica', sans-serif;	 font-size:12pt;	 padding-left: 10px;	 padding-top: 20px;	 opacity:1;}#contactInfo a, a:link, a:visited, a:active, a:hover {	 color:#F15A29;	 text-decoration:none;}#contactInfo li {	 list-style-type:none;	 line-height: 220%;}#mainBodyList {	 opacity: 1;	 height:100px;	 width:310px;	 margin-left: 10px;	 margin-top: 50px;}.menu {	 width:300px;}.menuHeader {	 font-family: 'Helvetica', sans-serif;	 font-size: 1px;	 margin: 0;	 opacity: 0;}.menuList {	 text-decoration: none;	 list-style-type: none;}.menuItem {	 font-family: 'Helvetica', sans-serif;	 color:#F15A29;}.projectHeader {	 font-family: 'Helvetica', sans-serif;	 font-weight: bold;	 font-size: 10pt;	 margin-bottom: 5px;	 margin-top: 20px;}.projectBody {	 font-family: 'Helvetica', sans-serif;	 font-size: 9pt;	 margin-bottom: 30px;	}#designLine {	 width:0;	 height:0;	 opacity:0;}#codeLine {	 width:0;	 height:0;	 opacity:0;}.more {	 font-family: 'Helvetica', sans-serif;	 font-size: 9pt;	 text-align: left;	 background-color: #F15A29;	 color: #fff;	 width: 75px;	 float: left;	 padding: 2px;	 margin-right: 25px;	 margin-bottom: 25px;}.designMore {  opacity: 0;  margin: 0;  padding: 0;  margin-bottom: 0;}.designMenu {	 position: relative;	 margin-top: 0;	 margin-bottom: 40px;	 padding-bottom: 10px;}.codeMenu {	 position: relative;	 margin-top: -75px;	 margin-bottom: 100px;	 padding-bottom: 50px;}/*-- iPhone landscape --*/@media screen and (min-width: 321px) {#logo {  float: left;  margin-left: 10px;  margin-top: 10px;  padding-left: 5px;}#contactInfo {	 float: left;	 margin-bottom: 0;	 margin-left: 145px;	 margin-top: 0;	 padding-top: 50px;}#mainBodyList {  padding-top: 100px;  margin-top: 0;  width: 470px;}}/*-- iPad portrait --*/@media (max-device-width: 768px) and (orientation: portrait) {}/*-- iPad landscape --*/@media (max-device-width: 1024px) and (orientation: landscape) {}/* Desktops and laptops ----------- */@media only screen and (min-width : 1028px) {#logo {    opacity: 1;    margin-left: 100px;    margin-top: 50px;    height: 100px;    width: 100px;    background-image: url('../assets/AL.png');    background-size:100px;}#contactInfo {position: absolute;top:50px;right:50px;}#mainBodyList {opacity: 1;float: left;width:830px;margin-top: 100px;margin-left: 0;padding: 0;}.menuHeader {opacity:1;    font-size: 75px;    font-weight: 100;}.menuItem {    float:left;    overflow: hidden;    height: 100px;}.projectHeader {font-weight: bold;font-size: 10pt;margin-bottom: 5px;margin-top: 20px;}.projectBody {    font-size: 9pt;    margin-bottom: 30px;}#designLine {    width:6px;    height:150px;    position: relative;    bottom: 75px;    margin-left: 50px;    opacity: 1;    background-color:#F15A29;}#codeLine {    width:6px;    height:150px;    position: relative;    bottom: 75px;    margin-left: 50px;    opacity: 1;    background-color:#F15A29;}.more {    text-align: left;    width: 75px;    float: left;    padding: 2px;    opacity: 1;    margin-bottom: 0px;}.designMore {opacity: 1;}.designMenu {    position: relative;    height: 100px;    overflow: hidden;    padding: 0;}.codeMenu {    position: relative;    margin-left: 100px;    margin-top: 0px;    height: 100px;    overflow: hidden;    padding: 0;} }//  font faces//  itc avantgardece gothic book@font-face {    font-family: 'AvantGardeCE-Book';    src: url('../fonts/itcavantgardecegothicbook.eot');    src: url('../fonts/itcavantgardecegothicbook.eot?#iefix') format('embedded-opentype'),		 url('../fonts/itcavantgardecegothicbook.woff') format('woff'),		 url('../fonts/itcavantgardecegothicbook.ttf') format('truetype'),		 url('../fonts/itcavantgardecegothicbook.svg#itcavantgardecegothicbook') format('svg');    font-weight: normal;    font-style: normal;}//  itc avangarde lt medium@font-face {    font-family: 'AvantGardeLT-Medium';    src: url('../fonts/itcavantgardegothicltmedium.eot');    src: url('../fonts/itcavantgardegothicltmedium.eot?#iefix') format('embedded-opentype'),		 url('../fonts/itcavantgardegothicltmedium.woff') format('woff'),		 url('../fonts/itcavantgardegothicltmedium.ttf') format('truetype'),		 url('../fonts/itcavantgardegothicltmedium.svg#itcavantgardegothicltmedium') format('svg');    font-weight: normal;    font-style: normal;}//  helvetica@font-face {    font-family: 'Helvetica';    src: url('../fonts/helveticaneue.eot');    src: url('../fonts/helveticaneue.eot?#iefix') format('embedded-opentype'),		 url('../fonts/helveticaneue.woff') format('woff'),		 url('../fonts/helveticaneue.svg#helveticaneue') format('svg');    font-weight: normal;    font-style: normal;}

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...