Javascript not working in Firefox...not sure why?

  • ambiemaber
  • Newbie
  • Newbie
  • ambiemaber
  • Posts: 5

Post 3+ Months Ago

Hi There,

I have recently completed making a website for my sister's wedding. I am quite new to the web design world, and have only taken 2 classes on the subject. I used a Javascript function that was provided to us in one of my HTML coding classes in order to automatically resize the (nesting?) div's according to how long the content in them is.

This all seems to work perfectly fine in Google Chrome, as well as most versions of Internet Explorer - however, in some versions of internet explorer, and ALL versions of Firefox, this resize function does not seem to work. Since this coding was provided to me by a teacher (who is unfortunately in another country), I'm not sure what kinda of edit would make it so it would function in Firefox, or if there is a way to make in function in Firefox at all.

I would appreciate if some of you could take a look at it, and let me know if you have any ideas/suggestions/advice, as to what is happening with the code/why it does not work in Firefox/some versions of Internet Explorer.


The specific javascript code (which i assume is the issue here - please let me know if I'm wrong about it being the javascript that isn't working) is here:

Code: [ Select ]
function fnReset(){
document.getElementById('dTorso').style.height="380px";
document.getElementById('dMiddle').style.height="auto"
var middleHt=document.getElementById('dMiddle').scroll Height;
var maxHt=Math.max(380,middleHt);
document.getElementById('dTorso').style.height=max Ht + "px";
document.getElementById('dMiddle').style.height=ma xHt + "px";
}
  1. function fnReset(){
  2. document.getElementById('dTorso').style.height="380px";
  3. document.getElementById('dMiddle').style.height="auto"
  4. var middleHt=document.getElementById('dMiddle').scroll Height;
  5. var maxHt=Math.max(380,middleHt);
  6. document.getElementById('dTorso').style.height=max Ht + "px";
  7. document.getElementById('dMiddle').style.height=ma xHt + "px";
  8. }


Which is then called to action here:

Code: [ Select ]
<body onLoad="fnReset();>


Also, in some versions of Firefox, the background image for the whole page isn't showing up either - any tips on why that is happening would also be amazing.

Thank you so much for any help you may provide. This is a gift to my sister and her fiance, and I really want it to work well for them, and all their guests.

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

JAVASCRIPT Code: [ Select ]
function fnReset(){
document.getElementById('dTorso').style.height="380px";
document.getElementById('dMiddle').style.height="auto"; // forgot semicolon here
var middleHt=document.getElementById('dMiddle').scrollHeight; // space between "scroll" and "height"
var maxHt=Math.max(380,middleHt);
document.getElementById('dTorso').style.height=maxHt + "px"; // space between "max" and "Ht"
document.getElementById('dMiddle').style.height=maxHt + "px"; // space between "max" and "Ht"
}
  1. function fnReset(){
  2. document.getElementById('dTorso').style.height="380px";
  3. document.getElementById('dMiddle').style.height="auto"; // forgot semicolon here
  4. var middleHt=document.getElementById('dMiddle').scrollHeight; // space between "scroll" and "height"
  5. var maxHt=Math.max(380,middleHt);
  6. document.getElementById('dTorso').style.height=maxHt + "px"; // space between "max" and "Ht"
  7. document.getElementById('dMiddle').style.height=maxHt + "px"; // space between "max" and "Ht"
  8. }


More than likely it's the missing semicolon. Some browsers are able to assume the semicolon, others aren't.
Personally, I would set the initial height of your elements through css, so that your function is this:

JAVASCRIPT Code: [ Select ]
function fnReset(){
var middle = document.getElementById('dMiddle');
var torso = document.getElementById('dTorso');
var middleHt = middle.scrollHeight;
var maxHt = Math.max(380,middleHt);
 
torso.style.height = maxHt + "px";
middle.style.height = maxHt + "px";
}
  1. function fnReset(){
  2. var middle = document.getElementById('dMiddle');
  3. var torso = document.getElementById('dTorso');
  4. var middleHt = middle.scrollHeight;
  5. var maxHt = Math.max(380,middleHt);
  6.  
  7. torso.style.height = maxHt + "px";
  8. middle.style.height = maxHt + "px";
  9. }


and have a seperate css stylesheet with this:
CSS Code: [ Select ]
#dTorso {
   height: 380px;
}
 
#dMiddle {
   height: auto;
}
 
  1. #dTorso {
  2.    height: 380px;
  3. }
  4.  
  5. #dMiddle {
  6.    height: auto;
  7. }
  8.  
  • ambiemaber
  • Newbie
  • Newbie
  • ambiemaber
  • Posts: 5

Post 3+ Months Ago

Thanks so much for replying!

Unfortunately, adding in the semi-colon did not fix the issue.

Additionally, when I put spaces between .scrollHeight and maxHt, I got syntax errors.

Not sure if there is anything else you can suggest?

Thanks again for taking the time to help :)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

What I meant about the spaces is that they should be removed, you showed spaces in your code on the first post.

Beyond that, I would strongly suggest you look into jquery for this type of work.

I'm sure I can whip something up relatively fast if you post your html code.
  • ambiemaber
  • Newbie
  • Newbie
  • ambiemaber
  • Posts: 5

Post 3+ Months Ago

Hi again,

