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>
Related
Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.
you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/
you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs
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();
});
My aim in this simple html file is to load a block of div that affiliates to someone who would like to log in. My div "loginProper" is that div I'm talking about. I've put an onClick function on my other divs which contains the name of the people who can login. My problem is nothing happens when I click those divs.
Here is the code, can you please check what is missing?
<!doctype html>
<html>
<head>
<title>Project Design Exhibit</title>
<script type="text/javascript">
function showLogin(loginType){
if (loginType=="a"){
document.getElementById("loginProper").innerHTML = "Administrator Login";
}else if (loginType="s"){
document.getElementById("loginProper").innerHTML = "Student Login";
}else if (loginType="g"){
document.getElementById("loginProper").innerHTML = "Special Guest Login";
}
}
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; border:1px solid black;">
<div style="width:1000px; height:50px; border:1px solid black;">
<div style="display:inline; border:1px solid black;" onClick="showLogin(a)">Admin</div>
<div style="display:inline; border:1px solid black;" onClick="showLogin(s)">Student</div>
<div style="display:inline; border:1px solid black;" onClick="showLogin(g)">Special Guest</div>
</div>
<div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
</div>
</body>
</html>
Try this:
you're missing quotes when passing 'a', 's', and 'g' to your
function
your javascript function is not using == when comparing
I also made it so your cursor turns into a 'hand' when hovering over your div ;-)
<head>
<title>Project Design Exhibit</title>
<script type="text/javascript">
function showLogin(loginType)
{
alert(loginType);
if (loginType == "a")
{
document.getElementById("loginProper").innerHTML = "Administrator Login";
} else if (loginType == "s")
{
document.getElementById("loginProper").innerHTML = "Student Login";
} else if (loginType == "g")
{
document.getElementById("loginProper").innerHTML = "Special Guest Login";
}
}
</script>
</head>
<body>
<div style="margin:0 auto; width:1000px; border:1px solid black;">
<div style="width:1000px; height:50px; border:1px solid black;">
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('a')">Admin</div>
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('s')">Student</div>
<div style="display:inline; border:1px solid black;cursor: pointer" onclick="showLogin('g')">Special Guest</div>
</div>
<div id="loginProper" style="margin:0 auto; width:500px; height:700px;"></div>
</div>
</body>
</html>
It'd be
onClick="showLogin('a')";
and
loginType=="g"
not
loginType="g"
Working Fiddle
That's because showLogin function is expecting a literal/string variable...
function showLogin(loginType){
if (loginType=="a") //<----THIS IS A STRING
Yet, you are passing in an object that doesn't exist...
onClick="showLogin(a)"
a is an object that can't be resolved. You should change the onclick handler to...
onClick="showLogin('a')"
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).
I have two div tags in my html code as shown below. I want to change their float property depending on page UI culture ( Ui culture is en-US or fa-IR) ... I think I can use java script to do so. but I don't know how can I get the UI Culture through Javascript. I want a code in if condition to determine the Ui culture ... thx in advance for your help...
<div id="zone1" style="float: left;"><img alt="" src="~/IconArrow.png" /> </div>
<div id="zone2" style="float: left;"><img alt="" src="~/IconHome.png" /></div>
<script type="text/javascript">
if(/* ui culture is fa-IR*/)
{
document.getElementById("zone1").style.float = "right";
document.getElementById("zone2").style.float = "right";
}
</script>
Hello try this and let me know. if this solves your problem please don't forget to select correct answer
<script type="text/javascript">
function testfunc(g)
{
//alert("asd"+g);
if(g == "fa-IR")
{
alert("as");
obj = document.getElementById("zone1");
obj2 =document.getElementById("zone2");
obj.setAttribute("style", obj.getAttribute("style") + "; float:right; ");
obj2.setAttribute("style", obj2.getAttribute("style") + "; float:right; ");
}
}
</script>
=================================================================================
<div style="display:block; width:100%; height:100px; border:1px solid #333">
<div id="zone1" style=" float: left; display:block; width:20px; height:20px; background:#93F;"> </div>
<div id="zone2" style=" float: left; display:block; width:20px; height:20px; background:#F66;"> </div>
</div>
<input type="button" name="" onclick = "testfunc('fa-IR')" value="test" />