I'm working with html, php and bootstrap to create some lists and buttons. My first questions is that I have written a script populate a "select" drop down list. It should go to the "sounds/" directory and populate itself with .wav files. The "select" shows up properly, it just doesn't populate the list. I do have .wav files in the directory and I gave full permissions to the directory itself. So its not that.
My other question is how would I put a button inline with the the "select" drop down. I don't want on the next line down.
<!--CALL TAB-->
<div id="call">
<div class="container">
<div class="hero-unit">
<h5>Call Functions -</h5>
<h6>Test Paragraph</h6>
<br>
<h6> Select a Sound One -</h6>
<div class="row">
<div class="span2">
<select id="sound1">
<?php
foreach(glob('sounds/*.wav') as $filename){
$rest = substr($filename, 7);
echo "<option>".$rest."</option>";
}
?>
</select>
</div>
</div>
<br>
<h6> Select a Sound Two -</h6>
<div class="row">
<div class="span2">
<select id="sound2">
<?php
foreach(glob('sounds/*.wav') as $filename){
$rest = substr($filename, 7);
echo "<option>".$rest."</option>";
}
?>
</select>
</div>
</div>
<br>
<h6>Volume - </h6>
<div id="slider-range-max">
</div>
<div class="row">
<div class="span6">
<br>
<p><a class="btn btn-large btn-primary" href="index.html">Play <i class="icon- play"></i></a> <a class="btn btn-large btn-danger" href="index.html">Pause <i class="icon-pause"></i></a>
</div>
</div>
</div>
<hr>
<footer>
<p>© FOOTER</p>
</footer>
</div>
</div>
Getting the button next to the select is simple. If you're not styling the select
or button
to be a block
element, then they should appear next to each other (inline block). If the HTML below doesn't work for you (button is not next to select), then try adding float: left;
to both the select
and button
.
For your glob()
, are you sure the path is correct? Where is the PHP file that's executing this versus the sounds
folder? What's your directory structure?
<div class="row">
<div class="span2">
<select id="sound1">
<option>1 option</option>
<option>2</option>
<option>3</option>
</select>
<button>Button</button>
</div>
</div>