|
JavaScript - Auto Refresh - Stop Page Scrolling
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... Similar Tutorialswhen i click on submit button, all the data in form will be inserted into my db. but when i click on refresh the form will be submitted again .. how can i prevent this?
<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'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? 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 Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. I am building a webpage to make my life easier at work. In the page i am simply loading 3 different web pages that i use 100% of the time between each other, and since they are little tools and i can fit them all nicely in one. However, i'm having a problem doing it with the most important one. I've included all 3 pages via iframes, but the third page doesn't work and becomes the topmost every time. This is because this web page uses the Javascript code snipset below in their page: ---------------------------------------- if (top.location != self.location) { top.location = self.location.href; } ---------------------------------------- Please advise me if you have any solution for that. Many thanks, Arch, Hello, I'm Chris, welcome everyone. I'm in a need of help. I'm writing application that displays messages from users. This messages are kept in external XML file and every time user post a new message this XML document is appended. What I want to do is to display all messages at the bottom of screen. Messages have to slide horizontally in one line. To do that I used this code: Code: horizontalScroll.js:
var scrllTmr;
window.onload = function(){
document.getElementById('scroll').style.overflow = 'hidden';
document.getElementById('scrollme').style.float = 'left';
document.getElementById('scrollme').style.position = 'relative';
cw = parseInt(document.getElementById('scroll').offsetWidth/2);
w = parseInt(document.getElementById('scrollme').offsetWidth/2);
lft = cw + w;
document.getElementById('scrollme').style.left = lft + "px";
scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
if(lft == w * -1)
lft = cw + w;
document.getElementById('scrollme').style.left = lft + "px";
if(scrllTmr)
clearTimeout(scrllTmr);
scrllTmr = setTimeout('scrollStep(cw,w,' + (lft - 1) + ')',10);
}
index.html:
<div id="scroll"><div id="scrollme">
<h1 style="white-space: nowrap;">Lets scroll this right here 1 | Lets scroll this right here 2 | Lets scroll this right here 3 | Lets scroll this right here 4 | Lets scroll this right here 5 | Lets scroll this right here 6 | Lets scroll this right here 7 | Lets scroll this right here 8 | Lets scroll this right here 9 | Lets scroll this right here 10 | Lets scroll this right here 11 | Lets scroll this right here 12 | Lets scroll this right here 13 | Lets scroll this right here 14 | Lets scroll this right here 15 | Lets scroll this right here 16 | Lets scroll this right here 17 | Lets scroll this right here 18 | Lets scroll this right here 19 | Lets scroll this right here 20
</h1></div></div>
The problem with that code is that at 1/3 length of text it starts from beginning and this is wrong. The text have to scroll to the very end and then start to scroll from beginning again. Another thing, that I'm unable to deal with is refreshing/reloading the content from XML file. What I need to do is to check if XML was changed/appended and if it was then I have to add this added message to text that scrolls horizontally and view it at the end of horizontal text. I'm pretty sure I have to use Ajax here. Also, if text from XML file will be added to horizontal text page cannot refresh and start scrolling from beginning, but instead of that if have to append horizontal text and continue to scroll showing appended message at the end. Any advices, please? Thanks, Chris See slideshow at URL: http://backstageweb.net/1012Locust/ I want these slides to advance manually (on click only), not advance automatically. There are only two sample slides here. Click the play button to advance to Slide 2 (end of show). On Slide 2, it does not advance automatically. However, click the play button again (back to Slide 1, beginning of show). At this point, it automatically advances to Slide 2. Can someone please tell me how to get the slides to advance OnClick only? Thanks, John Hey guys, I'm working on a user website and have got the upload form working and the cropping working, also got the image in my profile, all works great. A few things I need tho and wondering if you could help. I need to stop the form from resubmitting the image when I refresh the upload.php page below upload.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $session_id ='1'; $username = $_SESSION['user']; $upload = $_POST['upload']; $new_name = "small".$username.".jpg"; $path = "uploads/"; ?> <html> <head> <title>My Network</title> </head> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> function getSizes(im,obj) { var x_axis = obj.x1; var x2_axis = obj.x2; var y_axis = obj.y1; var y2_axis = obj.y2; var thumb_width = obj.width; var thumb_height = obj.height; if(thumb_width > 0) { if(confirm("Do you want to save image..!")) { $.ajax({ type:"GET", url:"ajax_image.php?t=ajax&img="+$("#image_name").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis, cache:false, success:function(rsponse) { $("#cropimage").hide(); $("#thumbs").html(""); $("#thumbs").html("<img src='uploads/"+rsponse+"' />"); } }); } } else alert("Please select portion..!"); } $(document).ready(function () { $('img#photo').imgAreaSelect({ aspectRatio: '1:1', onSelectEnd: getSizes }); }); </script> <?php $valid_formats = array("jpg", "png", "gif", "bmp"); if(isset($_POST['submit'])) { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if(strlen($name)) { list($txt, $ext) = explode(".", $name); if(in_array($ext,$valid_formats) && $size<(1024*1024)) { $actual_image_name = time().substr($txt, 5).".".$ext; $tmp = $_FILES['photoimg']['tmp_name']; if(move_uploaded_file($tmp, $path.$actual_image_name)) { mysql_query("UPDATE user SET profile_image='$actual_image_name' WHERE id='$username'"); $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >"; $profile_image="<img src='uploads/".$new_name."' style='max-width:500px' >"; } else echo "failed"; } else echo "Invalid file formats..!"; } else echo "Please select image..!"; } ?> <body> <div style="margin:0 auto; width:600px"> <?php echo $image; ?> <div style="padding:5px; width:600px"> <?php echo $profile_image; ?> </div> <div style="width:600px"> <form id="cropimage" method="post" enctype="multipart/form-data"> Upload your image <input type="file" name="photoimg" id="photoimg" /> <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" /> <input type="submit" name="submit" value="Submit" /> </form> </div> </div> </body> </html> ajax_image.php PHP Code: <?php define('INCLUDE_CHECK',true); require 'connect.php'; session_start(); $username = $_SESSION['user']; $upload = $_POST['upload']; $t_width = 100; // Maximum thumbnail width $t_height = 100; // Maximum thumbnail height $new_name = "small".$username.".jpg"; // Thumbnail image name $path = "uploads/"; if(isset($_GET['t']) and $_GET['t'] == "ajax") { extract($_GET); $ratio = ($t_width/$w); $nw = ceil($w * $ratio); $nh = ceil($h * $ratio); $nimg = imagecreatetruecolor($nw,$nh); $im_src = imagecreatefromjpeg($path.$img); imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h); imagejpeg($nimg,$path.$new_name,90); mysql_query("UPDATE user SET profile_image_small='$new_name' WHERE username='$username'"); echo $new_name."?".time(); exit; } ?> And I also need a live preview of cropping. So when the user is selecting what area of the Large image they want as there final thumb image, they can see the thumb change to that selection at the same time. The thumb is below the uploaded image, and without refreshing, which I cannot yet do because of the form resubmit, you can't see the final image until you go back to your profile. If I didn't make the above clear enough, please tell me. Thanks for any help and suggestions. I need help adding an auto scrolling feature (such as this http://www.brownielocks.com/autoscroll1.html) to an object on my website (see www.mymcgillmisa.com) I've tried (with no results) to get it to scroll, but maybe some experienced coders can help Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title></title></head><body><div style="width:320px; height:360px; overflow:auto;"> <p style="font: 13pt/20pt Garamond, Georgia, serif;color:#191919;"> <b> NEWS AND ANNOUNCEMENTS</b> </p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> <b>WELCOME BACK </b></p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> MISA has big plans for you this year, so stay tuned and check back here often. We plan on keeping you as up to date as possible with events relevant to you this year.</p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> <b>MISA Rep Selection 09</b></p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> <b>3</b> representatives will be chosen by the executive council for each year (U1, U2, & U3) , if you are interested in applying please check your McGill e-mail or <a href="http://www.sendspace.com/file/60yyn4">click here</a> for information.</p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> <b>Intramural Sports Teams</b></p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> The possible teams a Basketball, Ball Hockey, Dodgeball, Flag Football, Ice Hockey, Outdoor Soccer, Ultimate, & Volleyball. Teams will be formed based on the number of people interested. Please send an email from your McGill email to <a href="mailto:mimmsports@gmail.com">mimmsports@gmail.com</a> with a subject header of the sport (s) you wish to play. All requests must be sent in by Friday September 11th to be considered.</p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> <b>ROYAL FLUSH:</b></p> <p style="color:#191919; font-style:normal; font-variant:normal; line-height:20pt; font-size:13pt; font-family:Garamond, Georgia, serif"> Casino night fundraiser for the Crohn's and Colitis Foundation of Canada at Suco on St-Laurent on <b>Sept 11 @ 9PM </b> feat. DJ Alexei Sopin, Burlesque and Sexy Bollywood dancers, poker, blackjack, roulette, and prizes! Cocktail Dress Code. <a href="http://www.royalflush.yolasite.com">www.royalflush.yolasite.com</a> (20$)</p> </div></body></html> Any help would be appreciated thanks Take a look at this guys excellent site. http://sursly.com/ Does anyone know of the coding he used to get his pages to load like they do (auto scrolling right) I would like to do this with a site I'm building but vertical. I was hoping someone may know of a tutorial or could help me out here on the forums. Thanks. 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. 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>
Hey 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>
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")
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] 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? 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.... |
|||||||