1. 首頁
  2. 問答
  3. 使用動態內容時調整Div的高度

使用動態內容時調整Div的高度

2016-08-04 96 views
0

我正在爲音樂理論課和測驗建立一個網站。使用動態內容時調整Div的高度

我已經使用了託德摩托的菜單和來自flashbynight的javascript教程，這些教程的主人幫助我適應。

我有一個測驗，用戶可以查看他們不正確的答案。由於測驗可能很長，錯誤/正確的答案會有所不同，所以當測驗顯示此信息時，我需要更改div（和父母的）的大小。

我一直在努力與各種選項（自動，最小高度等），我卡住了。如果我讓div大到足以容納從一開始就提供的信息，那麼窗口會一直存在，並且會出現不必要的滾動條。我試圖讓這個適合和通過手機到桌面工作。

相關div是#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)" 
    } 
    ] 
    }

一個例子，可以發現：

www.musictheorytutorials.com/trinitygr1quiz

感謝

來源

2016-08-04 m-d-a

+0

請在您的文章中提供[最小，完整且可驗證的示例]（https://stackoverflow.com/help/mcve）。 – TheThirdMan

+0

會做和編輯原始帖子。 –

+0

到達那裏。更改溢出：隱藏;溢出-x：隱藏; overflow-y：auto;當內容超過容器的大小時添加滾動條。 –

回答

1

更改溢出：隱藏;溢出-x：隱藏;溢出-Y：汽車;當內容超過容器的大小時添加滾動條。

來源

2016-08-05 08:18:28

0

不知道這是否是你追求的，但我在這種情況下使用max-height。

小提琴： https://jsfiddle.net/6b9arpn4/

爲了測試它，複製文本，檢查與p標籤div和粘貼有更多的內容（這將在檢查工具的元素部分來完成）。你會看到白框會相應的大小。希望這可以幫助！

來源

2016-08-04 21:16:08

+0

不幸的是，最大高度會導致內容完全消失。 –

+0

@ m-d-a有趣的。本週我使用這種方法，動態數據通過ajax調用進行提取。當你破解時發佈你的解決方案？ =） –

+0

到達那裏。更改溢出：隱藏;溢出-x：隱藏;溢出-Y：汽車;當內容超過容器的大小時添加滾動條。 –

相關問題

 相關問題