Sorry, I didn't notice that in the first post that there were spaces - it's odd, because there aren't spaces in my actual coding - seems like it copied and pasted oddly...

To be completely honest, I'm not sure what jquery even is. If something like this was to be made, would it be straight forward enough for me to edit the pages if I needed to edit them? As I said, I'm SUPER new to web design...

If you'd be willing to help me though, I'd be super grateful. I do have a technical question about posting my HTML code here though - my images etc. are fully linked, using the whole web address, so when I post the forum keeps telling me, "You are not authorized to post external links, please remove or rename:"

Is there a way to get around this?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Yes, the images aren't really necessary for this exercise, so you can exclude them entirely. I just need the parts that are referenced in your javascript, to see how they're are nested.

Without getting too technical, jQuery is a javascript framework. What that means is some really smart person took javascript, and wrote a new - way easier to understand language with it. They named this easier language "jQuery". jQuery requires nothing special, it's just a bunch of javascript functions. You link to it, and then start writing code using those functions.

Post up your html and I'll show you how it works.
  • ambiemaber
  • Newbie
  • Newbie
  • ambiemaber
  • Posts: 5

Post 3+ Months Ago

Hi,

Ok, so here is my code - I warn you that I am extremely new at this, so my code is probably really messy, and possibly hard to follow...and for this I apologize...

But thanks so much for you help :)

Here is my code:

Code: [ Select ]
<html>
<head>
<title>Nick &amp; Amanda - June 2, 2012</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function fnReset(){
  document.getElementById('dTorso').style.height="380px";
  document.getElementById('dMiddle').style.height="auto";
  var middleHt=document.getElementById('dMiddle').scrollHeight;
  var maxHt=Math.max(380,middleHt);  
  document.getElementById('dTorso').style.height=maxHt + "px";
    document.getElementById('dMiddle').style.height=maxHt + "px";
    }
    
    var part = new Array("nickandamandaskickasswedding","lto:","?","mai","@","&","contact","subject");
function fnHi_deEm_ail(disSub,disBod){
    location.href=part[3] + part[1] + part[6] + part[4] + part[0] + part[2] + part[7] + "=" + disSub + part[5] + "body=" + disBod + "";
   }

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

/***********************************************
* Dynamic Countdown script- © Dynamic Drive
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days left until our wedding"
}
else{ //else if target date/time met
var displaystring="We're Married!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup></span> left until our wedding!"
}
else{ //else if target date/time met
var displaystring="We're Married!" //Don't display any text
}
return displaystring
}

//End Countdown Script//

</script>
<style>
/*TAG STYLE*/
    body{margin:0px;
    text-align:center;
    background-color:#06F;
    font-size:16px;
    font-family:arial;
    background-image:url(images/wood_background_flower.jpg);
    }
  div{position:relative;display:block;}
  
/*ID STYLE*/
#dPageHolder{
    text-align:justify;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    height:auto;
    background-color:#717368;
}
    #dHeader{width:1000px;height:180px;background-color:#97642F;}
  #dSubHeader{width:994px;height:60px;background-color:#B6888E; border-left:solid; border-right:solid;border-color:#481E08; border-bottom:solid;}
  #dTorso{width:994px;height:300px;background-color:#FFFBDE;border-left:solid;border-right:solid;border-color:#481E08;}
      #dLeft{width:200px;float:left;background-color:#FFFBDE;height:300px;}
    #dMiddle{position:absolute;height:300px;width:964px;background-color:#FFFBDE;top:0px; left:15px;}
   
    #dFooter{width:994px;height:50px;background-color:#B6888E;border:solid;border-color:#481E08;}
  #dSubFooter{width:1000px;height:30px;background-color:#B6888E;}
  #dLeftWing{position:absolute;left:-110px;top:0px;width:100px;height:400px;background-color:red;}
  #dRightWing{position:absolute;left:1010px;top:0px;width:100px;height:400px;background-color:red;}
        
        #a01{left:260px;}
        #a02{left:860px;}
        #a03{left:460px;}
        #a04{left:660px;}
        /*#OurStory{left:5px; top:20px;}
        #Gallery{left:5px; top:80px;}
        #WedParty{left:5px; top:140px;}
        #Venue{left:5px; top:200px;}
        #RSVP{left:5px; top:260px;}
        #Contact{left:5px; top:320px;}*/
        
        #button1{left:9px; top:6px;}
        #button2{left:149px; top:6px;}
        #button3{left:289px; top:6px;}
        #button4{left:429px; top:6px;}
        #button5{left:569px; top:6px;}
        #button6{left:709px; top:6px;}
        #button7{left:849px; top:6px;}
        #countdowncontainer{width:1000px; text-align:center; color:#39308B; position:absolute; top:5px;}
        #bobble{float:right; margin-left:10px;}
        #ddate{
    font-size: 20px;
    text-align: center;
}
        
        
        
        #a13{width:1000px;color:#feefbb;top:10px;text-decoration:none;text-align:center;font-family:arial;font-size:12px;}
        #s01{
    position:absolute;
    width:1000px;
    color:#feefbb;
    text-align:center;
    top:30px;
    font-size:9px;
}
        
        
        .Clinks{position:absolute;cursor:pointer;}
        .CMenu{position:absolute;cursor:pointer;}
        .BodyImages{display:block;margin-left:auto; margin-right:auto;}


        
