Back To Programming / Scripting / Coding Forum

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

  • ambiemaber
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 10, 2011
  • Posts: 5
  • Status: Offline

Post October 10th, 2011, 1:41 pm

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 10th, 2011, 1:41 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 10th, 2011, 2:32 pm

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.  
Use your words like arrows to shoot toward your goal.
  • ambiemaber
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 10, 2011
  • Posts: 5
  • Status: Offline

Post October 10th, 2011, 6:13 pm

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
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 10th, 2011, 6:22 pm

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.
Use your words like arrows to shoot toward your goal.
  • ambiemaber
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 10, 2011
  • Posts: 5
  • Status: Offline

Post October 10th, 2011, 6:52 pm

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
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 10th, 2011, 7:09 pm

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.
Use your words like arrows to shoot toward your goal.
  • ambiemaber
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 10, 2011
  • Posts: 5
  • Status: Offline

Post October 10th, 2011, 7:40 pm

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

Post October 10th, 2011, 10:02 pm

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.
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post October 10th, 2011, 10:53 pm

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

Post October 11th, 2011, 6:11 am

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 :)

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 106 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.