I'm having a problem with my web server on raspberry pi. I have these two files( among others) : view_action.php and graph.html.
One of the function of the firs file is to to redirect the user to the file graph.html.
The graph.html is a copy of the realtime example of Flot chart. The files that i have to include on the code: jquery.js, jquery.flot.js and excanvas.min.js are on the same folder as the files above. So, the only thing changed on the graph.html is the path to these 3 files.
Here the graph.html:
<!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=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
// Set up the control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Real-time updates</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
<p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
</div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
When the view_action.php redirect to graph.html it only appear the title and the info of the body. No graph. I think my webserver it isnt running javascript codes. What is the problem?
Thanks,
Ricardo
You need to specify a width and height for the placeholder div element (see the readme). In the original example this is done in the example.css. Check if the path to the CSS file is correct in your code (you have href="../examples.css").
Changing
<div id="placeholder" class="demo-placeholder"></div>
to
<div id="placeholder" class="demo-placeholder" style="width: 800px; height: 450px;"></div>
or similar should fix that issue if you don't want to use the CSS file.
Related
I have downloaded a note taking app (PHP/css+jquery) and I wanted to hide the div that contains the note pad. I don't know why, but what I write in the js file doesn't affect the site.
This is the js file. Everything works fine, but when I wrote the second line it didn't hide the div at all.
$(function(){
$('#pad').hide();
var note = $('#note');
var saveTimer,
lineHeight = parseInt(note.css('line-height')),
minHeight = parseInt(note.css('min-height')),
lastHeight = minHeight,
newHeight = 0,
newLines = 0;
var countLinesRegex = new RegExp('/n', 'g');
note.on('input', function(e){
clearTimeout(saveTimer);
saveTimer = setTimeout(ajaxSaveNote, 2000);
newLines = note.val().match(countLinesRegex);
if(!newLines) {
newLines = [];
}
newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);
if(newHeight != lastHeight){
note.height(newHeight);
lastHeight = newHeight;
}
}).trigger('input');
function ajaxSaveNote(){
$.post('index.php', { 'note' : note.val() });
}
});
Here is the PHP:
<?php
$note_name = 'note.txt';
$uniqueNotePerIP = false;
if($uniqueNotePerIP){
// Use the user's IP as the name of the note.
// This is useful when you have many people
// using the app simultaneously.
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
$note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
}
else{
$note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
}
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
// This is an AJAX request
if(isset($_POST['note'])){
// Write the file to disk
file_put_contents($note_name, $_POST['note']);
echo '{"saved":1}';
}
exit;
}
$note_content = '
Write your note here.
It will be saved with AJAX.';
if( file_exists($note_name) ){
$note_content = htmlspecialchars( file_get_contents($note_name) );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Devoirs Communs</title>
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- A custom google handwriting font -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Courgette" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type="text">
<input type="button">
<div id="pad">
<h2>Note</h2>
<textarea id="note"><?php echo $note_content ?></textarea>
</div>
<footer>
</footer>
<!-- JavaScript includes. -->
<script src="assets/js/script.js"></script>
</body>
</html>
Your REGEXP is wrong.
You need to change this line:
var countLinesRegex = new RegExp('\\n', 'g');
But this is not the only problem. Follow it:
1 - You start hidding the #pad element, and I couldn't see in your code where do you show it again:
$('#pad').hide();
2 - You can't get line height this way. It will return undefined if there's no line-height attribute. Same for min-height:
parseInt(note.css('line-height'))
your should use some plugin to get this behavior the way you want.
3 - And suppose item 2 returned the line-height rightly, it would return something like "10px", or worst, "1.2em". And when you tried to do some math with it, you will get an error or maybe strip unit measures from it.
I am again here for same question again.
Now my old problem is solved. I have two files index.html and code.js
1) index.html
<html>
<head>
<title> perl </title>
<link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" />
<script src="http://code.guru99.com/php/lib/codemirror.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script>
<link rel="stylesheet" href="http://code.guru99.com/Sanjay/lib/codemirror.css" type="text/css" media="screen" />
<script src="code.js"></script>
<script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
height: auto;
width : 600px;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}
</style>
</head>
<body>
Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeguru">say 'i am fine';</pre>
</div>
<form class="hidden code-box" method="GET" name="sample">
<div dir="ltr"><textarea class="php" name="codeguru"></textarea></div>
<input type="button" value="Run" />
</br></br>
Output:</br></br>
<textarea id="print-result" disabled="true" cols="77"></textarea></br>
</form></div>
</body>
</html>
and code.js contain following code
$(document).ready(function()
{
$('pre.codeguru').each(function()
{
var pre = this;
var form = $('form[name=sample]').clone();
$(form).removeAttr('name');
$(form).removeClass('hidden');
$($(form).find('textarea')[0]).val($(pre).text());
var id = $(pre).attr('id');
$(form).find('div textarea[name=code]').first().attr('id', id);
$(pre).replaceWith(form);
});
var n = 0;
$('input[type=button]').each(function () {
$(this).click(function (x) {
return function () {
execute(x);
};
}(n++))
}
);
window.editors = [];
$('textarea[name=codeguru]').each(function()
{
window.editor = CodeMirror.fromTextArea(this,
{
lineNumbers: true,
matchBrackets: true,
mode: "application/x-httpd-perl",
tabMode: "shift"
});
editors.push(editor);
});
});
function execute(idx) {
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value+=p5str(List__[i])
}
return true;
};
p5pkg["main"]["v_^O"] = "browser";
p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";
var source = editors[idx].getValue();
alert(source);
var pos = 0;
var ast;
var match;
document.getElementById('print-result').value = "";
try {
var start = new Date().getTime();
var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
var end = new Date().getTime();
var time = end - start;
// run
start = new Date().getTime();
eval(js_source);
end = new Date().getTime();
time = end - start;
}
catch(err) {
//document.getElementById('log-result').value += "Error:\n";
}
}
When I run this code its works fine give me output also. But my problem is that the output prints in one textarea only. I want to print the output in consecutive textarea.
This code in code.js prints the output.
p5pkg.CORE.print = function(List__) {
var i;
for (i = 0; i < List__.length; i++) {
document.getElementById('print-result').value += p5str(List__[i])
}
}
So what I have to do for print my output in consecutive textarea.Please please help me.
using same id for different elements in a page can create problems..
make the text area like this..
<textarea id="print-result" class='print-result' disabled="true" cols="77></textarea>
Modified code in code.js that prints the output is
p5pkg.CORE.print = function(List__) {
var i,concat='';
for (i = 0; i < List__.length; i++) {
concat=$(".print-result").eq(idx).val();
$(".print-result").eq(idx).val(concat+p5str(List__[i]));
}
return true;
}
Add name attribute to your textarea like
<textarea id="print-result" disabled="true" name="code" cols="77"></textarea>
in place of
<textarea id="print-result" disabled="true" cols="77"></textarea>
Updated
In your code I can't see a textarea having name="code", and you are using it.
Is it codeguru?
I'm having a puzzling little problem with the Google Maps API which has had me tearing my hair out. The following code
<?php
$anim='images/animation.gif';
session_start();
if ($_SESSION['anim']==1) {
$anim='images/transparent.png';
}
//Select database
require_once('../Connections/MySQL_extranet.php');
mysql_select_db($database_MySQL_extranet, $MySQL_extranet);
// Get the hid which is passed from previous page
if (isset($_REQUEST['hid'])) {
$hid=$_REQUEST['hid'];
}
//MySQL query to select location details
$query_location = "SELECT hotel, lat, lng, zoomair, sp_lat, sp_lng FROM ex_hotel WHERE hid = '$hid'";
$location = mysql_query($query_location, $MySQL_extranet) or die(mysql_error());
$row_location = mysql_fetch_assoc($location);
//Set the session variable to pass the hotel name
$_SESSION['hotel'] = $row_location['hotel'];
?>
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!--> <html> <!--<![endif]-->
<!--Dump the above when IE7 users go below 2% -->
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Little Hotels - Directions to <?php echo $row_location['hotel'];?></title>
<meta name="description" content="Little Hotels provides accurate directions to hotels from any starting point you choose.">
<meta name="keywords" content="hotel directions, google maps, Little Hotels, driving directions, directions to <?php echo $row_location['hotel'];?>">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
<?php
$full_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$canonical_url = strtok($full_url,'?');
echo '<link rel="canonical" href="' . $canonical_url . '" >';
?>
<link rel="stylesheet" href="css/littlehotels.css" type="text/css">
<style type="text/css">
#content{padding: 70px 5px 0; width: 100%;}
#mapcontainer{float:left; display:block;}
#mapCanvas {width: 600px; height: 400px;}
#markerStatus {height: 0px;}
#info {height: 0px;}
#infoPanel {margin-left: 620px; margin-right:10px; display:block;}
#infoPanel div {margin-bottom: 5px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var lat = <?php echo $row_location['lat'];?>;
var lng = <?php echo $row_location['lng'];?>;
var latlng = new google.maps.LatLng(lat, lng);
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(startpoint) {
document.getElementById('info').innerHTML = [
startpoint.lat(),
startpoint.lng()
].join(', ');
}
function nextPage() {
saddress = document.getElementById('info').innerHTML;
location='directions_detail.php?saddr='+saddress+'&daddr='+latlng;
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var zoom = <?php echo $row_location['zoomair'];?>;
var sp_lat = <?php echo $row_location['sp_lat'];?>;
var sp_lng = <?php echo $row_location['sp_lng'];?>;
var startpoint = new google.maps.LatLng(sp_lat, sp_lng);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var destimage = new google.maps.MarkerImage('/images/hotel_icon.gif',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
var destshadow = new google.maps.MarkerImage('/images/hotelshadow.png',
new google.maps.Size(51, 37),
new google.maps.Point(0,0),
new google.maps.Point(16, 35));
var marker = new google.maps.Marker({
icon: destimage,
shadow: destshadow,
map: map,
position: latlng
});
var startimage = new google.maps.MarkerImage(
'/images/start_icon.png',
new google.maps.Size(59, 37),
new google.maps.Point(0,0),
new google.maps.Point(29, 35));
var marker = new google.maps.Marker({
position: startpoint,
title: 'If necessary, drag this to a different start point',
map: map,
draggable: true,
icon: startimage
});
// Update current position info.
updateMarkerPosition(startpoint);
geocodePosition(startpoint);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="wrapper">
<img src="images/transparent.png" width="266" height="122" border="0" alt="Little Hotels">
<img src="<?php echo $anim ?>" alt="Little Hotels logo" width="93" height="117" align="top">
<img src="images/header/directions.png" alt="Little Hotels" width="364" height="88">
<div id="container">
<?php include("includes/topnavbar.html"); ?>
<div id="breadcrumb">
<div class="bc-link" style="width:200px">Car Hire at competitive rates</div>
<div class="bc-link">Flights</div>
<div class="bc-link">Ferries</div>
<div class="bc-link">Airport Parking</div>
<div class="bc-link">Airport Hotels</div>
<div class="bc-link" style="width:200px">Travel Insurance</div>
<div class="bc-link" style="width:200px" align="right">News and Special Offers</div>
</div>
<div id="content">
<div id="mapcontainer">
<table border=1 bordercolor="#666666">
<tr>
<td>
<div id="mapCanvas"></div>
</td>
</tr>
</table>
</div>
<div id="infoPanel">
<h2>Driving Directions to <?php echo $row_location['hotel'];?> </h2>
<!-- Following two lines must be kept in, even though not visible. Also corresponding lines in Style -->
<div id="markerStatus" style="visibility:hidden;"><i>Click and drag the marker.</i></div>
<div id="info" style="visibility:hidden;"></div>
<b>Start Point:</b>
<div id="address"></div>
<br><b>Destination:</b><br>
<div><?php echo $row_location['hotel'];?></div>
<br>
To select a different starting point, just drag the start icon to the required location (zoom in if necessary for better precision).<br>
<br>
<button onclick="nextPage()">Get Directions</button>
<br>
<span class="verdana"><br>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
$_SESSION['anim']=1;
?>
creates a satisfactory page (http://new.littlehotels.co.uk/directions_hotel.php?hid=colorado) but I want to add a couple of refinements. These changes need me to create a javascript variable from a piece of MySQL data.
Therefore I want to create a line something like this:
var hotelname = <?php echo $row_location['hotel'];?>;
That shouldn't be too hard as I already have several similar lines in the working code. However, this new line breaks the page every time, no matter what variations I try. When I add that line in, the page displays but without the map and without the name of the Start Point on the righthand side.
Is it me?????????????
I am guessing you are outputting a string from $row_location['hotel'] in that case you need to wrap in quotes to tell javascript its not a variable but a string value.
thus:
var hotelname = "<?php echo $row_location['hotel'];?>";
To check if the above hypothesis is true check your console and you will see the following error:
ReferenceError: <value returned by $raw_location['hotel']> is not defined
Like this one can pass variables to JS and it prevents the PHP interpreter from complaining about any missing indexes, just in case (it depends how error reporting is set in php.ini), for example:
var hotelname = "<?php echo(isset($row_location['hotel']) ? $row_location['hotel'] :''); ?>";
console.info(hotelname);
The surrounding quotes are the difference, like this $row_location['hotel'] gets casted to string in JavaScript.
... what does this code return, you even get any result?
while ($row_location = mysql_fetch_assoc($location)) {
echo '<pre>'.print_r($row_location,true).'</pre>';
}
I am making a slideshow on my mvc php site using script.aculo.us to animate it. The model looks up the images from the database, fills it into the view and then the javascript uses script.aculo.us to animate it. However, when it gets to the second slide, it stops working and I can find this error message in Chrome's console:
Uncaught TypeError: Cannot call method 'getStyle' of undefined
I cannot work out why it isn't working. Here is the code. Any ideas?
PHP:
<div id="main">
<div id="mainContainer">
<div id="showcaseContent">
<?php $i = 0; foreach($showcase as $ShowcaseItems): ?>
<div id="showcaseSlide<?php echo $i; ?>" <?php if($i != 0){ echo 'style="display: none;"'; }else{ echo 'style="display: block;"'; } ?> >
<img src="<?php echo $ShowcaseItems['showcase_image']; ?>" width="720px" height="275px" />
</div>
<?php ++$i; endforeach ?>
</div>
</div>
Javascript
(I have to use the top 4 loop because the client can put from 2-10 images onto the showcase slideshow):
var slides = new Array();
for(i=0; i<=10; i++){
slides[i] = "showcaseSlide"+i;
if(document.getElementById(slides[i]) == null) break;
};
var wait = 5000;
function startShowcase(){
setInterval(showcase(), wait);
};
function showcase(){
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
};
Edit:
The error appears on line 544 of the effects.js script that comes with script.aculo.us, which (as far as I can work out) is the line which starts 'from:' in the following code:
Effect.Appear = function(element) {
element = $(element);
var options = Object.extend({
from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
Uncaught TypeError: Cannot call method 'getStyle' of undefined
to: 1.0,
// force Safari to render floated elements properly
afterFinishInternal: function(effect) {
effect.element.forceRerendering();
},
beforeSetup: function(effect) {
effect.element.setOpacity(effect.options.from).show();
}}, arguments[1] || { });
return new Effect.Opacity(element,options);
};
And here are the relevant sections of the rendered page:
<!DOCTYPE html>
<head>
<!--Title-->
<title>Urban Feather | Home</title>
<!--CSS Styles-->
<link rel="stylesheet" href='http://www.example.com/2012/styles/layout.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/forms.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/fonts.css' type="text/css" media="screen, projection" />
<!--Javascript Scripts-->
<script src="http://www.example.com/2012/scripts/sonOfSuckerfish.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/selectreplace.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/showcase.js" type="text/javascript"></script>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
</head>
<div id="main">
<div id="mainContainer">
<div id="showcaseContent">
<div id="showcaseSlide0" style="display: block;" >
<img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
</div>
<div id="showcaseSlide1" style="display: block;" >
<img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
</div>
<div id="showcaseSlide2" style="display: block;" >
<img src="http://www.example.com/2012/images/client3.jpg" width="720px" height="275px" />
</div>
</div>
Thanks to stormdrain and my other post (break loop based on an element not existing), I have resolved the problem. The loop was not working as it was called before the divs were rendered and the code needed a little restructuring. Here is my working code:
var count = 0; //A loop for the counter
var wait = 4000; //The amount of time (ms) inbetween transitions
var slides = []; //The empty array of slide ids
function startShowcase(){
for(var i=0; i<10; i++){
slides[i] = "showcaseSlide"+i;;
if(!document.getElementById(slides[i])) break;
};
setInterval(showcase, wait);
};
function showcase(){
if(count==slides.length-2){
count=0;
}
if(document.getElementById(slides[count]).style.display==='none'){
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
}else{
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
}
count++;
};
http://prototypejs.org/api/element/getStyle
Safari returns null for any non-inline property if the element is
hidden (has display set to 'none').
<?php if($i != 0){ echo 'style="display: none;"'; }else...
function showcase(){
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
//slide[0] is the only slide without display:none,
//so the first slide (slide[0]) works (Fades)!
//Once var i increments, everything is display:none and the
//getStyle used in prototypes Effect.Appear method doesn't work
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
//slides[1] has display:none so getStyle in Appear breaks
};
that's my guess anyway...
Update:
Think it's an issue with the counter:
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
i will always be 0 when showcase() is called by the interval, so on the second interval, it is trying to make slides[0] Effect.Fade which was already faded on the first.
This works:
var slides = new Array();
var count = 0;
for(i=0; i<=10; i++){
slides[i] = "showcaseSlide"+i;
if(document.getElementById(slides[i]) == null) break;
};
var wait = 1000;//shortened because I'm impatient
function startShowcase(){
setInterval(showcase, wait);
};
function showcase(){
if(count==slides.length-1){
count=0;
}
if($(slides[count]).style.display==='none'){
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
}else{
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
}
count++;
};
Technically, this is more technical; also proper:
var slides = [], count = 0, wait = 4000;
for(var i in $('showcaseContent').select('div')){slides[i] = "showcaseSlide"+i;};
function startShowcase(){setInterval(showcase, wait);};
function showcase(){
(count==slides.length)?count=0:count=count;
($(slides[count]).style.display==='none')?
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0}):
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
count++;
};
startShowcase();
YEAH
I am experiencing this problem for few hours now and really not sure how to solve this. However its work fine in IE but it is not working in mozilla.
Here is my code:
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script>
var myEditor = new YAHOO.widget.Editor('msgpost', {
height: '100px',
width: '522px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('save', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
YAHOO.util.Event.on('edit', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
</script>
<form id="form2" name="form2" method="post" action="processgreeting.php">
<div class="span-22 gtype" >
<div class="span-5"><label>Message:</label></div>
<div class="span-17 last"><textarea name="msgpost" id="msgpost" cols="50" rows="40"> </textarea> <br>
</div>
<input type="submit" name="save" value="Post Greeting" id="postgreeting"/>
</form>
processgreeting.php
if(isset($_POST['save']))
{
$body = trim($_POST['msgpost']);
$valid = 1;
$publish_date = strtotime($publish);
if ($publish >= $today)
{
$valid = 0;
$insert_greeting = "INSERT INTO greeting (type,decs,name,message,date,user,publish) VALUES ('$type','$desc','$name','$body','$today',$user,'$publish')";
$register_greeting = mysql_query($insert_greeting)or die(mysql_error());
$lastnum = mysql_insert_id();
$_SESSION["greetingno"] = $lastnum;
if($valid == 0)
{
echo '<strong>Greeting Type: </strong>'.$type.'<br><strong>Description: </strong>'.$desc.'<br><strong>Name: </strong>'.$name.'<br><strong>Message: </strong>'.$body.'<strong><br>Publish Date: </strong>'.$publish;
}
//echo $valid;
}
else{ //echo "<span style='color:#FF0000'>Publish date is invalid</span>" ;
echo $valid;
} //}
}
Please can anyone help me what iam doing wrong..
Thanks in advance.
i've just tried on my mac with firefox and everything seems to work. What's exactly your problem ?