#Welcome {
    font-size: 30px;
    text-align: center;
    color: #39308B;
}
#intro {
    font-size: 16px;
}
</style>

</head>
<body onLoad="fnReset();MM_preloadImages('images/contact1.png','images/RSVP1.png','images/wedding1.png','images/home1.png','images/story1.png','images/gallery1.png','images/wedding1.png','images/venue1.png','images/info1.png','images/RSVP1.png','images/story1.png')" background="images/wood_background_flower.jpg"><br>

<div id="dPageHolder">
    <div id="dHeader"><img src="images/header3.png" alt="Nick &amp; Amanda"></div>
  <div id="dSubHeader">
  
  <a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/home1.png',1)"><img src="images/home.png" alt="Home" name="Home" id="button1" width="132" height="48" border="0" style="position:absolute;"></a>
  
  <a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('OurStory','','images/story1.png',1)"><img src="images/story.png" alt="Our Story" name="OurStory" width="132" height="48" border="0" id="button2" style="position:absolute;"></a>
  
  <a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','images/gallery1.png',1)"><img src="images/gallery.png" alt="Gallery" name="Gallery" border="0" id="button3" style="position:absolute;"></a>
  
  <a href="weddingparty.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WeddingParty','','images/wedding1.png',1)"><img src="images/wedding.png" alt="Wedding Party" name="WeddingParty" border="0" id="button4" style="position:absolute;"></a>
  
  <a href="venue.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Venue','','images/venue1.png',1)"><img src="images/venue.png" alt="Venue" name="Venue" border="0" id="button5" style="position:absolute;"></a>
  
  <a href="info.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AdditionalInfo','','images/info1.png',1)"><img src="images/info.png" alt="Additional Info" name="AdditionalInfo" width="132" height="48" border="0" id="button6" style="position:absolute;"></a>
  
  <a href="rsvp.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RSVP','','himages/RSVP1.png',1)"><img src="images/RSVP.png" alt="RSVP" name="RSVP" border="0" id="button7" style="position:absolute;"></a></div>
  
  
  
<div id="dTorso">
<div id="dMiddle">
 <DIV id="story">
  <p id="Welcome"><strong>Welcome to Nick and Amanda's Kickass Wedding Website!</strong></p><div id="ddate">
   <strong>Our wedding will take place on the weekend of
    
    </strong><br>
    <strong>June 1<sup>st</sup> - 3<sup>rd,</sup> 2012</strong>
</div>
<p>Thanks for visiting our wedding website. This site has been designed to answer any questions you might have about our big day, including information about the venue, accomodations, who will be in our wedding party and, of course, how to RSVP. </p>
  <p>We have also added in some tantilizing information on how we became the awesome couple you all know and love, and how Nick popped the big question. Also, don't forget to visit the Gallery page to see some kickass pictures of our adventures together. </p>
  <p>If you have any questions for us, please visit the Additional Info page, where you can find our contact information.</p>
  <p>We look forward to seeing you on the big day!</p>
  <p>- Nick &amp; Amanda</p>

 </DIV>
</div>
<!--<div id="dRight">dRight</div>-->
</div>
    <!--End Torso-->
    <div id="dFooter">
    <strong> <div id="countdowncontainer"></div></strong>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "June 02, 2012 00:00:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=06 && new Date().getDate()>02)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "June 02, "+thischristmasyear+" 00:00:00")
christmas.displaycountdown("days", formatresults2)

</script>
    <span id="s01">Copyright 2011 © Amber T</span>
    
</div> 
   <!--<div id="dSubFooter"></div>-->
   <!--Absolutes-->
   <!--div id="dLeftWing">dLeftWing</div-->
   <!--div id="dRightWing">dRightWing</div>-->
  
