JavaScript - Spry Collapsible Panel To Trigger Page Simultaneous Page Down Function

I have a basic function:

function Notice() {
var selectedCountry = CheckoutForm.elements["shipping-country"].selectedIndex;
if (selectedCountry != 'United States') {
alert('You are outside the US');
}
}

I have a select control with id "shipping-country":
<select name="shippingCountry" id="shipping-country" >
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
...
</select>

How can I trigger my function on selection change if I don't have access to html code or the server side code that generated the select control?
typically I would just add onchange="Notice();" , but this option is out of the out of the question for the above reason. Any help would be appreciated.

how would you make a function trigger a other function?

Evening folks

I'm -very- green when it comes to Javascript, but I'm working my way up.

The problem right now I'm running in to now is when trying to implement a website function that allows two buttons (previous, and next) to do their respective tasks.

I can get the script to go forward and back, however when I jump to another page in the frame (this is all through iframes), when clicking either button, it will take me to the last page I had stopped on. A little hard to explain, but maybe seeing the code will give you a better idea.

<script type="text/javascript">
var pNum=0;
var maxPage=10;
function next()
{
pNum++;
if (pNum > maxPage) pNum=10;
document.getElementById("frame").src="page"+pNum+".htm";
}
function prev()
{
pNum--;
if (pNum < 0) pNum=0;
document.getElementById("frame").src="page"+pNum+".htm";
}
</script>


It's nothing fancy, but it's apparently keeping the last page it was on in memory instead of resetting itself, so when I go back to the start page it starts on page 0 and goes to page 10; right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there.


Any help or advice would be appreciated.

HI
I have tow page and the first page open a new window with javascript(by using window.open).Now I want to call a javascript function that is in the first page from the second page and for that i use parent.function_name but it doesn't work.How can do so?

thanks

<frameset rows="30%,70%>
<frame src="page1.html" name="name1" frameborder="0"></frame>
<frame src="page2.html" name="name2" frameborder="0"></frame>
</frameset>

in above code I used page1.html & page2.html as frame. Both include same javascript file having two function name fun1() & fun2().

as both are separate frame both have there own copy function

page1.html
fun1()
fun2()
page2.html
fun1()
fun2()

I call fun2() from page2.html and inside that function I want to call page1.html's fun1().

fun1() in page1.html and fun1() in page2.html both return different result because of there global variables.

Is there any way to call fun1()-page1.html from the fun2()-page2.html?

Hi guys,
i have a code where if you press on a word some words disappear and new ones appear and then when you press on the word again everything goes back to normal. I am trying to get it so that after the first click if i press back it should go back to normal instead of having to press the word again but all i am getting at the moment when i press back is the the page with the changed text.

I've searched everywhere for help on how to do this...

I have a website for tanning salon services.
Salon A's page has links for 4 possible equipment choices -[I] (diamond, platinum, gold, bronze levels) on the Sunbeds page.

Sunbeds page has 2 iFrames, top and bottom, that are changed by 4 functions - changediamond(), changebronze(), etc. based on the selection.

I need to be able to click a link on the Salon page that will take me to the corresponding function on the Sunbeds page...

Here's what I have so far:

Salon A page
Code:

<a href="sunbeds.htm?javascript:changediamond()"><img src="images/nr_diam_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
    (thru) 
     <a href="sunbeds.htm?javascript:changebronze()"><img src="images/nr_brnz_sm2.jpg" alt="Bronze Level Sunbeds" /></a>

Sunbeds page
Code:

<SCRIPT language="JavaScript">
function changediamond()
{
parent.FRAME1.location="sb_top_ct1.htm";
parent.FRAME2.location="sb_bot_ct1.htm";
}
      (thru) 
