Add HTML elements if a particular file exists on the server -
i'm trying create html page change depending on in current directory. there image box, , buttons change image. because page identical throughout different pages, there way add or remove these buttons depending on how many images in same directory?
the idea site expandable minimal effort changing each page, such other users can it. in file below, changepage button needs removed.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head id="head"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title> maths study , revision </title> <link href="./styles.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function changepage(page) { var img = document.getelementbyid("image"); img.src="./pages/page_" + page + ".png"; return false; } </script> </head> <body background="/img/image.jpg"> <div id="container"> <div id="header"> <h1 style="border-style:solid;border-color:white;border-width:1px;"> maths study , revision </h1> </div> <div id="menuwrapper"> <ul> <li> <a href="#">higher tier</a> <ul> <li> <a href="#">calculator paper</a> <ul> <li> <a href="/j13/hc/index.html">june 2013</a> </li> <li> <a href="/m13/hc/index.html">march 2013</a> </li> <li> <a href="/n12/hc/index.html">november 2012</a> </li> <li> <a href="/j12/hc/index.html">june 2012</a> </li> </ul> </li> <li> <a href="#">non-calculator paper</a> <ul> <li> <a href="/j13/hn/index.html">june 2013</a> </li> <li> <a href="/m13/hn/index.html">march 2013</a> </li> <li> <a href="/n12/hn/index.html">november 2012</a> </li> <li> <a href="/j12/hn/index.html">june 2012</a> </li> </ul> </li> </ul> </li> <li> <a href="#">foundation tier</a> <ul> <li> <a href="#">calculator paper</a> <ul> <li> <a href="/j13/fc/index.html">june 2013</a> </li> <li> <a href="/m13/fc/index.html">march 2013</a> </li> <li> <a href="/n12/fc/index.html">november 2012</a> </li> <li> <a href="/j12/fc/index.html">june 2012</a> </li> </ul> </li> <li> <a href="#">non-calculator paper</a> <ul> <li> <a href="/j13/fn/index.html">june 2013</a> </li> <li> <a href="/m13/fn/index.html">march 2013</a> </li> <li> <a href="/n12/fn/index.html">november 2012</a> </li> <li> <a href="/j12/fn/index.html">june 2012</a> </li> </ul> </li> </ul> </li> </ul> </div> <div id="intro"> <p style="float:left;margin-left:10px;margin-bottom:10px;"> <object type='text/plain' data='./title.html' height="50px" width="800px"></object> </p> </div> <div id="exam"> <img src="./pages/page_1.png" id="image"> </div> <div class="col1"> <button onclick="changepage('1')">page 1</button> <button onclick="changepage('2')">page 2</button> <button onclick="changepage('3')">page 3</button> <button onclick="changepage('4')">page 4</button> <button onclick="changepage('5')">page 5</button> <button onclick="changepage('6')">page 6</button> <button onclick="changepage('7')">page 7</button> <button onclick="changepage('8')">page 8</button> <button onclick="changepage('9')">page 9</button> <button onclick="changepage('10')">page 10</button> <button onclick="changepage('11')">page 11</button> <button onclick="changepage('12')">page 12</button> <button onclick="changepage('13')">page 13</button> <button onclick="changepage('14')">page 14</button> <button onclick="changepage('15')">page 15</button> <button onclick="changepage('16')">page 16</button> <button onclick="changepage('17')">page 17</button> <button onclick="changepage('18')">page 18</button> <button onclick="changepage('19')">page 19</button> <button onclick="changepage('20')">page 20</button> <button onclick="changepage('21')">page 21</button> <button onclick="changepage('22')">page 22</button> <button onclick="changepage('23')">page 23</button> <button onclick="changepage('24')">page 24</button> </div> <div id="footer"> </div> </div> </body> any appreciated!
this can achieved using php , scandir() method. requires server run web page on (wamp can used simulate local server).
there alternative using html5. posted here can find tutorials describing process on websites such :
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-dir-reading
Comments
Post a Comment