</div><br>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Nick &amp; Amanda - June 2, 2012</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script type="text/javascript">
  6. function fnReset(){
  7.   document.getElementById('dTorso').style.height="380px";
  8.   document.getElementById('dMiddle').style.height="auto";
  9.   var middleHt=document.getElementById('dMiddle').scrollHeight;
  10.   var maxHt=Math.max(380,middleHt);  
  11.   document.getElementById('dTorso').style.height=maxHt + "px";
  12.     document.getElementById('dMiddle').style.height=maxHt + "px";
  13.     }
  14.     
  15.     var part = new Array("nickandamandaskickasswedding","lto:","?","mai","@","&","contact","subject");
  16. function fnHi_deEm_ail(disSub,disBod){
  17.     location.href=part[3] + part[1] + part[6] + part[4] + part[0] + part[2] + part[7] + "=" + disSub + part[5] + "body=" + disBod + "";
  18.    }
  19. function MM_preloadImages() { //v3.0
  20.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  21.   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  22.   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  23. }
  24. function MM_swapImgRestore() { //v3.0
  25.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  26. }
  27. function MM_findObj(n, d) { //v4.01
  28.  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  29.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  30.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  31.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  32.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  33. }
  34. function MM_swapImage() { //v3.0
  35.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  36.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  37. }
  38. /***********************************************
  39. * Dynamic Countdown script- © Dynamic Drive
  40. * This notice MUST stay intact for legal use
  41. * Visit for this script and 100s more.
  42. ***********************************************/
  43. function cdtime(container, targetdate){
  44. if (!document.getElementById || !document.getElementById(container)) return
  45. this.container=document.getElementById(container)
  46. this.currentTime=new Date()
  47. this.targetdate=new Date(targetdate)
  48. this.timesup=false
  49. this.updateTime()
  50. }
  51. cdtime.prototype.updateTime=function(){
  52. var thisobj=this
  53. this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
  54. setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
  55. }
  56. cdtime.prototype.displaycountdown=function(baseunit, functionref){
  57. this.baseunit=baseunit
  58. this.formatresults=functionref
  59. this.showresults()
  60. }
  61. cdtime.prototype.showresults=function(){
  62. var thisobj=this
  63. var timediff=(this.targetdate-this.currentTime)/1000
  64. if (timediff<0){ //if time is up
  65. this.timesup=true
  66. this.container.innerHTML=this.formatresults()
  67. return
  68. }
  69. var oneMinute=60 //minute unit in seconds
  70. var oneHour=60*60 //hour unit in seconds
  71. var oneDay=60*60*24 //day unit in seconds
  72. var dayfield=Math.floor(timediff/oneDay)
  73. var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
  74. var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
  75. var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
  76. if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
  77. hourfield=dayfield*24+hourfield
  78. dayfield="n/a"
  79. }
  80. else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
  81. minutefield=dayfield*24*60+hourfield*60+minutefield
  82. dayfield=hourfield="n/a"
  83. }
  84. else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
  85. var secondfield=timediff
  86. dayfield=hourfield=minutefield="n/a"
  87. }
  88. this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
  89. setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
  90. }
  91. /////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
  92. function formatresults(){
  93. if (this.timesup==false){//if target date/time not yet met
  94. var displaystring=arguments[0]+" days left until our wedding"
  95. }
  96. else{ //else if target date/time met
  97. var displaystring="We're Married!"
  98. }
  99. return displaystring
  100. }
  101. function formatresults2(){
  102. if (this.timesup==false){ //if target date/time not yet met
  103. var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup></span> left until our wedding!"
  104. }
  105. else{ //else if target date/time met
  106. var displaystring="We're Married!" //Don't display any text
  107. }
  108. return displaystring
  109. }
  110. //End Countdown Script//
  111. </script>
  112. <style>
  113. /*TAG STYLE*/
  114.     body{margin:0px;
  115.     text-align:center;
  116.     background-color:#06F;
  117.     font-size:16px;
  118.     font-family:arial;
  119.     background-image:url(images/wood_background_flower.jpg);
  120.     }
  121.   div{position:relative;display:block;}
  122.   
  123. /*ID STYLE*/
  124. #dPageHolder{
  125.     text-align:justify;
  126.     margin-left:auto;
  127.     margin-right:auto;
  128.     width:1000px;
  129.     height:auto;
  130.     background-color:#717368;
  131. }
  132.     #dHeader{width:1000px;height:180px;background-color:#97642F;}
  133.   #dSubHeader{width:994px;height:60px;background-color:#B6888E; border-left:solid; border-right:solid;border-color:#481E08; border-bottom:solid;}
  134.   #dTorso{width:994px;height:300px;background-color:#FFFBDE;border-left:solid;border-right:solid;border-color:#481E08;}
  135.       #dLeft{width:200px;float:left;background-color:#FFFBDE;height:300px;}
  136.     #dMiddle{position:absolute;height:300px;width:964px;background-color:#FFFBDE;top:0px; left:15px;}
  137.    
  138.     #dFooter{width:994px;height:50px;background-color:#B6888E;border:solid;border-color:#481E08;}
  139.   #dSubFooter{width:1000px;height:30px;background-color:#B6888E;}
  140.   #dLeftWing{position:absolute;left:-110px;top:0px;width:100px;height:400px;background-color:red;}
  141.   #dRightWing{position:absolute;left:1010px;top:0px;width:100px;height:400px;background-color:red;}
  142.         
  143.         #a01{left:260px;}
  144.         #a02{left:860px;}
  145.         #a03{left:460px;}
  146.         #a04{left:660px;}
  147.         /*#OurStory{left:5px; top:20px;}
  148.         #Gallery{left:5px; top:80px;}
  149.         #WedParty{left:5px; top:140px;}
  150.         #Venue{left:5px; top:200px;}
  151.         #RSVP{left:5px; top:260px;}
  152.         #Contact{left:5px; top:320px;}*/
  153.         
  154.         #button1{left:9px; top:6px;}
  155.         #button2{left:149px; top:6px;}
  156.         #button3{left:289px; top:6px;}
  157.         #button4{left:429px; top:6px;}
  158.         #button5{left:569px; top:6px;}
  159.         #button6{left:709px; top:6px;}
  160.         #button7{left:849px; top:6px;}
  161.         #countdowncontainer{width:1000px; text-align:center; color:#39308B; position:absolute; top:5px;}
  162.         #bobble{float:right; margin-left:10px;}
  163.         #ddate{
  164.     font-size: 20px;
  165.     text-align: center;
  166. }
  167.         
  168.         
  169.         
  170.         #a13{width:1000px;color:#feefbb;top:10px;text-decoration:none;text-align:center;font-family:arial;font-size:12px;}
  171.         #s01{
  172.     position:absolute;
  173.     width:1000px;
  174.     color:#feefbb;
  175.     text-align:center;
  176.     top:30px;
  177.     font-size:9px;
  178. }
  179.         
  180.         
  181.         .Clinks{position:absolute;cursor:pointer;}
  182.         .CMenu{position:absolute;cursor:pointer;}
  183.         .BodyImages{display:block;margin-left:auto; margin-right:auto;}
  184.         
  185. #Welcome {
  186.     font-size: 30px;
  187.     text-align: center;
  188.     color: #39308B;
  189. }
  190. #intro {
  191.     font-size: 16px;
  192. }
  193. </style>
  194. </head>
  195. <body onLoad="fnReset();MM_preloadImages('images/contact1.png','images/RSVP1.png','images/wedding1.png','images/home1.png','images/story1.png','images/gallery1.png','images/wedding1.png','images/venue1.png','images/info1.png','images/RSVP1.png','images/story1.png')" background="images/wood_background_flower.jpg"><br>
  196. <div id="dPageHolder">
  197.     <div id="dHeader"><img src="images/header3.png" alt="Nick &amp; Amanda"></div>
  198.   <div id="dSubHeader">
  199.   
  200.   <a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/home1.png',1)"><img src="images/home.png" alt="Home" name="Home" id="button1" width="132" height="48" border="0" style="position:absolute;"></a>
  201.   
  202.   <a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('OurStory','','images/story1.png',1)"><img src="images/story.png" alt="Our Story" name="OurStory" width="132" height="48" border="0" id="button2" style="position:absolute;"></a>
  203.   
  204.   <a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','images/gallery1.png',1)"><img src="images/gallery.png" alt="Gallery" name="Gallery" border="0" id="button3" style="position:absolute;"></a>
  205.   
  206.   <a href="weddingparty.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WeddingParty','','images/wedding1.png',1)"><img src="images/wedding.png" alt="Wedding Party" name="WeddingParty" border="0" id="button4" style="position:absolute;"></a>
  207.   
  208.   <a href="venue.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Venue','','images/venue1.png',1)"><img src="images/venue.png" alt="Venue" name="Venue" border="0" id="button5" style="position:absolute;"></a>
  209.   
  210.   <a href="info.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AdditionalInfo','','images/info1.png',1)"><img src="images/info.png" alt="Additional Info" name="AdditionalInfo" width="132" height="48" border="0" id="button6" style="position:absolute;"></a>
  211.   
  212.   <a href="rsvp.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RSVP','','himages/RSVP1.png',1)"><img src="images/RSVP.png" alt="RSVP" name="RSVP" border="0" id="button7" style="position:absolute;"></a></div>
  213.   
  214.   
  215.   
  216. <div id="dTorso">
  217. <div id="dMiddle">
  218.  <DIV id="story">
  219.   <p id="Welcome"><strong>Welcome to Nick and Amanda's Kickass Wedding Website!</strong></p><div id="ddate">
  220.    <strong>Our wedding will take place on the weekend of
  221.     
  222.     </strong><br>
  223.     <strong>June 1<sup>st</sup> - 3<sup>rd,</sup> 2012</strong>
  224. </div>
  225. <p>Thanks for visiting our wedding website. This site has been designed to answer any questions you might have about our big day, including information about the venue, accomodations, who will be in our wedding party and, of course, how to RSVP. </p>
  226.   <p>We have also added in some tantilizing information on how we became the awesome couple you all know and love, and how Nick popped the big question. Also, don't forget to visit the Gallery page to see some kickass pictures of our adventures together. </p>
  227.   <p>If you have any questions for us, please visit the Additional Info page, where you can find our contact information.</p>
  228.   <p>We look forward to seeing you on the big day!</p>
  229.   <p>- Nick &amp; Amanda</p>
  230.  </DIV>
  231. </div>
  232. <!--<div id="dRight">dRight</div>-->
  233. </div>
  234.     <!--End Torso-->
  235.     <div id="dFooter">
  236.     <strong> <div id="countdowncontainer"></div></strong>
  237. <script type="text/javascript">
  238. var futuredate=new cdtime("countdowncontainer", "June 02, 2012 00:00:00")
  239. futuredate.displaycountdown("days", formatresults)
  240. var currentyear=new Date().getFullYear()
  241. //dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
  242. var thischristmasyear=(new Date().getMonth()>=06 && new Date().getDate()>02)? currentyear+1 : currentyear
  243. var christmas=new cdtime("countdowncontainer2", "June 02, "+thischristmasyear+" 00:00:00")
  244. christmas.displaycountdown("days", formatresults2)
  245. </script>
  246.     <span id="s01">Copyright 2011 © Amber T</span>
  247.     
  248. </div> 
  249.    <!--<div id="dSubFooter"></div>-->
  250.    <!--Absolutes-->
  251.    <!--div id="dLeftWing">dLeftWing</div-->
  252.    <!--div id="dRightWing">dRightWing</div>-->
  253.   
  254. </div><br>
  255. </body>
  256. </html>
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Okay, from what I can tell in your javascript that you're having trouble with, is that you want the height of your page to expand based on the content. If that's true, you don't need javascript to do this, just cleaner html and css. If it's not, let me know as I'm a bit confused with the intention of your javascript.


