I've made an agenda which got events and once i click on days , i would like to click on a day and this will show the event but this don't work
I want to show the class="info"
i've tried like that but this don't work
$(document).on('click', '.toggleNextInfo', function () {
$(this).nextAll('.info').toggle();
});
maybe it's because of css too ?
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px;}
table td:hover .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/date.ico" />
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.month').hide();
$('.month:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month != current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});
</script>
<script type="text/javascript" >
$(document).on('click', '.toggleNextInfo', function () {
$(this).next('.info').toggle();
});
</script>
</head>
<body>
<?php
require('config.php');
require('date.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<div class="year"><?php echo $year; ?></div>
<div class="months">
<ul>
<?php foreach ($date->months as $id=>$m): ?>
<li><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 && $w != 1): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>> <a class="toggleNextInfo" > TEST </a>
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
</br>
<ul class="events">
</br>
</br>
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
<div class="info" >
<li > <?php echo $e; ?></li>
<li>
<form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
<input type="submit" name="Envoyer" value="Envoyer">
</form>
</li>
</div>
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
<div class="clear"></div>
</br>
</br>
</body>
</html>
$(this).next() would find a DOM element that immediately follows this, but in you example .toggleNextInfo does not have a .info node following it.
.nextAll() would be better if your elements were on the same level.
You need to think through what html structure you have, because that informs your decisions with jquery. Not only are these two elements not siblings, but they're not at the same nesting level.
.toggleNextInfo
ul
li
li
.info
Since these are likely to change, I generally prefer using find. There are several ways you can do this, but this should work:
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});
Related
I am trying to make a div update in app script, but since the code is written in the html it can only be run once. Is there any way to refresh the div without page refresh?
var sheet=SpreadsheetApp.openByUrl(url).getSheetByName("Data1"),sheet2=SpreadsheetApp.openByUrl(url).getSheetByName("Data2");
function doGet(e){
var tmp=HtmlService.createTemplateFromFile("main");
tmp.list1=sheet.getRange(1,1,sheet.getRange("A1").getDataRegion().getLastRow(),1).getValues(),tmp.list2=sheet2.getRange(1,1,sheet2.getRange("A1").getDataRegion().getLastRow(),1).getValues();;
return tmp.evaluate().setTitle("WhatsUp");
}
.old{
background-color:lightgreen;
border-radius:10px;
}
.msg{
background-color:black;
color:white;
border-radius:10px;
padding:2px;
transition:1s ease;
margin:5px;
position:relative;
left:-100%;
}
<div class="old">
<h3>You</h3>
<? for(var i=0;i<list1.length;i++){ ?>
<div class="msg"><?= list1[i]; ?></div>
<? }?>
</div>
<br>
<div class="old2">
<h3>Other User</h3>
<? for(var j=0;j<list2.length;j++){ ?>
<div class="msg"><?= list2[j]; ?></div>
<? }?>
There are 2 web pages both save and read the data from an excel document, therefore I would like the div which displayes the messages to be updated periodically (add or remove the black divs) without page refresh.
Whatsup? 😁
Full code below
//code.gs
var url="https://docs.google.com/spreadsheets/d/mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm";
var sheet=SpreadsheetApp.openByUrl(url).getSheetByName("Data1"),sheet2=SpreadsheetApp.openByUrl(url).getSheetByName("Data2");
function doGet(e){
var tmp=HtmlService.createTemplateFromFile("main");
tmp.list1=sheet.getRange(1,1,sheet.getRange("A1").getDataRegion().getLastRow(),1).getValues(),tmp.list2=sheet2.getRange(1,1,sheet2.getRange("A1").getDataRegion().getLastRow(),1).getValues();;
return tmp.evaluate().setTitle("WhatsUp");
}
function send(msg){
sheet.appendRow([msg]);
}
function clearYouLast(){sheet.deleteRow(sheet.getDataRange().getValues().length);}
function clearUserLast(){sheet2.deleteRow(sheet2.getDataRange().getValues().length);}
function clearYou(){sheet.clearContents();}
function clearUser(){sheet2.clearContents();}
function clearAll(){clearYou();clearUser();}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.old{
background-color:lightgreen;
border-radius:10px;
}
.up{
border-radius:50%;
background-color:lime;
position:fixed;
top:70%;
right:10%;
height:100px;
width:100px;
cursor:pointer;
}
.msg{
background-color:black;
color:white;
border-radius:10px;
padding:2px;
transition:1s ease;
margin:5px;
position:relative;
left:-100%;
}
</style>
</head>
<body onload="load();">
<h1>WhatsUP</h1>
<form onsubmit="return send()">
<input type="text" placeholder="Message here" id="msg">
<button class="send" type="submit">Send</button>
</form>
<div class="old">
<h3>You</h3>
<!--This code needs to be reran-->
<? for(var i=0;i<list1.length;i++){ ?>
<div class="msg"><?= list1[i]; ?></div>
<? }?>
<!--As you may see when running the above it creates multiple div elements
with the class of (msg)-->
<!--What I mean by rerunning is that if the list1 contains less items the number of divs with class (msg) should reduce AND IF the number of items in list1 increases the number of divs with class (msg) should increase-->
<!--End-->
</div>
<br>
<div class="old2">
<h3>Other User</h3>
<? for(var j=0;j<list2.length;j++){ ?>
<div class="msg"><?= list2[j]; ?></div>
<? }?>
</div>
<button onclick="google.script.run.clearYouLast()">Delete</button>
<button onclick="google.script.run.clearYou()">Delete Your Messages</button>
<button onclick="google.script.run.clearAll()">Delete All Messages</button>
<!--<button onclick="google.script.run.clearUser()" >Delete Your Messages</button>-->
<img onclick="upload()" class="up" alt="Upload file" src="https://previews.123rf.com/images/sarahdesign/sarahdesign1509/sarahdesign150901050/44517597-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B2%84%ED%8A%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%95%84%EC%9D%B4%EC%BD%98.jpg">
<script>
function send(){
google.script.run.send(document.getElementById("msg").value);
document.getElementById("msg").value="";
return false
}
function upload(){
if(confirm("Upload file and get Data Url send the url!")==true){
window.open("https://dopiaza.org/tools/datauri","","width=200");}
}
function load(){
var el=document.getElementsByClassName("msg");
for(let i=0;i<el.length;i++){el[i].style.left='0%';}
}
</script>
</body>
</html>
I am getting the records from the database and I have to display that records in accordion. I am able to displaying the records. Now what I am doing is, I have to display the first accordion open and when clicking on then close the previous accordion if open.
Currently, on page load all the accordion showing closed and when I click on accordion then it's not closing the previous accordion.
js
$('body').on('click', '.ac-title', function(e) {
$('.accordion-wrapper').find('.ac-content').stop().slideUp();
$(this).closest('.accordion-wrapper').find('.ac-content').stop().slideToggle();
});
php
while ($stmt->fetch()) { ?>
<div class="accordion-wrapper">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div>
</div>
<?php } ?>
css
.accordion-wrapper{max-width: 500px;width: 100%;margin: auto;text-align: left;border-bottom: 2px solid #fff;}
.ac-pane { margin-bottom: 15px; color:#000;border-bottom: 1px solid #fff;}
.ac-pane:last-child { margin-bottom: 0;border-bottom:none; }
.ac-content { display: none; }
.ac-title {color: #000;display: block;padding: 12px;background-color: #fc5c49;font-size: 20px;position: relative;}
.ac-title span{color: #fff;}
.ac-title img {float: right;font-size: 20px;width: 30px;}
.ac-title i:before {content: ""; background-image: url('../images/plus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute;right: 30px;top: 15px;}
.active .ac-title i:before {content: ""; background-image: url('../images/minus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute; right: 30px;top: 15px;}
.ac-content {margin-top: -1px;padding: 15px;font-size: 17px;}
#updatedQuestion: To display only the first row you could do like:
$count = 0;
while ($stmt->fetch()) {?>
<div class="accordion-wrapper <?php if(!$count) echo 'active'; ?>">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div></div>
And before closing the php tag at the end: $count++;
Hi bro after wrapping your while in ma div use this jQuery code
PHP
<div class="accordion-wrapper-main">
<?php while ($stmt->fetch()) { ?>
<div class="accordion-wrapper">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div>
</div>
<?php }
?>
</div>
JS
jQuery(".accordion-wrapper:nth-child(1) .other-hold").addClass("active");
I need to call a fuction when .innerodds-view is clicked to display: block #prop-bet-view (this should be defoult display:none;) + change the css of innerodds-view::before.
<div class="prop-bet-click">
CLICK HERE TO VIEW PROP BETS
<div id="prop-bet-view">
<?php if( have_rows('prop-bet-view') ): ?>
<?php while ( have_rows('prop-bet-view') ) : the_row(); ?>
<ul class="prop-bet-block">
<li class="prop-bet-title">
<div class="prop-bet-text"><?php the_sub_field('prop_bet_text'); ?></div>
</li>
<li class="prop-odds">
<div class="prop-odds-title"><?php the_field('prop-odds-title'); ?></div>
<div class="prop-odds-nr"><?php the_sub_field('prop_odds_nr'); ?></div>
</li>
<li class="prop-bet-at-block">
<div class="prop-bet-at"> <?php the_field('prop_bet_at'); ?> </div>
<div class="prop-img"> <img src="<?php the_sub_field('prop_img'); ?>" alt="" style="max-width: 47px;" /> </div>
</li>
</ul>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
DEMO HERE
Set its CSS first:
#prop-bet-view
{
display:none;
}
and then the JS
$('.innerodds-view').on('click',function(){
$("#prop-bet-view").toggle();
});
if you want to add some animation you can do as below:
$("#prop-bet-view").toggle('slow');
The best way to make it work is:
// Hide it programmatically and remove that class.
$("#prop-bet-view").hide().removeClass("hidden");
// Toggle it using the event.
$('.innerodds-view').on('click',function(){
if (!$(this).hasClass("anim"))
$("#prop-bet-view").toggle();
});
// With some fade effect.
$('.innerodds-view').on('click',function(){
if ($(this).hasClass("anim"))
$("#prop-bet-view").fadeToggle();
});
* {font-family: 'Segoe UI';}
/* CSS to make it hidden. */
.hidden {display: none;}
/* Some good UI. */
#prop-bet-view {background: #ccf; text-shadow: 1px 1px 2px #666; border-radius: 5px; padding: 5px; text-align: center; margin: 5px 0;}
#prop-bet-view p {margin: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Trigger. -->
<button class="innerodds-view">Trigger</button> <button class="innerodds-view anim">Trigger Anim</button>
<!-- Add a CSS that doesn't make it display. -->
<div id="prop-bet-view" class="hidden">
<p>Hello!</p>
</div>
I Have an ajax suggestion dropdown and i want to make it display a number of team names but it displays ".$team."
My HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
#mainContainer{
width:660px;
margin:0 auto;
text-align:left;
height:100%;
border-left:3px double #000;
border-right:3px double #000;
}
#formContent{
padding:5px;
}
/* Big box with list of options */
#ajax_listOfOptions{
position:absolute; /* Never change this one */
width:175px; /* Width of box */
height:250px; /* Height of box */
overflow:auto; /* Scrolling features */
border:1px solid #317082; /* Dark green border */
background-color:#FFF; /* White background color */
color: black;
text-align:left;
font-size:0.9em;
z-index:100;
}
#ajax_listOfOptions div{ /* General rule for both .optionDiv and .optionDivSelected */
margin:1px;
padding:1px;
cursor:pointer;
font-size:0.9em;
}
#ajax_listOfOptions .optionDiv{ /* Div for each item in list */
}
#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
background-color:#317082;
color:#FFF;
}
#ajax_listOfOptions_iframe{
background-color:#F00;
position:absolute;
z-index:5;
}
form{
display:inline;
}
</style>
</head>
<body>
<script type="text/javascript" src="javascript/ajax.js"></script>
<script type="text/javascript" src="javascript/ajax-dynamic-list.js"></script>
<center>
<form>
<fieldset>
<h1>Enter your team team name to see starting 11 and Crest</h1>
<table border="0">
<tr>
<td><label for="team">Team: </label></td>
<td><input type="text" id="team" name="team" value="" onkeyup="ajax_showOptions(this,'getTeamsByLetters',event)">
<input type="hidden" id="team_hidden" name="team_ID"><!-- THE ID OF the country will be inserted into this hidden input --></td>
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
This takes from my php which has the list of teams stored here which the html gets from
<?php
$string =
"arsenal,
manchester united,
manchester city,
cheslea,
tottehnam hotspur,
southampton,
everton,
aston villa,
leicester city,
westham united,
newcastle united,
queens park rangers,
sunderland,
swansea,
hull city,
west bromwich albion,
crystal palace,
burnley,
stoke city";
$aTeams = explode(',', $string);
if(isset($_GET['getTeamsByLetters']) && isset($_GET['letters'])){
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
//$res = mysql_query("select ID,teamName from ajax_countries where TeamName like '".$letters."%'") or die(mysql_error());
foreach($aTeams as $key => $team) {
$team = strtolower($team);
if(strpos($team, $letters)!==false)
echo $key."###".$team."|";
}
}
?>
you need to collect the results to some variable then echo it:
if(isset($_GET['getTeamsByLetters']) && isset($_GET['letters'])){
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
//$res = mysql_query("select ID,teamName from ajax_countries where TeamName like '".$letters."%'") or die(mysql_error());
$result = "";
foreach($aTeams as $key => $team) {
$team = strtolower($team);
if(strpos($team, $letters)!==false)
$result .= $key."###".$team."|";
}
print_r($result) // see in your console what value it gives in response.
}
echo $result;
Your php function is not returning anything. Plus, you are echoing every single team, but you are not attaching it to the others. Can you provide the ajax_showOptions function? I can't find it
What happens if you try with:
$res = "";
foreach($aTeams as $team) {
$team = strtolower($team);
if(strpos($team, $letters)!==false)
$res.= $key."###".$team."|";
}
return $res;
i am a newbie to programming and trying to create a slider for ma first website which i did manage to, but its having some timing issue,i.e sometimes my image gets too quickly updated or too slowly and fails to sync in with css3 animation. i used javascript timing function along with css for animation, and php for image and caption upload(i created the slider with upload facility for website owners). I am attaching the codes here, sorry if its messy and not the standard way for creating a slider.
this is my slider:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
input[type="radio"]
{
position:relative;
top:120px;
left:600px;
display:none;
}
input[type="radio"] + label
{
position:relative;
top:120px;
left:600px;
display:inline-block;
width:19px;
height:19px;
background:url(check_radio_sheet.png) -38px no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background:url(check_radio_sheet.png) right top no-repeat;
}
div#slider
{
width:700px;
height:306px;
margin-left:auto;
margin-right:auto;
position:relative;
top:50px;
z-index:-2;
-webkit-animation: sliding 16s infinite;
}
#-webkit-keyframes sliding
{
0%{opacity:0;left:600px;}
10%{opacity:1;left:0px;}
25%{opacity:0;left:-600px;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:600px}
60%{opacity:1;left:0px;}
75%{opacity:0;left:0px;}
85%{opacity:1;left:0px;}
90%{opacity:1;left:0px;}
100%{opacity:0;left:0px;}
}
#i
{
-webkit-animation: slideimage 16s infinite;
}
#-webkit-keyframes slideimage
{
0%{width:700px;height:306px;}
10%{}
25%{}
35%{}
50%{width:700px;height:306px;}
60%{width:700px;height:306px;}
75%{width:100px;height:44px;}
85%{}
100%{width:700px;height:306px;}
}
#-webkit-keyframes com
{
0%{opacity:0;}
10%{opacity:1;}
25%{opacity:0;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:300px}
51%{left:0px;}
60%{opacity:1;left:0px;}
75%{opacity:0;left:-300px}
85%{opacity:1;left:0px;}
100%{opacity:0;}
}
div#sliderframe
{
z-index:-2;
width:800px;
height:406px;
background:#666666;
overflow:hidden;
}
div.slide
{
position:relative;
left:300px;
top:100px;
}
.s
{
color:#FFFFFF;
position:relative;
top:65px;
font-size:18px;
-webkit-animation: com 16s infinite;
}
</style>
<script type="text/javascript">
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
$a[$i]=fgets($file);
}
fclose($file);
}
?>
var a=setInterval(function(){change()},4000);
var n=2;
function change()
{
document.getElementById("i").src="image-slider-"+n+".jpg";
document.getElementById(n).checked="checked";
if(n==1)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[1]\""?>;
}
else if(n==2)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[2]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==3)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[3]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==4)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[4]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==5)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[5]\""?>;
document.getElementById(n).checked="checked";
}
n++;
if(n==6)
{
n=1;
}
}
function changenum(a)
{
n=a;
}
</script>
</head>
<body>
<div id="myslide">
<div class="slide" id="sliderframe">
<div id="slider"><img id="i" src="image-slider-1.jpg"/></div>
<center><span id="sc" class="s"><?php echo $a[1];?></span></center>
</div>
<input checked="checked" onclick="changenum('1')" id="1" type="radio" name="im"/><label for="1"></label>
<input onClick="changenum('2')" id="2" type="radio" name="im"/><label for="2"></label>
<input onClick="changenum('3')" id="3" type="radio" name="im"/><label for="3"></label>
<input onClick="changenum('4')" id="4" type="radio" name="im"/><label for="4"></label>
<input onClick="changenum('5')" id="5" type="radio" name="im"/><label for="5"></label>
</div>
</body>
</html>
this is my image listing page:
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
.align_center
{
position:relative;
left:350px;
top:120px;
float:left;
}
</style>
</head>
<body>
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
$a[$i]=fgets($file);
}
fclose($file);
}?>
<div class="align_center">
<div class="img">
<a href="imageupload.php?image=image-slider-1.jpg">
<img src="image-slider-1.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[1]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-2.jpg">
<img src="image-slider-2.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[2]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-3.jpg">
<img src="image-slider-3.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[3]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-4.jpg">
<img src="image-slider-4.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[4]; ?></div>
</div>
<div class="img">
<a href="imageupload.php?image=image-slider-5.jpg">
<img src="image-slider-5.jpg" alt="slider image" width="110" height="90" />
</a>
<div class="desc"><?php echo $a[5]; ?></div>
</div>
</div>
</body>
</html>
and this one is image upload page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.notice{
display:inline;
margin:2px;
border:solid 2px;
position:absolute;
top:60px;
width:200px;
float:left;
padding:4px;
}
.upload_details
{
position:relative;
left:500px;
}
.upload_details input[type="submit"]
{
width:300px;
}
</style>
</head>
<body>
<?php
$image=$_GET['image'];
?>
<center>
Go to update page<br /><br />
<img src=<?php echo "\"$image\"";?> /><br />
</center>
<br />
<div class="upload_details">
<form method="post" enctype="multipart/form-data" action="imageupload.php?image=<?php echo "$image\"";?>>
Add description : <input type="text" name="description" id="des" /><br /><br />
<label for="slide_image">Upload new image : </label>
<input type="file" id="slide_imageid" name="slide_image" accept="image/jpeg"/>
<br /><br />
<input type="submit" value="Upload"/>
</form>
</div>
<?php
if(isset($_REQUEST['description']))
{
$a=$_REQUEST['description'];
if($a=="")
{
echo '<p style="color:red">Enter description, if you want a new one.</p>';
}
else
{
$file=fopen($image.".txt","w");
fwrite($file,$a);
echo '<p style="color:green">Description uploaded</p>';
}
if ((($_FILES["slide_image"]["type"] == "image/jpeg")|| ($_FILES["slide_image"]["type"] == "image/jpg"))&& ($_FILES["slide_image"]["size"] < 200000))
{
if ($_FILES["slide_image"]["error"] > 0)
{
echo "Error: " . $_FILES["slide_image"]["error"] . "<br>";
}
else
{
echo "Uploaded image: " . $_FILES["slide_image"]["name"] ."of Size: " . ($_FILES["slide_image"]["size"]/1024 ) . " kB<br>";
$_FILES["slide_image"]["name"]=$image;
move_uploaded_file($_FILES["slide_image"]["tmp_name"],$_FILES["slide_image"]["name"] );
}
}
else
{
echo "invalid file";
}
}
?>
</body>
</html>
i am submitting the whole codes here. Please someone help me with this performance issue and guide me towards a better way.
edit: I am using text files to store description at upload page which is retrieved to variables in slider page using php(if that matters).