CODEWITHSUNDEEP
javascriptjqueryhtmlcss
m-d-a
m-d-a

Reputation: 43

Adapting Height of Divs when using Dynamic Content

I am building a website for music theory lessons and quizzes.

I have made use of todd moto's menu and a javascript tutorial from flashbynight who's owner helped me adapt.

I have a quiz where the user can review their incorrect answers. As the quizzes can be quite long and the wrong / right answers vary I need to change the size of the div (and parent's) when the quiz reveals this information.

I have struggled with various options (auto, min-height etc) and am stuck. If I make the divs large enough to accommodate the information from the start then the window is too long all the way through with unnecessary scroll bars present. I am trying to get this to fit and work on mobiles through to desktops.

The relevant div is #navcontent.

index.html:

<!DOCTYPE html>
<head>

<title>Trinity Grade 1 Music Terminology Quiz</title>
<link href="quiz.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>

</head>
<body>

<div id="topbar">Trinity Grade 1 Terminology</div>
<div class="spacer"></div>

<div id="navContent">

<div id="game1"></div>
<div id="game2"></div>
</div>

</body>
</html>

quiz.css:

html, body{
margin: 15;
padding: 0;
background:green;
font-family: Arial, Helvetica, sans-serif;
}

#navContent{
margin:auto;    
width:800px;
height:260px;
position:relative;
overflow:hidden;
}

#game1{
margin:auto;
 width:800px;
height:400px;
right:0px;
position:absolute;
}

#game2{
margin:auto;    
 width:800px;
height:400px;
right:-800px;
position:absolute;
} 

.questionText{
 font-size:18px;
color:#FFF;
}

 .option{width:400px;
 height:30px;
 margin-bottom:15px;
 margin-top:15px;
 font-size:18px;
 color:#FFF; 
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
}

#topbar{
height:50px;
margin:auto;
margin-top:20px;
color:#FFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
width:810px;
border-bottom:solid white 1px;
overflow:hidden;
}

 .spacer{
height:20px;
}