Also, your rollover images in your navigation use javscript. This is an older technique that not many people follow now. Instead, we use css sprites as they require fewer http requests, they look smoother, and take a lot cleaner and simpler code.

Read this tutorial on using css sprites for hover effects

As for your code, let me clean it up a bit and show you what I come up with. Give me an hour or so.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Okay, here's after a VERY quick cleanup. Things I did can be taken further, but I'll let you explore a bit more about css and discover them on your own. Just remember that css should control anything aesthetic (fonts, text size, positioning, colors, etc.), HTML should only define structure.

Code: [ Select ]
<!DOCTYPE HTML>
<html>
<head>
<title>Nick &amp; Amanda - June 2, 2012</title>
<meta charset="utf-8">
<script type="text/javascript">
var part = new Array("nickandamandaskickasswedding","lto:","?","mai","@","&","contact","subject");
function fnHi_deEm_ail(disSub,disBod){
location.href=part[3] + part[1] + part[6] + part[4] + part[0] + part[2] + part[7] + "=" + disSub + part[5] + "body=" + disBod + "";
}

/***********************************************
* Dynamic Countdown script- © Dynamic Drive
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days left until our wedding"
}
else{ //else if target date/time met
var displaystring="We're Married!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup></span> left until our wedding!"
}
else{ //else if target date/time met
var displaystring="We're Married!" //Don't display any text
}
return displaystring
}

//End Countdown Script//

</script>
<style>
/*TAG STYLE*/
body {
    margin: 0;
    padding: 0;
    background-color:#06F;
    font-size:16px;
    font-family:arial;
    background-image:url(images/wood_background_flower.jpg);
}

