i need help saving this, i can swap images but not save them. i am thinking maybe an update button to store the images. or maybe auto save when changes are made. someone mentioned cookies or something. i am not familiar with cookies and would like an easier solution.
actual page will have around 100 images and do need save function for permanently keeping changes.
hoping someone can figure this out, been at this for hours to just get this far
thanks ahead of time for just looking at this
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Swap demo</title>
<style type="text/css">
#GALLERY td {
height: 200px; width: 200px;
text-align: center;
vertical-align: middle;
}
#GALLERY td img, #GALLERY td img.normal {
border: solid white 5px;
}
#GALLERY td img.highlighted {
border: solid red 5px;
}
</style>
</head>
<body>
<table id="GALLERY">
<tr>
<td>
<img src="http://www.clearviewarts.com/thumbnails/Puppy In Basket.jpg" alt="Dogs"/>
</td>
<td>
<img src="http://www.clearviewarts.com/thumbnails/BabyIndy.jpg" alt="Dogs"/>
</td>
<td>
<img src="http://www.clearviewarts.com/thumbnails/HarlequinDane.jpg" alt="Dogs"/>
</td>
</tr>
<tr>
<td>
<img src="http://www.clearviewarts.com/thumbnails/Pug.jpg" alt="Dogs"/>
</td>
<td>
<img src="http://www.clearviewarts.com/thumbnails/Wagner-edit1.jpg" alt="Dogs"/>
</td>
<td>
<img src="http://www.clearviewarts.com/thumbnails/CanusAngelicus.jpg" alt="Dogs"/>
</td>
</tr>
</table>
<script type="text/javascript">
var pix = document.getElementById("GALLERY").getElementsByTagName("img");
for ( var p = 0; p < pix.length; ++p )
{
pix[p].onclick = picclick;
}
var firstImage = null;
function picclick( )
{
// to cancel a swap, click on first image again:
if ( firstImage == this )
{
this.className = "normal";
firstImage = null;
return;
}
// is this first image clicked on?
if ( firstImage == null )
{
// yes
firstImage = this;
this.className = "highlighted";
return; // nothing more to do
}
// aha! second image clicked on, so do swap
firstImage.className = "normal";
var temp = this.src;
this.src = firstImage.src;
firstImage.src = temp;
firstImage = null;
}
</script>
</body>
</html>
This is what I would do (I hope this helps).
Build an array of the image names in JS (on the server).
Render the HTML according to the array (via JS).
If the user does an image swap, alter the array, and re-render.
The rendering shouldn't need to pull any data from the server so won't flicker.
The onclick event should tell the update function which image is being changed.
If you want to save the display order, POST the current array back to the server.
If that sounds too complex, look at these
http://inspiretrends.com/free-jquery-carousel-plugins/
http://webdesigntunes.com/freebies/30-amazing-free-jquery-slider-and-carousel-plugins-of-2013/
Look at http://owenberesford.me.uk/17690427/sample.html
but pls know that:
for "real" code, i generally start with a testcase...
this works on FF and Opera (both Linux), not tested on anything MSIE.
to allow maximum freedom no framework has been used.
everything is run on the client, so you can just view/ save.
Related
I am populating a <DIV id='area'> element using a PHP script and I want to repopulate the same DIV element by calling a PHP function in JavaScript if the user wishes to filter the information:
$("#area").load("update-dashboard.php?id=7263");
It populates the DIV element with the correct information but the CSS styling I'm using to format the information (eg. class="highlight") doesn't get applied for some reason. So what I get reads correctly if I view the underlying HTML but the browser doesn't format it according to the stylesheet.
<style type="text/css">
.Highlight {
background-color: #dcfac9;
cursor: pointer;
}
td.highcell {
padding-top: 8px;
padding-bottom: 8px;
}
</style>
Here's what my table should contain within the DIV section:
<table style='border-collapse: collapse;' border=0 width='100%' id='link-table'>
<tr class='highlight'>
<td class='highcell'>
NK51 SNR55
</td>
<td class='highcell' width=36>
<img src='status_2.png' border=0 width=32 height=32><td class='highcell'>18-Dec-15</td>
<td class='highcell'>NK51 SNR55</td>
<td class='highcell'></td>
<td class='highcell'></td>
</tr>
ADDITIONAL INFO:
I also use this jQuery code to highlight the rows in the Table - maybe it doesn't work with HTML loaded after the page appears - if so can it be reinitialised?
$(function ()
{
$('#link-table td:first-child').hide();
$('#link-table tr').hover(function ()
{
$(this).toggleClass('highlight');
});
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
Try changing your css from .Highlight to .highlight. CSS selectors are case-insensitive but the HTML class attributes are not.
I've below PHP code which shows QR code & I'm showing it in center on submitting password. Now, since I'm keeping it in center, the rest of the page appears white & I want entire browser background color to be in blue. I tried putting bgcolor but that only changes the middle section's background where image appears & I need entire browser's background color to be blue
Here is my code for reference:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
vertical-align: middle;
}
</style>
</head>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// reading from post
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table width="380px">
<tr>
<td valign="top">Password:</td>
<td><input type="text" name="password" value="<?php echo $password; ?>"><span class="error">* <?php echo $passwordErr;?></span></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<?php
if ($password) {
echo "<img src='./myqrcode.php?password=$password' />";
?>
</body>
</html>
Can any one tell me how to put blue color as background?
Thanks
Do you want the background in the body? Can you show us a screenshot?
You can try
body {
vertical-align: middle;
background-color: blue;
}
By the way, it's a bad idea to use tables for designing the layout of the page. Use divs instead. Like here:
http://www.w3schools.com/html/html_layout.asp
And also don't use old-fashioned html tags like "bgcolor", use only CSS for styling.
<body style="backgroundoclor:blue;">
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// reading from post
}
?>
i have this code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-image: url(../images/paper_03.png);
}
form {
background-image: url(../images/paper_02.png);
}
</style>
</head>
<?php
require("../function.php");
// echo sizeof($_SESSION['liste']);
?>
<body >
<form name="log" method="post" style="position: absolute; top:50px; left: 320px; width: 600px; height: 100%;" >
<table BORDER=2 style="position: relative; top:15px; left: 3px;" >
<TR>
<TH style="width:100px"><font color="blue">Date</font></TH>
<TH style="width:400px"><font color="blue">Location</font></TH>
<TH style="width:400px"><font color="blue">Job Title</font></TH>
<TH style="width:300px"><font color="blue">Company</font></TH>
</TR>
<?php
session_start();
for($i=0;$i<sizeof($_SESSION['liste']);$i++){
?>
<TR>
<td ><center><label><?php echo $_SESSION['liste'][$i]['date']; ?></label></center></td>
<td ><label><?php echo $_SESSION['liste'][$i]['region'].','.$_SESSION['liste'][$i]['city'].','.$_SESSION['liste'][$i]['state']; ?></label></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['title']; ?></label></center></td>
<td ><center><label><?php echo $_SESSION['liste'][$i]['comapany_name']; ?></label></center></td>
</TR>
<?php
}
?>
</table>
</form>
</body>
</html>
i have a form i want that every 10 results be displayed togother ie add the pagination to my form with two icons ( next, previous ).
can i do this only with php?
do i need ajax in this work?
Pass a $liststart value in as a parameter to your code (get it with $liststart = $_REQUEST['liststart']).
Then adjust your loop to loop from $liststart to $liststart+10.
Make a button that onClick, goes to your code above with the new $liststart value. for example for the 'next' button on the first page, use echo "' onClick='location.href=\"yourcodeabove.php?liststart=".$liststart+10."\";'>";
or if you prefer, you could do it without javascript by making the next and prev buttons their own forms. like this:
<FORM METHOD="LINK" ACTION="yourcodeabove.php?liststart="<?php $liststart+10 ?>">
<INPUT TYPE="submit" VALUE="next->">
</FORM>
close out your other form first (which doesn't look like it needs to be a form actually... could be a div just as well). forms usually have 'actions' and are submitted with buttons but since you'll have 2 buttons (next and prev) each could be their own form with either the javascript onClick or the form method.
If you use mysql this should work:
$page = $_GET['page'];
$query = mysql_query("SELECT * FROM some_table LIMIT $page, 10");
And do some work with $query variable, your links should be something like this:
Next
I am developing an application where i am capturing images from a camera and streaming them online. To capture images i am using an opencv code. It stores(rewrites) the image on the same image file on server. This image is then streamed online. However if the streaming and storing take place simultaneously then the image gets corrupt. So i have synchronized those processes using system locks. The html page that checks that reloads the image every 2 secs checks if the img file has a system lock. If yes then it doesn't reload the image. So to check whether the file is locked or not i have to put some php code in my html file. I believe that my code is sytactically correct. Yet it is not giving the desired output.
<html>
<head>
<!--to keep requesting the server new page without displaying the image from the cache pragma
is used -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>YOUR SITE TITLE GOES HERE</title>
<style type="text/css">
#imgJSselbox{
position: absolute;
margin: 0px;
padding: 0px;
visibility: hidden;
width: 0px;
height: 0px;
border: 1px solid #006;
color: #fff;
background-image: url(selection_area.gif);
z-index: 20;
}
</style>
<script type="text/javascript" src="globalvar.js"></script>
<script language="Javascript">
var x = 2;
var y = 1;
var now;
function startClock() {
x = x-y;
document.form1.clock.value = x;
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
if(flock($fp1,LOCK_EX|LOCK_NB)==0 && flock($fp2,LOCK_EX|LOCK_NB)==0)
$x=1;
else
$x=0;
?>
var ch;
ch=<?php echo $x; ?>
if (x < 1 && ch==1) reload();
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
flock($fp1,LOCK_UN);
flock($fp2,LOCK_UN);
?>
timerID = setTimeout("startClock()", 1000);
}
function reload()
{
now = new Date();
<!-- to pass the new image to the src -->
var camImg = "a.jpg" + "?" + now.getTime();
document.campicture.src = camImg;
var crpImg = "b.jpeg" + "?" + now.getTime();
document.croppic.src = crpImg;
x = 2;
document.form1.clock.value = x;
}
</script>
<script type="text/javascript" src="image_cropper.js">
document.form1.x-coord.value=x1;
document.write(x1);
</script>
<script>
function window.open('im','imgg')
{
window.open('im','imgg');
}
</script>
</head>
<body bgcolor="white" onLoad="startClock()">
<center>
<font size=-1>
<h1>AYS WEBCAM PAGE</h1>
<h2>This page loads images and refreshes them after every given interval of time keeping
the same name of the image file</h2><p><br />
<div id="imgJSselbox"></div>
</center>
<img name="campicture" src="a.jpg" id="testimage" border=1 width=640 height=480
alt="AYS
founder's IMAGE" onClick="getImageCropSelectionPoint
'testimage',event,document.form1);">
====>>ROI==>>
<img name="croppic" src="b.jpeg" width=320 height=240 alt="cropped_image">
<center>
<form NAME="form1"action="image_cropper.php" method="POST"><b><font size="-1"
face="Arial">AutoReload in :==> </font>
<input TYPE="text" NAME="clock" SIZE="2" VALUE="5"> <font size="-1"
face="Arial">seconds.</font></b><br />
<br><br><input type="button" value="Crop" onclick= setImageCropAreaSubmit
("image_cropper.php",'testimage')><br><br>
</center>
<!-- <input type="text" name="x-coord" value=""><br>
<input type="text" name="y-coord" value=""><br>
<input type="text" name="wid" value="" ><br>
<input type="text" name="hght" value="" ><br>
-->
</form>
</body>
</html>
Thank you
Your problem is in the code timerID = setTimeout("startClock()", 1000);.
Use
timerID = setTimeout(startClock, 1000); instead.
See window.setTimeout - MDN.
can someone tell me how to create a nice small tooltip like ajax pop-up ?
the situation is like this,
I am pulling the $row->title from the db, and then I presented it as a link like this
<?php foreach($task->result() as $row): ?>
<tr>
<td><a href=#><?php echo $row->title; ?></a></td>
</tr>
<?php endforeach; ?>
when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title's description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don't know how to do it.
You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.
Sample style:
<style type="text/css">
.description {
visible: hidden;
position: absolute;
left: 0px;
top: 0px;
/* View */
font-family: Arial,Tahoma,Verdana;
font-size: 8pt;
color: #bbb;
background-color: #444;
padding: 5px 7px;
border: 1px solid #222;
}
</style>
Javascript:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add listener to links
$(".some_class").click(function(e) {
var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
$(this).append(description);
description.css("left", e.pageX-4);
description.css("top", e.pageY-4);
description.animate({ opacity: 'toggle' }, 400, 'linear');
// Remove description, if user moved the mouse cursor out description
description.mouseout(function() {
$(this).remove();
});
return false;
});
});
</script>
Change your code:
<?php foreach($task->result() as $row): ?>
<tr>
<td><?php echo $row->title; ?></td>
</tr>
<?php endforeach; ?>
But the better way is to check out some good jQuery plugin..
Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/
something like the following?
AJAX to get the description and when you're received the response create the description 'box'
var tipel = document.createElement('div');
tipel.innerHTML = descr;`
add it to the page
var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`
and position it like:
tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`
getting absolute coords of an element can be tricky, look for a fn online.
for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:
tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page
(you might get away with using this instead of tipel in those 2 lines)