Hello Stackers,
I'm having a question about jQuery. I have the following code, and I want that if I select one of the options, that the Image SRC changes to that path. (Direct, without any other clicks). Is this possible? (It's a kind of Live Preview of the selected image) I Tried, but it doesn't seem to be working.
The Form and Image Display
<b>Afbeelding</b><br><select name="choose" id="choose">
<?php
if ($handle = opendir('C:/inetpub/wwwroot/magieweb/images/news'))
{
while (false !== ($file = readdir($handle)))
{
if ($file == '.' || $file == '..')
{
continue;
}
echo '<option value="' . $file . '"';
if (isset($_POST['topstory']) && $_POST['topstory'] == $file)
{
echo ' selected';
}
echo '>' . $file . '</option>';
}
}
?>
</select><br><br>
<ul style="border: 1px solid #2087A1; list-style-type: none; margin-right:40px; min-height:30px;">
<li><strong style="color:#2087A1; margin-top:3px; margin-bottom:3px;">Nieuwsafbeelding Preview</strong></li>
<li><img id="blah" src=""></li>
</ul><br><br>
My jQuery
$('#choose').change(function(){
$('#blah').attr('src', this.value);
alert(this.value);
});
Thanks in Advance
Updated: retrieves selected option value from select box on change.
$('#my_select_box').change(function(){
$('#my_changing_image').attr('src', $('#my_select_box').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select_box">
<option value="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">something</option>
<option value="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">something else</option>
</select>
<img id="my_changing_image" src="http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" />
https://jsfiddle.net/hqk1r8fk/1/
Related
I have this code which creates buttons from files in a directory. I need to organize them in a table with 4 columns. How can I do this?
Here is my code:
$handle = opendir('mydirectory');
if($handle){
while(($entry = readdir($handle)) !== false){
if($entry != '.' && $entry != '..' && $entry != '.htaccess'){
echo "<button onclick=\"location.href='mydirectory/$entry'\" style=\"background-color: #660000;\"><p style=color:white;>$entry</button><br>";
}
}
closedir($handle);
Taking what #Raptor mentioned in the comments you could do something like this:
<style>
#buttons{
width: 300px;
float:left;
}
</style>
<div id="buttons">
<?php
for($i=0;$i <=10; $i++){
echo "<button>Button $i</button>";
}
?>
</div>
I'm working with an older web app, and aside from rewriting everything to modern standards I'm trying to make the modifications as simple as possible.
As you can see below I have a dynamically created list of a directory. The code works but I can't figure out the best way that I can split the list into 3 columns. I'm limited to having this thing work in IE9 (if it works on any other browser that's just a plus). The nested tables are a mess, I know, but that's how this thing was built, I'm just trying to modify it to us the dynamic directory listing (with a couple checkboxes).
Is there some PHP that would do this? Or is there some CSS techniques that can work? I'm just a bit lost on what will work for this blast from the past.
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#808080">
<tr>
<td>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr align="center" bgcolor="#000000">
<td valign=bottom class="style6 Normal"><strong>Watertown Network Shared Directory Access<br>
Applies to "P" drive permissions - <br>
By Default all users have at <em>least</em> "read-only" access to all folders/files on the "S" drive. </strong></td>
</tr>
<tr>
<td align="left"><table width="100%" border="0">
<?php
//$path = '\\\\wttfs001\\private';
$path = '\\\\wttfs001\\shared';
$directories = scandir($path);
echo '<ul>';
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') {
continue;
}
if(is_dir($path . '/' . $directory)){
echo '<input type="checkbox" name="read[]" value="' . $directory . '" />R';
echo '<input type="checkbox" name="write[]" value="' . $directory . '" />W';
echo ' ' . $directory . '<br>';
}
}
echo '</ul>';?>
</table></td>
</tr>
</table>
It's going to depend on how you want them to flow.
What I'm not seeing in your loop are any <li> tags. I would amend your loop as follows:
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') { continue; }
if (is_dir($path . '/' . $directory)){
echo '<li><input type="checkbox" name="read[]" value="' . $directory . '" />R</li>';
echo '<li><input type="checkbox" name="write[]" value="' . $directory . '" />W</li>';
echo '<li>' . $directory . '</li>';
}
}
Now, you have markup to play around with. From there, you can apply styling to adjust your rows or columns, given a mark up structure that resembles:
HTML
<ul class="dir-1">
<li><input type="checkbox" name="read[]">R</li>
<li><input type="checkbox" name="write[]">W</li>
<li>dir-1</li>
</ul>
<ul class="dir-2">
<li><input type="checkbox" name="read[]">R</li>
<li><input type="checkbox" name="write[]">W</li>
<li>dir-2</li>
</ul>
CSS
ul[class^="dir-"],
ul[class*=" dir-"] {
padding: 0;
margin: 0;
clear: both;
}
ul[class^="dir-"] li,
ul[class*=" dir-"] li {
display: inline-block;
width: 32%;
float: left;
margin-right: 1%;
}
http://codepen.io/anon/pen/aOgOdg
The above was helpful, pointed me in a direction on CSS....found an answer so simple I can't believe I struggled so much with it.
<?php
//$path = '\\\\wttfs001\\private';
$path = '\\\\wttfs001\\shared';
$directories = scandir($path);
echo '<ul class="fred">';
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') {
continue;
}
if(is_dir($path . '/' . $directory)){
echo '<li class="wilma"><input type="checkbox" name="chkRead[]" value="' . $directory . '" />R</li>';
echo '<li class="wilma"><input type="checkbox" name="chkWrite[]" value="' . $directory . '" />W</li>';
echo '<li class="directory">' . $directory . '</li>';
}
}
echo '</ul>';
?>
I put in the li tag as mentioned and gave them a 2 different classes. 1 for the checkboxes and one for the directory listing.
For CSS I used:
li.wilma{
display: inline-block;
padding-left: .2em;
padding-bottom: .25em;
padding-top: .25em;
}
li.directory{
display: inline-block;
width: 15%;
padding-right: 1em;
padding-left: 2em;
padding-bottom: .25em;
padding-top: .25em;
}
As is, it works so far for what I was looking for, to format a dynamically created directory list with checkboxes. Honestly I have no idea if all the padding is necessary, CSS is such mystery to me yet, but I have a nice looking list now.
I have my code that displays 92 selectors and each selector has a canvas(where is set a background color depending on the value from selector), in Jquery I set backgorund colors to canvas for the each value form selector, my problem is that when I click other selector it sets the backround color to the first Canvas(form the first selector but not on his own Canvas), I have 92 selector and each have CANVAS, how can I manage to do this in JQUERY...
Code
<html>
<head>
<title>Tests</title>
<style type="text/css">
.table-container {
display: inline-table;
}
table {
width: 230px;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select').change(function() {
var selected = $(this).find(':selected').val();
if (selected == 'Forms') {
$('#myCanvas').css('background','green');
}
if (selected == 'language Syntax') {
$('#myCanvas').css('background','yellow');
}
if (selected == 'Fundamentals') {
$('#myCanvas').css('background','red');
}
if (selected == 'Advanced Concepts') {
$('#myCanvas').css('background','blue');
}
if (selected == 'New Concepts in PHP5') {
$('#myCanvas').css('background','violet');
}
if (selected == 'Operators and Functions') {
$('#myCanvas').css('background','black');
}
if (selected == 'Variables and Datatypes') {
$('#myCanvas').css('background','brown');
}
});
});
</script>
</head>
<body>
<h3>Tests</h3>
<div class="table-container">
<table border="3">
<tr>
<th>
<?php
$con = mysql_connect("localhost","root","sergios.com");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("phptests", $con);
$result1 = mysql_query("SELECT * FROM question");
for($i=1;$i<93;++$i)
{
$result = mysql_query("SELECT * FROM Category");
echo "Number:".$i."<br />";
echo "<select>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<option>" . $line['name'] . "</option>";
}
echo "</select>";
?>
<canvas id="myCanvas" width="20" height="20" style="border:1px solid #c3c3c3;">
</canvas>
From what I observed, you are changing the same canvas element's color (id="myCanvas" => '#myCanvas'). Therefore, you need a way to uniquely associate each unique selector with each unique canvas.
There are more elegant ways of recoding what you have coded. Due to the constraint of time, here is a sample by utilizing html element class names.
// in php //////////
<?php
for($i=1;$i<93;++$i){
$result = mysql_query("SELECT * FROM Category");
?>
<br />
Number: <?php echo $i; ?>
<select class="<?php echo 'myCanvas_' . $i; ?>">
<?php
while($line = mysql_fetch_assoc($result)){
?>
<option value="<?php echo $line['name']; ?>"><?php echo $line['name']; ?></option>
<?php
}
?>
</select>
<canvas id="<?php echo 'myCanvas_' . $i; ?>" width="20" height="20" style="border:1px solid #c3c3c3;"></canvas>
<?php
}
?>
$(document).ready(function(){
$('select').change(function() {
var toChangeCanvasId = '#' + $(this).attr('class');
var selected = $(this).find(':selected').val();
if (selected == 'Forms') {
$(toChangeCanvasId).css('background','green');
}
if (selected == 'Fundamentals') {
$(toChangeCanvasId).css('background','red');
}
});
});
I am working on a PHP Gallery application, and need some help here. Actually I have a page where images from a specific directory are displayed directly. With each one of the images displayed there is a dynamically generated submit button that will be used to delete respective images separately.
Every image has its own submit button, that will be used to delete that image. Being new to php I need some method that can be called to delete only that image from the actual or physical directory.
There is a similarity between image and button that I have coded it such that every image and its respective button has names such as "img_1" and its button is "del_1".
<form id="albumGallery" name="albumGallery" method="POST">
<?php
$dir = htmlspecialchars($_GET["p"]) . "/";
$imgs = array();
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if (!is_dir($file) && preg_match("/\.(bmp|jpe?g|gif|png)$/", $file)) {
array_push($imgs, $file);
}
}
closedir($dh);
} else {
die('cannot open ' . $dir);
}
$i=0;
echo "<div id='images'>";
foreach ($imgs as $idx=>$img) {
//$class = ($idx == count($imgs) - 1 ? ' class="last"' : '');
echo '<table style="float: left; border: 1px solid #EFEFEF; border-radius: 5px; padding: 5px; margin: 5px;"><tr><td><a href="'. $dir . $img .'" rel="example_group" ><img src="' . $dir . $img . '" alt="' . $img . '" id="'. "img_" . $i .'"/>
</a></td></tr><tr><td><input type="submit" class="ctrlDelete" value="" id="'. "del_" . $i .'"/></td></tr></table>';
$i++;
}
echo "</div>";
?></form>
So, I need to make a method so that each button deletes its respective image and the form is posted back to self.
For your issue, it is better to use anchors. You can style them as pseudo-buttons, if you want. Then just generate links like delete.php?id=23, which will execute the appropriate deletion script with $_GET argument passed.
Below is the very simple implementation:
<table>
<tr>
<td>Title</td>
<td>Image</td>
<td>Actions</td>
<tr>
<?php
foreach ($table as $row)
{
echo "<tr>";
echo "<td>".$row['title']."</td>";
echo "<td>".$row['image']."</td>";
echo "<td>";
echo "<a href='delete.php?id=".$row['id']."'>Delete</a>";
echo "<a href='edit.php?id=".$row['id']."'>Edit</a>";
echo "</td>";
echo "</tr>";
}
?>
</table>
delete.php and edit.php should contain the following code at the very end:
<?php
header("Location: http://www.example.com/");
?>
#Edward Ruchevits
Thanks for your help :D,
I did not use the header(); method but used the javascript's settimeout(); to redirect my page. Here is my code...
<script type="text/javascript">
setTimeout("window.location = '<?php echo $_SERVER['HTTP_REFERER'] ?>'", 1);
</script>
<?php
$path = htmlspecialchars($_GET["p"]);
unlink($path);
?>
I suggest adding the form tag inside your foreach loop and post each of those forms to self. Each form can simply include a hidden field with the image ID. Then each time the page loads, you can simply check the $_POST variable for the image and delete that before serving up your page.
Alternately, you might consider using checkboxes next to the images - then one form and one submit button can action multiple deletions in one - far more efficient in my opinion.
Hope this helps!
I'm trying to create a simple dynamic gallery with a radio button under each image to allow the user to select an image and submit the form. I'm not concerned with processing the form yet, I'd just like to figure out how to dynamically generate the form. Currently I'm creating the gallery with this;
<?php
$images = "image_gallery/";
$big = "big/";
$cols = 2;
if ($handle = opendir($images)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && $file != rtrim($big,"/")) {
$files[] = $file;
}
}
closedir($handle);
}
$colCtr = 0;
echo '<table width="100%" cellspacing="3"><tr>';
foreach($files as $file)
{
if($colCtr %$cols == 0)
echo '</tr><tr><td colspan="2"><hr /></td></tr><tr>';
echo '<td align="center"><img src="' . $images . $file . '" /></td>';
$colCtr++;
}
echo '</table>' . "\r\n";
?>
It seems as though I should create the radio buttons inside of the foreach loop, but I'm not sure exactly where, or how.
I appreciate any help.
in your foreach loop:
foreach($files as $file){
if($colCtr %$cols == 0)
echo '</tr><tr><td colspan="2"><hr /></td></tr><tr>';
echo '<td align="center"><img src="' . $images . $file . '" /><input type="radio" name="should be common if to choose one between mutiples" value="the value you want to send via form" /></td>';
$colCtr++;
}
echo '</table>' . "\r\n";