/*ID STYLE*/
#dPageHolder {
    margin: 0 auto;
    width:1000px;
    background-color:#717368;
}

#dHeader {
    height:180px;
    background-color:#97642F;
}

#dSubHeader {
    width:994px;
    background-color:#B6888E;
    border: 3px solid #481e08;
    border-top: 0;
}

#dSubHeader ul {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
}

#dSubHeader ul li {
    list-style: none;
    float: left;
    line-height: 50px;
    vertical-align: middle;
    padding: 0 10px;
}

#dTorso {
    background-color:#FFFBDE;
    border: 3px solid #481e08;
    border-top: 0;
}

#dTorso > div > div {
    padding: 20px;
}

#dTorso div h1 {
    text-align: center;
}

#ddate {
    text-align: center;
}

#ddate span {
    vertical-align: super;
}

#dFooter {
    background-color:#B6888E;
    border: 3px solid #481e08;
    border-top: 0;
    padding: 10px;
    text-align: center;
}
</style>
</head>


<!--
Use css for body background. The standard today is to
seperate any visual aesthetics from your markup. This
means anywhere you define color, size, background,
font, etc. you should be using css instead. Trust me,
it'll be easier to deal with in the long run.
-->
<body>


<!--
You had a line break element (<br>) here, use css margin
instead. See the css I wrote above.
-->
<div id="dPageHolder">
    <div id="dHeader"><img src="images/header3.png" alt="Nick &amp; Amanda"></div>
    
<!--
Use an unordered list for navigation bars.
It's a bit more semantically accurate, and easier to read.
As for the image swaps, look up information on how to do
the same thing with css.
-->
<div id="dSubHeader">
    <ul>
        <li>
            <a href="home.html">Home</a>
        </li>
        <li>
            <a href="story.html">Story</a>
        </li>
        <li>
            <a href="gallery.html">Gallery</a>
        </li>
        <li>
            <a href="weddingparty.html">Wedding Party</a>
        </li>
        <li>
            <a href="venue.html">Venue</a>
        </li>
        <li>
            <a href="info.html">Info</a>
        </li>
        <li>
            <a href="rsvp.html">RSVP</a>
        </li>
    </ul>
</div>

<!--
you have a lot of id attributes here, and are suffering
from divitis. Instead, declare an id attribute on the
wrapping div, and use selectors in your css or javascript
to drill down from there.
-->
<div id="dTorso"> <!-- You really don't need this div here. -->
    <div id="dMiddle"> <!-- notice I never mention "dMiddle" or "story" ID's in my css, you don't need them. -->
        <div id="story">
            <h1>Welcome to Nick and Amanda's Kickass Wedding Website!</h1>
            <div id="ddate">
                Our wedding will take place on the weekend of
                <br>
                June 1<span>st</span> - 3<span>rd</span>,2012 <!-- traded out <sup> for span. Will target "sup" properties in css. -->
            </div>
            
            
            <p>Thanks for visiting our wedding website. This site has been designed to answer any questions you might have about our big day, including information about the venue, accomodations, who will be in our wedding party and, of course, how to RSVP. </p>
            <p>We have also added in some tantilizing information on how we became the awesome couple you all know and love, and how Nick popped the big question. Also, don't forget to visit the Gallery page to see some kickass pictures of our adventures together. </p>
            <p>If you have any questions for us, please visit the Additional Info page, where you can find our contact information.</p>
            <p>We look forward to seeing you on the big day!</p>
            <p>&mdash; Nick &amp; Amanda</p>
        </div>
    </div>