function changebronze()
{
parent.FRAME1.location="sb_top_ct4.htm";
parent.FRAME2.location="sb_bot_ct4.htm";
}
</script>
.
..
...
..
.
<a href="javascript:changediamond()"><img src="images/diamond_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
    (thru) 
     <a href="javascript:changebronze()"><img src="images/bronze_sm2.jpg" alt="Bronze Level Sunbeds" /></a>

The links take me to the correct page but not the function. Once I'm there I can select the functions and the iFrame change works great. I'm just at a loss for passing along the data string ie sunbeds.htm?javascript"changediamond()

I would certainly appreciate any help and advice you could share. I'm sure it's pretty simple but for a JS newbie, it's frustrating!

Hi,
The point is to have a PHP code on the same page as a javascript calling the PHP function. I am able to make this work when the PHP code is on an external file. But when all but XSL are on the same page, it won't do what it should.

How to make this work?
The PHP is correct as it is by its self. And so is the javascript as it is for calling other PHP code. The combination of these two in this case just won't work.









PHP and Javascript:
[CODE]
<html ><head><title>Untitled 1</title></head>

<body>
<?php
function dateToDayOfWeek($xmlDate, $useFormat = 'l')
{
$rd = 'Unknown';
if (count($xmlDate) == 1)
{
$element = $xmlDate[0];
if ($element instanceof DOMElement)
{
$rd = date($useFormat, strtotime($element->nodeValue));
}
}
return $rd;
}

function axasal(){
date_default_timezone_set('UTC');

$xslDoc = new DOMDocument();
$xslDoc->load("xslfile.xsl"); // Here comes the xsl file name.

$xmlDoc = new DOMDocument();
$xmlDoc->load("http://free.worldweatheronline.com/feed/weather.ashx?q=milan,italy&format=xml&num_of_days=5&key=af8b2fc417222733111712");

$proc = new XSLTProcessor();
$proc->registerPHPFunctions('dateToDayOfWeek');
$proc->importStylesheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
}
?>

<script type="text/javascript">
function call_php(){
document.getElementById("place").innerHTML="<?php echo axasal(); ?>";
}
</script>

<form name = "form">
<input type = "button" name = "aaa" id = "aaa" value = "Click me" onclick = "call_php()" />
</form>
<div id="place"></div>

</body></html>
[CODE]



XSL:
[CODE]
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlnshp="http://php.net/xsl">
<xsl:template match="data">
<html>
<head><title></title></head>
<body>
<table>
<tr>
<xsl:apply-templates select="./weather" />
</tr>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="weather">
<td style="width: 97px">
<p><xsl:value-of select="php:function('dateToDayOfWeek', date)" /></p>
<p><xsl:apply-templates select="./weatherIconUrl" /></p>
</td>
</xsl:template>

<xsl:template match="weatherIconUrl">
<img>
<xsl:attribute name="src">
<xsl:value-of select="." />
</xsl:attribute>
</img>
</xsl:template>

</xsl:stylesheet>
[CODE]



The smiley face on the second line of the last code is ':' and 'p'.

I'm new to javascript and have come across what I'm sure its a really easy problem to solve. I want a page with a hyperlink that passes a variable to another 'pop-up' page (in this case a name, its just an example) and new pop-up page prints a message followed by the variable thats passed.

Here is the code as it is right now

Code:

<html>
<head>

<script language="javascript" type="text/javascript">

function popitup(a) 
{
    var reply = 'a';
    newwindow=window.open('','name','height=200,width=150');
    var tmp = newwindow.document;
    tmp.write('<html><head><title>popup</title>');
    tmp.write('</head><body><p>"Hello there" + reply </p>');
    tmp.write('<p><a href="javascript:self.close()">close</a> the popup.</p>');
    tmp.write('</body></html>');
    tmp.close();
}

</script>
</head>
<body>

<a href="testpopup.html" onclick="popitup('Toby')" 
	>Link to popup</a>


</body>
</html>

In short, I just want the pop-up page to print 'Hello there Toby' or whatever name I choose to pass across. Any help much appreciated!! The 'testpopup.html' url is just the initial webpage.

