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?
http://jsfiddle.net/3JQeZ/
<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>
Related
I'm trying to post the implode data of multiple select html to database but it is dynamic.
Result will be like this:
data1|data2|data3 = from multiple select(already get)
how can I achieve this kind of result? It is separated with commas
data1|data2|data3, data1|data2|data3, data1|data2|data3
The separated data inside the commas come from another multiple select.
Here's my code
HTML
<div class="required field">
<label>Subjects:</label>
<select class="ui fluid search dropdown" name="pass_subj[]" multiple="">
<option value="">Subject</option>
<option value="data1">subject1</option>
<option value="data2">subject2</option>
<option value="data3">subject3</option>
<option value="data4">subject4</option>
<option value="data5">subject5</option>
</select>
</div>
<div class="two wide field" style="padding: 23px 0px 0px;">
<button class="passmore ui icon yellow button" type="button">
<i class="plus icon"></i>
</button>
</div>
php
$pass_subj = $_POST['pass_subj'];
$pass_subjs = implode("|", $pass_subj);
I solved my own problem: My current project was using fomantic-ui; on my previous attempt, I used multiple select via select tag, which gives combined array values. To fix this, I used a dropdown via a div tag:
<div class="required field">
<label>Subjects:</label>
<div class="ui multiple selection dropdown clearable">
<input name="pass_subj[]" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Subject</div>
<div class="menu">
<div class="item" data-value="AP">Araling Panlipunan</div>
<div class="item" data-value="ENG">English</div>
<div class="item" data-value="FIL">Filipino</div>
</div>
</div>
</div>
<div class="two wide field" style="padding: 23px 0px 0px;">
<button class="passmore ui icon yellow button" type="button"><i class="plus icon"></i></button>
</div>
My PHP:
$pass_subj = $_POST['pass_subj'];
$pass_subjs = implode('#',$pass_subj);
The result will be:
AP#AP,ENG#AP,ENG,FIL#AP,FIL,MATH,ENG#AP,FIL,ENG,MATH,SCI
So, in this case, I have a list of hotel rooms, and I want to display each data like a square view, using bootstrap of course.
The problem is, how to sort the data according to the order of the numeric values?
enter image description here
Example :
21 35 2
Become :
2 21 35
Views.php
<section class="content">
<h2>Gate A</h2>
<div class="card ml-1" style="width: 35rem">
<div class="row ml-3 mt-3 mb-3">
<?php
foreach ($tamu as $tamu_item) :
?>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-success mb-1"><?php echo $tamu_item->gateA ?>
</button>
</div>
</div>
<?php endforeach;?>
</div>
</div>
</section>
First and foremost, the code is a mess because I had gotten some outside help from a person who did not take his coding seriously, right now I need to meet a deadline and am focusing on functionality, so I apologize beforehand, I'll get to cleaning it up in time.
We are creating a simple shopping page that includes PHP, bootstrap. We store the product information the in a mysqli database. We have multiple modals for each item where you can choose the size, and then add them to the cart.
The problem is that while the bootstrap modals cannot be seen, they are still "clickable" as if they were active when they are not. This does not apply to the cart modal, at least as far as I can tell.
I tried to fix this by changing the z index of the class of modals, however, that did not work.
the html (and PHP):
<section class="products">
<?php
$db = new Database();
$db->connect();
$db->select('tbl_items','productid,Product_Name,Product_Price,Product_Quantity,Category,Product_Picture',NULL,'Category!="Beverage" and Product_Quantity > 0','productid ASC'); // Table name, Column Names, JOIN, WHERE conditions, ORDER BY conditions
$res = $db->getResult();
$rows = array();
foreach ($res as $row)
{?>
<div class="product-card">
<form method="post" class="product-form card-form">
<div class="product-image">
<?php echo '<img class="gallery-pic responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="product-info-container">
<div class="product-info">
<h3 id="prod-name" class="prod-info"><?php echo $row['Product_Name']; ?><h3>
</div>
<div class="product-info">
<span class="prod-info">
<h4>R<?php echo $row['Product_Price']; ?></h4>
</span>
</div>
</div>
<div class="product-info add-btn-container">
<div class="customn-btn btn-lg btn-block add-cart-btn" title="Add to FOGo"
data-toggle="modal" data-target="#product<?php echo $row['productid'];?>modal"
onclick="resetSize()">
Add to cart<i class="fa fa-cart-plus" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
I assign the product ID to the id of the modal to so that it can be referenced in the add to cart button above
Continue in the loop:
<div class="modal fade product-modal" id="product<?php echo $row['productid'];?>modal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header color-gradient">
<button type="button" title="Close Plate" class="close"
data-dismiss="modal">×</button>
<h4 id="item-title" class="modal-title"><?php echo $row['Product_Name'];?></h4>
</div>
<div class="display-pic-container">
<?php echo '<img class=" responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="modal-footer">
<div class="form-group">
<label class="size-lbl" for="size">Size</label>
<select class="form-control" name="size" onchange="changeSize(event)">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
<button type="button" title="Close Plate"
class="close-btn btn-lg btn-block cart-btn" id="close_cart"
data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
Close</button>
<span onclick="addToCart(<?php echo $row['productid'];?>, event )"
title="Add to cart" class="btn-lg btn-block cart-btn check-out-btn"><i
class="fa fa-credit-card" aria-hidden="true"></i>
Add to cart</span>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>
The GOAL:
Click of a “next slide” button refreshes / replaces <div> content with new content from a different php file. Each slide is its own php file. This is for an online course I’m building. Each time the button is clicked the <div> existing content is replaced by new content from the next slide (php file) in the series. I also want to build a back button to go to the previous slide, but I’m not at this point yet.
The PROBLEM:
I’m currently trying to use jquery/ajax. The button works (refreshes the <div> with the new slide content) in the first two slides, but then does not work on the third slide. I placed the button on each slide (prefer it this way). This may be one of the problems. I thought another issue may have to do with the file path for the page variable. I'm also wondering if the problem has to do with the fact that the home page only “includes” the other files in Div’s. Like this:
<div id="header">
<?php include 'pf_header.php'; ?>
</div>
<div id="menu">
<?php include 'pf_menu.php'; ?>
</div>
<div id="content">
<?php include 'pf_welcome.php'; ?>
</div>
<div id="footer">
<?php include 'pf_footer.php'; ?>
</div>
All of my code is below:
Script.js
$(document).ready(function() {
$(".slide").on("click", function(e){
$(".content").load($(this).attr("page"));
});
});
Slide 1 (button works)
<div class="content">
<div id="main">
<input type="button" value="NEXT" id="nextbtn" class="slide" page="pf_instructions.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
Slide 2 (button works)
<div class="content">
<div id="main">
<p>INSTRUCTIONS</p>
<p>INSTRUCTIONS</p>
<input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_introduction.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
Slide 3 (button DOES NOT work)
<div class="content">
<div id="main">
<p></p>
<input type="button" value="NEXT" id="nextbtn" class="slide" page="basics/pf_l1_quiz.php">
</div>
<div id="sidebar">
<div id="aside1">
<iframe src="https://www.youtube.com/embed/NAeha727ZWI"></iframe>
</div>
<div id="aside2">
</div>
</div>
</div>
I am trying to include different php files in the index.php file
on my webpage
http://www.e-lang.de/index.php
but the contents are included as simple text. What I want is that they should be proper DOM elements not the text.
here is my index.php
<div class="container">
<div class="navbar mt10">
<div class="navbar-inner">
اردو ایڈیٹر
<ul class="nav">
<li class="active">صفحۂ اول</li>
<li>رابطہ</li>
</ul>
</div>
</div>
<?php include_once "editor.php"; ?>
<!-- hidden inline form -->
<?php include_once "emailform.html"; ?>
</div>
and editor.php looks like
<div class="well widget">
<div class="widget-header">
<h3 class="title">اُردوھے جس کا نام</h3>
</div>
<div class="row">
<div class="span7">
<form method="post" action="save.php" id="text-container">
<input type="hidden" name="save" value="0" id="savetext">
<textarea rows="22" id="text-urdu" name="text" class="span7" dir="rtl" style="font: normal 25px Arial"></textarea>
</form>
<div class="rel">
<div id="counter"></div>
</div>
</div>
<div class="span4" id="help-wrapper">
</div>
</div>
<div class="row">
<div class="span11">
<div class="well widget" id="buttons-listing">
<ul class="listing">
<li>Print</li>
<li>Save</li>
<li>pdf</li>
<li></li>
<li><a href="#" class="button" id="btn_email" >E-Mail</a></li>
</ul>
</div>
</div>
</div>
</div>
There is no actual PHP in editor.php. Please remove the first line (containing the PHP open tag, <?php) from the editor.php file, as that should only surround PHP code. For standard HTML, you don't need to use the <?php tag.