</div>
    
    
<!--
Looks like there's a whole lot of functions for something very simple.
Have you looked for an alternative online? There are far better
countdown examples out there.
-->
<div id="dFooter">
    <strong>
        <div id="countdowncontainer"></div>
    </strong>
    <script type="text/javascript">
    var futuredate=new cdtime("countdowncontainer", "June 02, 2012 00:00:00")
    futuredate.displaycountdown("days", formatresults)
    
    var currentyear=new Date().getFullYear()
    //dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
    var thischristmasyear=(new Date().getMonth()>=06 && new Date().getDate()>02)? currentyear+1 : currentyear
    var christmas=new cdtime("countdowncontainer2", "June 02, "+thischristmasyear+" 00:00:00")
    christmas.displaycountdown("days", formatresults2)
    </script>
        <span id="s01">Copyright 2011 © Amber T</span>
</div>
    
</div>
<!--
You had a line break element (<br>) here, use css margin
instead. See the css I wrote above.
-->
</body>
</html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Nick &amp; Amanda - June 2, 2012</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript">
  7. var part = new Array("nickandamandaskickasswedding","lto:","?","mai","@","&","contact","subject");
  8. function fnHi_deEm_ail(disSub,disBod){
  9. location.href=part[3] + part[1] + part[6] + part[4] + part[0] + part[2] + part[7] + "=" + disSub + part[5] + "body=" + disBod + "";
  10. }
  11. /***********************************************
  12. * Dynamic Countdown script- © Dynamic Drive
  13. * This notice MUST stay intact for legal use
  14. * Visit for this script and 100s more.
  15. ***********************************************/
  16. function cdtime(container, targetdate){
  17. if (!document.getElementById || !document.getElementById(container)) return
  18. this.container=document.getElementById(container)
  19. this.currentTime=new Date()
  20. this.targetdate=new Date(targetdate)
  21. this.timesup=false
  22. this.updateTime()
  23. }
  24. cdtime.prototype.updateTime=function(){
  25. var thisobj=this
  26. this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
  27. setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
  28. }
  29. cdtime.prototype.displaycountdown=function(baseunit, functionref){
  30. this.baseunit=baseunit
  31. this.formatresults=functionref
  32. this.showresults()
  33. }
  34. cdtime.prototype.showresults=function(){
  35. var thisobj=this
  36. var timediff=(this.targetdate-this.currentTime)/1000
  37. if (timediff<0){ //if time is up
  38. this.timesup=true
  39. this.container.innerHTML=this.formatresults()
  40. return
  41. }
  42. var oneMinute=60 //minute unit in seconds
  43. var oneHour=60*60 //hour unit in seconds
  44. var oneDay=60*60*24 //day unit in seconds
  45. var dayfield=Math.floor(timediff/oneDay)
  46. var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
  47. var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
  48. var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
  49. if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
  50. hourfield=dayfield*24+hourfield
  51. dayfield="n/a"
  52. }
  53. else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
  54. minutefield=dayfield*24*60+hourfield*60+minutefield
  55. dayfield=hourfield="n/a"
  56. }
  57. else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
  58. var secondfield=timediff
  59. dayfield=hourfield=minutefield="n/a"
  60. }
  61. this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
  62. setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
  63. }
  64. /////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
  65. function formatresults(){
  66. if (this.timesup==false){//if target date/time not yet met
  67. var displaystring=arguments[0]+" days left until our wedding"
  68. }
  69. else{ //else if target date/time met
  70. var displaystring="We're Married!"
  71. }
  72. return displaystring
  73. }
  74. function formatresults2(){
  75. if (this.timesup==false){ //if target date/time not yet met
  76. var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup></span> left until our wedding!"
  77. }
  78. else{ //else if target date/time met
  79. var displaystring="We're Married!" //Don't display any text
  80. }
  81. return displaystring
  82. }
  83. //End Countdown Script//
  84. </script>
  85. <style>
  86. /*TAG STYLE*/
  87. body {
  88.     margin: 0;
  89.     padding: 0;
  90.     background-color:#06F;
  91.     font-size:16px;
  92.     font-family:arial;
  93.     background-image:url(images/wood_background_flower.jpg);
  94. }
  95. /*ID STYLE*/
  96. #dPageHolder {
  97.     margin: 0 auto;
  98.     width:1000px;
  99.     background-color:#717368;
  100. }
  101. #dHeader {
  102.     height:180px;
  103.     background-color:#97642F;
  104. }
  105. #dSubHeader {
  106.     width:994px;
  107.     background-color:#B6888E;
  108.     border: 3px solid #481e08;
  109.     border-top: 0;
  110. }
  111. #dSubHeader ul {
  112.     width: 600px;
  113.     margin: 0 auto;
  114.     padding: 0;
  115.     height: 50px;
  116. }
  117. #dSubHeader ul li {
  118.     list-style: none;
  119.     float: left;
  120.     line-height: 50px;
  121.     vertical-align: middle;
  122.     padding: 0 10px;
  123. }
  124. #dTorso {
  125.     background-color:#FFFBDE;
  126.     border: 3px solid #481e08;
  127.     border-top: 0;
  128. }
  129. #dTorso > div > div {
  130.     padding: 20px;
  131. }
  132. #dTorso div h1 {
  133.     text-align: center;
  134. }
  135. #ddate {
  136.     text-align: center;
  137. }
  138. #ddate span {
  139.     vertical-align: super;
  140. }
  141. #dFooter {
  142.     background-color:#B6888E;
  143.     border: 3px solid #481e08;
  144.     border-top: 0;
  145.     padding: 10px;
  146.     text-align: center;
  147. }
  148. </style>
  149. </head>
  150. <!--
  151. Use css for body background. The standard today is to
  152. seperate any visual aesthetics from your markup. This
  153. means anywhere you define color, size, background,
  154. font, etc. you should be using css instead. Trust me,
  155. it'll be easier to deal with in the long run.
  156. -->
  157. <body>
  158. <!--
  159. You had a line break element (<br>) here, use css margin
  160. instead. See the css I wrote above.
  161. -->
  162. <div id="dPageHolder">
  163.     <div id="dHeader"><img src="images/header3.png" alt="Nick &amp; Amanda"></div>
  164.     
  165. <!--
  166. Use an unordered list for navigation bars.
  167. It's a bit more semantically accurate, and easier to read.
  168. As for the image swaps, look up information on how to do
  169. the same thing with css.
  170. -->
  171. <div id="dSubHeader">
  172.     <ul>
  173.         <li>
  174.             <a href="home.html">Home</a>
  175.         </li>
  176.         <li>
  177.             <a href="story.html">Story</a>
  178.         </li>
  179.         <li>
  180.             <a href="gallery.html">Gallery</a>
  181.         </li>
  182.         <li>
  183.             <a href="weddingparty.html">Wedding Party</a>
  184.         </li>
  185.         <li>
  186.             <a href="venue.html">Venue</a>
  187.         </li>
  188.         <li>
  189.             <a href="info.html">Info</a>
  190.         </li>
  191.         <li>
  192.             <a href="rsvp.html">RSVP</a>
  193.         </li>
  194.     </ul>
  195. </div>
  196. <!--
  197. you have a lot of id attributes here, and are suffering
  198. from divitis. Instead, declare an id attribute on the
  199. wrapping div, and use selectors in your css or javascript
  200. to drill down from there.
  201. -->
  202. <div id="dTorso"> <!-- You really don't need this div here. -->
  203.     <div id="dMiddle"> <!-- notice I never mention "dMiddle" or "story" ID's in my css, you don't need them. -->
  204.         <div id="story">
  205.             <h1>Welcome to Nick and Amanda's Kickass Wedding Website!</h1>
  206.             <div id="ddate">
  207.                 Our wedding will take place on the weekend of
  208.                 <br>
  209.                 June 1<span>st</span> - 3<span>rd</span>,2012 <!-- traded out <sup> for span. Will target "sup" properties in css. -->
  210.             </div>
  211.             
  212.             
  213.             <p>Thanks for visiting our wedding website. This site has been designed to answer any questions you might have about our big day, including information about the venue, accomodations, who will be in our wedding party and, of course, how to RSVP. </p>
  214.             <p>We have also added in some tantilizing information on how we became the awesome couple you all know and love, and how Nick popped the big question. Also, don't forget to visit the Gallery page to see some kickass pictures of our adventures together. </p>
  215.             <p>If you have any questions for us, please visit the Additional Info page, where you can find our contact information.</p>
  216.             <p>We look forward to seeing you on the big day!</p>
  217.             <p>&mdash; Nick &amp; Amanda</p>
  218.         </div>
  219.     </div>
  220. </div>
  221.     
  222.     
  223. <!--
  224. Looks like there's a whole lot of functions for something very simple.
  225. Have you looked for an alternative online? There are far better
  226. countdown examples out there.
  227. -->
  228. <div id="dFooter">
  229.     <strong>
  230.         <div id="countdowncontainer"></div>
  231.     </strong>
  232.     <script type="text/javascript">
  233.     var futuredate=new cdtime("countdowncontainer", "June 02, 2012 00:00:00")
  234.     futuredate.displaycountdown("days", formatresults)
  235.     
  236.     var currentyear=new Date().getFullYear()
  237.     //dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
  238.     var thischristmasyear=(new Date().getMonth()>=06 && new Date().getDate()>02)? currentyear+1 : currentyear
  239.     var christmas=new cdtime("countdowncontainer2", "June 02, "+thischristmasyear+" 00:00:00")
  240.     christmas.displaycountdown("days", formatresults2)
  241.     </script>
  242.         <span id="s01">Copyright 2011 © Amber T</span>
  243. </div>
  244.     
  245. </div>
  246. <!--
  247. You had a line break element (<br>) here, use css margin
  248. instead. See the css I wrote above.
  249. -->
  250. </body>
  251. </html>


Also, I strongly recommend using external stylesheets to link to, as well as externalizing your javascript as well. It will tidy things up significantly. If you need more help, just let me know. As far as your javascript issue, it's not needed so I removed it. Just use css to control the height of elements. When height is not defined in css, the element will automatically expand to it's contents.

If you end up needed more help just let us here on the forum know and we'll do what we can.
  • ambiemaber
  • Newbie
  • Newbie
  • ambiemaber
  • Posts: 5

Post 3+ Months Ago

Hi!

Thanks so much for the help. I'm gonna have to play around with this today to see if I can get everything to work the way I want.

Will let you know how it goes/if I have any problems.

Thanks :)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 159 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.