hi,

I have a google map which shows a car moving along a line that it reads from xml. This is the code that moves the map and the car image:

Code:

     // Returns the bearing in radians between two points.
     function bearing( from, to ) {
       // See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
       // Convert to radians.
       var lat1 = from.latRadians();
       var lon1 = from.lngRadians();
       var lat2 = to.latRadians();
       var lon2 = to.lngRadians();

       // Compute the angle.
       var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
       if ( angle < 0.0 )
	angle  += Math.PI * 2.0;
        			if (angle == 0) {crash;}
       return angle;
     }

      function plotcar() {
        var cosa = Math.cos(angle);
        var sina = Math.sin(angle);
        canvas.clearRect(0,0,32,32);
        canvas.save();
        canvas.rotate(angle);
        canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
        canvas.drawImage(img,-16,-16);
        canvas.restore();
      }


//=============== animation functions ======================
function animate(d) {
        if (d>eol) {
          return;
        }
        var p = poly.GetPointAtDistance(d);
		if (k++>=180/step) {
          map.panTo(p);
          k=0;
        }
        map.panTo(p);
        marker.setPoint(p);
		if (supportsCanvas) {
          if (poly.GetIndexAtDistance(d)>lastVertex) {
            lastVertex = poly.GetIndexAtDistance(d);
            if (lastVertex == poly.getVertexCount()) {
              lastVertex -= 1;
            }
            while (poly.getVertex(lastVertex-2).equals(poly.getVertex(lastVertex-1))) {
              lastVertex-=1;
            }
            angle = bearing(poly.getVertex(lastVertex-2),poly.getVertex(lastVertex-1) );
            plotcar();
          }
        }
        setTimeout("animate("+(d+step)+")", tick);
      }

function startAnimation() {
        eol=poly.Distance();
        map.setCenter(poly.getVertex(0),16);
        map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
        map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
		if (supportsCanvas) {
          marker = new ELabel(poly.getVertex(0), '<canvas id="carcanvas" width="32" height="32"><\/canvas>',null,new GSize(-16,16));
	        map.addOverlay(marker);
          canvas = document.getElementById("carcanvas").getContext('2d');
          var p0 = poly.getVertex(0);
	        var p1 = poly.getVertex(1);
          angle = bearing(p1,p0);
          plotcar();
        } else {
          marker = new GMarker(poly.getVertex(0),{icon:car});
          map.addOverlay(marker);
        }
        poly2 = new GPolyline([poly.getVertex(0), poly.getVertex(1), poly.getVertex(2)], 0,0);
//        map.addOverlay(poly2);
        setTimeout("animate(0)",2000);  // Allow time for the initial map display
}

It works fine as you can see here

but the problem is that if the user clicks the button again without reloading the page, the map moves but the car remains at its last point.

From what I can figure out, this means that the startAnimation() function has restarted but the animate(d) function has not restarted.

but trying to call the animate(d) function from the button, where the startAnimation() gets called, he

Code:

<input type="button" onclick="startAnimation();return false;" value="show bus route 1">

results in an error that d is not defined.

is there some way of resetting the animate(d) function when the startAnimation() function gets called, so everything goes back to the start? Or is there some other way of "refreshing" everything without reloading the page?

thanks in advance.

this is my html page..

Code:

<html>
<head>
<script type="text/javascript" language="JavaScript">
function general_formats()
{
window.open('http://www.test.com/general_formats.php');
}
</script>
</head>
<body>
<a href="general_formats.php"><onclick="general_formats(); return false">General Formats</a>
</body>
</html>

When i click ' general Formats ' , a window is opened , i dont need that .
What i need is , when i click the link , it should direct to general_fomats.php..

please help me to solve it . .any help will be appreciated .

-Removed due to solution found-

