I could use some advice

@RGLFeb 15.2006

Hello all,

I’m new here and to the world of Web page developement. I have a degree in electronics and recently, 5 weeks ago, went back to college. I’m taking accelerated courses and as such am pressed for time. I have 7 weeks to learn it all.

I was doing real good until Javascript. Now I’m just lost.

What I’m asking for is help to produce a popup alert window on one of my pages. The page cotains photos of my family, it’s part of the course requirement to produce a web site about yourself.

What I need is a script that will, upon accessing that page in my site, pop up and ask “Are you sure you want to see my family” by typing yes you will be able to see the photos on the page. If the typed answere is NO then a second popup will come up and say something like “Aw why not, come on say yes please” then the yes input will allow the photos to be seen.

Can or will anyone help me with this? As I said I’m new to this and have little time to get it right and our class book is very vauge.

Thank you

to post a comment

JavaScript

9 Comments(s) _↴

@TheBearMayFeb 15.2006 — #For starters:

<i>
 </i>...
 var yesNo = prompt("Are you sure you want to see my family");
 if (yesNo.toUpperCase() == "NO") {
 yesNo = prompt("Aw why not, come on say yes please");
 ....

@WebnerdFeb 15.2006 — #This should get you what you want:

<i>
 </i>
 &lt;script type="text/javascript"&gt;
 
 window.onload=seePictures;
 
 
 function seePictures(){
 
 <i>    </i> var seeThem=prompt("Do you want to see my family?","");
 
 <i>    </i>if(!seeThem.match(/^y/i)){
 
 <i>    </i>   var seeAgain=prompt("Awww c'mon! Say yes please!","");
 
 <i>    </i>   while(!seeAgain.match(/^y/i)){
 
 <i>    </i>     seeAgain=prompt("Awww c'mon! Say yes please!","");
 
 <i>    </i>   }
 <i>    </i>}
 }
 
 &lt;/script&gt;

@RGLauthorFeb 15.2006 — #Thanks,

I'll try them both and let you know how they turned out.

@magar136Feb 15.2006 — #Here is another way to do it. Just call the function with the body onLoad().

[code=html]function ask()
 {
 var ok = false;
 
  do
  {
   var ans = prompt( 'Are you sure you want to see my family' );
 
   if( ans && ( ans.toLowerCase() == 'yes' ) )
   ok = true;
   else 
   alert( "Aw why not, come on say yes please"); 
 
  } while( !ok );
 }[/code]

Maxime Garceau

@RGLauthorFeb 15.2006 — #If I could please, may I ask, how do I insert it into the page so that my photos, which are in layers, only display when they say "yes".

As it is now, thanks to you all, the alert works as you've shown me but the photos display on the page as well. Can that be changed?

Since my sites not hosted I don't know how, unless I copy and paste my code, to show it to you.

@magar136Feb 15.2006 — #try it like this:

[code=html]<html>
 <head>
 <!-- Script containing the ask function -->
 <script type="text/javascript" src="popup.js"></script>
 <script type="text/javascript">
 ask();
 </script>
 
 </head>
 <body></body>
 </html>[/code]

This way the photos souldn't be displayed until the answer is yes

Maxime Garceau

@RGLauthorFeb 16.2006 — #For some reason I can't get it to work. So maybe this will help, this is the code for my page, keep in mind this is my first site so all comments and suggestions are welcome:

Also, just a reminder, I only want layers 11 thru 14 to show up when the respons is yes. Thanks again.

<html>



<title>Family</title>

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

<body>

<h1 align= center><b>"It's all about the Wife and Kid"</b></h1>

<p></p>

<h3 align="center">"Song title: Love of a Lifetime; Artist: Firehouse"</h3>

<embed src="love.wma" autostart="true" hidden="true" loop="false"

height="45" width="170" volume="100"></embed>



<div id="layer1" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 200px">

<a href="Home.html"><img src="Home.gif" alt="Home" border="0"></a>

</div>



<div id="layer2" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 245px">

<a href="work.html"><img src="work.gif" alt="Work" border="0"></a>

</div>



<div id="layer3" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 290px">

<a href="resume.html"><img src="resume.gif" alt="Resume" border="0"></a>

</div>



<div id="layer4" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 335px">

<a href="family.html"><img src="family.gif" alt="Family" border="0"></a>

</div>



<div id="layer5" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 380px">

<a href="wood.html"><img src="wood.gif" alt="Wood Working" border="0"></a>

</div>



<div id="layer6" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 425px">

<a href="art.html"><img src="art.gif" alt="My Art Work" border="0"></a>

</div>



<div id="layer7" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 470px">

<a href="sports.html"><img src="sports.gif" alt="Sports" border="0"></a>

</div>



<div id="layer8" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 515px">

<a href="my sites.html"><img src="my sites.gif" alt="My Sites" border="0"></a>

</div>



<div id="layer9" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 560px">

<a href="community.html"><img src="community.gif" alt="Community Service" border="0"></a>

</div>



<div id="layer10" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 605px">

<a href="contact.html"><img src="contact.gif" alt="Contact Me" border="0"></a>

</div>



<div id="layer11" style="position: absolute; left: 325px; top: 150px">

<img src="Wed.gif" alt="Wedding" border="0"></p>

<p align= center> I met my wife, Michelle, in 1993 and we were married in June 1995.</p>

</div>



<div id="layer12" style="position: absolute; left: 455px; top: 850px">

<img src="Nat.gif" alt="Daughter" border="0">

</div>



<div id="layer13" style="position: absolute; left: 410px; top: 1320px">

<p align= center> In December of 1997, our daughter, Natalie Noelle was born.</p>

</div>



<div id="layer14" style="position: absolute; left: 325px; top: 1415px">

<img src="Family1a.gif" alt="Family" border="0"></p>

<p align= center> Well, here we are. A motley looking crew, but I love it.</p>

<p></p>

<br />

</div>

</body>

</html>

@TheBearMayFeb 16.2006 — #Easiest way may be to place 11-14 inside another div:

<div id="theRest" style="display:none">

11-14 divs

</div>

and then add this into the JS where you want to show them:

document.getElementById("theRest").style.display="block";

@magar136Feb 16.2006 — #This is the way you sould write it.

My comments are the line beginning by : //

Just take them out of your final HTML code if you want it to work.

[code=html]<html>
 
 // In your version you forgot to include the HEAD tag
 <head>
 <!--Family-->
 <title>Family</title>
 
 <link rel="stylesheet" type="text/css" href="Main.css" />
 
 <script type="text/javascript">
 
 // When you use JavaScript in the head tag, the body won't show until the script ends. 
 // According to what you want to do, it is the place where you must do the work
 
 // This is the function that do all the work
 function ask()
 {
 // Control variable
 var ok = false;
 
  // Iterate until you got the answer you want 
  do
 {
 // Prompt the user
 var ans = prompt( 'Are you sure you want to see my family' );
 
   // If the answer exist and it is equals to yes
  if( ans && ( ans.toLowerCase() == 'yes' ) )
   ok = true;
   // The answer is wrong
  else 
   alert( "Aw why not, come on say yes please"); 
 
 } while( !ok );
 
 // With the suggestion of TheBearMay
 document.getElementById("theRest").style.display="block";
 }
 
 // Call the ask() function
 ask();
 </script>
 
 </head>
 <body>
 
 <h1 align= center><b>"It's all about the Wife and Kid"</b></h1>
 <p></p>
 <h3 align="center">"Song title: Love of a Lifetime; Artist: Firehouse"</h3>
 
 <embed src="love.wma" autostart="true" hidden="true" loop="false"
 height="45" width="170" volume="100"></embed>
 
 // For the rest, I have only one suggestion, since you're using the same style attributes for 
 // layer 1 to 10, you could include the style definition in a CSS file and just put the ones 
 // that are different ( top for example )
 
 <!--Layer 1-->
 <div id="layer1" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 200px">
 <a href="Home.html"><img src="Home.gif" alt="Home" border="0"></a>
 </div>
 
 <!--Layer 2-->
 <div id="layer2" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 245px">
 <a href="work.html"><img src="work.gif" alt="Work" border="0"></a>
 </div>
 
 <!--Layer 3-->
 <div id="layer3" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 290px">
 <a href="resume.html"><img src="resume.gif" alt="Resume" border="0"></a>
 </div>
 
 <!--Layer 4-->
 <div id="layer4" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 335px">
 <a href="family.html"><img src="family.gif" alt="Family" border="0"></a>
 </div>
 
 <!--Layer 5-->
 <div id="layer5" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 380px">
 <a href="wood.html"><img src="wood.gif" alt="Wood Working" border="0"></a>
 </div>
 
 <!--Layer 6-->
 <div id="layer6" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 425px">
 <a href="art.html"><img src="art.gif" alt="My Art Work" border="0"></a>
 </div>
 
 <!--Layer 7-->
 <div id="layer7" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 470px">
 <a href="sports.html"><img src="sports.gif" alt="Sports" border="0"></a>
 </div>
 
 <!--Layer 8-->
 <div id="layer8" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 515px">
 <a href="my sites.html"><img src="my sites.gif" alt="My Sites" border="0"></a>
 </div>
 
 <!--Layer 9-->
 <div id="layer9" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 560px">
 <a href="community.html"><img src="community.gif" alt="Community Service" border="0"></a>
 </div>
 
 <!--Layer 10-->
 <div id="layer10" style="position: absolute; width: 162px; height: 43px; left: 25px; top: 605px">
 <a href="contact.html"><img src="contact.gif" alt="Contact Me" border="0"></a>
 </div>
 
 // With the suggestion of TheBearMay
 <div id="theRest" style="display:none">
 
 <!--Layer 11-->
 <div id="layer11" style="position: absolute; left: 325px; top: 150px">
 <img src="Wed.gif" alt="Wedding" border="0"></p>
 <p align= center> I met my wife, Michelle, in 1993 and we were married in June 1995.</p>
 </div>
 
 <!--Layer 12-->
 <div id="layer12" style="position: absolute; left: 455px; top: 850px">
 <img src="Nat.gif" alt="Daughter" border="0">
 </div>
 
 <!--Layer 13-->
 <div id="layer13" style="position: absolute; left: 410px; top: 1320px">
 <p align= center> In December of 1997, our daughter, Natalie Noelle was born.</p>
 </div>
 
 <!--Layer 14-->
 <div id="layer14" style="position: absolute; left: 325px; top: 1415px">
 <img src="Family1a.gif" alt="Family" border="0"></p>
 <p align= center> Well, here we are. A motley looking crew, but I love it.</p>
 <p></p>
 <br />
 </div>
 
 </div>
 
 </body>
 </html>[/code]

If you want, you can remove theses lines from the script part:

- function ask()

- {} ( brackets opening and ending the function definition )

- ask();

I hope this will help you...

Maxime Garceau

Also in #JavaScript _↴

Hiding elements in response text.Random shooting patern Is it possible to detect a USB flash drive being inserted by a client using javascrip

Success!

Help @RGL spread the word by sharing this article on Twitter...

Tweet This

I could use some advice

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

I could use some advice

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