.feedback1{
 width:150px;
padding:5px;
padding-left:0px;
font-size:18px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:left;


.feedback2{
width:150px;
padding:5px;
padding-left:0px;
font-size:18px;
color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 text-align:left;
}

.quizreturn{
width:150px;
color:#FFF;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
text-decoration: none;
border:1px;
}

 .quizreturn:hover{color:#AAA; cursor:pointer;}

.button{
width:240px;
height:30px;
margin-bottom:15px;
font-size:18px;
color:#FFF; 
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
text-decoration: none;
}

.button:hover{color:#AAA; cursor:pointer;}

#answerKey{color:#fff;}

@media screen and (max-width:810px) {
#topbar{margin-left:1%;margin-right:1%; width:100%;}
#navContent{margin:1%;  width:100%;}
#game1{margin:1%;   width:98%;}
#game2{margin:1%;   width:98%;}
}

 @media screen and (max-width:460px) {
.option{width:90%;}
}

controller.js:

$(document).ready(function () {

var questionNumber=0;
var questionBank=new Array();
var stage="#game1";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;
var wrongAnswerTracker=new Array();


        $.getJSON('activity.json', function(data) {

        for(i=0;i<data.quizlist.length;i++){ 
            questionBank[i]=new Array;
            questionBank[i][0]=data.quizlist[i].question;
            questionBank[i][1]=data.quizlist[i].option1;
            questionBank[i][2]=data.quizlist[i].option2;
            questionBank[i][3]=data.quizlist[i].option3;
            wrongAnswerTracker[i]=0;
        }
         numberOfQuestions=questionBank.length; 

        scrambleDatabase();
        displayQuestion();
        addHoverClass();
        })//gtjson


 function scrambleDatabase(){
    for(i=0;i<50;i++){ 
    var rnd1=Math.floor(Math.random()*questionBank.length);
    var rnd2=Math.floor(Math.random()*questionBank.length);

    var temp=questionBank[rnd1];
    questionBank[rnd1]=questionBank[rnd2];
    questionBank[rnd2]=temp;

    }//i

 }//scdb



function displayQuestion(){
 var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
 var q1;
 var q2;
 var q3;

if(rnd==1){q1=questionBank[questionNumber]    [1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber]    [1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber]    [1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

$(stage).append('<div id="qt"     class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1"     class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3"     class="option">'+q3+'</div>');



 $('.option').on("click tap",function(){
  if(questionLock==false){questionLock=true;    
  //Correct answer
  if(this.id==rnd){
   $(stage).append('<div class="feedback1">Correct</div>');
   score++;
    wrongAnswerTracker[questionNumber]=0;
   }
  //wrong answer    
  if(this.id!=rnd){
   $(stage).append('<div class="feedback2">Incorrect</div>');
   wrongAnswerTracker[questionNumber]=1;
  }
  setTimeout(function(){changeQuestion()},1000);
 }})
}//display question



    function changeQuestion(){

        questionNumber++;

    if(stage=="#game1"){stage2="#game1";stage="#game2";}
        else{stage2="#game2";stage="#game1";}

    if(questionNumber<numberOfQuestions)    {displayQuestion();}else{displayFinalSlide();}

     $(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
     $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;addHoverClass();}); 
}//change question


     function displayFinalSlide(){

        $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'<br><br></div>');

        $(stage).append('<div id="b2"><a class="quizreturn">&#x21A9 Review wrong answers</a></div><br><div><a class="quizreturn" href="index.html">&#x21A9     Have another go</a></div>');

        $('#b2').on("click tap",function(){displayWrongAnswers();});

    }//display final slide

    function displayWrongAnswers(){
        $(stage).empty();
        for(i=0;i<numberOfQuestions;i++){
            if(wrongAnswerTracker[i]==1){
            $(stage).append("<div id='answerKey'>Q: "+questionBank[i][0]+"</br>A: "+questionBank[i][1]+"</br></div></br></br><div>");
            }
        }//if
        $(stage).append('<div><a class="quizreturn" href="index.html">&#x21A9 Have another go</a></div>');

    }//display wrong answers

    function addHoverClass(){

        $('#1').on("mouseover",function(){$('#1').css("color","#AAA");});
         $('#1').on("mouseout",function(){$('#1').css("color","#FFF");});
        $('#2').on("mouseover",function(){$('#2').css("color","#AAA");});
         $('#2').on("mouseout",function(){$('#2').css("color","#FFF");});
         $('#3').on("mouseover",function(){$('#3').css("color","#AAA");});
         $('#3').on("mouseout",function(){$('#3').css("color","#FFF");});


         $('#1').on("mouseover",function(){$('#1').css("border-color","#AAA");});
         $('#1').on("mouseout",function(){$('#1').css("border-color","#FFF");});
         $('#2').on("mouseover",function(){$('#2').css("border-color","#AAA");});
         $('#2').on("mouseout",function(){$('#2').css("border-color","#FFF");});
         $('#3').on("mouseover",function(){$('#3').css("border-color","#AAA");});
         $('#3').on("mouseout",function(){$('#3').css("border-color","#FFF");});


    }



    });//doc ready

activity.json:

{"quizlist":[

  {
  "question":"'pianissimo (pp)' means:",
  "option1":"very soft",
  "option2":"soft",
  "option3":"moderately soft"
  },
  {
  "question":"'piano (p)' means:",
  "option1":"soft",
  "option2":"moderately soft",
  "option3":"very soft"
  },
  {
  "question":"'mezzo piano (mp)' means:",
  "option1":"moderately soft",
  "option2":"soft",
  "option3":"very soft"
  },
  {
  "question":"'mezzo forte (mf)' means:",
  "option1":"moderately loud",
  "option2":"loud",
  "option3":"very loud"
  },
  {
  "question":"'forte (f)' means:",
  "option1":"loud",
  "option2":"moderately loud",
  "option3":"very loud"
  },
  {
  "question":"'fortissimo (ff)' means:",
  "option1":"very loud",
  "option2":"moderately loud",
  "option3":"loud"
  },
  {
  "question":"'diminuendo (dim.)' means:",
  "option1":"getting gradually softer",
  "option2":"getting gradually louder",
  "option3":"getting gradually slower"
  },
  {
  "question":"'crescendo (cresc.)' means:",
  "option1":"getting gradually louder",
  "option2":"getting gradually softer",
  "option3":"getting gradually slower"
  },
  {
  "question":"the direction to play very softly is:",
  "option1":"pp (pianissimo)",
  "option2":"p (piano)",
  "option3":"mp (mezzo piano)"
  },
  {
  "question":"the direction to play softly is:",
  "option1":"p (piano)",
  "option2":"pp (pianissimo)",
  "option3":"mp (mezzo piano)"
  },
  {
  "question":"the direction to play moderately softly is:",
  "option1":"mp (mezzo piano)",
  "option2":"pp (pianissimo)",
  "option3":"p (piano)"
  },
  {
  "question":"the direction to play moderately loud is:",
  "option1":"mf (mezzo forte)",
  "option2":"ff (fortissimo)",
  "option3":"f (forte)"
  },
  {
  "question":"the direction to play loud is:",
  "option1":"f (forte)",
  "option2":"ff (fortissimo)",
  "option3":"mf (mezzo forte)"
  },
  {
  "question":"the direction to play very loud is:",
  "option1":"ff (fortissimo)",
  "option2":"f (forte)",
  "option3":"mf (mezzo forte)"
  },
        {
  "question":"'andante' means:",
  "option1":"at a walking pace",
  "option2":"slow",
  "option3":"fast"
  },
  {
  "question":"'rit. (ritenuto)' means: ",
  "option1":"getting slower",
  "option2":"getting quieter",
  "option3":"getting faster"
  },
  {
  "question":"select the 'sharp' symbol:",
  "option1":"&#9839",
  "option2":"&#9838",
  "option3":"&#9837"
  },
  {
  "question":"select the 'flat' symbol:",
  "option1":"&#9837",
  "option2":"&#9839",
  "option3":"&#9838"
  },
  {
  "question":"select the 'natural' symbol:",
  "option1":"&#9838",
  "option2":"&#9839",
  "option3":"&#9837"
  },
  {
  "question":"'moderato' means:",
  "option1":"at a moderate pace",
  "option2":"moderately loud",
  "option3":"getting slower"
  },
  {
  "question":"'allegro' means:",
  "option1":"fast",
  "option2":"slow",
  "option3":"at a walking pace"
  },
  {
  "question":"notes played short and detached are played:",
  "option1":"staccato",
  "option2":"andante",
  "option3":"legato"
  },
  {
  "question":"accented notes have the following symbol:",
  "option1":">",
  "option2":".",
  "option3":"&#9900"
  },
  {
  "question":"notes played smoothly are played:",
  "option1":"legato",
  "option2":"diminuendo",
  "option3":"staccato"
  }, 
  {
  "question":"changes in speed are related to:",
  "option1":"tempo",
  "option2":"dynamics",
  "option3":"accents"
  },
  {
  "question":"changes in volume or loudness are related to:",
  "option1":"dynamics",
  "option2":"tempo",
  "option3":"accents"
  },     
  {
  "question":"tempo markings indicate:",
  "option1":"changes in speed",
  "option2":"changes in volume or loudness",
  "option3":"changes in note lengths"
  },
  {
  "question":"dynamic markings indicate:",
  "option1":"changes in volume or loudness",
  "option2":"changes in speed",
  "option3":"changes in note lengths"
  },
  {
  "question":"the direction to gradually play louder is:",
  "option1":"cresc. (crescendo)",
  "option2":"dim. (diminuendo)",
  "option3":"ff (fortissimo)"
  },
  {
  "question":"the direction to gradually play softer is:",
  "option1":"dim. (diminuendo)",
  "option2":"cresc. (crescendo)",
  "option3":"mp (mezzo piano)"
  }
  ]
  }

An example can be found at:

www.musictheorytutorials.com/trinitygr1quiz

Thanks

Upvotes: 0

Views: 105

Answers (2)

m-d-a
m-d-a

Reputation: 43

Changing overflow: hidden; to overflow-x:hidden; overflow-y:auto; adds the scrollbar when the content exceeds the size of the container.

Upvotes: 1

justDan
justDan

Reputation: 2333

Not sure if this is what you're after, but I use max-height in this case.

Fiddle: https://jsfiddle.net/6b9arpn4/

To test it out, copy the text, inspect the div with the p tag and paste more content in there (this will be done in the elements section of the inspect tool). You'll see that the white box will size accordingly. Hope this helps!

Upvotes: 0

Related Questions