How do I include pop out windows on my web page?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
The cricket club website I have set up has a 'Squad page' with pen pics of each of the players. I would very much like to to have an option whereby you can click on each of the pictures and a small pop out window appears with player info and data about that particular player.

Anyone know if this can be done?

Thanks

Lee

http://beehivestingers.yolasite.com/s...
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Beehivestinger,

Littleus is correct... If you use the code that i emailed to you but instead of copying it straight into your site copy it first into Notepad (If your using windows you will have it on your computer) then from notepad copy it into your site builder.

Just the top script... the page code is fine.

Let me know when you have done that.

Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Hey Lee,

Have tried copying the code into notepad then from there into my site. but still no luck.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Beehivestinger,

Ok - we know the bottom code is working fine so lets just leave that.

If you go to this page http://www.dynamicdrive.com/dynamicin... and select all the first peice of code and copy it into your top html widget - (delete all the old attempts)

Tell me when you have done that.... i'll show you what needs editing
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Thats all done Lee.

Thanks
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Ok good.

Read down the code from the top... you will see this:

/////////////////////// CUSTOMIZE HERE ////////////////////

First:
Change this value:
var tipWidth= 160;

so it reads
var tipWidth= 300;

Second:
Find this line of text (a little further down the script):

messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");

edit it so it looks like this (becareful not to delete any ' or , )

messages[0] = new Array('resources/Gavin Morgan 2.jpg','TEXT ABOUT GAVIN HERE',"#FFFFFF");

let me know when you have done that - it should then be working.

Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Lee,

So far so good. The text works fine in the pop up window but still no image. Getting there though... LOL

http://beehivestingers.yolasite.com/s...
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Got it! Its working Lee! I actually typed in .jpeg instead of .jpg!!!!

Superb, thank you very much for your help and patience here.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Great job you two! Glad to hear it's working!
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Wouldn't have got anywhere without Lee's help! But it goes to show that even for someone like me who has absolutely no idea of html code with a little support and help things can be achieved!*

*Permission to use this at your next Yola Conference presentation! LOL
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Not jumping the gun now but to to the same to the other lads on the page do I alter the code in messages [1] and [2]:? I'm probably wrong but it's worth asking!

messages[0] = new Array('resources/Gavin Morgan 2.jpg','Gavin Morgan Captain of the Stingers. Right Hand Bat, Medium pace bowler',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Well done,

Correct you change [1] and [2] but you also have to change the code on the page...

there are 3 things on the page code you need to change
this:
onmouseover="doTooltip(event,0)" you need it to read onmouseover="doTooltip(event,1)"

this:
img src="resources/Gavin Morgan.jpg" - it needs to be the small image of the current player

and this
alt="Gavin Morgan" -- thats just the alternative text for search engines and if the browser is unable to display the image.

-----------

If you want to add more than 3 you just carry on messages[3] etc.

What i woulod suggest is just deleting the mesages [1] and [2] lines and copying the messages [0] line (changing the number obviously) - this way you will keep all the background colour changes etc.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Success! http://beehivestingers.yolasite.com/s... Gavin and Lee have been done and now the process of completing the rest of the squad and tidying up the page will soon enough take shape.

One last question Lee, currently the details of each player are on different lines: Name, nickname, etc... Is it possible to do this in the code so when I write the information in about each player it appears like this instead of a small paragraph?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
First thing,

The other images you already have on the page? how did you align them?
I presume you were using a text widget or image widget and you added margins?

If you like you can add the page code in a text widget, this will give you the chance to move it around with its margins. (to add code in a text widget you clcik the little html button up near the link button)

Ok and to answer your question above,

to be honest i dont know...
i guess you could add a <br> at the point you want the line to break.
for example
Gavin Morgan <br> Captain <br> right hand <br>

But i have never tested this - i guess you could try and if it didnt work you could just delete it - no harm done.

Let me know if you need anything else - im signing out now im tired, long day...

Lee.

-->
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Reply Likes
Thanks for your help. the
worked too.

Cheers