all html stuffs generating document.write lets have more 1 ul elements, , in each ul 2 li elements. on click first li second 1 drops down dynamic content. content in every drop down depends on li element upper.
here code copied prj:
document.write("<div class='cooltable'> ") document.write("<span style='font-family:lucida sans unicode, lucida grande, sans-serif;'> round " + groupcounter + " (" + s + " sets - " + r + " reps)</span>") document.write("<ul>") document.write("<li id='" + + "' class='listpoints' onclick='dropdown(this); overlay(" + + ");'> exercise </li>") document.write("<li id='overlay'><div id='overlay16' onscroll='scrolllimit()'><p hidden id='number'> number </p><div class=new_div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height:100px; overflow:hidden; margin-top:15px'> <img id='testimg2' src='c:/users/jcournoyer/documents/fytpics/move 9_rough.png' alt='exercie picture' height='95px'> </div><div class=new_div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height: 250px; margin-top:15px' color='#ffffff' width='100%'><text id='exercisename' style='color:white;font-size:110%; font-family:lucida sans unicode, lucida grande, sans-serif;'> exercise information </text><div style='background-color: rgba(255, 255, 255, 0.73);height:200px;width:100%;overflow:auto;border:0; box-shadow:none; margin-top:10px' width='160%'><p id='description' align='left' style='font-size:85%'>content want user see goes here.</p></div></div><div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height: 250px; margin-top:30px' color='#ffffff'><text style='color:white;font-size:110%; font-family:lucida sans unicode, lucida grande, sans-serif;'> exercise video </text><div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; height:300px; margin-top:10px'><iframe style='opacity:0.0' id='exercisevideo' src='https://drive.google.com/file/d/0bynj5wn12k5kdmtbqny0x0xqsvu/preview' width='90%' height='200'></iframe></div></div><div style='border:0; box-shadow:none; width:100%;margin: 10px 0; max-height: 47px;'><a href='#' onclick='likeexercise()' style='display: inline-block; max-height: 46px;'><img src='http://googledrive.com/host/0bynj5wn12k5kr0izwgrrumhub1k/fyt_icon_like_grey_sq.png' height = '45px' width='45px' hspace='5' title='like'></img></a><a href='#' onclick='dislikeexercise()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0bynj5wn12k5kr0izwgrrumhub1k/fyt_icon_dislike_grey_sq.png' height = '45px' width='45px' hspace='5' title='dislike'></img></a><a href='#' onclick='jointpain()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0bynj5wn12k5kr0izwgrrumhub1k/fyt_icon_pain_grey_sq.png' height = '45px' width='45px' hspace='5' title='this 1 hurts!'></img></a><a href='#' onclick='trackprogress()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0bynj5wn12k5kr0izwgrrumhub1k/fyt_icon_pencil_grey_sq.png' height = '45px' width='45px' hspace='5' title='track progress'></img></a><a href='#' onclick='gotocaspio()' style='display: inline-block; max-height: 46px; margin-left: 50px;'> <img src='http://googledrive.com/host/0bynj5wn12k5kr0izwgrrumhub1k/fyt_icon_done_grey_sq.png' height = '45px' width='45px' hspace='5' title='i done!'> </a></div></div></li>") document.write("</ul>") function overlay(x) { el = document.getelementbyid("overlay"); el2 = document.getelementbyid("exercisevideo"); el3 = document.getelementbyid("display-table"); document.getelementbyid("exercisename").innerhtml = exercise[winnerchickendinner[x]][30] document.getelementbyid("testimg2").src = "http://www.googledrive.com/host/0bynj5wn12k5kzzljwenrcwvobhc/" + exercise[winnerchickendinner[x]][60] + ".png" document.getelementbyid("description").innerhtml = s + " sets of " + r + "</br> </br><span style='font-size:100%'> <b> exercise description </b> </span>" + exercise[winnerchickendinner[x]][62] + "</br></br><span style='font-size:100%'> <b> tips & tricks </b> </span> </br></br>" + exercise[winnerchickendinner[x]][64] + "</br></br> <span style='font-size:100%'> <b> make harder </b> </span></br></br>" + exercise[winnerchickendinner[x]][65] + "</br></br> <span style='font-size:100%'> <b> make easier </b> </span></br></br>" + exercise[winnerchickendinner[x]][66] document.getelementbyid("exercisevideo").src = "https://drive.google.com/file/d/" + exercise[winnerchickendinner[x]][61] + "/preview" document.getelementbyid("number").innerhtml = x } i have around 9 if/else's have 9 <ul>s document.write("<li id='" + + "' class='listpoints' onclick='dropdown(this); overlay(" + + ");'> exercise </li>") overlay(" + + ") working on first <li> think problem there. need every <li> open overlay.
i'm not javascript guy, got headache.
thanks help
yes., every time element created, getting new tag id value i.
make sure 'i' value changed. number of tags same id value, can have first 1 affected, not see changes now.
make sure change values of id every iteration/createelement().
for doing so, onclick of tag, can call function in value of variable i incremented or @ least changed per needs!
function dropdown(el) { toggleclass(el.nextelementsibling, 'overlayopen'); += 1; } you face problem in case variable i locally declared. need declate globally.
in javascript, vaiable no declaration considered global variable.
Comments
Post a Comment