Hello, I have not been able to do any JS because my damn books have been on order for the last 3 weeks but I'm wondering if anybody could help me put a script into my webpage so that when anybody visits the 'contact us' page they can leave comments.

Here's my code:

HTML:

Code:

<!DOCTYPE html "PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>

<link rel="stylesheet" type="text/css" href="css/contactus.css" />

</head>

<body bgcolor="grey">

<img src="gradientheader.jpg" id="header" width="930px;" height="120px;" align="center" border="1" />

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="headerwithbuttons.html">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">Games</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Music</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Contact Us</a></li>
<li><a href="http://www.codingforums.com/">Links</a></li>
</ul>
</div>
</br>

<div>
<img src="contactus.jpg" id="contactusright" alt="contact1" height="120px;" />
</div>

<div>
<img src="contactus.jpg" id="contactusleft" alt="contact2" height="120px;" />
</div>

<div class="infoarea1" height="300">
<img src="tel2.jpg" width="250" height="100px;" />
<p class="infoarea1">Please contact us on either our Fax line or Business line on:</p>
<br />
<p><i>Telephone: <b>012....</b></i>;</p>
<p><i>Fax: <b>012.....6</b></i></p>
</div>

<div class="infoarea2" height="300">
<img src="emailicon.jpg" width="250" height="100px;" />
<p class="infoarea2">Please contact us by e-mail to the following e-mail address:</p>
<br />
<p><i>E-Mail: <b>flipmode...........co.uk</b></i></p>
</div>

<div class="infoarea3" height="300">
<img src="postboxicon.jpg" width="250" height="100px;" />
<p class="infoarea3">Please contact us by post by sending all relevant post to:</p>
<br />
<p><i>..........</p>
<p>............</p>
<p>.......</p>
<p>.......</i></p>
</div>





</body>
</html>

CSS:

Code:

#header {border-style: solid; 
         border-width: 2px;
         border-color: black;
         }

.gradientbuttons {position:absolute; top:95px; left:149px; }

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 50px;
border: 1px solid #778;
color: white; 
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: red;
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); 
}

#contactusright {position: absolute; top:8px; left:895px;}
#contactusright {border: 2px solid #8dcb41;
                 width: 100px;} 

#contactusleft {position: absolute; top:8px; left:8px;}
#contactusleft {border: 2px solid #8dcb41;
                width: 100px;}

div.infoarea1 {float: left;}
div.infoarea1 {width: 250px;
               background-color: green;
               margin-top: 20px;}


p {padding: 1;
   margin: 5;} 
p {font-family: franklin gothic;
   color: black;
   }

div.infoarea2 {float: left;}
div.infoarea2 {width: 250px;
               background-color: red;
               margin-top: 20px;
               margin-left: 130px;}

div.infoarea3 {float: right;}
div.infoarea3 {width: 250px;
               background-color: blue;
               margin-top: 20px;
               margin-right: 0px;
               }

BTW - I know this doesn't validate but it's only a draft site until I get my books.

Thanks for any info!

Here's the page, I want the comment underneath all three div's.

This used to work and suddenly it does not work in IE.

Here's the function
Code:

function pdfWindow(loc)
{
  if(loc == "#RefQuide") {
     location.href = loc;
  } else {
     // The window attributes
     var window_attribs = "height=650,width=850,resizable=yes,scrollbars=yes";

     window.open(loc,"PDF",window_attribs);
  }
}

Here's part of the HTML
Code:

<form name="myForm">
<select name="hypercomList">
<option value="/CWRWeb/pdf/HypercomT4000.pdf">Hypercom T4000 </option>
<option value="/CWRWeb/pdf/HypercomT4100.pdf">Hypercom T4100 </option>					
</select>
<input type="button" value="Go!" onclick="pdfWindow(myForm.hypercomList.options[myForm.hypercomList.selectedIndex].value)">
				
</form>

Any ideas why it would open a blank page instead of the PDF? Works ok in FF.