|
JavaScript - Frame Auto Refresh - Where To Start?
Hey helpful people.
I'm looking for a better solution to refreshing a page of mine, which currently single page (no frames) using meta refresh. To convert it something where it (using frames) would either: a. keep trying to refresh untill a var is recieved from the content, or b. present the browser with a button to refresh and a message that loading failed. But honestly i am a noob at javascript, to an extend i dont have much idea where to start on such a project. but learned this is not possible with regular html that is widely supported anyways. i suspect the:.. window.xx.location='url' ..is useful in this regard, but other than that i am blank on where to start. Any help is appresiated. Thanks in advance Jilli Similar TutorialsHey guys, I am new at JavaScript, but I have been able to piece together some code for a stopwatch. I have everything the way I want it in regards to the function and look of the stopwatch, but I want to be able to set timers so that the ss() function in the code below will go and stop automatically at intervals I can set. I just can't seem to get there with this one and any help is greatly appreciated. Thank you for your time. Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
var t=[0, 0, 0, 0, 0, 0, 0, 1];
document.onkeyup=function(event) {
if((event.which && event.which === 32) || (event.keyCode && event.keyCode === 32))
{
ss()
}
}
function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}
function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}
function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}
function load()
{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById("disp");
disp();
}
</script>
</head>
<body onload='load();'>
<div></div>
<input type="text" style="border: none" id="disp" readonly />
<style type="text/css">
#disp {
font-size: 180px;
text-align: center;
font-family: Verdana;
}
</style>
</body>
<form>
</form>
</html>
Been trying to get this auto refreshed instead of clicking to refresh <center><iframe src="http://orange.citrus3.com:8338/played.html" width=800 height=400 frameborder=0 scrolling=no id="myiframe"></iframe></center><br> <center><b><BIG><body link="#FF0000"><a href="javascript:myiframe.document.location.reload()">Refresh Current Song</a></BIG></b></center> I'm replacing the shoutbox on my site. Everything works and looks great. Now I'd like to make it auto refresh. Here's the update function. PHP Code: function updateShoutbox(){ //send the post to shoutbox.php $.ajax({ type: "POST", url: "shoutbox.php", data: "action=update", complete: function(data){ loading.remove(); messageList.html(data.responseText); } }); } And here is what I've tried to add to make it auti refresh, but it doesn't work. PHP Code: setTimeout('updateShoutbox()', 4000); I know very little about js, so any help is appreciated. <HEAD><TITLE>main</TITLE> <meta http-equiv="refresh" content="5;url=http://localhost/php_basic/short_pro/php/main.php"> <!--<script language="JavaScript"> var i=0; function validat() { setTimeout("moretext()",5000); alert("santosh"); } function moretext() { if(i==0) { alert(window.location); window.location.reload(); i++; } else { } } </script>--> </head> <BODY onload="validat();"> i hav written dis code to auto refresh page only once but it is refreshing after every 5 seconds. Earlier i hav wriiten meta tag but it is refreshing page after every 5 seconds & after that i hav wriiten script to auto reffresh page only once but they both r doin the same work,so can u plz help me in solvin my problem I have some sample ajax code i have been toying around with. I have it updating & working properly, but you have to click a button first. How can I set it so that it automatically reads the contents of the text file on page load, and updates every 1000ms? I was trying Code: onload=setinterval(JavaScript:xmlhttpPost("status.php"),1000)
but had not luck Any suggestions? Code below. PHP Code: <? $myFile = "testFile.txt"; $fh = fopen($myFile, 'r'); $theData = fread($fh, 3); fclose($fh); echo $theData; ?> Code: <html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
<body>
<form name="f1">
<p>word: <input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("status.php")'></p>
<div id="result"></div>
</form>
</body>
</html>
Hi i have a form inside a frame, for example: <html> PHP Code: <body> <div><h1>Header</h1><hr /></div> <iframe height="75%" width="75%" src="iframe.php" frameborder="0"> Iframe should be enabled. </iframe> <div><hr /><h1>Footer</h1></div> </body></html> in iframe.php PHP Code: <form action="http://some-url" id="my_form" name="my_form" method="POST"> <!-- hidden fields goes here ---> <input id="<?php echo $key; ?>" name="<?php echo $key; ?>" value="<?php echo $value; ?>" type="hidden"/> <!-- //hidden fields goes here ---> </form> <script type="text/javascript">document.getElementById("my_form").submit();</script> I would like to know how to submit the iframe.php form so that it goes out of frame. I think we need to tweak this code: PHP Code: <script type="text/javascript">document.getElementById("my_form").submit();</script> Thanks in advance. I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name. Is there a way I can disable the screen refresh in my ajax code while they are composing their message? I currently have this on my companies website and it's having a bit of trouble sometimes where it will only work after a refresh. Is it possible to do a refresh of this div and script as soon as the site loads, instead of using the auto refresh. I tried using auto refresh and it works but whatever time interval I put for the auto refresh is the time that the script pops up, so it kind of just makes it worst. Code: <script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "lubellrosen",
numTweets: 4,
loaderText: "Loading Events...",
slideIn: true,
slideDuration: 750,
showHeading: false,
headingText: "Latest Tweets",
showProfileLink: false,
showTimestamp: false
});
});
</script>
I have a web page that loads and Auto scrolls to the end. I need to either auto scroll up, or when it reaches the bottom auto refreshes back to the top. I have had to define a length longer than the document or I get scroll bars and the Iframe won't scroll. Here is the code. [Code] <html> <head> <script type="text/javascript" language="JavaScript" ></script> <title>How to Scroll the Page With JavaScript</title> <meta name="description" content="How to scroll the page automatically using JavaScript." /> <meta name="keywords" content="javascript, page, scroll" /> <script type="text/javascript"> function pageScroll() { window.scrollBy(0,25); scrolldelay = setTimeout('pageScroll()',5000); // scrolls every 1000 milliseconds } </script> </head> <iframe src="file:///D:/PrivateDocs/WorkflowPage/Stinkyxml.htm" name="frame1" scrolling="auto" frameborder="no" style="float:left" height="4500" width="100%"> <body onLoad="pageScroll()"></body> </iframe> <body> <body onLoad="pageScroll()"></body> </body> </html> [icode] Guy help me for the solution... how to refresh the markers only every x... below are my full scripts.... Code: <?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
<!-- Google Map JS -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>
</head>
<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
</div>
<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
</div><!-- Map Ends display -->
<script type="text/javascript">
/**function show_data()
{
$('#map').load('index.php');
}
setInterval('show_data()', 60000);
**/
var locations = [
<?php
$query="SELECT * from host_entry";
$result=mysql_query($query)or die(mysql_error());
{
if ($num=mysql_numrows($result))
{
$i=0;
while ($i < $num)
{
$id=mysql_result($result,$i,"id");
//$host_type=mysql_result($result,$i,"host_type");
$host_name=mysql_result($result,$i,"host_name");
$host_server=mysql_result($result,$i,"host_server");
$host_status=mysql_result($result,$i,"host_status");
$host_lapt=mysql_result($result,$i,"host_lapt");
$host_long=mysql_result($result,$i,"host_long");
$host_circuit=mysql_result($result,$i,"host_circuit");
$host_hotline=mysql_result($result,$i,"host_hotline");
if($host_status==0)
echo "['<div class=container style=width:400px;><div class=page-header><h4>$host_name</h4></div>', $host_lapt, $host_long],";
$i++;
}
}else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];
// Setup the different icons and shadows
var iconURLPrefix = 'host_entry/img/';
var icons = [
iconURLPrefix + 'p_red_alert.png'
]
var icons_length = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: -5,
center: new google.maps.LatLng(3.1215681, 101.71180140000001),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var marker;
var markers = new Array();
var iconCounter = 0;
var infowindow = new google.maps.InfoWindow({
maxWidth: 400,
maxHeight: 350,
});
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
map: map,
animation: google.maps.Animation.BOUNCE,
icon : icons[iconCounter],
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
locations[i][0]
);
infowindow.open(map, marker);
setTimeout(function(){infowindow.close();}, '5000');
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
do i need to apply setInterval on the marker? how to apply it on the marker so it refresh every X second... please help for the solution.... Hello, I am fairly new to Javascript, but so far I have managed to have the page auto scroll when you browse. I was also able to get a button that toggles the start/stop of the scrolling. What I need to happen is when the scrolling reaches the bottom of the screen, I need it to refresh. Is this possible? Thank you in advance!!! A noob needs some help. I'm using a combination of Yahoo Pipes and rssdisplayer.js to display some snippets from several RSS feeds on a new site I'm building. The trouble I'm having is that (i) the feeds don't update when I refresh the page, I think because a cached version of the page is being loaded, and (ii) I'd like to have the div containing the feeds auto-refresh at a given time interval. I've got a Twitter javascript working that does both these things, but can't work out how to get the rssdisplayer.js working this way. The rssdisplayer code is: Code: google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}
rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}
rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")
If you go to a Youtube video by Justin Bieber or Rebecca Black, comments are constantly being posted and it seems like the autorefresh for the comments kicks in every half second. I don't plan on having millions of users viewing my page, but still, wouldn't having every user make a [mysql] request to the server every half second really take a toll on the server (especially since I don't plan to ever have the resources that Youtube has)? Facebook also seems to have instantaneous auto-refreshes, be it in comment boxes or their chat interface. So what would be the best method to implement a near-instantaneous autorefresh system with minimal resource usage? I've a web page when a user logs in, it will have a link that shows the "username" and a link for "logout". After the user logs out, the "username" and the "logout" links will change to "login" and "register" links, respectively. The page uses javascript to check a user cookie, if the user cookie exists, it will show the "username" link and the link for "logout". If no user cookie exists, "login" and "register" links will replace the "username" and "logout" links. Here's the problem: When a user who has log in, clicks the "logout" link, a perl script will delete the user cookie, and redirects back to the same page. The page does not show "login" and "register" links AUTOMATICALLY. Both links will appear ONLY after the user MANUALLY Refreshes the page. It appears that I need a system to refresh the page automacally ONLY one time. How can this be done? I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... Most of the Javascript I see has some sort of time limit on page reload and is not really what I am trying to accomplish: Code: <meta http-equiv="Refresh" content="10; URL=http://coffeeandtealtd.com/buynow.html" /> I am trying to make our buy page reload after clicking the Paypal "continue shopping" button in Paypal Website Standards. The pop up Paypal shopping cart window closes after clicking the button but our buy page doesn't reload. It doesn't reload in Safari although it seems to be fine in FF and IE. I am new to javascript coding and am not quite sure how to make the page reload in this specific instance only. Any sug's?? I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others : PHP Code: <?php echo $variable ?> i want to put that variable output, in another files page title, lets say file2.php or file3.html, in the front of the another files page titles, and auto refresh every x seconds, maybe like this : Quote: (1) - another text in the page title after x seconds, get a private message Quote: (2) - another text in the page title after another x seconds, get another private message Quote: (3) - another text in the page title or its ok if just like this, only the variable, without the another text in the page title Quote: (1) please share your knowledge to make it, maybe using javascript, jquery or others Hi. I have a question about java script code. I'm creating a website with frames. Within the main page frame, there are tables in the main content page. When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want) So I wanted to know what code I put in my files and where to put it? Also, what pages does it need to be in? the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized? I need the main page to be resized to fit the browser as well as the pages in the frames to fit. Can you help? Thanks I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#eye_wrapper{/*This is a master div for easy placement of the others*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>
<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
dBort = function(){
document.getElementById("d").style.display="none";
eyes=["a","b","c","d"];
}
setTimeout(dBort,1500);//So last image is shown 1.5 sec
return;//Aborts - dBort -. Sequence can start over
if(document.getElementById("d").style.display=="none"){
startAnim;//Strts sequence if last image invisible
}
}
}
</script>
</head>
<body>
<!--Images in own div invisible at start-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>
guys help pls.. i need to pass the data in the textfields from the left frame to the textfields in the right frame of my frameset. (ex: dslnum of frame1 will be pass to txtDSLTN of frame2) frame1: http://www.mediafire.com/?hge1ws29mdhmu7e frame2: http://www.mediafire.com/?k83cb64wbpskw97 thanks in advance! |
|||||||