1. Zuhause
  2. Frage und Antwort
  3. Anpassen der Höhe von Divs bei Verwendung dynamischer Inhalte

Anpassen der Höhe von Divs bei Verwendung dynamischer Inhalte

2016-08-04 18 views
0

Ich baue eine Website für Musiktheorie-Unterricht und Quiz.Anpassen der Höhe von Divs bei Verwendung dynamischer Inhalte

Ich habe todd motos Menü und ein Javascript-Tutorial von flashbynight verwendet, wer der Besitzer mir geholfen hat, mich anzupassen.

Ich habe ein Quiz, wo der Benutzer ihre falschen Antworten überprüfen kann. Da die Quizzes ziemlich lang sein können und die falschen/richtigen Antworten variieren, muss ich die Größe des div (und des Elternteils) ändern, wenn das Quiz diese Information enthüllt.

Ich habe mit verschiedenen Optionen (Auto, Min-Höhe usw.) gekämpft und bin festgefahren. Wenn ich die divs groß genug mache, um die Informationen von Anfang an unterzubringen, dann ist das Fenster zu lang, und alle unnötigen Bildlaufleisten sind vorhanden. Ich versuche, dies zu erreichen und auf Handys bis hin zu Desktops zu arbeiten.

Das relevante div ist #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)" 
    } 
    ] 
    }

Ein Beispiel finden Sie unter:

www.musictheorytutorials.com/trinitygr1quiz

Dank

Quelle

2016-08-04 m-d-a

+0

Bitte geben Sie in Ihrem Beitrag ein [minimales, vollständiges und verifizierbares Beispiel] (https://stackoverflow.com/help/mcve) an. – TheThirdMan

+0

wird den ursprünglichen Post bearbeiten und bearbeiten. –

+0

Got dort gerade über. Changing overflow: versteckt; zu Überlauf-x: versteckt; Überlauf-y: Auto; Fügt die Bildlaufleiste hinzu, wenn der Inhalt die Größe des Containers überschreitet. –

Antwort

1

Wechselnder Überlauf: versteckt; zu Überlauf-x: versteckt; Überlauf-y: Auto; Fügt die Bildlaufleiste hinzu, wenn der Inhalt die Größe des Containers überschreitet.

Quelle

2016-08-05 08:18:28

0

nicht sicher, ob dies ist, was Sie nach, aber ich benutze max-height in diesem Fall.

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

es zu testen, kopieren Sie den Text, das div mit dem p-Tag inspizieren und mehr Inhalte dort einfügen (dies wird in den Elementen Abschnitt des inspizieren Werkzeug durchgeführt werden). Sie werden sehen, dass die weiße Box entsprechend groß wird. Hoffe das hilft!

Quelle

2016-08-04 21:16:08

+0

Leider führt die maximale Höhe dazu, dass der Inhalt vollständig verschwindet. –

+0

@ m-d-a Interessant. Ich habe diesen Ansatz gerade diese Woche benutzt, wobei dynamische Daten mit einem Ajax-Aufruf abgerufen wurden. Denken Sie daran, Ihre Lösung zu veröffentlichen, wenn Sie es knacken? =) –

+0

Bin da gerade dabei. Changing overflow: versteckt; zu Überlauf-x: versteckt; Überlauf-y: Auto; Fügt die Bildlaufleiste hinzu, wenn der Inhalt die Größe des Containers überschreitet. –

Verwandte Themen

 Verwandte Themen