Advice needed for this situation!!!

coppilot · #1 07-22-2005, 08:51 AM

On my website www.taylorssports.com I have lots of products that I sell. What I want to do is create some type of pop-up window that would show the ingredients of the product without having to create a whole new web page, because I have a lot of products there now and more coming. Is there anyway to do this? It would be just a small window with information.

Also, if anyone wants to give me any suggestions or pointers about the site please feel free to do so. I know that the site is sort of bland, but I don’t have a lot of experience other than HTML.

**the_pm** · #2 07-22-2005, 09:08 AM

Maybe this will get you started in the right direction

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script type="text/javascript">
	function toggle(pop) {
		if (document.getElementById(pop).style.visibility == "visible") {
			document.getElementById(pop).style.visibility = "hidden"
		}
		else {
		document.getElementById(pop).style.visibility = "visible"
		}
	}
	</script>
	<style type="text/css">
	#ad1, #ad2, #ad3 { background:#FAA ; border:2px solid #000 ; color:#000 ; font-family:sans-serif ; padding:100px 5px ; position:absolute ; top:20px ; left:20px ; width:300px ; visibility:hidden ; z-index:1 }
	</style>
	
</head>

<body>

<div id="ad1"><p align="center"><strong>#1</strong> Hello. I am a popup.<br>I want to be your friend.<br><br><a href="#" onclick="toggle('ad1')">Close Me</a></p></div>
<div id="ad2"><p align="center"><strong>#2</strong> Hello. I am a popup.<br>I want to be famous.<br><br><a href="#" onclick="toggle('ad2')">Close Me</a></p></div>
<div id="ad3"><p align="center"><strong>#3</strong> Hello. I am a popup.<br>I want to be left alone.<br><br><a href="#"  onclick="toggle('ad3')">Close Me</a></p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra. <a href="#" onclick="toggle('ad1')">More info</a></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra.  <a href="#" onclick="toggle('ad2')">More info</a></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra.  <a href="#" onclick="toggle('ad3')">More info</a></p>

</body>
</html>

Save that code as an .html document, and you'll see how it works. HTH!

coppilot · #3 07-22-2005, 09:25 AM

That's pretty cool. Thanks!

**the_pm** · #4 07-22-2005, 09:43 AM

You're welcome

Slightly OT, this same type of script is the foundation for very efficient DHTML menu coding too. Feel free to find interesting ways to convert it

coppilot · #5 07-22-2005, 01:43 PM

the_pm, can you check this out? go to my site www.taylorssports.com and click on my More Info link under the golf gloves. Is there any reason why it scrolls the page back up to the top rather than staying where it is? Thanks

TheBullet · #6 07-22-2005, 01:46 PM

Its because you have this:

top:20px ; left:20px ;

It is going to place the window 20px from the top and 20px from the left

coppilot · #7 07-22-2005, 01:50 PM

thank you!!

TheBullet · #8 07-22-2005, 01:52 PM

No problem. I am trying to find a script that I know I have in my resources here. It will just pop out on the location of the pointer. I am pulling a blank at the moment, but will let you know if I find it. Last time I did something like this was so long ago...

coppilot · #9 07-22-2005, 01:53 PM

is there anyway to make it popup with scrolling the page?

**the_pm** · #10 07-22-2005, 02:47 PM

You can pop it up using relative positioning, making it relative to the link being clicked. I've not tried this myself, but I don't see how it would be too difficult to do.

DefiantPc · #11 07-22-2005, 07:38 PM

Here are a couple of alternatives as well...

Click for the following examples and code...

traditional Centered pop:

this will open a sized centered window, you will be required to make a target page for each link:

Centered pop with iframe:

this will open a sized centered window with a inline frame, you will be required to make a target page for each link.

Useful for large documents
that may not fit in target.

Change image pop:

Allows you to load a differnet image into the the same target window.

Great for product close ups or
galleries.

coppilot · #12 07-23-2005, 06:45 AM

Thanks to everyone.

Advice needed for this situation!!!

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech