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).
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 want to make a gallery for my website. I developed the code to add an image, but I want to add an edit button to images, like Facebook.
I want it so when you pass the mouse on the image, you can the see an edit button.
I've searched a lot but without anything helpful.
Here's my code:
<?php
if(isset($_POST['upload_img'])){
$file_name = $_FILES['images']['name'];
$file_type = $_FILES['images']['type'];
$file_size = $_FILES['images']['size'];
$file_tmp = $_FILES['images']['tmp_name'];
if($file_name){
move_uploaded_file($file_tmp,"img/$file_name");
}
}
?>
<html>
<head>
<title>Test upload img</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload Image</label><br>
<input type="file" name="images"><br><br>
<input type="submit" value="upload img" name="upload_img">
</form>
<?php
$folder="img/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file=readdir($handle))!=false){
if($file==='.' || $file==='..')
continue;
echo'<img src="img/'.$file.'"width="150" height="150">
<form>
<input type="file" value="Edit">
</form>
';
}
closedir($handle);
}
}
?>
</body>
</html>
hope this help.
HTML:
<div class="image_container">
<input type="file" class="edit_btn" value="Edit">
<img src="img.jpg">
</div>
CSS:
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }
I have rows of div's floating near one anther and the box have a max-width so there will be only 4 div's max in each row
When I re-size the window the rows shrink so in the end there is one div in each row (that the way I want it)
My question is how do I add another below each row regardless the size of the window or how many div's there are in row when I do on click?
I managed to to do so when the row's are fixed size but not when they are dynamic
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url( "design.css", __FILE__ ) ;?>""" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var oldRow = 0;
var oldID = 0;
var rowCount = 2;
function openRow(row,id) {
var elm = document.getElementById("rowInfo" + row);
var txt = document.getElementById("text" + row);
var logo = document.getElementById("logo" + id);
if (oldID == id && elm.style.display == "block")
{
elm.style.display = "none";
logo.style.backgroundColor = "green";
}
else {
elm.style.display = "block";
txt.innerHTML = "ID = " + id;
oldID = id;
if (oldRow!=0 && oldRow != row) {
document.getElementById("rowInfo" + oldRow).style.display = "none";
}
if (oldID != 0) {
document.getElementById("logo" + oldID).style.backgroundColor = 'green';
}
oldRow = row;
}
}
</script>
</head>
<body>
<div id="Main">
<div class="row">
<div class="rowBox">
<div class="rowBoxLogo" id="logo1">
<img src="<?php echo plugins_url( "logos/logo.png",__FILE__ ) ;?>"onclick="openRow(1,1)" />
</div>
</div>
<div class="rowBox" >
<div class="rowBoxLogo" id="logo2">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,2)" />
</div>
</div>
<div class="rowBox" >
<div class="rowBoxLogo" id="logo3">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,3)" />
</div>
</div>
<div class="rowBox" >
<div class="rowBoxLogo" id="logo4">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,4)" />
</div>
</div>
</div>
<div class="rowInfo" id="rowInfo1">
<p class="par" id="text1"></p>
</div>
<div class="row">
<div class="rowBox">
<div class="rowBoxLogo" id="logo5">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,5)" />
</div>
</div>
<div class="rowBox">
<div class="rowBoxLogo" id="logo6">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,6)" />
</div>
</div>
<div class="rowBox">
<div class="rowBoxLogo" id="logo7">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,7)" />
</div>
</div>
<div class="rowBox">
<div class="rowBoxLogo" id="logo8">
<img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,8)" />
</div>
</div>
</div>
<div class="rowInfo" id="rowInfo2">
<p class ="par" id="text2"></p>
</div>
</div>
</body>
</html>
and my css
html {}
#Main {
max-width:820px;
margin:0 auto;
}
.row {
width:100%;
height:80px;
}
.rowBox {
width:200px;
height:100%;
padding-left:5px;
padding-bottom:5px;
float: right;
}
.rowBoxLogo {
width:100%;
height:100%;
float: right;
background-color:green;
vertical-align:middle;
text-align:center
}
.rowInfo {
width:100%;
height:90px;
background-color:green;
display:none;
padding:0 0 0 0;
}
.par {
margin-top:0;
padding:0;
}
For this problem I would change styles a little bit. Namely, change block layout from float: right to display: inline-block. Then it would be easy to achieve desired effect with this simple javascript:
var $info = $('<div class="rowInfo"><p class="par"></p></div>');
$('.rowBoxLogo').click(function() {
var $block = $(this).parent('.rowBox');
if ($block.next().hasClass('.rowInfo')) {
$info.toggle();
}
else {
$info.insertAfter($block).css('display', 'block');
$info.find('.par').text("ID = " + this.id);
}
});
In this case you don't need to put onclick attributes on every block anymore.
Demo: http://plnkr.co/edit/mbV9toL5CsZ2BwlVEFYH?p=preview
Also you might be interested to check this related answer I provided on somewhat similar question How to target div at the end of the row?.
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();
});
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.